Paintball Bled
Povsem nova, na videu temelječa marketinška stran za gozdno paintball prizorišče zunaj Bleda — Vite build, ročno izdelan 5-jezični i18n, samodejno predvajanje uvodnega videa in rezervacijski tok, prilagojen skupinam in ne posameznikom.
Pregled
To je sveža Vite prenova. Prejšnji paintball-bled.com je bil WordPress + Divi stran, ki je podjetju služila vrsto let — a je nabrala običajno težo WordPressa (počasna, težka CSS, okorna na mobilnem). Stranka je želela čist nov začetek: hitro, sodobno marketinško stran, ki bere v petih jezikih, teče na enem hero elementu z videom v ozadju in vsakega resnega obiskovalca še vedno usmeri v rezervacijski pogovor.
Vse skupaj sem zgradil kot statični Vite bundle — navaden HTML, vanilla JavaScript, brez Reacta, brez Vue, brez CMS-a. Vsak prevedljiv niz živi v JSON-u; vsak element v DOM-u, ki potrebuje prevod, nosi atribut data-i18n=“keypath”. Majhen runtime sproti zamenja besedilo, ko obiskovalec v glavi izbere SLO / ENG / DEU / ITA / ESP. Kartice paketov se izrisujejo dinamično, da ostanejo prvenstveno prevodljive in ne trdo kodirane po posameznem jeziku.
Staging stran živi na nova.paintball-bled.com. Ko stranka potrdi, se preseli na glavno domeno z neposrednim statičnim nalaganjem. Brez strežniškega runtime-a, brez posodobitev vtičnikov, ničesar za spremljati razen DNS-a in SSL certifikata.
Arhitektura
Branje diagrama: Štirje izvorni vhodi — HTML predloga, označena z atributi data-i18n, ena sama vanilla JS vstopna točka, pet locale JSON datotek in medijski viri — se zlivajo v en sam Vite build. Izhod je vsebinsko hashiran dist/ bundle, ki danes streže statično iz staging gostitelja in se bo prestavil na glavno domeno, ko stranka potrdi. Strežniškega runtime-a ni, CMS-a ni, backenda ni: vsak preklop jezika se zgodi v brskalniku obiskovalca proti že dostavljenemu JSON-u. Tipografija je Bebas Neue (display) + Plus Jakarta Sans (besedilo), preconnected na Google Fonts za sub-sekundni first paint.
Disciplina obsega je prava obrt pri majhni strani. Brez CMS, brez okvirja, brez rezervacijskega vtičnika — Vite bundle, pet jezikov, en obrazec, en CTA, dostavljeno v dneh. Stranka dobi hitrost; obiskovalec dobi delujoči funnel.
Šest stvari dostavljenih,
tri težke rešene.
Ključni prispevki
- Ročno izdelal celoten front-end — Vite kot bundler, vanilla HTML + JavaScript, brez bremena okvirjev. Končni bundle: ena JS datoteka + ena CSS datoteka, obe s cache-bustingom prek vsebinskega hash-a.
- Zgradil
data-i18n-voden prevajalski sistem od ničle — 44 elementov med izvajanjem zamenja besedilo v petih jezikih brez ponovnega nalaganja strani, vključno z dinamično izrisanimi karticami paketov. - Oblikoval na videu temelječi hero: utišani samodejno predvajan gozdni posnetek za Bebas Neue prikaznim naslovom (ADRENALINE FUN IN THE FOREST) in dvojnim CTA — Rezerviraj zdaj + Oglej si pakete.
- Izdelal hero značko z lokacijo (RADOVLJICA, SLOVENIJA), da prizorišče loči od blagovne znamke Paintball Bled, ki kljub imenu fizično leži v Radovljici.
- Spletal mobilno izkušnjo: celozaslonski meni, ki ga sproži hamburger, telefonski CTA pripet v glavi, prijazen za dotik, in razmiki sekcij, občutljivi za prelome, ki ohranjajo berljivost hero videa na manjših zaslonih.
- Postavil staging na
nova.paintball-bled.compred preklopom na glavno domeno, da stranka lahko predogleda in odobri pred produkcijskim prehodom.
Rešeni izzivi
- Večjezično turistično občinstvo — paintball prizorišče v Sloveniji privablja slovenske, angleške, nemške, italijanske in španske obiskovalce. Objava petih jezikov brez CMS-a je pomenila gradnjo lahkega i18n sloja, podprtega z JSON, ki med izvajanjem bere ključe atributov, namesto da bi vnaprej izrisal pet kopij strani.
- Hero video, ki ne ubije mobilne zmogljivosti —
<video autoplay muted loop playsinline>deluje povsod, vendar je bilo treba izvor (paintball3.mp4) kodirati dovolj majhno, da se začne predvajati prek 4G, preden uporabnik podrsa, s statičnim posterjem kot rezervo pri varčevanju s podatki. - Rezervacijski tok za skupine, ne posameznike — prizorišče prodaja rojstne dneve, fantovščine, dekliščine in team-buildinge. Besedilo, stopnje paketov in CTA so prilagojeni organizatorju skupine, ki opravi eno rezervacijo v imenu mnogih, ne samostojnemu obiskovalcu, ki izbira en termin.
Kaj poganja stvari.
Sorodni projekti
Pripravljeni popraviti, zgraditi
ali skalirati?
30 minut, z mano osebno. Preberem vaš sistem kot dnevniško datoteko in povem, kaj bi naredil najprej. Brez prezentacij, brez prodajnega lijaka.
— Davor Majc, ustanovitelj, Numen