feat: redesign homepage with responsive hero, verdict card preview, and modular landing components
- 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
@@ -1,98 +1,31 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-zinc-100">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 bg-zinc-50 border-b border-zinc-300 px-6 py-4 md:px-12">
|
||||
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<RouterLink class="flex items-center gap-3" to="/">
|
||||
<div class="w-10 h-10 md:w-12 md:h-12 rounded-lg bg-accent flex items-center justify-center shadow-md">
|
||||
<iconify-icon class="text-white text-xl md:text-2xl" icon="lucide:fuel"></iconify-icon>
|
||||
</div>
|
||||
<span class="text-2xl md:text-3xl font-black font-display tracking-tighter text-accent">FuelAlert</span>
|
||||
</RouterLink>
|
||||
|
||||
<div class="hidden md:flex items-center gap-10">
|
||||
<a class="text-sm font-semibold text-zinc-500 hover:text-accent transition-colors" href="#how-it-works">How it Works</a>
|
||||
<a class="text-sm font-semibold text-zinc-500 hover:text-accent transition-colors" href="#features">Features</a>
|
||||
<a class="text-sm font-semibold text-zinc-500 hover:text-accent transition-colors" href="#pricing">Pricing</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<template v-if="isAuthenticated">
|
||||
<RouterLink class="text-sm font-bold text-zinc-500 hover:text-zinc-800" to="/dashboard">Dashboard</RouterLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a class="text-sm font-bold text-zinc-500 hover:text-zinc-800" href="/login">Login</a>
|
||||
<a class="bg-accent text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-lg hover:bg-primary-dark transition-all transform hover:scale-105 active:scale-95" href="/register">Get Started</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<LandingNav />
|
||||
|
||||
<!-- Hero -->
|
||||
<section id="hero" class="relative pt-24 md:pt-40 pb-6 md:pb-10 px-6 hero-gradient overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-accent text-xs tracking-wider">
|
||||
<span class="inline-flex items-center gap-1.5 font-bold uppercase">
|
||||
<span class="size-1.5 rounded-full bg-status-good animate-pulse"></span>
|
||||
Live
|
||||
</span>
|
||||
<span v-if="liveStats.stationCount">· {{ formattedStationCount }} UK stations</span>
|
||||
<span>· updated {{ updatedAgo || '…' }}</span>
|
||||
</div>
|
||||
<h1 class="text-4xl sm:text-5xl md:text-7xl font-black font-display text-zinc-800 leading-[1.1] tracking-tighter">
|
||||
Know exactly <br class="hidden sm:block"><span class="text-accent">when</span> to fuel.
|
||||
<section id="hero" class="relative pt-24 md:pt-36 pb-10 md:pb-16 px-6 hero-gradient overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto grid lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
|
||||
<div class="space-y-6 md:space-y-8">
|
||||
<LiveTicker :latest-price-at="liveStats.latestPriceAt" :station-count="liveStats.stationCount" />
|
||||
|
||||
<h1 class="font-serif text-zinc-900 text-[40px] leading-[0.98] md:text-6xl lg:text-[88px] lg:leading-[0.95] max-w-[560px]">
|
||||
Know <span class="text-accent">exactly</span> when to fill up.
|
||||
</h1>
|
||||
<p class="text-xl text-zinc-500 max-w-lg leading-relaxed">
|
||||
Join 50,000+ UK drivers using real-time insights to find the cheapest petrol and time their fill-ups perfectly.
|
||||
</p>
|
||||
|
||||
<SearchBar :initial="searchInitial" @search="onSearch" />
|
||||
<!-- Mobile verdict card: between headline and input -->
|
||||
<div class="lg:hidden">
|
||||
<VerdictCard variant="compact" />
|
||||
</div>
|
||||
|
||||
<!-- <div class="flex items-center gap-4 pt-4">
|
||||
<div class="flex -space-x-2">
|
||||
<img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=1">
|
||||
<img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=2">
|
||||
<img alt="User" class="w-8 h-8 rounded-full border-2 border-white" src="https://api.dicebear.com/7.x/avataaars/svg?seed=3">
|
||||
</div>
|
||||
<span class="text-sm text-zinc-500 font-medium italic">"Saved me £12 on my first tank!"</span>
|
||||
</div>-->
|
||||
<HeroSearch :fuel-type="searchInitial.fuelType" :initial="searchInitial" :radius="searchInitial.radius" :sort="searchInitial.sort" @search="onSearch" />
|
||||
|
||||
<StatsRow :station-count="liveStats.stationCount" />
|
||||
</div>
|
||||
|
||||
<!-- Visual mockup card -->
|
||||
<div class="relative hidden lg:block">
|
||||
<div class="absolute -inset-4 bg-accent/5 rounded-[2.5rem] blur-2xl"></div>
|
||||
<div class="relative glass-card p-6 rounded-[2rem] shadow-2xl space-y-4 max-w-md mx-auto transform rotate-2">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded bg-accent flex items-center justify-center">
|
||||
<iconify-icon class="text-white" icon="lucide:fuel"></iconify-icon>
|
||||
</div>
|
||||
<span class="font-black text-accent">FuelAlert</span>
|
||||
</div>
|
||||
<div class="text-xs font-bold text-zinc-500">SW1A 1AA</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-zinc-50 p-4 rounded-xl border border-zinc-300 shadow-sm">
|
||||
<p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mb-1">Recommendation</p>
|
||||
<h3 class="text-2xl font-black font-display text-mauve">Fill up now</h3>
|
||||
<div class="mt-2 h-1.5 w-full bg-zinc-200 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-mauve w-[80%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center p-3 bg-white rounded-lg border border-zinc-200">
|
||||
<span class="font-bold text-sm">Tesco Superstore</span>
|
||||
<span class="font-black text-status-good">142.9p</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-white rounded-lg border border-zinc-200">
|
||||
<span class="font-bold text-sm">Shell V-Power</span>
|
||||
<span class="font-black text-zinc-500">148.9p</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Desktop verdict card -->
|
||||
<div class="hidden lg:block">
|
||||
<VerdictCard variant="full" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -101,6 +34,11 @@
|
||||
<section v-if="searchAttempted" class="px-6 py-10 bg-zinc-100">
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
|
||||
<!-- Post-search filter bar -->
|
||||
<div class="bg-white border border-zinc-300 rounded-2xl p-4 md:p-5 shadow-sm">
|
||||
<SearchBar :initial="searchInitial" @search="onSearch" />
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-16">
|
||||
<div class="flex items-center gap-3 text-zinc-500">
|
||||
@@ -431,37 +369,24 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, computed, watch, onMounted, defineAsyncComponent } from 'vue'
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router'
|
||||
import { useAuth } from '../composables/useAuth.js'
|
||||
import { useStations } from '../composables/useStations.js'
|
||||
import api from '../axios.js'
|
||||
import SearchBar from '../components/SearchBar.vue'
|
||||
import LeafletMap from '../components/LeafletMap.vue'
|
||||
import StationList from '../components/StationList.vue'
|
||||
|
||||
const LeafletMap = defineAsyncComponent(() => import('../components/LeafletMap.vue'))
|
||||
import LandingNav from '../components/landing/LandingNav.vue'
|
||||
import LiveTicker from '../components/landing/LiveTicker.vue'
|
||||
import VerdictCard from '../components/landing/VerdictCard.vue'
|
||||
import HeroSearch from '../components/landing/HeroSearch.vue'
|
||||
import StatsRow from '../components/landing/StatsRow.vue'
|
||||
|
||||
const { isAuthenticated, userTier } = useAuth()
|
||||
|
||||
const liveStats = ref({ stationCount: null, latestPriceAt: null })
|
||||
const now = ref(Date.now())
|
||||
let nowTicker = null
|
||||
|
||||
const formattedStationCount = computed(() => {
|
||||
const n = liveStats.value.stationCount
|
||||
return n == null ? '' : n.toLocaleString('en-GB')
|
||||
})
|
||||
|
||||
const updatedAgo = computed(() => {
|
||||
const iso = liveStats.value.latestPriceAt
|
||||
if (!iso) return ''
|
||||
const diffMin = Math.floor((now.value - new Date(iso).getTime()) / 60000)
|
||||
if (diffMin < 1) return 'just now'
|
||||
if (diffMin < 60) return `${diffMin} min ago`
|
||||
const hours = Math.floor(diffMin / 60)
|
||||
if (hours < 24) return `${hours} hr ago`
|
||||
const days = Math.floor(hours / 24)
|
||||
return `${days} day${days === 1 ? '' : 's'} ago`
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
@@ -471,16 +396,8 @@ onMounted(async () => {
|
||||
latestPriceAt: data.latest_price_at,
|
||||
}
|
||||
} catch {
|
||||
// leave defaults; hero line degrades to "Live" only
|
||||
// leave defaults; ticker degrades to "Live · updated …" only
|
||||
}
|
||||
|
||||
nowTicker = setInterval(() => {
|
||||
now.value = Date.now()
|
||||
}, 60000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (nowTicker) clearInterval(nowTicker)
|
||||
})
|
||||
|
||||
const cadence = ref('monthly')
|
||||
|
||||
Reference in New Issue
Block a user