RealizacjaVeltra Logistics
Premium, błyskawicznie ładująca się strona marketingowa fikcyjnego operatora transportu drogowego i spedycji — projekt referencyjny R&D uzupełniający RoadTMS (produkt) o pokaz frontendu strony marketingowej.
Veltra Logistics potrzebowała jednej, nastawionej na konwersję strony, która budzi zaufanie kupujących usługi transportowe i ładuje się natychmiast na każdym urządzeniu — bez kompromisów na jakości wizualnej.
Wyzwanie
Strony transportowe są zwykle ciężkie, generyczne i wolne. Celem była szybka, premium strona z jedną ścieżką konwersji (zapytanie o wycenę) i sygnałami wiarygodności (licencja wspólnotowa, ADR, monitoring SENT, ubezpieczenie OCP).
Podejście
Statyczny build Next.js 16 (App Router + Turbopack), treści w typowanych plikach TS (bez CMS), obrazy przez statyczny import next/image dla zerowego CLS, animacje reveal w czystym CSS, jeden source of truth dla domeny. PL-only z założenia — zakres Fazy 1 (demo).
Co zbudowaliśmy
- Pełnoekranowe fotograficzne hero z social proof i kartą statystyk
- Pasek zaufania (certyfikaty + obsługiwane branże, bez fałszywych logo)
- Skrót oferty na home + pełna strona usług z 6 kartami
- Strona floty z typami pojazdów i siatką standardów wyposażenia
- Strona O nas z historią, zasadami działania i procesem
- Strona kontakt z 3 kartami ikonowymi + front-endowy formularz wyceny
- Reużywalne prymitywy: Card, CheckList, Backdrop, StatPanel, AvatarStack, Stars, GlassPill
- Anty-spam w formularzu (honeypot + fill-time) z walidacją inline i jawnymi stanami wysłano/błąd — w pełni client-side, bez backendu
- JSON-LD Organization na każdej stronie, FAQPage na /uslugi
- Sitemap, robots.txt, canonicale, OG, Twitter cards
- Dostępność: skip-link, aria-current, focus ring, nawigacja klawiaturą, poszanowanie prefers-reduced-motion
Wyniki
- Natychmiastowe ładowanie: FCP ~0,4s, LCP ~0,7s na produkcji (Lighthouse, transport.oksoftware.co, desktop)
- W pełni statyczny prerender, zerowy CLS na fotograficznym hero
- Zdjęcia z czystą licencją (Pexels License) + autorskie SVG (dwukolorowy znak V + wyważony wordmark)
- Uczciwie zaznaczony zakres demo: formularz front-only, marka i opinie fikcyjne, strona w noindex
Stack
Next.js 16 (App Router, Turbopack), TypeScript, Tailwind CSS v4, next/image ze statycznym importem, natywne animacje CSS, Vercel (custom subdomena transport.oksoftware.co).