Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update redesign

Browse Source
This commit is contained in:
Aravind
2026-06-24 18:31:06 +05:30
parent 6ddfc57217
commit d3c7d93cef
23 changed files with 1756 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/app/about/page.tsx
View File

@@ -1,7 +1,9 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -14,7 +16,7 @@ const STRATEGY_CARDS = [
title: "Our Mission",
descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
icon: "target",
color: "bg-primary/5 text-primary border-primary/10"
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
},
{
title: "Our Vision",
@@ -26,131 +28,169 @@ const STRATEGY_CARDS = [
title: "Why Nearle",
descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
icon: "help_outline",
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
}
];
const COUNTERS = [
const LOCAL_COUNTERS = [
{ count: "100+", label: "Customers Served", icon: "people" },
{ count: "100+", label: "Active Businesses", icon: "store" },
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
];
export default function AboutPage() {
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Hero Section ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/about.png"
alt="About Nearle Background"
fill
sizes="100vw"
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-[#120217]/50" />
</div>
const HERO_STATS = [
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
{ title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
];
<div className="relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
We are Nearle
</p>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
We build Neighbourhoods.
export default function AboutPage() {
const collageCards = [
{ text: "Local First", icon: "store" },
{ text: "Trusted Network", icon: "verified" },
{ text: "Connected Communities", icon: "groups" }
];
return (
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
{/* TWO-COLUMN GRID */}
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
{/* Left Column: Copy & Actions */}
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
About Nearle
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Built for Every
<br />
<span className="text-[#6330D6]">Neighbourhood.</span>
</h1>
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
</p>
</div>
</section>
{/* ─── Intro Description Block ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
Our Platform
</span>
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6">
Nearle Neighbourhood Commerce
</h2>
<p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
</p>
</section>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{STRATEGY_CARDS.map((card) => (
<div
key={card.title}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col text-left"
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#story-section"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
>
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
<MaterialIcon icon={card.icon} size={24} />
</div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
{card.title}
</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
{card.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Global Stats counters ─── */}
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{COUNTERS.map((c) => (
<div key={c.label} className="flex flex-col items-center text-center">
<div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
<MaterialIcon icon={c.icon} size={24} />
</div>
<h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
<p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
{c.label}
</p>
</div>
))}
</div>
</section>
{/* ─── Brand Building Banner ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
<div className="max-w-4xl mx-auto">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
Don&apos;t miss the opportunity
</span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
Build Your Brand with Nearle
</h2>
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
</p>
<div className="flex flex-wrap justify-center gap-4">
Our Story
</a>
<Link
href="/businesses"
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
<MaterialIcon icon="bolt" size={18} />
<span>Register Merchant</span>
</Link>
<Link
href="/people"
className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="download" size={18} />
<span>Download App</span>
Join Our Journey
</Link>
</div>
</div>
</section>
</div>
</main>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/Nearle Business.png"
rightImage="/nearle people.png"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
{/* BOTTOM HERO STATS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_STATS} />
</div>
</section>
{/* ─── Intro Description Block ─── */}
<section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our Platform
</span>
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-4">
Nearle Neighbourhood Commerce
</h2>
<p className="mx-auto max-w-3xl text-sm md:text-base text-[#5E5866] leading-relaxed font-semibold">
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
</p>
</section>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{STRATEGY_CARDS.map((card) => (
<div
key={card.title}
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
>
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 shrink-0 ${card.color}`}>
<MaterialIcon icon={card.icon} size={22} />
</div>
<h3 className="font-display text-lg font-black text-[#16001D] mb-3">
{card.title}
</h3>
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
{card.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Global Stats counters ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{LOCAL_COUNTERS.map((c) => (
<div key={c.label} className="flex flex-col items-center text-center">
<div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={c.icon} size={22} />
</div>
<h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label}
</p>
</div>
))}
</div>
</section>
{/* ─── Brand Building Banner ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
<div className="max-w-4xl mx-auto">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Don&apos;t miss the opportunity
</span>
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4 mb-4">
Build Your Brand with Nearle
</h2>
<p className="text-xs md:text-sm text-[#5E5866] max-w-2xl mx-auto mb-8 leading-relaxed font-semibold">
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
</p>
<div className="flex flex-wrap justify-center gap-4">
<Link
href="/businesses"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-lg transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="bolt" size={18} />
<span>Register Merchant</span>
</Link>
<Link
href="/people"
className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="download" size={18} />
<span>Download App</span>
</Link>
</div>
</div>
</section>
</PremiumPageShell>
);
}

407
src/app/businesses/page.tsx
View File

@@ -1,15 +1,11 @@
"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_WORDS = [
"Stand above your competitors!",
// "Reach the right people, near you.",
"Get noticed in your locality!"
];
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
const PROCESS_STEPS = [
{
@@ -17,7 +13,7 @@ const PROCESS_STEPS = [
title: "Get Online",
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
icon: "storefront",
color: "bg-primary/5 text-primary border-primary/10"
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
},
{
step: "02",
@@ -31,7 +27,7 @@ const PROCESS_STEPS = [
title: "Get Simplified",
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
icon: "auto_awesome",
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
}
];
@@ -71,211 +67,240 @@ const FEATURES = [
];
const STATS = [
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" }
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
];
const HERO_BENEFITS = [
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
{ title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
{ title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
];
export default function BusinessesPage() {
const [wordIndex, setWordIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length);
}, 3000);
return () => clearInterval(timer);
}, []);
const collageCards = [
{ text: "Nearby Customers", icon: "people" },
{ text: "Orders & Offers", icon: "local_offer" },
{ text: "Local Delivery Support", icon: "local_shipping" }
];
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Hero Section with Animated Rotator ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/Nearle Business.png"
alt="Nearle Business Background"
fill
sizes="100vw"
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-[#120217]/50" />
</div>
<div className="relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
{/* TWO-COLUMN GRID */}
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
{/* Left Column: Copy & Actions */}
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Nearle for Business
</p>
</span>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
<span>Power your business.</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Grow Your Local Business,
<br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_WORDS[wordIndex]}
</span>
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
</h1>
</div>
</section>
{/* ─── Intro Highlight Banner ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
<div className="max-w-2xl text-left">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
Together, we grow
</span>
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight">
Get set in minutes and delight the Neighborhood
</h2>
<p className="text-body-md text-on-surface-variant leading-relaxed">
Nearle is built to help businesses like <strong className="text-primary">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
</p>
</div>
<div className="flex gap-4 shrink-0">
<Link
href="/contact"
className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2"
>
<MaterialIcon icon="chat" size={18} />
<span>Talk to an Expert</span>
</Link>
</div>
</section>
{/* ─── Timeline / Core Process Steps ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
<div className="text-center mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
How it works
</span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
Build Your Neighborhood Brand
</h2>
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PROCESS_STEPS.map((ps) => (
<div
key={ps.step}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
>
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
{ps.step}
</div>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
<MaterialIcon icon={ps.icon} size={28} />
</div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3 text-left">
{ps.title}
</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
{ps.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Grid Stats & Value Prop ─── */}
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
<div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left side: features block (7 cols) */}
<div className="lg:col-span-7 text-left">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
Our features
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6">
Move Your Business Forward
</h2>
<p className="text-body-md text-on-surface-variant mb-12 max-w-2xl">
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
{FEATURES.map((feat) => (
<div key={feat.title} className="flex gap-4">
<div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
<MaterialIcon icon="check" size={16} className="font-black" />
</div>
<div>
<h4 className="font-display text-[15px] font-black text-brand-dark mb-1">
{feat.title}
</h4>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
{feat.descr}
</p>
</div>
</div>
))}
</div>
List Your Store
</a>
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
Explore Solutions
</Link>
</div>
</div>
{/* Right side: stats quadrant (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
{STATS.map((stat, i) => (
<div
key={stat.label}
className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
i % 2 === 1 ? "lg:mt-8" : ""
}`}
>
<div className="flex items-center justify-between">
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
}`}>
<MaterialIcon icon={stat.icon} size={20} />
</div>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/cat-daily-essentials.png"
rightImage="/Nearle Business.png"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
{/* BOTTOM HERO BENEFITS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_BENEFITS} />
</div>
</section>
{/* ─── Intro Highlight Banner ─── */}
<section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
<div className="max-w-2xl text-left">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
Together, we grow
</span>
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-3 leading-tight">
Get set in minutes and delight the Neighborhood
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
Nearle is built to help businesses like <strong className="text-[#6330D6]">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
</p>
</div>
<div className="flex gap-4 shrink-0">
<Link
href="/contact"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm shadow-md active:scale-95 transition-all flex items-center gap-2"
>
<MaterialIcon icon="chat" size={18} />
<span>Talk to an Expert</span>
</Link>
</div>
</section>
{/* ─── Timeline / Core Process Steps ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
<div className="text-center mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
How it works
</span>
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
Build Your Neighborhood Brand
</h2>
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PROCESS_STEPS.map((ps) => (
<div
key={ps.step}
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
>
<div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
{ps.step}
</div>
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
<MaterialIcon icon={ps.icon} size={22} />
</div>
<h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
{ps.title}
</h3>
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
{ps.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Grid Stats & Value Prop ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
{/* Left side: features block (7 cols) */}
<div className="lg:col-span-7 text-left">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our features
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
Move Your Business Forward
</h2>
<p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{FEATURES.map((feat) => (
<div key={feat.title} className="flex gap-3">
<div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
<MaterialIcon icon="check" size={14} className="font-black" />
</div>
<div className="mt-8">
<p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
<p className={`text-[11px] font-bold mt-1 ${
stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
}`}>
{stat.label}
<div>
<h4 className="font-display text-sm font-black text-[#16001D] mb-1">
{feat.title}
</h4>
<p className="text-xs text-[#5E5866] leading-relaxed">
{feat.descr}
</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* ─── Join/Download Call to Action ─── */}
<section className="bg-primary rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-12 md:p-20 relative text-center">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
Nearle is Essential for Business Growth
</h2>
<p className="text-body-lg text-white/80 mb-10 leading-relaxed">
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
</p>
<div className="flex flex-wrap justify-center gap-4">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
{/* Right side: stats quadrant (5 cols) */}
<div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
{STATS.map((stat, i) => (
<div
key={stat.label}
className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
i % 2 === 1 ? "lg:mt-4" : ""
}`}
>
<MaterialIcon icon="bolt" size={18} />
<span>Register as Partner</span>
</a>
<Link
href="/contact"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="phone" size={18} />
<span>Contact Experts</span>
</Link>
</div>
<div className="flex items-center justify-between">
<div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
}`}>
<MaterialIcon icon={stat.icon} size={18} />
</div>
</div>
<div className="mt-6">
<p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
<p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
}`}>
{stat.label}
</p>
</div>
</div>
))}
</div>
</section>
</div>
</main>
</div>
</section>
{/* ─── Join/Download Call to Action ─── */}
<section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto">
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
Nearle is Essential for Business Growth
</h2>
<p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
</p>
<div className="flex flex-wrap justify-center gap-3.5">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="bolt" size={18} />
<span>Register as Partner</span>
</a>
<Link
href="/contact"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
>
<MaterialIcon icon="phone" size={18} />
<span>Contact Experts</span>
</Link>
</div>
</div>
</section>
</PremiumPageShell>
);
}

