feat: add fuel price classification markers and responsive search UI improvements
- 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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user