370 lines
22 KiB
PHP
370 lines
22 KiB
PHP
<x-layouts::public title="FuelAlert — Fill up now or wait?">
|
||
<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">
|
||
<a href="{{ route('home') }}" class="flex items-center gap-3">
|
||
<div class="w-10 h-10 md:w-12 md:h-12 rounded-lg bg-primary flex items-center justify-center shadow-md">
|
||
<iconify-icon icon="lucide:fuel" class="text-white text-xl md:text-2xl"></iconify-icon>
|
||
</div>
|
||
<span class="font-display text-2xl md:text-3xl font-black tracking-tighter text-primary">FuelAlert</span>
|
||
</a>
|
||
|
||
<div class="hidden md:flex items-center gap-10">
|
||
<a href="#how-it-works" class="text-sm font-semibold text-zinc-500 hover:text-primary transition-colors">How it Works</a>
|
||
<a href="#features" class="text-sm font-semibold text-zinc-500 hover:text-primary transition-colors">Features</a>
|
||
<a href="#pricing" class="text-sm font-semibold text-zinc-500 hover:text-primary transition-colors">Pricing</a>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-4">
|
||
@auth
|
||
<a href="{{ route('dashboard') }}" class="text-sm font-bold text-zinc-500 hover:text-zinc-800 transition-colors">Dashboard</a>
|
||
@else
|
||
<a href="{{ route('login') }}" class="text-sm font-bold text-zinc-500 hover:text-zinc-800 transition-colors">Login</a>
|
||
<a href="{{ route('register') }}" class="bg-primary text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-lg hover:bg-primary-dark transition-all hover:scale-105 active:scale-95">Get Started</a>
|
||
@endauth
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{{-- Hero Section --}}
|
||
<section class="relative pt-40 pb-24 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 bg-primary/10 text-primary rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider">
|
||
<iconify-icon icon="lucide:sparkles"></iconify-icon>
|
||
Save up to £250/year on fuel
|
||
</div>
|
||
|
||
<h1 class="font-display text-3xl md:text-5xl lg:text-7xl font-black text-zinc-800 leading-[1.1] tracking-tighter">
|
||
Stop Overpaying <br> <span class="text-primary">for Fuel.</span>
|
||
</h1>
|
||
|
||
<p class="text-base md: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>
|
||
|
||
{{-- Search Section --}}
|
||
<div class="flex flex-col sm:flex-row gap-3 max-w-md">
|
||
<div class="relative flex-1">
|
||
<iconify-icon icon="lucide:map-pin" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 text-xl"></iconify-icon>
|
||
<input type="text" placeholder="Enter Postcode"
|
||
class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl text-lg shadow-inner focus:outline-none focus:ring-2 focus:ring-primary">
|
||
</div>
|
||
<button class="h-14 px-8 bg-primary text-white rounded-xl font-bold text-lg shadow-xl hover:bg-primary-dark transition-all">
|
||
Find Prices
|
||
</button>
|
||
</div>
|
||
{{-- Search Section --}}
|
||
|
||
<div class="flex items-center gap-4 pt-4">
|
||
<div class="flex -space-x-2">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=1" alt="" class="w-8 h-8 rounded-full border-2 border-white">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=2" alt="" class="w-8 h-8 rounded-full border-2 border-white">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=3" alt="" class="w-8 h-8 rounded-full border-2 border-white">
|
||
</div>
|
||
<span class="text-sm text-zinc-500 font-medium italic">"Saved me £12 on my first tank!"</span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Hero card mockup --}}
|
||
<div class="relative hidden lg:block">
|
||
<div class="absolute -inset-4 bg-primary/5 rounded-[2.5rem] blur-2xl"></div>
|
||
<div class="relative glass-card p-6 rounded-4xl shadow-2xl space-y-4 max-w-md mx-auto rotate-2">
|
||
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-8 h-8 rounded bg-primary flex items-center justify-center">
|
||
<iconify-icon icon="lucide:fuel" class="text-white"></iconify-icon>
|
||
</div>
|
||
<span class="font-display font-black text-primary">FuelAlert</span>
|
||
</div>
|
||
<span class="text-xs font-bold text-zinc-500">SW1A 1AA</span>
|
||
</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="font-display text-2xl font-black 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-4/5"></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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- How It Works --}}
|
||
<section id="how-it-works" class="py-24 px-6 bg-zinc-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-16 space-y-4">
|
||
<h2 class="font-display text-4xl md:text-5xl font-black text-zinc-800">Smart Savings in 3 Steps</h2>
|
||
<p class="text-zinc-500 text-lg max-w-2xl mx-auto">Stop guessing when to fill up. Our engine analyses thousands of data points daily to save you money.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-12">
|
||
<div class="text-center space-y-4">
|
||
<div class="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
||
<iconify-icon icon="lucide:search"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold">1. Search</h3>
|
||
<p class="text-zinc-500">Enter your postcode or location to find every forecourt within a 5–20 mile radius instantly.</p>
|
||
</div>
|
||
<div class="text-center space-y-4">
|
||
<div class="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
||
<iconify-icon icon="lucide:trending-up"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold">2. Get Advice</h3>
|
||
<p class="text-zinc-500">Our AI compares local prices against national wholesale trends to give you a Fill Up/Wait recommendation.</p>
|
||
</div>
|
||
<div class="text-center space-y-4">
|
||
<div class="w-16 h-16 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
||
<iconify-icon icon="lucide:wallet"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold">3. Fill Up Smart</h3>
|
||
<p class="text-zinc-500">Navigate to the cheapest station and fill up with confidence knowing you've secured the best price.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Features --}}
|
||
<section id="features" class="py-24 px-6">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="grid lg:grid-cols-2 gap-20 items-center">
|
||
|
||
<div class="order-2 lg:order-1 grid grid-cols-2 gap-6">
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl space-y-3">
|
||
<iconify-icon icon="lucide:zap" class="text-3xl text-primary"></iconify-icon>
|
||
<h4 class="font-bold text-lg">Real-Time Prices</h4>
|
||
<p class="text-sm text-zinc-500">Verified daily prices from thousands of UK forecourts.</p>
|
||
</div>
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl space-y-3">
|
||
<iconify-icon icon="lucide:calendar" class="text-3xl text-primary"></iconify-icon>
|
||
<h4 class="font-bold text-lg">Timing Predictions</h4>
|
||
<p class="text-sm text-zinc-500">Proprietary 14-day forecasts for petrol and diesel trends.</p>
|
||
</div>
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl space-y-3">
|
||
<iconify-icon icon="lucide:shopping-bag" class="text-3xl text-primary"></iconify-icon>
|
||
<h4 class="font-bold text-lg">Supermarket Anchors</h4>
|
||
<p class="text-sm text-zinc-500">Track local supermarkets to find the absolute lowest base price.</p>
|
||
</div>
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl space-y-3">
|
||
<iconify-icon icon="lucide:bell-ring" class="text-3xl text-primary"></iconify-icon>
|
||
<h4 class="font-bold text-lg">Smart Price Alerts</h4>
|
||
<p class="text-sm text-zinc-500">Get notified when local prices drop below your set target.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-1 lg:order-2 space-y-8">
|
||
<h2 class="font-display text-4xl md:text-5xl font-black text-zinc-800">The ultimate fuel companion.</h2>
|
||
<p class="text-lg text-zinc-500">Whether you're a daily commuter, a delivery professional, or just planning a weekend road trip, FuelAlert gives you the edge at the pump.</p>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-center gap-3 font-bold">
|
||
<iconify-icon icon="lucide:check-circle-2" class="text-primary"></iconify-icon>
|
||
Coverage for 98% of UK Forecourts
|
||
</li>
|
||
<li class="flex items-center gap-3 font-bold">
|
||
<iconify-icon icon="lucide:check-circle-2" class="text-primary"></iconify-icon>
|
||
Hyper-local Map Visualisation
|
||
</li>
|
||
<li class="flex items-center gap-3 font-bold">
|
||
<iconify-icon icon="lucide:check-circle-2" class="text-primary"></iconify-icon>
|
||
Historic Price Benchmarking
|
||
</li>
|
||
</ul>
|
||
<a href="{{ route('register') }}" class="inline-flex items-center gap-2 text-primary font-black text-lg group">
|
||
Explore all features
|
||
<iconify-icon icon="lucide:arrow-right" class="transition-transform group-hover:translate-x-1"></iconify-icon>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Pricing --}}
|
||
<section id="pricing" class="py-24 px-6 bg-zinc-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h2 class="font-display text-4xl md:text-5xl font-black text-zinc-800 mb-4">Pricing for every driver</h2>
|
||
<p class="text-zinc-500 text-lg">Save hundreds for less than the cost of a coffee.</p>
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
||
<x-pricing-card
|
||
name="Free"
|
||
price="£0"
|
||
button-text="Get Started"
|
||
:perks="[
|
||
['text' => 'Basic Search', 'included' => true],
|
||
['text' => 'Daily Updates', 'included' => true],
|
||
['text' => 'No Alerts', 'included' => false],
|
||
]"
|
||
/>
|
||
|
||
<x-pricing-card
|
||
name="Basic"
|
||
price="£0.99"
|
||
button-text="Select Basic"
|
||
:perks="[
|
||
['text' => 'Ad-free Experience', 'included' => true],
|
||
['text' => '14-day Trend Data', 'included' => true],
|
||
['text' => '3 Daily Price Alerts','included' => true],
|
||
]"
|
||
/>
|
||
|
||
<x-pricing-card
|
||
name="Plus"
|
||
price="£2.49"
|
||
button-text="Join Plus"
|
||
:featured="true"
|
||
:perks="[
|
||
['text' => 'Supermarket Anchor', 'included' => true],
|
||
['text' => 'Priority Price Alerts', 'included' => true],
|
||
['text' => 'Multi-location Tracking','included' => true],
|
||
]"
|
||
/>
|
||
|
||
<x-pricing-card
|
||
name="Pro"
|
||
price="£3.99"
|
||
button-text="Go Pro"
|
||
:dark="true"
|
||
:perks="[
|
||
['text' => 'AI Price Predictions', 'included' => true],
|
||
['text' => 'Multi-Vehicle Fleet', 'included' => true],
|
||
['text' => 'Exportable Price History','included' => true],
|
||
]"
|
||
/>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Social Proof --}}
|
||
<section class="py-24 px-6">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="flex flex-col md:flex-row gap-12 items-center">
|
||
<div class="md:w-1/3">
|
||
<h2 class="font-display text-4xl font-black text-zinc-800 mb-4">Loved by commuters.</h2>
|
||
<div class="flex items-center gap-1 text-status-warn mb-4 text-xl">
|
||
<iconify-icon icon="lucide:star"></iconify-icon>
|
||
<iconify-icon icon="lucide:star"></iconify-icon>
|
||
<iconify-icon icon="lucide:star"></iconify-icon>
|
||
<iconify-icon icon="lucide:star"></iconify-icon>
|
||
<iconify-icon icon="lucide:star"></iconify-icon>
|
||
</div>
|
||
<p class="text-zinc-500">Join thousands of UK drivers saving every single month.</p>
|
||
</div>
|
||
<div class="md:w-2/3 grid sm:grid-cols-2 gap-6">
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl shadow-sm italic text-zinc-800">
|
||
"I used to just go to the station on my way home. Now I check FuelAlert and realise there's a station 2 miles away that's 5p cheaper! Over a month, it adds up to a free tank per year."
|
||
<div class="mt-4 flex items-center gap-3 not-italic">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=John" alt="James R." class="w-10 h-10 rounded-full">
|
||
<div>
|
||
<p class="font-bold text-sm">James R.</p>
|
||
<p class="text-[10px] text-zinc-500 uppercase font-bold tracking-widest">Daily Commuter</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 bg-zinc-50 border border-zinc-300 rounded-2xl shadow-sm italic text-zinc-800">
|
||
"The predictions are eerily accurate. I was going to fill up Friday, but FuelAlert said 'Hold on' for Monday. Sure enough, prices dropped at my local Tesco by 3p. Brilliant."
|
||
<div class="mt-4 flex items-center gap-3 not-italic">
|
||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah" alt="Sarah M." class="w-10 h-10 rounded-full">
|
||
<div>
|
||
<p class="font-bold text-sm">Sarah M.</p>
|
||
<p class="text-[10px] text-zinc-500 uppercase font-bold tracking-widest">Delivery Driver</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- CTA Banner --}}
|
||
<section class="py-24 px-6 bg-primary text-white text-center">
|
||
<div class="max-w-3xl mx-auto space-y-8">
|
||
<h2 class="font-display text-4xl md:text-5xl font-black leading-tight">Ready to outsmart the pumps?</h2>
|
||
<p class="text-xl text-white/80">Sign up for free today and never pay over the odds for fuel again.</p>
|
||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a href="{{ route('register') }}" class="bg-white text-primary px-10 py-4 rounded-xl text-lg font-black shadow-2xl hover:bg-zinc-100 transition-all">Create Free Account</a>
|
||
<a href="#" class="border-2 border-white/30 text-white px-10 py-4 rounded-xl text-lg font-bold hover:bg-white/10 transition-all">Watch Demo Video</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Footer --}}
|
||
<footer class="bg-zinc-50 border-t border-zinc-300 pt-16 pb-8 px-6">
|
||
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-12 mb-12">
|
||
|
||
<div class="col-span-2 md:col-span-1 space-y-4">
|
||
<a href="{{ route('home') }}" class="flex items-center gap-2">
|
||
<div class="w-8 h-8 rounded bg-primary flex items-center justify-center">
|
||
<iconify-icon icon="lucide:fuel" class="text-white"></iconify-icon>
|
||
</div>
|
||
<span class="font-display text-xl font-black tracking-tighter text-primary">FuelAlert</span>
|
||
</a>
|
||
<p class="text-sm text-zinc-500 leading-relaxed">Helping UK drivers save money at the pump since 2021. Real-time data, smarter choices.</p>
|
||
<div class="flex gap-4">
|
||
<iconify-icon icon="mdi:twitter" class="text-2xl text-zinc-500 hover:text-primary cursor-pointer transition-colors"></iconify-icon>
|
||
<iconify-icon icon="mdi:facebook" class="text-2xl text-zinc-500 hover:text-primary cursor-pointer transition-colors"></iconify-icon>
|
||
<iconify-icon icon="mdi:instagram" class="text-2xl text-zinc-500 hover:text-primary cursor-pointer transition-colors"></iconify-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<h5 class="font-black uppercase text-xs text-zinc-800 tracking-widest">Product</h5>
|
||
<ul class="space-y-2 text-sm text-zinc-500">
|
||
<li><a href="#pricing" class="hover:text-primary transition-colors">Pricing</a></li>
|
||
<li><a href="#features" class="hover:text-primary transition-colors">Features</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">FuelAlert Pro</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">Enterprise API</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<h5 class="font-black uppercase text-xs text-zinc-800 tracking-widest">Resources</h5>
|
||
<ul class="space-y-2 text-sm text-zinc-500">
|
||
<li><a href="#" class="hover:text-primary transition-colors">Market Insights</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">How We Track</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">Help Centre</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">Driver Safety</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<h5 class="font-black uppercase text-xs text-zinc-800 tracking-widest">Legal</h5>
|
||
<ul class="space-y-2 text-sm text-zinc-500">
|
||
<li><a href="#" class="hover:text-primary transition-colors">Privacy Policy</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">Terms of Service</a></li>
|
||
<li><a href="#" class="hover:text-primary transition-colors">Cookie Settings</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="max-w-7xl mx-auto pt-8 border-t border-zinc-300 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-widest text-zinc-500">
|
||
<p>© {{ date('Y') }} FuelAlert UK Limited. All Rights Reserved.</p>
|
||
<p>Data provided by official UK retail price transparency schemes.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
</div>
|
||
</x-layouts::public>
|