feat: add fuel price classification markers and responsive search UI improvements
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

- Move map pin icon to right side of input with adjusted spacing
- Change button styling from accent to primary color
This commit is contained in:
Ovidiu U
2026-04-11 20:51:07 +01:00
parent 951bb0b98d
commit a969c1b347
5 changed files with 136 additions and 39 deletions

View File

@@ -30,15 +30,15 @@
</nav>
<!-- Hero -->
<section id="hero" class="relative pt-12 md:pt-40 pb-12 md:pb-24 px-6 hero-gradient overflow-hidden">
<section id="hero" class="relative pt-24 md:pt-40 pb-12 md: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-accent/10 text-accent 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 font-display text-zinc-800 leading-[1.1] tracking-tighter">
Stop Overpaying <br><span class="text-accent">for Fuel.</span>
<h1 class="text-4xl sm:text-5xl md:text-7xl font-black font-display text-zinc-800 leading-[1.1] tracking-tighter">
Stop Overpaying <br class="hidden sm:block"><span class="text-accent">for Fuel.</span>
</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.
@@ -57,7 +57,7 @@
</div>
<!-- Visual mockup card -->
<div class="relative hidden md:block">
<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">