Case study · Zonik AI
Zonik AI — After-Hours Load Tracking SaaS Website
- B2B SaaS
- Web Design
- Next.js
- Framer Motion
- Conversion-focused
After-hours load tracking, objašnjen za 30 sekundi.
O projektu
Zonik AI je B2B SaaS za trucking i freight kompanije. AI agent prati aktivne load-ove 24/7, prati GPS, zove vozače preko AI voice agenta i alarmira after-hours tim samo kada je potrebna akcija.
Marketing sajt (Home + Contact), statički export, deploy na Netlify. Stack: Next.js (App Router), TypeScript, Tailwind CSS v4, Framer Motion.
Zonik je trebao sajt koji odmah objašnjava kompleksan proizvod freight dispatcherima i ops liderima, ne generički SaaS template. Sajt je morao da deluje moderno, pouzdano i product-led, uz jasan fokus na demo bookings.
12
Sekcija na Home stranici
2
Stranice (Home + Contact)
24/7
Monitoring priča u centru dizajna
Izazov
- Šta se dešava automatski: GPS, risk detection, AI driver calls
- Šta tim i dalje radi: samo izuzeci, ne svaki load
- Zašto jedan operator + AI može zameniti 10-osobni overnight tim
Naš pristup
Izabrali smo čist, svetli, Attio-inspirisan B2B look umesto tamnih „cyber“ trucking klišeja. Soft periwinkle accent (#818CF8) je tech-forward ali pristupačan, bez agresivne crveno-plave logistics palete.
Naizmenične pozadine sekcija, tight tracking naslovi i gradient accent na ključnim frazama daju ritam pri skrolovanju. Reusable design system drži konzistentnost bez osećaja templata.
B2B kupci u freight-u skeptični su prema hype-u. Smiren, precizan, product-demo feel gradi poverenje brže od glasnog marketinga.
Design system building blocks:
- SectionShell + SectionHeader
- HoverCard + icon-chip
- card-clean komponente
- Periwinkle accent (#818CF8)
Product-led hero
Hero nije bio slogan wall. Naslov: „Every load monitored. Every risk detected. Your AI after-hours tracking agent.“
Hero uključuje live-feeling dashboard preview: animirani ETA countdown, risk badge toggle, voice agent pulse i alert toast. Posetilac odmah vidi proizvod, ne apstraktan copy.
Animacije sa svrhom
Svaka animacija objašnjava proizvod, ne dekoracija. Route map: kamion prati GPS putanju, ruta se crta u realnom vremenu. Automation pipeline vodi posetioca kroz Loads → GPS → AI Monitor → Voice → Dashboard → Alert.
How It Works storyboard ima 4 interaktivna koraka sa auto-play i click-to-explore. Animacije pretvaraju apstraktni SaaS u „aha, ovako radi“ moment, bez teškog videa ili gubitka performansi na static export-u.
Form-first CTA
Primarna konverzija je Book a Demo. Contact stranica tretirana kao landing page: demo forma je prva stvar u hero sekciji, ne zakopana ispod fold-a.
Jasan vizuelni jezik: tamna header traka „Demo request form“, „Start here“ badge, purple ring i shadow. Forma šalje na Make.com webhook. Copy ponavlja vrednost kroz ceo sajt: „Your team only steps in when it matters.“
Messaging arhitektura
- Problem, bol ručnog overnight tracking-a
- Solution, jedan operator + AI orkestracija
- Proof, GPS, voice agent demo, dashboard, integracije
- How it works, 4 vizuelna koraka
- Benefits + FAQ, rukovanje prigovorima
- Final CTA, dark sekcija, demo push
Rezultati
12
Home sekcija isporučeno
1
Make.com webhook za demo leadove
100%
Mobile-responsive + scroll-animated
Tech stack i deliverables:
- Next.js 16 + TypeScript
- Tailwind CSS v4
- Framer Motion interakcije
- Static export → Netlify
- Reusable section system
- Route map SVG animacija
- Interactive How It Works showcase
- Stranice: / (home), /contact (form-first demo)
Zaključak
Zaključak
Cilj nije bio lep trucking sajt, već sajt koji natera dispatchera da pomisli: „Ovo radi overnight za mene, a ja se budim samo za izuzetke.“ Svaki design izbor služio je tome.
Saznajte više o konverznim landing stranicama i reklamama
Pogledaj usluguNeki od naših klijenata
Besplatna konsultacija
Imate potrebu za novim leadovima?
Zakažite besplatnu konsultaciju i saznajte kako možemo pomoći vašem timu.
- Besplatno
- 30 minuta
- Bez obaveza