d822b77fb0
- 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
47 lines
2.3 KiB
Vue
47 lines
2.3 KiB
Vue
<template>
|
|
<nav class="fixed top-0 w-full z-50 bg-zinc-50/90 backdrop-blur-sm border-b border-zinc-300 px-6 py-4 md:px-12">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between gap-6">
|
|
<RouterLink class="flex items-center gap-3 shrink-0" to="/">
|
|
<div class="w-9 h-9 md:w-10 md:h-10 rounded-lg bg-accent flex items-center justify-center shadow-md">
|
|
<iconify-icon class="text-white text-xl" icon="lucide:fuel"></iconify-icon>
|
|
</div>
|
|
<span class="text-xl md:text-2xl font-black font-display tracking-tighter text-accent">FuelAlert</span>
|
|
</RouterLink>
|
|
|
|
<div class="hidden lg:flex items-center gap-8 font-mono text-[11px] uppercase tracking-widest text-zinc-600">
|
|
<a class="hover:text-accent transition-colors" href="#how-it-works">How it works</a>
|
|
<a class="hover:text-accent transition-colors" href="#features">Why it works</a>
|
|
<a class="hover:text-accent transition-colors" href="#pricing">Pricing</a>
|
|
<a class="hover:text-accent transition-colors" href="#fleet">Fleet</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 md:gap-5">
|
|
<template v-if="isAuthenticated">
|
|
<RouterLink
|
|
class="bg-accent text-white px-5 py-2 rounded-full text-sm font-bold shadow-md hover:bg-primary-dark transition-all"
|
|
to="/dashboard"
|
|
>
|
|
Dashboard
|
|
</RouterLink>
|
|
</template>
|
|
<template v-else>
|
|
<a class="text-sm font-semibold text-zinc-600 hover:text-zinc-900 transition-colors" href="/login">Login</a>
|
|
<a
|
|
class="hidden sm:inline-flex bg-accent text-white px-5 py-2 rounded-full text-sm font-bold shadow-md hover:bg-primary-dark transition-all"
|
|
href="/register"
|
|
>
|
|
Get started
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { RouterLink } from 'vue-router'
|
|
import { useAuth } from '../../composables/useAuth.js'
|
|
|
|
const { isAuthenticated } = useAuth()
|
|
</script>
|