Kako sam pokrenuo dubinsko čišćenje “GLANC AUTO & DOM” (I napravio munjevitu web stranicu s interaktivnim kalkulatorom za 0 eura troškova)

U svijetu malog poduzetništva, prvi dojam je sve. Kada pružaš vrhunske usluge dubinskog čišćenja automobila, tapeciranog namještaja i kućanstava kao što to radi Kristian Pleša u svom novom obrtu GLANC AUTO & DOM (čiju novu web stranicu možete posjetiti na glancautoidom.hr) u Vratišinca (Međimurje), tvoja web stranica mora zračiti istim onim nevjerojatnim sjajem koji ostavljaš na terenu.

Većina lokalnih uslužnih obrta zapne u istoj zamki. Ili nemaju nikakvu web prezentaciju pa ovise isključivo o preporukama i Facebook grupama, ili plate izradu teškog, sporog WordPress weba na lošem hostingu. Ti se webovi učitavaju po nekoliko sekundi na mobilnim mrežama Međimurja i Varaždinske županije, frustrirajući potencijalne klijente koji samo žele saznati cijenu i brzo poslati upit.

Kao inženjeru, to mi je bio idealan izazov. Htio sam Kristijanu napraviti premium, vizualno očaravajuću jednociklnu (single-page) web stranicu koja ostavlja posjetitelje bez daha, pruža trenutne odgovore o cijenama i omogućuje slanje strukturiranih upita u roku od nekoliko sekundi. Naravno, uz strogo poštovanje pravila o performansama, nula eura tekućih troškova infrastrukture i potpunu optimizaciju za SEO i AI pretraživače.

Dizajnirali smo luksuznu mračnu temu s upečatljivim zlatno-brončanim akcentima, koristeći vrhunsku kombinaciju modernog Inter fonta za tekst i robusnog Bebas Neue fonta za naslove. Cijeli projekt postavljen je na besplatni i globalno brzi Cloudflare Pages poslužitelj.

U nastavku donosim cjeloviti inženjerski postupak kako sam riješio ključne UX izazove, stvorio brzi interaktivni kalkulator cijena s WhatsApp integracijom i optimizirao galeriju radova bez bloated softvera.

1. Prva zečja rupa: Tri stupa usluga i čišćenje kognitivnog opterećenja

Prvi izazov bio je kako posjetitelju odmah i bez lutanja objasniti što točno GLANC nudi. Obrt pokriva tri široka i potpuno različita područja: čišćenje namještaja (dvosjedi, trosjedi, kutne garniture), detailing automobila (osobna vozila, kombiji, dostavna vozila) i čišćenje doma (radijatori, tlakovci, fuge).

Umjesto otvaranja zasebnih, sporih podstranica za svaku uslugu koje bi razvodnile pozornost posjetitelja, kreirao sam tri elegantne, visoko fokusirane kartice usluga izravno na početnom zaslonu: Namještaj, Automobil i Dom.

Svaka kartica sadrži prepoznatljivu zlatnu ikonu, jasan popis ključnih stavki usluge te pametni UX gumb "Pogledaj rezultate".

Kako bismo stvorili savršen korisnički tok (UX Flow), gumb "Pogledaj rezultate" ne samo da skrola posjetitelja dolje do galerije radova, već automatski aktivira pripadajući filter. Primjerice, ako klijent klikne na "Pogledaj rezultate (8 slika)" unutar kartice "Automobil", JavaScript u pozadini glatko skrola stranicu i u istom trenutku filtrira galeriju prikazujući isključivo fotografije očišćenih automobila. Cijeli tok je trenutačan, prirodan i odvija se bez ijednog ponovnog učitavanja stranice.

2. Druga zečja rupa: Interaktivni kalkulator cijena s WhatsApp CTA i pametnim upitima

Najveća barijera kod uslužnih djelatnosti je nedostatak transparentnosti. Klijenti ne žele zvati telefonom ili pisati dugačke e-mailove samo da bi saznali okvirnu cijenu. Žele odmah znati koliko će ih čišćenje koštati.

Rješenje je bilo kreiranje Interaktivnog Kalkulatora Cijena u realnom vremenu, ugrađenog izravno u stranicu.

Kalkulator je podijeljen u tri intuitivna taba (Namještaj, Automobil, Dom), omogućujući klijentima da jednostavnim klikom na gumbe plus i minus odaberu točne stavke i količine koje žele očistiti.

• Izračun u stvarnom vremenu: Kako korisnik mijenja količine (npr. 1 trosjed, 1 stolica s naslonom), sustav u milisekundi ažurira procijenjenu ukupnu cijenu.
• Rukovanje varijabilnim cijenama: Određene usluge, poput poliranja farova ili pranja tlakovaca po kvadratnom metru, imaju varijabilne cijene ("na upit"). JavaScript je konfiguriran tako da pametno prepoznaje ove stavke i ukupnom zbroju dinamički dodaje sufiks "+ na upit", zadržavajući potpunu točnost i transparentnost.

Konverzacijski WhatsApp upit (The Magic CTA)

