{"id":6024,"date":"2026-04-23T19:55:16","date_gmt":"2026-04-23T16:55:16","guid":{"rendered":"https:\/\/digiverkosto.fi\/?p=6024"},"modified":"2026-05-01T13:12:20","modified_gmt":"2026-05-01T10:12:20","slug":"kemora","status":"publish","type":"post","link":"https:\/\/digiverkosto.fi\/en\/kemora\/","title":{"rendered":"kemora"},"content":{"rendered":"<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-f0623e59 wp-block-group-is-layout-constrained\">\n<section class=\"section case-intro\">\n    <div class=\"reveal\">\n        <h1 class=\"case-title\">Case Study: Kemora \u2013 Ratakokemus digiaikaan<\/h1>\n        \n        <div class=\"case-meta-grid\">\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Asiakas<\/span>\n                <span class=\"meta-value\">Kemoran moottorirata<\/span>\n            <\/div>\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Toteuttaja<\/span>\n                <span class=\"meta-value\">digiverkosto<\/span>\n            <\/div>\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Fokus<\/span>\n                <span class=\"meta-value\">R\u00e4\u00e4t\u00e4l\u00f6ity tekniikka &#038; Verkkokauppa<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <h2 class=\"content-heading\">Johdanto: Web 1.0 -aikakaudesta nykyaikaan<\/h2>\n            <p class=\"section-subtitle\" style=\"text-align: left; margin-left: 0;\">\n                Kemoran moottorirata on ikoninen kohde, mutta sen digitaalinen julkisivu oli j\u00e4\u00e4nyt ajastaan j\u00e4lkeen. Vanha sivusto ei palvellut modernia k\u00e4vij\u00e4\u00e4, ja suurin haaste oli l\u00f6yt\u00e4\u00e4 kalenteriratkaisu, joka olisi tyylik\u00e4s mutta yll\u00e4pit\u00e4j\u00e4lle kevyt. \n                <br><br>\n                Halusimme luoda kokonaisuuden, joka ei ainoastaan n\u00e4yt\u00e4 hyv\u00e4lt\u00e4, vaan automatisoi yritt\u00e4j\u00e4n arkea ja helpottaa harrastajien asiointia.\n            <\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-intro {\n        padding: 120px 5vw 60px;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .case-title {\n        font-size: clamp(40px, 6vw, 72px);\n        font-weight: 700;\n        text-align: center;\n        margin-bottom: 60px;\n        letter-spacing: -0.02em;\n        background: linear-gradient(180deg, #fff 0%, #86868b 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .case-meta-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n        max-width: 1100px;\n        margin: 0 auto 80px;\n        padding: 30px;\n        border-radius: 24px;\n        background: #161617;\n        border: 1px solid #2c2c2e;\n    }\n\n    .meta-item {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .meta-label {\n        color: #0071e3;\n        font-size: 12px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 600;\n    }\n\n    .meta-value {\n        font-size: 18px;\n        color: #fff;\n        font-weight: 500;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 30px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-meta-grid {\n            grid-template-columns: 1fr;\n            text-align: center;\n            gap: 30px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-visuals\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-20-at-18.56.12.png\" alt=\"Kemora Etusivu Hero\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <h2 class=\"content-heading\">Moderni ilme<\/h2>\n            <div class=\"case-text\">\n                <p>Uudella nettisivulla vallitsee tumma teema oransseilla yksityiskohdilla. T\u00e4m\u00e4 luo moottoriradalle sopivaa uskottavuutta ja helpottaa selaamista sill\u00e4 se on helpompi silmille.<\/p>\n                \n                <p>Hy\u00f6dynsimme drone-kuvauksia antaaksemme k\u00e4vij\u00e4lle v\u00e4litt\u00f6m\u00e4n k\u00e4sityksen radan mittakaavasta ja profiilista, asioita joita on mahdoton v\u00e4litt\u00e4\u00e4 pelkill\u00e4 maantasalta otetuilla kuvilla. Sivuston rakenne on suunniteltu palvelemaan niin uusia k\u00e4vij\u00f6it\u00e4 kuin radalla s\u00e4\u00e4nn\u00f6llisesti harjoittelevia kuljettajia.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-visuals {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .case-image-container {\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 32px;\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n        transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);\n    }\n\n    .case-image-container:hover .case-image {\n        transform: scale(1.02);\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n        font-weight: 600;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-image-container {\n            border-radius: 16px;\n        }\n        \n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-tech\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container tech-preview\">\n            <div class=\"browser-bar\">\n                <span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span>\n                <span class=\"bar-title\">Hallintapaneeli: Kalenterin muokkaus<\/span>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-19.00.50.png\" alt=\"Kalenterin Backend\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px;\">R\u00e4\u00e4t\u00e4l\u00f6idyt elementit<\/div>\n            <h2 class=\"content-heading\">Kalenteri<\/h2>\n            <div class=\"case-text\">\n                <p>Koska markkinoilla olevat valmiit kalenterilis\u00e4osat olivat liian kankeita ja t\u00e4ynn\u00e4 turhia kentti\u00e4, p\u00e4\u00e4timme rakentaa kalenterin itse. N\u00e4in asiakas sai t\u00e4yden hallinnan toiminnallisuuteen.<\/p>\n                \n                <p><strong>Backend-n\u00e4kym\u00e4 on riisuttu kaikesta turhasta<\/strong>, jolloin tapahtumien p\u00e4ivitt\u00e4minen on nopeaa ja vaivatonta. T\u00e4m\u00e4 on erinomainen esimerkki siit\u00e4, miten digiverkosto hy\u00f6dynt\u00e4\u00e4 WordPress-alustan potentiaalia rakentamalla itse sen, mit\u00e4 valmiit ratkaisut eiv\u00e4t tarjoa.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-tech {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    \/* Selainmaisun tyylittely backend-kuvalle *\/\n    .tech-preview {\n        background: #1c1c1e;\n        border: 1px solid #3a3a3c;\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 20px;\n        overflow: hidden;\n        box-shadow: 0 30px 60px rgba(0,0,0,0.5);\n    }\n\n    .browser-bar {\n        background: #2c2c2e;\n        padding: 12px 20px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        border-bottom: 1px solid #3a3a3c;\n    }\n\n    .dot {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #424245;\n    }\n\n    .bar-title {\n        margin-left: 10px;\n        font-size: 13px;\n        color: #86868b;\n        font-family: monospace;\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-ux\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container ux-preview\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-18.52.37.png\" alt=\"Kalenterin Frontend\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px; color: #32d74b; border-color: rgba(50, 215, 75, 0.3);\">K\u00e4ytt\u00e4j\u00e4kokemus<\/div>\n            <h2 class=\"content-heading\">K\u00e4ytt\u00e4j\u00e4kokemus keski\u00f6ss\u00e4<\/h2>\n            <div class=\"case-text\">\n                <p>K\u00e4vij\u00e4lle kalenteri n\u00e4kyy selke\u00e4n\u00e4 ja t\u00e4ysin mobiilioptimoituna. Tapahtumat aukeavat siistiin <strong>popup-ikkunaan<\/strong>, joka tarjoaa kaiken tarvittavan tiedon yhdell\u00e4 silm\u00e4yksell\u00e4 ilman turhaa sivujen latailua.<\/p>\n                \n                <p>Lis\u00e4ksi sivustolle integroitiin Foreca-s\u00e4\u00e4ennuste ja suora linkki l\u00e4hell\u00e4 sijaitsevaan kelikameraan. T\u00e4m\u00e4 ei ole vain visuaalinen lis\u00e4, vaan se <strong>v\u00e4hent\u00e4\u00e4 asiakaspalvelun kuormitusta<\/strong> poistamalla toistuvat kyselyt s\u00e4\u00e4olosuhteista. <br>Navigointi on pidetty suoraviivaisena, jotta kuljettaja saa tarvitsemansa tiedon sekunneissa \u2013 my\u00f6s mobiilissa radan varrella.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-ux {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .ux-preview {\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 32px;\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        background: #161617;\n        box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-ecommerce\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container shop-preview\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-18.52.58.png\" alt=\"Kemora Verkkokauppa\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px; color: #ff9f0a; border-color: rgba(255, 159, 10, 0.3); display: inline-block; padding: 4px 12px; border: 1px solid; border-radius: 100px; font-size: 14px;\">Kauppa<\/div>\n            <h2 class=\"content-heading\">Verkkokauppa: Harjoitusmaksun helpottaminen<\/h2>\n            <div class=\"case-text\">\n                <p>Yksi kriittisimmist\u00e4 parannuksista oli harjoitusmaksujen ja varikolla y\u00f6pymisen maksamisen digitalisointi. Integroitu verkkokauppa mahdollistaa maksujen suorittamisen suoraan etusivulta.<\/p>\n                \n                <p>T\u00e4m\u00e4 poistaa manuaalista laskutusty\u00f6t\u00e4 ja varmistaa, ett\u00e4 maksut hoituvat helposti jo ennen radalle saapumista. Se on suoraviivainen ratkaisu, joka palvelee sek\u00e4 yritt\u00e4j\u00e4\u00e4 ett\u00e4 ratak\u00e4ytt\u00e4j\u00e4\u00e4.<\/p>\n                <p>Kemoran moottoriradan verkkosivua tullaan jatkossa p\u00e4ivitt\u00e4m\u00e4\u00e4n entisest\u00e4\u00e4n uusilla ominaisuuksilla, jotka hy\u00f6dytt\u00e4v\u00e4t kaikkia radalla vierailevia osapuolia. Kiitos tiiviin yhteisty\u00f6n, p\u00e4\u00e4semme venytt\u00e4m\u00e4\u00e4n rajoja siit\u00e4, mit\u00e4 ominaisuuksia suomalaisella moottoriradalla tulee olla.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"case-summary-card\">\n            <h2 class=\"summary-heading\">Lopputulos<\/h2>\n            <p class=\"summary-text\">\n                Kemora-projekti osoittaa, miten perinteik\u00e4s toimija tuodaan nykyaikaan ja helpotetaan radan henkil\u00f6kunnan sek\u00e4 vuokraajan arkea. Sivusto ei ole vain \u201dk\u00e4yntikortti\u201d, vaan ty\u00f6kalu, joka automatisoi rahaliikennett\u00e4 ja helpottaa yll\u00e4pitoa. \n                <br><br>\n                <strong>Kun valmista ratkaisua ei l\u00f6ytynyt, helpointa on tehd\u00e4 se itse.<\/strong>\n            <\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-ecommerce {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n        overflow: hidden;\n    }\n\n    .shop-preview {\n        max-width: 1100px;\n        margin: 0 auto 40px;\n        border-radius: 24px; \/* Hieman pienempi py\u00f6ristys mobiiliin *\/\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .content-heading {\n        font-size: clamp(28px, 5vw, 42px);\n        line-height: 1.2;\n        margin-bottom: 24px;\n        font-weight: 700;\n    }\n\n    .case-text p {\n        font-size: 18px;\n        line-height: 1.6;\n        color: #86868b;\n        margin-bottom: 20px;\n    }\n\n    .case-summary-card {\n        max-width: 800px;\n        margin: 60px auto 0;\n        padding: 40px 24px; \/* Tiivistetty mobiiliin *\/\n        background: linear-gradient(145deg, #161617 0%, #070707 100%);\n        border-radius: 32px;\n        border: 1px solid #2c2c2e;\n        text-align: center;\n    }\n\n    .summary-heading {\n        font-size: clamp(32px, 6vw, 48px);\n        font-weight: 700;\n        margin-bottom: 20px;\n        background: linear-gradient(180deg, #fff 0%, #0071e3 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .summary-text {\n        color: #86868b;\n        font-size: clamp(16px, 4vw, 20px);\n        line-height: 1.5;\n    }\n\n    .summary-text strong {\n        color: #fff;\n    }\n\n    \/* Mobiilioptimointi *\/\n    @media (max-width: 768px) {\n        .case-ecommerce {\n            padding: 40px 20px;\n        }\n\n        .shop-preview {\n            border-radius: 16px;\n            margin-bottom: 30px;\n        }\n\n        .case-summary-card {\n            padding: 30px 20px;\n            margin-top: 40px;\n            border-radius: 24px;\n        }\n\n        .case-text p {\n            font-size: 17px; \/* Hieman pienempi teksti puhelimelle *\/\n        }\n    }\n<\/style>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Case Study: Kemora \u2013 Ratakokemus digiaikaan Asiakas Kemoran moottorirata Toteuttaja digiverkosto Fokus R\u00e4\u00e4t\u00e4l\u00f6ity tekniikka &#038; Verkkokauppa Johdanto: Web 1.0 -aikakaudesta [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[37],"tags":[],"class_list":["post-6024","post","type-post","status-publish","format-standard","hentry","category-referenssi"],"_links":{"self":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts\/6024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/comments?post=6024"}],"version-history":[{"count":0,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts\/6024\/revisions"}],"wp:attachment":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/media?parent=6024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/categories?post=6024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/tags?post=6024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}