189 lines
11 KiB
TypeScript
189 lines
11 KiB
TypeScript
'use client'
|
|
|
|
export function Download() {
|
|
return (
|
|
<section id="download" className="py-24 sm:py-32 bg-white relative overflow-hidden px-5 sm:px-8 border-t border-purple-soft">
|
|
{/* Background soft glowing blur elements */}
|
|
<div className="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-purple-soft/60 rounded-full blur-3xl -z-10 pointer-events-none" />
|
|
<div className="absolute top-1/3 right-0 -translate-y-1/2 w-[500px] h-[500px] bg-purple-lavender/25 rounded-full blur-3xl -z-10 pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
|
|
|
{/* Left Column: Interactive Mobile Mockup Showcase */}
|
|
<div className="lg:col-span-5 flex justify-center items-center relative">
|
|
|
|
{/* Glowing Backdrop Lights */}
|
|
<div className="absolute -inset-4 bg-gradient-purple rounded-[40px] opacity-10 blur-xl pointer-events-none" />
|
|
|
|
{/* Floating UI Elements */}
|
|
<div className="absolute left-[-20px] top-[15%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float">
|
|
<span className="text-2xl">🥦</span>
|
|
<div>
|
|
<div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Residents</div>
|
|
<div className="text-xs font-extrabold text-nearle-dark">Fresh Greens Delivered</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute right-[-20px] bottom-[20%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float" style={{ animationDelay: '2s' }}>
|
|
<span className="text-2xl">🛵</span>
|
|
<div>
|
|
<div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Rider Network</div>
|
|
<div className="text-xs font-extrabold text-nearle-dark">Optimized Delivery Routes</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Phone Mockup Frame */}
|
|
<div className="w-[280px] h-[560px] rounded-[48px] border-[12px] border-nearle-dark bg-[#0F1115] shadow-2xl relative overflow-hidden flex flex-col justify-between">
|
|
|
|
{/* Camera Notch */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-nearle-dark rounded-b-2xl z-30" />
|
|
|
|
{/* Inner Screen Content */}
|
|
<div className="w-full h-full bg-gradient-to-b from-[#1E1129] via-[#0F0916] to-[#0A060E] p-5 pt-8 flex flex-col justify-between relative overflow-hidden select-none">
|
|
|
|
{/* Micro glowing backgrounds inside the phone */}
|
|
<div className="absolute top-[20%] left-[10%] w-32 h-32 bg-purple-primary/20 rounded-full blur-2xl pointer-events-none" />
|
|
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center z-10">
|
|
<div className="text-[11px] font-mono text-purple-lavender">Nearle App</div>
|
|
<div className="text-[11px] font-mono text-white/50">4G LTE</div>
|
|
</div>
|
|
|
|
{/* Main Content inside Mockup */}
|
|
<div className="my-auto flex flex-col gap-5 z-10">
|
|
<div className="text-center">
|
|
<span className="inline-block bg-purple-primary/20 text-purple-accent border border-purple-primary/30 rounded-full px-3 py-1 text-[11px] font-bold tracking-widest uppercase mb-2">
|
|
Hyperlocal Suite
|
|
</span>
|
|
<h4 className="font-display font-extrabold text-xl text-white tracking-tight leading-tight">
|
|
Your World,<br />Inside Your Pocket
|
|
</h4>
|
|
</div>
|
|
|
|
{/* Inside App Preview Cards */}
|
|
<div className="flex flex-col gap-2.5">
|
|
|
|
{/* App item 1 */}
|
|
<div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
|
|
<div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
|
|
🏪
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-[11px] font-bold text-white/40 uppercase">Nearle Partner</div>
|
|
<div className="text-[13px] font-extrabold text-white">Local Merchant App</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* App item 2 */}
|
|
<div className="bg-white/5 border border-white/10 rounded-2xl p-3 flex items-center gap-3 backdrop-blur-sm">
|
|
<div className="w-9 h-9 rounded-xl bg-purple-deep flex items-center justify-center text-base">
|
|
🔮
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-[11px] font-bold text-white/40 uppercase">Nearle Admin</div>
|
|
<div className="text-[13px] font-extrabold text-white">Community Coordinator</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer UI inside Phone */}
|
|
<div className="border-t border-white/10 pt-3 text-center z-10">
|
|
<div className="text-[10px] text-white/40 uppercase tracking-widest">Coimbatore, India</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Premium Text & Direct CTA Layout */}
|
|
<div className="lg:col-span-7 flex flex-col justify-center">
|
|
|
|
<div className="inline-flex items-center gap-2 bg-purple-soft border border-purple-lavender rounded-full px-4 py-1.5 text-purple-deep font-bold text-xs uppercase tracking-wide mb-6 w-fit select-none">
|
|
<span className="w-2 h-2 rounded-full bg-purple-primary animate-ping" />
|
|
<span>Get the Nearle App</span>
|
|
</div>
|
|
|
|
<h2 className="font-display font-extrabold text-3xl sm:text-4xl lg:text-5xl text-nearle-dark tracking-tight leading-[1.1] mb-6">
|
|
Redefine Your<br />
|
|
<span className="bg-gradient-purple bg-clip-text text-transparent">
|
|
Neighbourhood Living
|
|
</span>
|
|
</h2>
|
|
|
|
<p className="font-body text-nearle-mid text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
|
|
Experience the ease of having all local amenities, stores, daily fresh goods, and customized neighborhood home services compiled inside India's #1 hyperlocal platform. Download directly to activate your neighborhood Living.
|
|
</p>
|
|
|
|
{/* Quick Benefits Grid */}
|
|
<div className="grid sm:grid-cols-2 gap-4 mb-10 max-w-lg">
|
|
{[
|
|
{ title: 'Nearle Deal', desc: 'Instantly shop daily goods and fresh groceries.', emoji: '🥦' },
|
|
{ title: 'Nearle Partner', desc: 'Manage catalog products and instant store setups.', emoji: '🏪' },
|
|
{ title: 'Nearle Gear', desc: 'Optimized rider log and route mappings.', emoji: '🛵' },
|
|
{ title: 'Nearle Admin', desc: 'Operate local hubs and coordinate logistics.', emoji: '🔮' },
|
|
].map((b) => (
|
|
<div key={b.title} className="flex gap-3 p-3.5 bg-nearle-bgsoft/60 border border-nearle-border/40 rounded-2xl hover:border-purple-lavender/60 transition duration-300">
|
|
<span className="text-2xl">{b.emoji}</span>
|
|
<div>
|
|
<h5 className="font-display font-extrabold text-sm text-nearle-dark">{b.title}</h5>
|
|
<p className="font-body text-xs text-nearle-mid leading-normal mt-0.5">{b.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Store Badges */}
|
|
<div className="flex flex-col gap-4 pt-6 border-t border-nearle-border/40 max-w-md">
|
|
<h3 className="font-display font-extrabold text-lg text-nearle-dark">
|
|
Download Nearle App
|
|
</h3>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center gap-3">
|
|
<a
|
|
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
|
|
>
|
|
<svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
|
|
<path d="M1.22 0c-.132.087-.22.246-.22.432v23.136c0 .186.088.345.22.432l12.064-12.086L1.22 0zm12.79 12.386l3.64 3.614-5.484 3.066s-5.482 3.07-8.624 4.82l10.468-11.5zm1.346-1.35l3.822-3.768 5.592 3.144c.624.35.624.926 0 1.276l-5.592 3.144-3.822-3.796V11.036zM1.22 24c.132.087.22.246.22.432v-3.094c0-.186-.088-.345-.22-.432l.22 3.094zm-.22-7.314v-9.372c0-.186.088-.345.22-.432l-.22 9.804c-.132-.087-.22-.246-.22-.432v.432z" />
|
|
</svg>
|
|
<div className="text-left leading-tight">
|
|
<div className="text-[8px] text-[#475569] font-medium tracking-wide">GET IT ON</div>
|
|
<div className="text-[12px] font-semibold text-[#111827] -mt-0.5">Google Play</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a
|
|
href="https://apps.apple.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2.5 px-5 py-2.5 rounded-[10px] border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] hover:border-[#CBD5E1] active:bg-[#F1F5F9] transition-all duration-200"
|
|
>
|
|
<svg viewBox="0 0 24 24" className="w-5 h-5 shrink-0" fill="#111827">
|
|
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
|
|
</svg>
|
|
<div className="text-left leading-tight">
|
|
<div className="text-[8px] text-[#475569] font-medium tracking-wide">Download on the</div>
|
|
<div className="text-[12px] font-semibold text-[#111827] -mt-0.5">App Store</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<p className="font-body text-xs text-nearle-light">
|
|
Available on Android and iOS
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|