420 lines
22 KiB
HTML
420 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>FuelAlert | Save Smart on Petrol & Diesel</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect">
|
|
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800;900&display=swap');
|
|
|
|
:root {
|
|
--primary: #bb5b3e;
|
|
--bg-main: #f5ede5;
|
|
--bg-card: #faf6f3;
|
|
--text-main: #4a3f3b;
|
|
--neutral: #89726c;
|
|
--rec-now: #8B4860;
|
|
--rec-wait: #4A7C7E;
|
|
--rec-hold: #9B8B6B;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: 'Manrope', sans-serif;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(250, 246, 243, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(229, 222, 215, 0.5);
|
|
}
|
|
|
|
.hero-gradient {
|
|
background: radial-gradient(circle at top right, #bb5b3e15, transparent 50%),
|
|
radial-gradient(circle at bottom left, #bb5b3e10, transparent 40%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="min-h-screen bg-[#f5ede5]">
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 w-full z-50 bg-[#faf6f3] border-b border-[#e5ded7] px-6 py-4 md:px-12">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
<a class="flex items-center gap-3" href="#" id="nav-logo-link">
|
|
<div class="w-10 h-10 md:w-12 md:h-12 rounded-lg bg-[#bb5b3e] 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 tracking-tighter text-[#bb5b3e]">FuelAlert</span>
|
|
</a>
|
|
|
|
<div class="hidden md:flex items-center gap-10">
|
|
<a class="text-sm font-semibold text-[#89726c] hover:text-[#bb5b3e] transition-colors" href="#how-it-works" id="nav-how-link">How it Works</a>
|
|
<a class="text-sm font-semibold text-[#89726c] hover:text-[#bb5b3e] transition-colors" href="#features" id="nav-features-link">Features</a>
|
|
<a class="text-sm font-semibold text-[#89726c] hover:text-[#bb5b3e] transition-colors" href="#pricing" id="nav-pricing-link">Pricing</a>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a class="text-sm font-bold text-[#89726c] hover:text-[#4a3f3b]" href="#" id="nav-login-link">Login</a>
|
|
<a class="bg-[#bb5b3e] text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-lg hover:bg-[#a34a31] transition-all transform hover:scale-105 active:scale-95" href="#" id="nav-cta-link">Get Started</a>
|
|
</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-[#bb5b3e]/10 text-[#bb5b3e] rounded-full text-xs font-bold uppercase tracking-wider">
|
|
<iconify-icon icon="lucide:sparkles"></iconify-icon>
|
|
Save up to £250/year on fuel
|
|
</div>
|
|
<h1 class="text-5xl md:text-7xl font-black text-[#4a3f3b] leading-[1.1] tracking-tighter">
|
|
Stop Overpaying <br/> <span class="text-[#bb5b3e]">for Fuel.</span>
|
|
</h1>
|
|
<p class="text-xl text-[#89726c] 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>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 max-w-md">
|
|
<div class="relative flex-1">
|
|
<iconify-icon class="absolute left-4 top-1/2 -translate-y-1/2 text-[#89726c] text-xl" icon="lucide:map-pin"></iconify-icon>
|
|
<input class="w-full h-14 pl-12 pr-4 bg-white border border-[#e5ded7] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#bb5b3e] shadow-inner text-lg" id="hero-postcode-input" placeholder="Enter Postcode" type="text">
|
|
</div>
|
|
<button class="h-14 px-8 bg-[#bb5b3e] text-white rounded-xl font-bold text-lg shadow-xl hover:bg-[#a34a31] transition-all" id="hero-search-btn">Find Prices</button>
|
|
</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-[#89726c] font-medium italic">"Saved me £12 on my first tank!"</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visual Mockup -->
|
|
<div class="relative">
|
|
<div class="absolute -inset-4 bg-[#bb5b3e]/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-[#bb5b3e] flex items-center justify-center"><iconify-icon class="text-white" icon="lucide:fuel"></iconify-icon></div>
|
|
<span class="font-black text-[#bb5b3e]">FuelAlert</span>
|
|
</div>
|
|
<div class="text-xs font-bold text-[#89726c]">SW1A 1AA</div>
|
|
</div>
|
|
|
|
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm">
|
|
<p class="text-[10px] font-bold uppercase tracking-widest text-[#89726c] mb-1">Recommendation</p>
|
|
<h3 class="text-2xl font-black text-[#8B4860]">Fill up now</h3>
|
|
<div class="mt-2 h-1.5 w-full bg-[#eeeae5] rounded-full overflow-hidden">
|
|
<div class="h-full bg-[#8B4860] 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-[#eeeae5]">
|
|
<span class="font-bold text-sm">Tesco Superstore</span>
|
|
<span class="font-black text-[#22c55e]">142.9p</span>
|
|
</div>
|
|
<div class="flex justify-between items-center p-3 bg-white rounded-lg border border-[#eeeae5]">
|
|
<span class="font-bold text-sm">Shell V-Power</span>
|
|
<span class="font-black text-[#89726c]">148.9p</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="py-24 px-6 bg-[#faf6f3]" id="how-it-works">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-16 space-y-4">
|
|
<h2 class="text-4xl md:text-5xl font-black text-[#4a3f3b]">Smart Savings in 3 Steps</h2>
|
|
<p class="text-[#89726c] text-lg max-w-2xl mx-auto">Stop guessing when to fill up. Our engine analyzes 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-[#bb5b3e]/10 text-[#bb5b3e] rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
|
<iconify-icon icon="lucide:search"></iconify-icon>
|
|
</div>
|
|
<h3 class="text-2xl font-bold">1. Search</h3>
|
|
<p class="text-[#89726c]">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-[#bb5b3e]/10 text-[#bb5b3e] rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
|
<iconify-icon icon="lucide:trending-up"></iconify-icon>
|
|
</div>
|
|
<h3 class="text-2xl font-bold">2. Get Advice</h3>
|
|
<p class="text-[#89726c]">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-[#bb5b3e]/10 text-[#bb5b3e] rounded-2xl flex items-center justify-center mx-auto text-3xl">
|
|
<iconify-icon icon="lucide:wallet"></iconify-icon>
|
|
</div>
|
|
<h3 class="text-2xl font-bold">3. Fill Up Smart</h3>
|
|
<p class="text-[#89726c]">Navigate to the cheapest station and fill up with confidence knowing you've secured the best price.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-24 px-6" id="features">
|
|
<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">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="p-6 bg-[#faf6f3] border border-[#e5ded7] rounded-2xl space-y-3">
|
|
<iconify-icon class="text-3xl text-[#bb5b3e]" icon="lucide:zap"></iconify-icon>
|
|
<h4 class="font-bold text-lg">Real-Time Prices</h4>
|
|
<p class="text-sm text-[#89726c]">Verified daily prices from thousands of UK forecourts.</p>
|
|
</div>
|
|
<div class="p-6 bg-[#faf6f3] border border-[#e5ded7] rounded-2xl space-y-3">
|
|
<iconify-icon class="text-3xl text-[#bb5b3e]" icon="lucide:calendar"></iconify-icon>
|
|
<h4 class="font-bold text-lg">Timing Predictions</h4>
|
|
<p class="text-sm text-[#89726c]">Proprietary 14-day forecasts for petrol and diesel trends.</p>
|
|
</div>
|
|
<div class="p-6 bg-[#faf6f3] border border-[#e5ded7] rounded-2xl space-y-3">
|
|
<iconify-icon class="text-3xl text-[#bb5b3e]" icon="lucide:shopping-bag"></iconify-icon>
|
|
<h4 class="font-bold text-lg">Supermarket Anchors</h4>
|
|
<p class="text-sm text-[#89726c]">Track local supermarkets to find the absolute lowest base price.</p>
|
|
</div>
|
|
<div class="p-6 bg-[#faf6f3] border border-[#e5ded7] rounded-2xl space-y-3">
|
|
<iconify-icon class="text-3xl text-[#bb5b3e]" icon="lucide:bell-ring"></iconify-icon>
|
|
<h4 class="font-bold text-lg">Smart Price Alerts</h4>
|
|
<p class="text-sm text-[#89726c]">Get notified when local prices drop below your set target.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-1 lg:order-2 space-y-8">
|
|
<h2 class="text-4xl md:text-5xl font-black text-[#4a3f3b]">The ultimate fuel companion.</h2>
|
|
<p class="text-lg text-[#89726c]">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 class="text-[#bb5b3e]" icon="lucide:check-circle-2"></iconify-icon>
|
|
Coverage for 98% of UK Forecourts
|
|
</li>
|
|
<li class="flex items-center gap-3 font-bold">
|
|
<iconify-icon class="text-[#bb5b3e]" icon="lucide:check-circle-2"></iconify-icon>
|
|
Hyper-local Map Visualization
|
|
</li>
|
|
<li class="flex items-center gap-3 font-bold">
|
|
<iconify-icon class="text-[#bb5b3e]" icon="lucide:check-circle-2"></iconify-icon>
|
|
Historic Price Benchmarking
|
|
</li>
|
|
</ul>
|
|
<button class="inline-flex items-center gap-2 text-[#bb5b3e] font-black text-lg group" id="features-cta-btn">
|
|
Explore all features
|
|
<iconify-icon class="group-hover:translate-x-1 transition-transform" icon="lucide:arrow-right"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="py-24 px-6 bg-[#faf6f3]" id="pricing">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-5xl font-black text-[#4a3f3b] mb-4">Pricing for every driver</h2>
|
|
<p class="text-[#89726c] 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">
|
|
<!-- Free -->
|
|
<div class="bg-white border border-[#e5ded7] p-8 rounded-3xl flex flex-col h-full">
|
|
<div class="mb-8">
|
|
<h4 class="text-xl font-bold mb-2">Free</h4>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-4xl font-black">£0</span>
|
|
<span class="text-[#89726c] text-sm">/mo</span>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Basic Search</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Daily Updates</li>
|
|
<li class="text-sm flex gap-2 text-[#89726c]"><iconify-icon class="text-gray-300" icon="lucide:x"></iconify-icon> No Alerts</li>
|
|
</ul>
|
|
<a class="w-full py-3 px-4 border border-[#e5ded7] rounded-xl text-center font-bold hover:bg-[#faf6f3] transition-colors" href="#" id="plan-free-btn">Get Started</a>
|
|
</div>
|
|
|
|
<!-- Basic -->
|
|
<div class="bg-white border border-[#e5ded7] p-8 rounded-3xl flex flex-col h-full">
|
|
<div class="mb-8">
|
|
<h4 class="text-xl font-bold mb-2">Basic</h4>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-4xl font-black">£0.99</span>
|
|
<span class="text-[#89726c] text-sm">/mo</span>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Ad-free Experience</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> 14-day Trend Data</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> 3 Daily Price Alerts</li>
|
|
</ul>
|
|
<a class="w-full py-3 px-4 border border-[#e5ded7] rounded-xl text-center font-bold hover:bg-[#faf6f3] transition-colors" href="#" id="plan-basic-btn">Select Basic</a>
|
|
</div>
|
|
|
|
<!-- Plus -->
|
|
<div class="bg-white border-2 border-[#bb5b3e] p-8 rounded-3xl flex flex-col h-full relative">
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-[#bb5b3e] text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest">Most Popular</div>
|
|
<div class="mb-8">
|
|
<h4 class="text-xl font-bold mb-2">Plus</h4>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-4xl font-black text-[#bb5b3e]">£2.49</span>
|
|
<span class="text-[#89726c] text-sm">/mo</span>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="text-sm flex gap-2 font-bold"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Supermarket Anchor</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Priority Price Alerts</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Multi-location tracking</li>
|
|
</ul>
|
|
<a class="w-full py-3 px-4 bg-[#bb5b3e] text-white rounded-xl text-center font-bold shadow-lg hover:bg-[#a34a31] transition-all" href="#" id="plan-plus-btn">Join Plus</a>
|
|
</div>
|
|
|
|
<!-- Pro -->
|
|
<div class="bg-[#4a3f3b] border border-[#4a3f3b] p-8 rounded-3xl flex flex-col h-full text-white">
|
|
<div class="mb-8">
|
|
<h4 class="text-xl font-bold mb-2">Pro</h4>
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-4xl font-black">£3.99</span>
|
|
<span class="text-gray-300 text-sm">/mo</span>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-4 mb-8 flex-1">
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:sparkles"></iconify-icon> AI Price Predictions</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Multi-Vehicle Fleet</li>
|
|
<li class="text-sm flex gap-2"><iconify-icon class="text-[#bb5b3e]" icon="lucide:check"></iconify-icon> Exportable Price History</li>
|
|
</ul>
|
|
<a class="w-full py-3 px-4 bg-white text-[#4a3f3b] rounded-xl text-center font-bold hover:bg-gray-100 transition-colors" href="#" id="plan-pro-btn">Go Pro</a>
|
|
</div>
|
|
</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="text-4xl font-black text-[#4a3f3b] mb-4">Loved by commuters.</h2>
|
|
<div class="flex items-center gap-1 text-[#f59e0b] 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-[#89726c]">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-[#faf6f3] border border-[#e5ded7] rounded-2xl shadow-sm italic text-[#4a3f3b]">
|
|
"I used to just go to the station on my way home. Now I check FuelAlert and realize 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 class="w-10 h-10 rounded-full" src="https://api.dicebear.com/7.x/avataaars/svg?seed=John">
|
|
<div>
|
|
<p class="font-bold text-sm">James R.</p>
|
|
<p class="text-[10px] text-[#89726c] uppercase font-bold tracking-widest">Daily Commuter</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-[#faf6f3] border border-[#e5ded7] rounded-2xl shadow-sm italic text-[#4a3f3b]">
|
|
"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 class="w-10 h-10 rounded-full" src="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah">
|
|
<div>
|
|
<p class="font-bold text-sm">Sarah M.</p>
|
|
<p class="text-[10px] text-[#89726c] uppercase font-bold tracking-widest">Delivery Driver</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Footer -->
|
|
<section class="py-24 px-6 bg-[#bb5b3e] text-white text-center">
|
|
<div class="max-w-3xl mx-auto space-y-8">
|
|
<h2 class="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 class="bg-white text-[#bb5b3e] px-10 py-4 rounded-xl text-lg font-black shadow-2xl hover:bg-gray-100 transition-all" href="#" id="final-cta-btn">Create Free Account</a>
|
|
<a class="bg-transparent border-2 border-white/30 text-white px-10 py-4 rounded-xl text-lg font-bold hover:bg-white/10 transition-all" href="#" id="demo-btn">Watch Demo Video</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Footer -->
|
|
<footer class="bg-[#faf6f3] border-t border-[#e5ded7] 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 class="flex items-center gap-2" href="#" id="footer-logo-link">
|
|
<div class="w-8 h-8 rounded bg-[#bb5b3e] flex items-center justify-center"><iconify-icon class="text-white" icon="lucide:fuel"></iconify-icon></div>
|
|
<span class="text-xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</span>
|
|
</a>
|
|
<p class="text-sm text-[#89726c] 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 class="text-2xl text-[#89726c] hover:text-[#bb5b3e] cursor-pointer" icon="mdi:twitter"></iconify-icon>
|
|
<iconify-icon class="text-2xl text-[#89726c] hover:text-[#bb5b3e] cursor-pointer" icon="mdi:facebook"></iconify-icon>
|
|
<iconify-icon class="text-2xl text-[#89726c] hover:text-[#bb5b3e] cursor-pointer" icon="mdi:instagram"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h5 class="font-black uppercase text-xs text-[#4a3f3b] tracking-widest">Product</h5>
|
|
<ul class="space-y-2 text-sm text-[#89726c]">
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-pricing-link">Pricing</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-features-link">Features</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-pro-link">FuelAlert Pro</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-api-link">Enterprise API</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h5 class="font-black uppercase text-xs text-[#4a3f3b] tracking-widest">Resources</h5>
|
|
<ul class="space-y-2 text-sm text-[#89726c]">
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-blog-link">Market Insights</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-how-link">How We Track</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-help-link">Help Center</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-safety-link">Driver Safety</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h5 class="font-black uppercase text-xs text-[#4a3f3b] tracking-widest">Legal</h5>
|
|
<ul class="space-y-2 text-sm text-[#89726c]">
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-privacy-link">Privacy Policy</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-terms-link">Terms of Service</a></li>
|
|
<li><a class="hover:text-[#bb5b3e]" href="#" id="footer-cookies-link">Cookie Settings</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto pt-8 border-t border-[#e5ded7] flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] font-bold uppercase tracking-widest text-[#89726c]">
|
|
<p>© 2024 FuelAlert UK Limited. All Rights Reserved.</p>
|
|
<p>Data provided by official UK retail price transparency schemes.</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |