feat: redesign homepage with responsive hero, verdict card preview, and modular landing components
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled

- Extract LandingNav, LiveTicker, StatsRow, VerdictCard, and HeroSearch into reusable landing components
- Implement responsive two-layout strategy: mobile stacked (hero search + verdict card + CTA) vs desktop inline pill input with verdict card sidebar
- Add serif/mono font tokens and live-dot pulse animation to CSS
- Move verdict card above search input on mobile, to right sidebar on desktop
- Replace hero "fill up now" mockup with dynamic VerdictCard showing top stations, pricing, and recommendation
- Simplify navigation with uppercase tracking, add Fleet anchor, and gate CTA by auth state
- Lazy-load LeafletMap with defineAsyncComponent to reduce initial bundle
- Relocate SearchBar below hero on search attempt for persistent filter UI
- Add meta description for SEO
This commit is contained in:
Ovidiu U
2026-04-20 20:27:02 +01:00
parent 831637380c
commit d822b77fb0
8 changed files with 365 additions and 115 deletions

View File

@@ -51,6 +51,10 @@
/* Display font */
--font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
/* Hero type pairing — swap these tokens to upgrade to Instrument Serif / Geist Mono later */
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@@ -66,6 +70,15 @@
backdrop-filter: blur(12px);
border: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
}
.live-dot {
animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
}
@layer base {