271
src/app/contact/page.tsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -10,189 +11,121 @@ export const metadata: Metadata = {
export default function ContactPage() {
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Redesigned Hero/Contact Section ─── */}
<section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
{/* Subtle decorative blurred purple glow behind left content */}
<div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
<div className="w-full mx-auto relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
{/* Left Column — MUST BE VISIBLE */}
<div className="relative z-10 text-white max-w-[580px] text-left">
<span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
LET’S CONNECT
</span>
<h1 className="mt-4 font-display text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] text-white">
Let’s Build Better Neighbourhoods Together.
</h1>
<p className="text-white/70 text-lg leading-relaxed mt-6">
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</p>
<PremiumPageShell>
{/* ─── Contact Section ─── */}
<section className="relative px-6 py-12 md:px-12 lg:px-16 border-b border-[#6330D6]/10">
{/* Subtle Map Grid/Location decoration behind left content */}
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
<svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
<path d="M0,50 L400,50 M0,130 L400,130 M0,210 L400,210 M80,0 L80,300 M200,0 L200,300 M320,0 L320,300" />
<path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
<circle cx="200" cy="130" r="4" fill="currentColor" />
<circle cx="200" cy="130" r="14" strokeWidth="1" />
<circle cx="80" cy="50" r="3" fill="currentColor" />
<circle cx="320" cy="210" r="3" fill="currentColor" />
</svg>
</div>
{/* Info Rows */}
<div className="mt-10 border-t border-white/10">
{/* Row 1 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="location_on" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Based in Coimbatore</h4>
<p className="text-white/60 text-sm mt-0.5">Building neighbourhood commerce, one local store at a time.</p>
</div>
<div className="w-full mx-auto relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
{/* Left Column — Contact Info */}
<div className="relative z-10 text-[#16001D] max-w-[580px] text-left">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Contact Us
</span>
<h1 className="font-display text-4xl md:text-5xl lg:text-[54px] font-black leading-[1.1] text-[#16001D]">
We’re Here to <br />
<span className="text-[#6330D6]">Help You.</span>
</h1>
<p className="text-[#5E5866] text-sm md:text-base font-bold mt-6 leading-relaxed">
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
</p>
{/* Info Rows */}
<div className="mt-8 border-t border-[#6330D6]/10">
{/* Call Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="phone" size={18} />
</div>
{/* Row 2 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="schedule" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Talk to Our Team</h4>
<p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">+91 80 4912 3456 • +91 422 491 2345</p>
</div>
</div>
{/* Row 3 */}
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
<MaterialIcon icon="support_agent" size={20} />
</div>
<div className="text-left">
<h4 className="text-white font-bold">Quick Support</h4>
<p className="text-white/60 text-sm mt-0.5">Share your details and our team will get back to you.</p>
</div>
{/* Email Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="mail" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Email Us</h4>
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">support@nearle.in • partners@nearle.in</p>
</div>
</div>
{/* Visit Us */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="location_on" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Visit Us</h4>
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
</div>
</div>
{/* Helpdesk */}
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="support_agent" size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Helpdesk</h4>
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
</div>
</div>
</div>
{/* Right Column: Form Card */}
<div className="w-full max-w-[520px] lg:ml-auto relative z-10">
<ContactForm />
</div>
</div>
</div>
</section>
{/* ─── Four Contact Info Cards ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{/* Card 1: Location */}
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
<MaterialIcon icon="location_on" size={28} className="text-primary" />
</div>
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
Nearle HQ, 424, Diwan Bahadur Rd,<br />
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
Coimbatore, Tamil Nadu 641002
</p>
<a
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
target="_blank"
rel="noopener noreferrer"
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
>
Get Directions
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
</a>
</div>
{/* Card 2: Phones */}
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
<MaterialIcon icon="call" size={28} className="text-secondary" />
</div>
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
<span>+91 80 4912 3456</span>
<span>+91 422 491 2345</span>
</p>
<div className="mt-auto pt-4 flex gap-4">
<a
href="tel:+918049123456"
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
>
Helpdesk
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
</a>
</div>
</div>
{/* Card 3: Email */}
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
<MaterialIcon icon="mail" size={28} className="text-primary" />
</div>
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
</p>
<a
href="mailto:support@nearle.in"
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
>
Write to us
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
</a>
</div>
{/* Card 4: Working Hours */}
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
</div>
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
Monday - Saturday<br />
9:00 AM - 6:00 PM<br />
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
</p>
<div className="mt-auto pt-4">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
Helpdesk Active
</span>
</div>
{/* Right Column: Compact Form Card */}
<div className="w-full max-w-[480px] lg:ml-auto">
<ContactForm />
</div>
</div>
</section>
</div>
</section>
{/* ─── Map Section ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
<div className="relative w-full h-[450px]">
<iframe
title="Nearle Coimbatore Location Map"
src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="filter contrast-[1.05] saturate-[0.9]"
/>
{/* Map Floating Info Badge */}
<div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3 max-w-sm">
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
<MaterialIcon icon="store" size={20} className="text-white" />
</div>
<div className="text-left">
<h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
</div>
{/* ─── Map Section ─── */}
<section className="p-6 md:p-8 bg-[#FAF7FD]">
<div className="relative w-full h-[400px] rounded-2xl overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
<iframe
title="Nearle Coimbatore Location Map"
src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="filter contrast-[1.05] saturate-[0.9]"
/>
{/* Map Floating Info Badge */}
<div className="absolute bottom-6 left-6 bg-white/95 backdrop-blur-sm rounded-xl p-3.5 border border-[#6330D6]/10 shadow-lg flex items-center gap-3 max-w-[280px]">
<div className="w-8 h-8 rounded-lg bg-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon="store" size={16} className="text-white" />
</div>
<div className="text-left">
<h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
<p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
</div>
</div>
</section>
</div>
</main>
</div>
</section>
</PremiumPageShell>
);
}

