remove used image
This commit is contained in:
@@ -333,7 +333,7 @@ body {
|
||||
margin-top: 0;
|
||||
min-height: 500px;
|
||||
overflow: visible;
|
||||
padding-bottom: 100px;
|
||||
padding-bottom: 120px;
|
||||
background:
|
||||
radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
|
||||
radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
|
||||
@@ -416,13 +416,14 @@ body {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Left column occupies exactly 46% of width to avoid diagonal overlap */
|
||||
/* Left column occupies exactly 48% of width to avoid diagonal overlap */
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 46%;
|
||||
max-width: 46%;
|
||||
width: 48%;
|
||||
max-width: 48%;
|
||||
padding-top: 94px;
|
||||
padding-bottom: 40px;
|
||||
animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
@@ -435,7 +436,7 @@ body {
|
||||
.service-cards-wrapper {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-top: -85px;
|
||||
margin-top: -40px;
|
||||
padding-left: var(--spacing-margin-desktop);
|
||||
padding-right: var(--spacing-margin-desktop);
|
||||
}
|
||||
@@ -446,7 +447,7 @@ body {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
background: #120018;
|
||||
padding-bottom: 110px;
|
||||
padding-bottom: 40px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -491,7 +492,7 @@ body {
|
||||
.service-cards-wrapper {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-top: -48px;
|
||||
margin-top: 32px;
|
||||
overflow-x: auto;
|
||||
padding-left: var(--spacing-margin-mobile);
|
||||
padding-right: var(--spacing-margin-mobile);
|
||||
|
||||
@@ -35,7 +35,7 @@ const OFFERINGS = [
|
||||
descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
|
||||
icon: "travel_explore",
|
||||
color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
|
||||
image: "/images/slider-courier-mask.png",
|
||||
image: "/images/slider-courier-mask-purple-v5.png",
|
||||
isWide: false
|
||||
},
|
||||
{
|
||||
@@ -101,6 +101,39 @@ const STATS = [
|
||||
{ count: "100+", label: "Service Providers", icon: "handyman" }
|
||||
];
|
||||
|
||||
const APP_BENEFITS = [
|
||||
{
|
||||
icon: "store",
|
||||
title: "Nearby Stores",
|
||||
microcopy: "Support local shopkeepers",
|
||||
text: "Find and explore the unique shops in your immediate area.",
|
||||
iconClass: "bg-amber-500/10 border-amber-500/20 text-amber-300",
|
||||
cardClass: "lg:translate-x-[-10px] lg:-translate-y-2 lg:rotate-[-1deg]",
|
||||
bgVisual: "store",
|
||||
bgVisualClass: "text-amber-500/5"
|
||||
},
|
||||
{
|
||||
icon: "favorite",
|
||||
title: "Save Favourites",
|
||||
microcopy: "Your daily picks, one tap away",
|
||||
text: "Keep your trusted local merchants always within reach.",
|
||||
iconClass: "bg-rose-500/10 border-rose-500/20 text-rose-300",
|
||||
cardClass: "lg:translate-x-[10px] lg:translate-y-0 lg:rotate-[1deg]",
|
||||
bgVisual: "favorite",
|
||||
bgVisualClass: "text-rose-500/5"
|
||||
},
|
||||
{
|
||||
icon: "local_offer",
|
||||
title: "Local Offers",
|
||||
microcopy: "Deals from people you know",
|
||||
text: "Unlock exclusive deals directly from nearby neighbourhood shops.",
|
||||
iconClass: "bg-emerald-500/10 border-emerald-500/20 text-emerald-300",
|
||||
cardClass: "lg:translate-x-[-5px] lg:translate-y-2 lg:rotate-[-0.5deg]",
|
||||
bgVisual: "local_offer",
|
||||
bgVisualClass: "text-emerald-500/5"
|
||||
}
|
||||
];
|
||||
|
||||
export default function PeoplePage() {
|
||||
const [slideIndex, setSlideIndex] = useState(0);
|
||||
|
||||
@@ -218,76 +251,348 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
|
||||
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
|
||||
<div className="max-w-xl text-on-primary text-center lg:text-left">
|
||||
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
|
||||
GET READY NOW
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight">
|
||||
Download Nearle
|
||||
</h2>
|
||||
<p className="text-body-lg text-white/80 font-bold mb-2">
|
||||
Enjoy the benefits of Neighbourhood Living.
|
||||
</p>
|
||||
<p className="text-body-md text-white/60 mb-8">
|
||||
Proudly support your neighbourhood businesses and get everything delivered in minutes.
|
||||
</p>
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-20">
|
||||
<div className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2.5rem] p-8 md:p-12 lg:p-14 relative overflow-hidden shadow-2xl border border-white/5">
|
||||
{/* Subtle ambient light gradient overlays */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
|
||||
|
||||
{/* App badges */}
|
||||
<div className="flex flex-wrap gap-4 justify-center lg:justify-start">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
|
||||
<div className="text-sm font-black">App Store</div>
|
||||
{/* Background dot pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.015] pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(circle at 50% 50%, white 1px, transparent 1px)",
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Background layered glow effects */}
|
||||
<div className="absolute -left-20 -top-20 w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[100px] pointer-events-none -z-0" />
|
||||
<div className="absolute right-10 bottom-10 w-96 h-96 bg-brand-accent/5 rounded-full blur-[100px] pointer-events-none -z-0" />
|
||||
|
||||
{/* Soft blurred glow behind middle cards */}
|
||||
<div className="absolute left-[35%] top-[15%] w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[90px] pointer-events-none -z-0 hidden lg:block" />
|
||||
|
||||
{/* Subtle route connector dotted line */}
|
||||
<svg className="absolute inset-0 w-full h-full pointer-events-none stroke-white/5 fill-none -z-0 hidden lg:block" viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M 100,130 C 250,60 380,120 480,180 C 580,240 680,180 820,130 C 950,80 1100,130 1100,220" strokeDasharray="5,5" strokeWidth="1.5" />
|
||||
</svg>
|
||||
|
||||
{/* Decorative human local-commerce elements */}
|
||||
<div className="absolute left-[8%] top-[22%] text-white/5 pointer-events-none select-none -z-0 animate-pulse [animation-duration:8s] hidden lg:block">
|
||||
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
|
||||
<MaterialIcon icon="location_on" size={16} className="text-brand-accent/40" />
|
||||
<span className="text-[10px] font-bold text-white/30 tracking-wider">Nearby</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-[42%] top-[8%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:9s] hidden lg:block">
|
||||
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
|
||||
<MaterialIcon icon="shopping_basket" size={16} className="text-amber-300/40" />
|
||||
<span className="text-[10px] font-bold text-white/30 tracking-wider">Grocery</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute right-[44%] bottom-[12%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:10s] hidden lg:block">
|
||||
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
|
||||
<MaterialIcon icon="restaurant" size={16} className="text-orange-400/40" />
|
||||
<span className="text-[10px] font-bold text-white/30 tracking-wider">Eats</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* ──────────────────────────────────────────────────────── */}
|
||||
{/* 🖥️ DESKTOP LAYOUT (lg and above) */}
|
||||
{/* ──────────────────────────────────────────────────────── */}
|
||||
<div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
|
||||
{/* Left Column: Copy & Download badges (Desktop) */}
|
||||
<div className="lg:col-span-5 text-left flex flex-col justify-between h-full lg:border-r lg:border-white/10 lg:pr-10">
|
||||
<div>
|
||||
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
|
||||
NEARLE APP
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
|
||||
Your Neighbourhood, <br className="hidden lg:block"/>Now in Your Pocket.
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-white/90 font-bold mb-3 leading-relaxed">
|
||||
Browse nearby stores, save your favourites, and order everyday essentials with ease.
|
||||
</p>
|
||||
<p className="text-sm md:text-base text-white/75 mb-6 leading-relaxed">
|
||||
Discover groceries, medicines, food, and local offers from stores you already know and trust.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* App badges (Desktop Only) */}
|
||||
<div className="flex flex-col gap-2 mt-8">
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
|
||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
|
||||
<div className="text-sm font-black">Google Play</div>
|
||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
|
||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual element representing App */}
|
||||
<div className="relative shrink-0 w-full max-w-[280px]">
|
||||
<div className="bg-brand-dark-surface w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-6">
|
||||
<div className="flex items-center justify-between text-white/40">
|
||||
<MaterialIcon icon="signal_cellular_alt" size={16} />
|
||||
<MaterialIcon icon="battery_full" size={16} />
|
||||
</div>
|
||||
|
||||
{/* Mock UI */}
|
||||
<div className="my-auto text-center text-white space-y-4">
|
||||
<div className="w-14 h-14 bg-brand-accent text-brand-dark rounded-2xl flex items-center justify-center mx-auto shadow-lg animate-pulse-subtle">
|
||||
<MaterialIcon icon="local_shipping" size={32} />
|
||||
{/* Middle Column: Benefit Cards (Desktop Only - staggered layout) */}
|
||||
<div className="lg:col-span-3 flex flex-col justify-center gap-5">
|
||||
{APP_BENEFITS.map((b) => (
|
||||
<div key={b.title} className={`relative overflow-hidden bg-white/[0.06] backdrop-blur-md border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center hover:bg-white/[0.1] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 shadow-lg shadow-black/10 ${b.cardClass}`}>
|
||||
<div className={`absolute -right-4 -bottom-4 opacity-40 pointer-events-none select-none ${b.bgVisualClass}`}>
|
||||
<MaterialIcon icon={b.bgVisual} size={72} />
|
||||
</div>
|
||||
<div className={`flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center border shadow-inner ${b.iconClass}`}>
|
||||
<MaterialIcon icon={b.icon} size={20} />
|
||||
</div>
|
||||
<div className="text-left relative z-10">
|
||||
<h4 className="text-base md:text-lg font-black text-white leading-none">{b.title}</h4>
|
||||
<p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1.5">{b.microcopy}</p>
|
||||
<p className="text-xs text-white/85 font-semibold leading-relaxed">{b.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column: Phone Mockup (Desktop Only) */}
|
||||
<div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
|
||||
{/* Subtle soft glow behind phone */}
|
||||
<div className="absolute inset-0 bg-[#bd34fe]/25 rounded-full blur-[60px] opacity-40 -z-10 animate-pulse [animation-duration:5s]" />
|
||||
|
||||
{/* Label above phone */}
|
||||
<div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap z-20">
|
||||
Made for your neighbourhood
|
||||
</div>
|
||||
|
||||
{/* iPhone style phone container */}
|
||||
<div className="bg-[#120217] w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-4 ring-4 ring-white/5">
|
||||
{/* Status Bar */}
|
||||
<div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2">
|
||||
<span>Good evening 👋</span>
|
||||
<div className="flex items-center gap-1 opacity-60">
|
||||
<MaterialIcon icon="signal_cellular_alt" size={12} />
|
||||
<MaterialIcon icon="battery_full" size={12} />
|
||||
</div>
|
||||
<h4 className="font-display font-black text-lg text-brand-accent">Nearle App</h4>
|
||||
<p className="text-[11px] text-white/70">Coimbatore neighborhood orders delivered in 15 mins.</p>
|
||||
</div>
|
||||
|
||||
<div className="h-1.5 w-1/3 bg-white/20 rounded-full mx-auto" />
|
||||
{/* Mock Search Field */}
|
||||
<div className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-center gap-2 text-white/60 text-xs mt-1">
|
||||
<MaterialIcon icon="search" size={14} className="text-white/40" />
|
||||
<span>Search nearby stores</span>
|
||||
</div>
|
||||
|
||||
{/* Mock Category Icons */}
|
||||
<div className="grid grid-cols-3 gap-2 mt-4">
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" />
|
||||
<span className="text-[9px] font-bold text-white/80 mt-1">Grocery</span>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="medical_services" size={18} className="text-purple-400" />
|
||||
<span className="text-[9px] font-bold text-white/80 mt-1">Pharmacy</span>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="restaurant" size={18} className="text-orange-400" />
|
||||
<span className="text-[9px] font-bold text-white/80 mt-1">Food</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mock Store Cards */}
|
||||
<div className="space-y-2 mt-4 my-auto">
|
||||
<div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={16} className="text-brand-accent" />
|
||||
</div>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-xs font-black text-white">Daily Groceries</div>
|
||||
<div className="text-[9px] text-white/60">Verified Store • Nearby</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="health_and_safety" size={16} className="text-purple-300" />
|
||||
</div>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-xs font-black text-white">Health & Care</div>
|
||||
<div className="text-[9px] text-white/60">Verified Pharmacy • Nearby</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtitle / Nearle App Label */}
|
||||
<div className="mt-4 pt-2 border-t border-white/5 text-center">
|
||||
<p className="text-[9px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
|
||||
<p className="text-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
|
||||
</div>
|
||||
|
||||
{/* Mock Bottom Navigation */}
|
||||
<div className="flex justify-around items-center text-white/40 pt-2 pb-1 border-t border-white/5 mt-2">
|
||||
<MaterialIcon icon="home" size={14} className="text-brand-accent" />
|
||||
<MaterialIcon icon="search" size={14} />
|
||||
<MaterialIcon icon="favorite" size={14} />
|
||||
<MaterialIcon icon="person" size={14} />
|
||||
</div>
|
||||
|
||||
<div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Overlapping alert bubble */}
|
||||
<div className="absolute -left-16 bottom-[15%] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 animate-float max-w-[210px] z-20 hover:scale-105 transition-transform duration-300 pointer-events-none">
|
||||
<div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
<MaterialIcon
|
||||
icon="check_circle"
|
||||
size={16}
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ──────────────────────────────────────────────────────── */}
|
||||
{/* 📱 MOBILE / TABLET LAYOUT (below lg) */}
|
||||
{/* ──────────────────────────────────────────────────────── */}
|
||||
<div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
|
||||
{/* Heading and Description */}
|
||||
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
|
||||
NEARLE APP
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
|
||||
Your Neighbourhood, <br />Now in Your Pocket.
|
||||
</h2>
|
||||
<p className="text-base md:text-lg text-white/90 font-bold mb-3 max-w-md">
|
||||
Browse nearby stores, save your favourites, and order everyday essentials with ease.
|
||||
</p>
|
||||
<p className="text-xs md:text-sm text-white/70 mb-6 max-w-md">
|
||||
Discover groceries, medicines, food, and local offers from stores you already know and trust.
|
||||
</p>
|
||||
|
||||
{/* Made for your neighbourhood eyebrow */}
|
||||
<div className="mb-4 mt-6 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap">
|
||||
Made for your neighbourhood
|
||||
</div>
|
||||
|
||||
{/* Compact Phone Preview */}
|
||||
<div className="bg-[#120217] w-full max-w-[250px] md:max-w-[280px] aspect-[9/15.5] rounded-[2.2rem] border-[5px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-3 ring-4 ring-white/5 my-4">
|
||||
{/* Status Bar */}
|
||||
<div className="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1">
|
||||
<span>Good evening 👋</span>
|
||||
<div className="flex items-center gap-1 opacity-60">
|
||||
<MaterialIcon icon="signal_cellular_alt" size={10} />
|
||||
<MaterialIcon icon="battery_full" size={10} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mock Search Field */}
|
||||
<div className="bg-white/10 border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-2 text-white/60 text-[10px] mt-0.5">
|
||||
<MaterialIcon icon="search" size={12} className="text-white/40" />
|
||||
<span>Search nearby stores</span>
|
||||
</div>
|
||||
|
||||
{/* Mock Category Icons */}
|
||||
<div className="grid grid-cols-3 gap-1 mt-2">
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" />
|
||||
<span className="text-[7.5px] font-bold text-white/80 mt-0.5">Grocery</span>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="medical_services" size={14} className="text-purple-400" />
|
||||
<span className="text-[7.5px] font-bold text-white/80 mt-0.5">Pharmacy</span>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
|
||||
<MaterialIcon icon="restaurant" size={14} className="text-orange-400" />
|
||||
<span className="text-[7.5px] font-bold text-white/80 mt-0.5">Food</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mock Store Cards (Only One Card on Mobile) */}
|
||||
<div className="space-y-1.5 mt-2 my-auto">
|
||||
<div className="bg-white/10 border border-white/10 rounded-xl p-2 flex items-center gap-2.5">
|
||||
<div className="w-7 h-7 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={12} className="text-brand-accent" />
|
||||
</div>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[10px] font-black text-white">Daily Groceries</div>
|
||||
<div className="text-[8px] text-white/60">Verified Store • Nearby</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtitle / Nearle App Label */}
|
||||
<div className="mt-2 pt-1 border-t border-white/5 text-center">
|
||||
<p className="text-[8px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
|
||||
<p className="text-[8.5px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
|
||||
</div>
|
||||
|
||||
{/* Mock Bottom Navigation */}
|
||||
<div className="flex justify-around items-center text-white/40 pt-1.5 pb-0.5 border-t border-white/5 mt-1">
|
||||
<MaterialIcon icon="home" size={12} className="text-brand-accent" />
|
||||
<MaterialIcon icon="search" size={12} />
|
||||
<MaterialIcon icon="favorite" size={12} />
|
||||
<MaterialIcon icon="person" size={12} />
|
||||
</div>
|
||||
|
||||
<div className="h-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Order Confirmation Card */}
|
||||
<div className="w-full max-w-[320px] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 mt-4">
|
||||
<div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
<MaterialIcon
|
||||
icon="check_circle"
|
||||
size={16}
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compact Benefits List */}
|
||||
<div className="w-full max-w-[340px] md:max-w-[400px] flex flex-col gap-3 mt-6">
|
||||
{APP_BENEFITS.map((b) => (
|
||||
<div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3 flex gap-3 items-center text-left">
|
||||
<div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
|
||||
<MaterialIcon icon={b.icon} size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
|
||||
<p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Coming Soon Download Buttons */}
|
||||
<div className="flex flex-col items-center gap-2 mt-8 w-full">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full max-w-[320px] sm:max-w-none">
|
||||
<div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
|
||||
<MaterialIcon icon="phone_iphone" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md">
|
||||
<MaterialIcon icon="play_arrow" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,24 +3,25 @@ import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const QUICK_LINKS = [
|
||||
{
|
||||
name: "Daily Groceries",
|
||||
icon: "shopping_basket",
|
||||
label: "Fresh & On-Time",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Hot Meals",
|
||||
icon: "fastfood",
|
||||
label: "Quick & tasty",
|
||||
},
|
||||
{
|
||||
name: "Daily Groceries",
|
||||
icon: "shopping_basket",
|
||||
label: "Fresh & On-Time",
|
||||
},
|
||||
{
|
||||
name: "Health & Care",
|
||||
name: "wellness ",
|
||||
icon: "medical_services",
|
||||
label: "Essential & Trusted",
|
||||
},
|
||||
{
|
||||
name: "More Services",
|
||||
icon: "grid_view",
|
||||
icon: "store",
|
||||
label: "Explore More",
|
||||
},
|
||||
];
|
||||
@@ -56,11 +57,11 @@ export function Hero() {
|
||||
Neighbourhood commerce, made simple
|
||||
</span>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-[60px] xl:text-[70px] 2xl:text-[84px] lg:leading-[1.1] font-display font-black tracking-tight mb-8">
|
||||
Your Favourite
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-[52px] xl:text-[62px] 2xl:text-[74px] lg:leading-[1.15] font-display font-black tracking-tight mb-8">
|
||||
Your Favourite Local Stores,
|
||||
<br />
|
||||
<span className="text-brand-accent drop-shadow-md">
|
||||
Local Stores, Now at Your Doorstep.
|
||||
Now at Your Doorstep.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
@@ -69,16 +70,16 @@ export function Hero() {
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
<div className="flex flex-col md:flex-row md:flex-wrap gap-4 mt-8 w-full md:w-auto">
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
|
||||
>
|
||||
Explore Nearby Stores
|
||||
</Link>
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap"
|
||||
>
|
||||
List Your Store
|
||||
</Link>
|
||||
@@ -98,10 +99,7 @@ export function Hero() {
|
||||
<MaterialIcon icon="local_shipping" size={18} className="text-brand-accent" />
|
||||
<span>Neighbourhood delivery</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MaterialIcon icon="location_on" size={18} className="text-brand-accent" />
|
||||
<span>Available in Coimbatore</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Mobile/Tablet Only Nearle Bag Logo with context pins */}
|
||||
@@ -116,19 +114,7 @@ export function Hero() {
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* Mobile Context Pins */}
|
||||
<div className="absolute top-[10%] left-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10">
|
||||
<MaterialIcon icon="shopping_basket" size={14} className="text-secondary" />
|
||||
<span className="text-xs font-black text-brand-dark">Groceries</span>
|
||||
</div>
|
||||
<div className="absolute top-[40%] right-[-15px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
|
||||
<MaterialIcon icon="medical_services" size={14} className="text-primary" />
|
||||
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
|
||||
</div>
|
||||
<div className="absolute bottom-[5%] left-[5px] bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-xl border border-outline-variant/20 shadow-md flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
|
||||
<MaterialIcon icon="restaurant" size={14} className="text-orange-600" />
|
||||
<span className="text-xs font-black text-brand-dark">Food</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,19 +135,7 @@ export function Hero() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Context Pins */}
|
||||
<div className="absolute top-[20%] left-[10%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10">
|
||||
<MaterialIcon icon="shopping_basket" size={16} className="text-secondary" />
|
||||
<span className="text-xs font-black text-brand-dark">Groceries</span>
|
||||
</div>
|
||||
<div className="absolute top-[45%] right-[5%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:1.5s]">
|
||||
<MaterialIcon icon="medical_services" size={16} className="text-primary" />
|
||||
<span className="text-xs font-black text-brand-dark">Pharmacy</span>
|
||||
</div>
|
||||
<div className="absolute bottom-[25%] left-[15%] bg-white/95 backdrop-blur-sm px-3.5 py-2 rounded-2xl border border-outline-variant/20 shadow-lg flex items-center gap-1.5 animate-float z-10 [animation-delay:0.7s]">
|
||||
<MaterialIcon icon="restaurant" size={16} className="text-orange-600" />
|
||||
<span className="text-xs font-black text-brand-dark">Food</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user