Pravi inženjerski dragulj je način na koji kalkulator pretvara posjetitelja u kupca. Gumb za narudžbu je u početku skriven kako ne bi stvarao vizualni šum. Tek kada klijent odabere barem jednu stavku u kalkulatoru, na dnu se s glatkom animacijom pojavljuje privlačni zeleni gumb "Pošalji upit na WhatsApp".

Klikom na gumb, naša JavaScript skripta u pozadini obavlja magiju:

1. Prolazi kroz sve odabrane stavke u kalkulatoru.
2. Grupiraju ih logički po kategorijama.
3. Sastavlja luksuzno formatiranu poruku s emotikonima namijenjenu Kristijanu. Poruka sadrži točne količine, nazive stavki, pojedinačne cijene te točno izračunatu ukupnu procijenjenu cijenu.
4. Poruka se URL-kodira i otvara izravno u WhatsApp aplikaciji.

Klijent ne mora pisati apsolutno ništa. U njegovom chat prozorčiću već je spremna savršeno čitka i strukturirana narudžba, a on samo mora stisnuti gumb "Pošalji". To Kristijanu omogućuje da trenutno odgovori s predloženim slobodnim terminom, pretvarajući hladne posjete u tople i brze rezervacije.

3. Treća zečja rupa: "Galerija sjaja" i izazovi brzine učitavanja (WebP)

Web stranica za čišćenje bez fotografija "prije i poslije" ili prikaza vrhunskih rezultata rada nema nikakvog smisla. Zato smo kreirali "Našu Glanc Galeriju" s čak 18 premium fotografija stvarnih Kristijanovih radova (od sjajnog plavog Audija A5, sportskih sjedala, pa sve do očišćenog namještaja i parnog čišćenja fuga).

Međutim, učitavanje 18 fotografija visoke razlučivosti odjednom uništilo bi performanse na mobilnim uređajima, trošeći dragocjene megabajte klijenata i spuštajući Google PageSpeed ocjenu u crvenu zonu.

Performanse bez kompromisa: WebP i Lazy Loading

Problem smo riješili u dva koraka:

1. WebP Optimizacija: Sve fotografije iz galerije prošle su kroz masovnu optimizaciju pomoću Python skripte. Dimenzije su im optimizirane na maksimalno 1600px širine (pružajući savršenu oštrinu na velikim zaslonima), a formati su prebačeni u visoko-komprimirani .webp. Time smo u repozitoriju ostvarili nevjerojatnu uštedu od preko 1.2 megabajta, drastično ubrzavši vrijeme prvog učitavanja weba.
2. Lijeno učitavanje (Lazy Loading): Inicijalno na stranici prikazujemo samo 8 primarnih radova. Preostalih 10 fotografija učitava se isključivo na zahtjev gosta — klikom na elegantni gumb "Prikaži više radova". To nam je omogućilo da zadržimo munjevitu isporuku weba i ostvarimo savršenih 99/100 na mobilnim performansama.

Za luksuzno iskustvo pregleda ugradili smo i vlastiti Fullscreen Lightbox modal sa zamućenom staklenom pozadinom (backdrop-filter: blur), koji u potpunosti podržava prevlačenje prstom (swipe) na mobilnim uređajima i navigaciju tipkovnicom (Esc i strelice).

4. Čisti kontakt i GDPR usklađenost

U podnožju stranice klijentima smo pružili kristalno čistu sekciju "Javite se". Ovdje se nalaze svi važni i točni podaci o obrtu (adresa u Vratišincu, telefon, e-mail i Instagram poveznica) te brzi, responzivni CTA gumbi za izravan poziv, WhatsApp chat ili slanje pred-formatiranog e-maila.

Kako bismo osigurali stopostotnu privatnost Kristijana, iz cjelokupnog weba (HTML-a, politike privatnosti i metapodataka) u potpunosti smo uklonili OIB obrta, čuvajući njegove privatne podatke od zlonamjernih crawler skripti. Ugrađen je i elegantan glassmorphism Cookie Consent banner na dnu ekrana koji pamti pristanak lokalno u pregledniku (localStorage) bez ikakvih dosadnih kolačića trećih strana.

Rezultati u brojkama

Kombinacija vanilla tehnologija i pametnih inženjerskih optimizacija donijela je fantastične rezultate:

• Brzina učitavanja: Stranica se na mobilnim uređajima učitava za manje od 220 milisekundi.
• PageSpeed Insights Score: Impresivnih 99/100 na mobilnim uređajima i 100/100 na stolnim računalima.
• Konverzije: Klijenti obožavaju interaktivni kalkulator i jednostavnost slanja strukturirane narudžbe izravno na WhatsApp, a Kristian dobiva jasne i točne upite spremne za dogovor termina.

Obrt GLANC AUTO & DOM je s ovim brzim, modernim i optimiziranim digitalnim alatom spreman za preuzimanje tržišta dubinskog čišćenja u Međimurju i šire. Posjetite njihovu službenu stranicu na glancautoidom.hr i uvjerite se u rezultate! Sjaj na terenu, sjaj na mreži! ✨🚗🧼