140
src/app/globals.css
View File

@@ -2,25 +2,25 @@
/* ─── Design Tokens (Material Design 3 inspired) ─── */
:root {
--surface: #E7D3EF;
--surface: #FAF8FC;
--surface-dim: #dadadc;
--surface-bright: #E7D3EF;
--surface-bright: #FAF8FC;
--surface-container-lowest: #ffffff;
--surface-container-low: #f3f3f6;
--surface-container: #eeeef0;
--surface-container: #F3E8F6;
--surface-container-high: #e8e8ea;
--surface-container-highest: #e2e2e5;
--on-surface: #1a1c1e;
--on-surface-variant: #4d434f;
--on-surface: #16001D;
--on-surface-variant: #6D6172;
--inverse-surface: #2f3133;
--inverse-on-surface: #f0f0f3;
--outline: #7f7381;
--outline-variant: #d0c2d1;
--surface-tint: #83429f;
--primary: #4d046a;
--primary: #65149A;
--on-primary: #ffffff;
--primary-container: #662582;
--on-primary-container: #de96f9;
--primary-container: #7C3AED;
--on-primary-container: #ffffff;
--inverse-primary: #ebb2ff;
--secondary: #006d37;
--on-secondary: #ffffff;
@@ -46,14 +46,14 @@
--tertiary-fixed-dim: #ebc246;
--on-tertiary-fixed: #241a00;
--on-tertiary-fixed-variant: #584400;
--background: #E7D3EF;
--on-background: #1a1c1e;
--background: #E8D8ED;
--on-background: #16001D;
--surface-variant: #e2e2e5;
--brand-dark: #120217;
--brand-dark-surface: #1e0627;
--brand-accent: #e0c8f7;
--brand-accent-light: #E4D0FC;
--brand-cream: #E7D3EF;
--brand-dark: #17001F;
--brand-dark-surface: #25002F;
--brand-accent: #E8D8ED;
--brand-accent-light: #F3E8F6;
--brand-cream: #E8D8ED;
}
/* ─── Tailwind v4 Theme ─── */
@@ -141,10 +141,12 @@
/* ─── Base Styles ─── */
html {
scroll-behavior: smooth;
background: #E8DCF2;
}
body {
background: var(--background);
min-height: 100vh;
background: #E8DCF2 !important;
color: var(--on-surface);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
@@ -1133,35 +1135,113 @@ body {
/* ─── Shared Premium Framed Layout Classes ─── */
.page-canvas {
@apply bg-[#E6D7EA] flex flex-col gap-0;
background-color: #E8D8ED;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
/* Responsive outer page padding */
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 768px) {
.page-canvas {
padding-left: 24px;
padding-right: 24px;
}
}
@media (min-width: 1024px) {
.page-canvas {
padding-left: 32px;
padding-right: 32px;
}
}
@media (min-width: 1280px) {
.page-canvas {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 1536px) {
.page-canvas {
padding-left: 48px;
padding-right: 48px;
}
}
.page-frame {
@apply mx-auto w-full;
max-width: min(100% - 16px, 1560px);
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
/* Responsive vertical spacing between major framed sections */
gap: 16px; /* gap-4 */
}
@media (min-width: 640px) {
@media (min-width: 768px) {
.page-frame {
max-width: min(100% - 24px, 1560px);
gap: 24px; /* gap-6 */
}
}
@media (min-width: 1024px) {
.page-frame {
max-width: min(100% - 40px, 1680px);
gap: 32px; /* gap-8 */
}
}
@media (min-width: 1536px) {
.page-frame {
max-width: min(100% - 56px, 1840px);
/* ─── Section Style Variants ─── */
.section-card-white {
background-color: #FAF8FC;
border: 1px solid rgba(255, 255, 255, 0.50);
border-radius: 1.75rem;
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-white {
border-radius: 2.25rem;
}
}
@media (min-width: 1024px) {
.section-card-white {
border-radius: 2.75rem;
}
}
@media (min-width: 2560px) {
.page-frame {
max-width: min(100% - 96px, 2200px);
.section-card-lavender {
background-color: #F3E8F6;
border: 1px solid rgba(255, 255, 255, 0.50);
border-radius: 1.75rem;
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-lavender {
border-radius: 2.25rem;
}
}
@media (min-width: 1024px) {
.section-card-lavender {
border-radius: 2.75rem;
}
}
.section-card-dark {
background: linear-gradient(to bottom right, #1A0322, #120217, #0A000D);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 2rem;
box-shadow: 0 20px 50px rgba(20, 0, 30, 0.22);
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-dark {
border-radius: 2.5rem;
}
}
@media (min-width: 1024px) {
.section-card-dark {
border-radius: 3rem;
}
}

8
src/app/layout.tsx
View File

@@ -1,8 +1,6 @@
import type { Metadata, Viewport } from "next";
import { Jost } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
const jost = Jost({
subsets: ["latin"],
@@ -94,10 +92,8 @@ export default function RootLayout({
rel="stylesheet"
/>
</head>
<body className="bg-background text-on-surface font-body antialiased" suppressHydrationWarning>
<Navbar />
<main>{children}</main>
<Footer />
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
{children}
</body>
</html>
);

22
src/app/page.tsx
View File

@@ -1,3 +1,4 @@
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { Hero } from "@/components/home/Hero";
import { ServiceCategories } from "@/components/home/ServiceCategories";
import { WhyNearle } from "@/components/home/WhyNearle";
@@ -8,17 +9,14 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
export default function HomePage() {
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-2 md:pt-3 lg:pt-4 pb-0">
<div className="page-frame">
<Hero />
<ServiceCategories />
<WhyNearle />
<HowItWorks />
<HyperlocalFeatures />
<BusinessSection />
<StoreQRSection />
</div>
</main>
<PremiumPageShell>
<Hero />
<ServiceCategories />
<WhyNearle />
<HowItWorks />
<HyperlocalFeatures />
<BusinessSection />
<StoreQRSection />
</PremiumPageShell>
);
}

763
src/app/people/page.tsx
View File

@@ -1,14 +1,12 @@
"use client";
import React, { useState, useEffect } from "react";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_SLIDES = [
"Enjoy your Neighbourhood Living.",
"Just a Click – For all your needs.",
"Convenient & safe shopping locally."
];
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
const OFFERINGS = [
{
@@ -94,7 +92,7 @@ const OFFERINGS = [
}
];
const STATS = [
const LOCAL_STATS = [
{ count: "100+", label: "Verified Restaurants", icon: "restaurant" },
{ count: "100+", label: "Green Grocers", icon: "local_mall" },
{ count: "100+", label: "Home Etailers", icon: "shopping_cart" },
@@ -134,467 +132,394 @@ const APP_BENEFITS = [
}
];
export default function PeoplePage() {
const [slideIndex, setSlideIndex] = useState(0);
const HERO_STATS = [
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
{ title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
{ title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
];
useEffect(() => {
const timer = setInterval(() => {
setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
}, 3000);
return () => clearInterval(timer);
}, []);
export default function PeoplePage() {
const collageCards = [
{ text: "Discover Nearby", icon: "explore" },
{ text: "Save Favourites", icon: "favorite" },
{ text: "Order Anytime", icon: "shopping_bag" }
];
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Hero Section ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="hero-background select-none pointer-events-none">
<Image
src="/nearle people.png"
alt="Nearle People Background"
fill
sizes="100vw"
className="object-cover object-right"
priority
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
{/* TWO-COLUMN GRID */}
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
{/* Left Column: Copy & Actions */}
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Nearle for People
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Your Neighbourhood,
<br />
Now in Your <span className="text-[#6330D6]">Pocket.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#download-section"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
>
Get the App
</a>
<Link
href="/"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
Explore Stores
</Link>
</div>
</div>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/images/app-mockup.png"
leftImage="/images/cat-hot-food.png"
rightImage="/images/cat-health-wellness.png"
glassCards={collageCards}
isPhoneCenter={true}
/>
</div>
</div>
<div className="hero-content relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
Nearle for People
</p>
{/* BOTTOM HERO STATS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_STATS} />
</div>
</section>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
<span>Redefining Local Living.</span>
<br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_SLIDES[slideIndex]}
{/* ─── Bento Grid of Offerings ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What we offer
</span>
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
Everything You Need, Just a Click Away
</h2>
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
</p>
</div>
<div className="experience-grid">
{OFFERINGS.map((offering) => (
<article
key={offering.title}
className="experience-card"
>
<Image
src={offering.image}
alt={offering.title}
fill
sizes="(max-width: 1023px) 100vw, 33vw"
className="experience-card__image"
/>
<div className="experience-card__overlay" />
<div className="experience-card__content text-left">
<div className="experience-card__icon">
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
</div>
<h3>{offering.title}</h3>
<p>{offering.descr}</p>
</div>
</article>
))}
</div>
</section>
{/* ─── Localized Stats Block ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<div className="mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Nearle Network
</span>
<h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
Join the #1 Neighbourhood App
</h2>
<p className="text-xs md:text-sm text-[#5E5866] mt-2">
Bringing local stores to your doorstep instantly.
</p>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
{LOCAL_STATS.map((s) => (
<div
key={s.label}
className="bg-white rounded-2xl p-6 border border-[#6330D6]/10 shadow-[0_4px_16px_rgba(99,48,214,0.01)] flex flex-col items-center text-center group hover:scale-[1.01] transition-transform duration-200"
>
<div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={s.icon} size={20} />
</div>
<h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label}
</p>
</div>
))}
</div>
</section>
{/* ─── Ready to Download Section ─── */}
<section id="download-section" className="p-8 md:p-12 lg:p-16 relative text-center bg-gradient-to-br from-[#16001D] to-[#25002F] text-white">
{/* Subtle glow layers */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
{/* DESKTOP LAYOUT */}
<div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
{/* Left Column: Copy & Download badges */}
<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-[10px] font-black text-brand-accent uppercase tracking-[0.2em]">
NEARLE APP
</span>
</h1>
</div>
</section>
<h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
Your Neighbourhood, <br />Now in Your Pocket.
</h2>
<p className="text-lg 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-xs text-white/75 mb-6 leading-relaxed">
Discover groceries, medicines, food, and local offers from stores you already know and trust.
</p>
</div>
{/* ─── 9 Core Offerings Bento Grid ─── */}
<section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
<div className="mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
What we offer
</span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
Everything You Need, Just a Click Away
</h2>
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
</p>
</div>
<div className="experience-grid">
{OFFERINGS.map((offering) => (
<article
key={offering.title}
className="experience-card"
>
<Image
src={offering.image}
alt={offering.title}
fill
sizes="(max-width: 1023px) 100vw, 33vw"
className="experience-card__image"
/>
<div className="experience-card__overlay" />
<div className="experience-card__content text-left">
<div className="experience-card__icon">
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
<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 hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white">App Store</div>
</div>
<h3>{offering.title}</h3>
<p>{offering.descr}</p>
</div>
</article>
))}
</div>
</section>
{/* ─── Localized Stats Block ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
<div className="mb-12">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
Nearle Network
</span>
<h2 className="font-display text-2xl font-black text-brand-dark mt-1">
Join the #1 Neighbourhood App
</h2>
<p className="text-body-sm text-on-surface-variant mt-2">
Bringing local stores to your doorstep instantly.
</p>
<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 hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white">Google Play</div>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
{STATS.map((s) => (
<div
key={s.label}
className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center"
>
<div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
<MaterialIcon icon={s.icon} size={20} />
{/* Middle Column: Benefit Cards */}
<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] border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center shadow-lg ${b.cardClass}`}>
<div className={`absolute -right-4 -bottom-4 opacity-20 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 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">{b.microcopy}</p>
<p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
</div>
<h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
<p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
{s.label}
</p>
</div>
))}
</div>
</section>
{/* ─── Ready to Download Section ─── */}
<section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-8 md:p-12 lg:p-14 relative text-center">
{/* 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" />
{/* Right Column: Phone Mockup */}
<div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
<div className="absolute inset-0 bg-[#bd34fe]/10 rounded-full blur-[60px] opacity-40 -z-10" />
{/* 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>
<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>
</div>
</div>
</div>
{/* 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>
</div>
{/* 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 text-brand-dark">
<p className="text-xs font-black 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">
<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">
<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={10} />
<MaterialIcon icon="battery_full" size={10} />
<MaterialIcon icon="signal_cellular_alt" size={12} />
<MaterialIcon icon="battery_full" size={12} />
</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" />
<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-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 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-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 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-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 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 (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 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-[10px] font-black text-white">Daily Groceries</div>
<div className="text-[8px] text-white/60">Verified Store • Nearby</div>
<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>
{/* 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 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-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 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-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" />
<div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 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="absolute -left-16 bottom-[15%] bg-white/95 p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 max-w-[210px] z-20 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"
/>
<MaterialIcon icon="check_circle" size={16} className="text-secondary" />
</div>
<div className="text-left text-brand-dark">
<p className="text-xs font-black 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>
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Preparing your order</p>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
{/* MOBILE LAYOUT */}
<div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
<span className="text-[10px] 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-sm text-white/90 font-bold mb-3 max-w-md">
Browse nearby stores, save your favourites, and order everyday essentials with ease.
</p>
<div className="bg-[#120217] w-full max-w-[240px] 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">
<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>
<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 stores</span>
</div>
<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>
<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 • Nearby</div>
</div>
</div>
</div>
<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 stores near you.</p>
</div>
<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>
<div className="w-full max-w-[320px] bg-white/95 p-3 flex items-center gap-3 rounded-2xl shadow-lg border border-outline-variant/10">
<div className="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 text-brand-dark">
<p className="text-xs font-black">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant">Preparing your order</p>
</div>
</div>
<div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
{APP_BENEFITS.map((b) => (
<div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
<div className={`flex-shrink-0 w-8.5 h-8.5 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>
<div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white">App Store</div>
</div>
</div>
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white">Google Play</div>
</div>
</div>
</div>
</div>
</section>
</PremiumPageShell>
);
}