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

animation fixed in section

Browse Source
This commit is contained in:
Aravind
2026-06-29 16:52:46 +05:30
parent 9449accea6
commit 114b49570b
36 changed files with 2308 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,9 @@ import Image from "next/image";
import Link from "next/link";
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 { AboutHero } from "@/components/heroes/AboutHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -48,93 +49,27 @@ const LOCAL_COUNTERS = [
{ count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
];
const HERO_STATS = [
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
{ title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
{ title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
];
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="border-b border-[#6330D6]/10">
<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 max-w-[1600px] mx-auto">
{/* 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="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 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-[0.98]"
>
Our Story
</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-[0.98]"
>
Join Our Journey
</Link>
</div>
</div>
{/* 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>
</div>
{/* BOTTOM HERO STATS */}
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
<AboutHero />
{/* ─── Intro Description Block ─── */}
<section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 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>
<AnimatedSection>
<section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 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>
</AnimatedSection>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
<section
@@ -145,12 +80,12 @@ export default function AboutPage() {
className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
style={{ maxWidth: 1800 }}
>
<div
<AnimatedGrid
className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
>
{STRATEGY_CARDS.map((card) => (
<div
<AnimatedCard
key={card.title}
className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
style={{ borderRadius: 32 }}
@@ -196,17 +131,17 @@ export default function AboutPage() {
className={card.imgFit}
/>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
{/* ─── Global Stats counters ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<AnimatedGrid 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">
<AnimatedCard 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>
@@ -214,41 +149,43 @@ export default function AboutPage() {
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label}
</p>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</section>
{/* ─── Brand Building Banner ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<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>Explore Nearle</span>
</Link>
<AnimatedSection>
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<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>Explore Nearle</span>
</Link>
</div>
</div>
</div>
</section>
</section>
</AnimatedSection>
</PremiumPageShell>
);
}

185
src/app/brands/page.tsx
View File

@@ -5,6 +5,9 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -215,21 +218,23 @@ export default function BrandsPage() {
{/* ─── What We Offer ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What Nearle Offers Brands
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
The Full Stack of Neighbourhood Commerce
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From your first store listing to city-wide distribution — Nearle builds the infrastructure so you can focus on your product.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What Nearle Offers Brands
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
The Full Stack of Neighbourhood Commerce
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From your first store listing to city-wide distribution — Nearle builds the infrastructure so you can focus on your product.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{WHAT_WE_OFFER.map((item) => (
<div
<AnimatedCard
key={item.title}
className="rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 flex flex-col gap-4 hover:shadow-[0_10px_32px_rgba(22,0,29,0.09)] transition-shadow duration-300"
>
@@ -245,30 +250,32 @@ export default function BrandsPage() {
<h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
<p className="text-sm text-[#5E5866] leading-relaxed">{item.desc}</p>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
{/* ─── Industries ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Industries We Serve
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Your Category Has a Place on Nearle
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle&apos;s neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Industries We Serve
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Your Category Has a Place on Nearle
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle&apos;s neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
<AnimatedGrid className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
{INDUSTRIES.map((industry) => (
<div
<AnimatedCard
key={industry.label}
className="flex flex-col items-center gap-2.5 p-4 rounded-2xl bg-white border border-[#6330D6]/8 hover:border-[#6330D6]/20 hover:shadow-md transition-all duration-200 cursor-default"
>
@@ -276,30 +283,32 @@ export default function BrandsPage() {
<MaterialIcon icon={industry.icon} size={20} />
</div>
<span className="text-[10px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
{/* ─── Partnership Process ─── */}
<section id="partnership" className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md: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 md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
The Partnership Process
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From first conversation to city-wide brand presence in four structured steps.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10 md: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 md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
The Partnership Process
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From first conversation to city-wide brand presence in four structured steps.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{PARTNERSHIP_STEPS.map((step) => (
<article
<AnimatedCard
key={step.num}
className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-[#FAF7FD] p-7 shadow-[0_8px_32px_rgba(22,0,29,0.05)]"
>
@@ -313,9 +322,9 @@ export default function BrandsPage() {
{step.title}
</h3>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</article>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
@@ -323,24 +332,26 @@ export default function BrandsPage() {
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Brand Partner Questions
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
What brand managers usually ask before starting their Nearle partnership.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Talk to our sales team</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
<AnimatedSection>
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Brand Partner Questions
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
What brand managers usually ask before starting their Nearle partnership.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Talk to our sales team</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
</AnimatedSection>
<FAQAccordion items={FAQ_ITEMS} />
</div>
@@ -348,43 +359,17 @@ export default function BrandsPage() {
</section>
{/* ─── CTA Banner ─── */}
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D] text-white">
<div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(99,48,214,0.2),transparent_50%)] pointer-events-none" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(0,109,55,0.12),transparent_45%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto">
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6">
<MaterialIcon icon="hub" size={14} />
Brand Partnership
</span>
<h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
Ready to Grow in
<br />Every Neighbourhood?
</h2>
<p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
Let&apos;s talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand.
</p>
<div className="flex flex-wrap justify-center gap-3.5">
<Link
href="/contact"
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="forum" size={18} />
<span>Talk to Sales</span>
</Link>
<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="mail" size={18} />
<span>Send an Enquiry</span>
</Link>
</div>
</div>
</div>
</div>
</section>
<CTABanner
badge={{ icon: "hub", label: "Brand Partnership" }}
heading={<>Ready to Grow in<br />Every Neighbourhood?</>}
body="Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand."
primary={{ href: "/contact", icon: "forum", label: "Talk to Sales" }}
secondary={{ href: "/contact", icon: "mail", label: "Send an Enquiry" }}
decorations={[
"circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
"circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
]}
/>
</PremiumPageShell>
);
}

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

@@ -3,9 +3,11 @@ import Image from "next/image";
import Link from "next/link";
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 { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
import { BusinessHero } from "@/components/heroes/BusinessHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -15,12 +17,6 @@ export const metadata: Metadata = {
};
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" }
];
function PhoneMapVisual() {
return (
@@ -96,102 +92,42 @@ function PhoneMapVisual() {
}
export default function BusinessesPage() {
const collageCards = [
{ text: "Nearby Customers", icon: "people" },
{ text: "Orders & Offers", icon: "local_offer" },
{ text: "Local Delivery Support", icon: "local_shipping" }
];
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="border-b border-[#6330D6]/10">
<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 max-w-[1600px] mx-auto">
{/* 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
</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="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
</h1>
<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 className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
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-[0.98]"
>
List Your Store
</Link>
<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-[0.98]"
>
Explore Solutions
</Link>
</div>
</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>
</div>
{/* BOTTOM HERO BENEFITS */}
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_BENEFITS} />
</div>
</div>
</section>
<BusinessHero />
{/* ─── Intro Highlight Banner ─── */}
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 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>
<AnimatedSection>
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 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>
</AnimatedSection>
{/* ─── Build Your Neighborhood Brand ─── */}
<section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
<div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
{/* Header */}
<AnimatedSection>
<div className="text-center mb-10 lg:mb-12 xl:mb-10">
<span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
How it works
@@ -203,11 +139,12 @@ export default function BusinessesPage() {
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
</p>
</div>
</AnimatedSection>
{/* Cards grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
{/* Card 1 - Get Online */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
01
</span>
@@ -233,10 +170,10 @@ export default function BusinessesPage() {
/>
</div>
</div>
</article>
</AnimatedCard>
{/* Card 2 - Get Noticed */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
02
</span>
@@ -254,10 +191,10 @@ export default function BusinessesPage() {
<div className="relative z-0 mt-auto h-[270px] lg:h-[290px] flex items-center justify-center">
<PhoneMapVisual />
</div>
</article>
</AnimatedCard>
{/* Card 3 - Get Simplified */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<AnimatedCard className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
03
</span>
@@ -290,8 +227,8 @@ export default function BusinessesPage() {
/>
</div>
</div>
</article>
</div>
</AnimatedCard>
</AnimatedGrid>
</div>
</section>
@@ -299,38 +236,15 @@ export default function BusinessesPage() {
<BusinessFeaturesGrid />
{/* ─── Join/Download Call to Action ─── */}
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
<div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center 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">
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
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 Interest</span>
</Link>
<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>
</div>
</div>
</section>
<CTABanner
heading="Nearle is Essential for Business Growth"
body="Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today."
primary={{ href: "/contact", icon: "bolt", label: "Register Interest" }}
secondary={{ href: "/contact", icon: "phone", label: "Contact Experts" }}
decorations={[
"circle at 70% 20%, rgba(99,48,214,0.15), transparent 50%",
]}
/>
</PremiumPageShell>
);
}

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

@@ -1,7 +1,8 @@
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { ContactHero } from "@/components/heroes/ContactHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -13,95 +14,10 @@ export default function ContactPage() {
return (
<PremiumPageShell>
{/* ─── Contact Section ─── */}
<section className="relative border-b border-[#6330D6]/10 px-4 py-10 md:px-6 md:py-12 lg:px-8 lg:py-14 xl:px-10 xl:py-16 2xl:px-12 2xl:py-20">
{/* 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>
{/* <div className="w-full mx-auto relative z-10"> */}
<div className="relative z-10 mx-auto w-full max-w-[1520px]">
<div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:gap-12 xl:gap-16">
{/* Left Column — Contact Info */}
<div className="w-full max-w-[760px] py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
<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 font-black leading-[1.05] text-[#16001D] md:text-5xl lg:text-[58px] xl:text-[64px] 2xl:text-[70px]">
We’re Here to <br />
<span className="text-[#6330D6]">Help You.</span>
</h1>
<p className="mt-6 max-w-[620px] text-sm font-bold leading-8 text-[#5E5866] md:text-base xl:text-lg">
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>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">+91 909 206 8666</p>
</div>
</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-sm font-semibold mt-0.5">nearle@care.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">Address </h4>
<p className="text-[#5E5866] text-sm 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-sm font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
</div>
</div> */}
</div>
</div>
{/* Right Column: Compact Form Card */}
<div className="w-full max-w-[660px] justify-self-end pt-10 lg:pt-14 xl:pt-26">
<ContactForm />
</div>
</div>
</div>
</section>
<ContactHero />
{/* ─── Map Section ─── */}
<AnimatedSection>
<section className="bg-[#FAF7FD] px-4 py-8 md:px-6 lg:px-8 xl:px-10 2xl:px-12">
<div className="mx-auto w-full ">
<div className="relative h-[420px] overflow-hidden rounded-2xl border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
@@ -129,6 +45,7 @@ export default function ContactPage() {
</div>
</div>
</section>
</AnimatedSection>
</PremiumPageShell>
);
}

216
src/app/delivery-partners/page.tsx
View File

@@ -5,6 +5,10 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -252,21 +256,23 @@ export default function DeliveryPartnersPage() {
{/* ─── Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Partner Benefits
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
More Than Just Delivery
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle is designed around your life — not the other way around.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Partner Benefits
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
More Than Just Delivery
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle is designed around your life — not the other way around.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
<AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
{BENEFITS.map((benefit) => (
<div
<AnimatedCard
key={benefit.title}
className="rounded-2xl border border-[#6330D6]/10 bg-[#FAF7FD] p-6 flex flex-col gap-4 hover:shadow-[0_8px_28px_rgba(22,0,29,0.08)] transition-shadow duration-300"
>
@@ -277,9 +283,9 @@ export default function DeliveryPartnersPage() {
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="mt-2 text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
@@ -287,28 +293,30 @@ export default function DeliveryPartnersPage() {
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-16 items-center">
<div>
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
To Get Started
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
What You Need to Join
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
No experience needed. If you have a vehicle, a smartphone, and a desire to earn — you&apos;re more than qualified.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-7 py-3.5 rounded-xl text-sm shadow-md transition-all duration-200 active:scale-95"
>
<MaterialIcon icon="how_to_reg" size={18} />
<span>Apply Now</span>
</Link>
</div>
<AnimatedSection>
<div>
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
To Get Started
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
What You Need to Join
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
No experience needed. If you have a vehicle, a smartphone, and a desire to earn — you&apos;re more than qualified.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-7 py-3.5 rounded-xl text-sm shadow-md transition-all duration-200 active:scale-95"
>
<MaterialIcon icon="how_to_reg" size={18} />
<span>Apply Now</span>
</Link>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{REQUIREMENTS.map((req) => (
<div key={req.title} className="flex flex-col gap-3 p-5 rounded-2xl bg-white border border-[#6330D6]/10 shadow-[0_4px_18px_rgba(22,0,29,0.05)]">
<AnimatedCard key={req.title} className="flex flex-col gap-3 p-5 rounded-2xl bg-white border border-[#6330D6]/10 shadow-[0_4px_18px_rgba(22,0,29,0.05)]">
<div className="w-11 h-11 rounded-2xl bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
<MaterialIcon icon={req.icon} size={22} />
</div>
@@ -316,9 +324,9 @@ export default function DeliveryPartnersPage() {
<h4 className="text-sm font-black text-[#16001D]">{req.title}</h4>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</div>
</section>
@@ -326,41 +334,21 @@ export default function DeliveryPartnersPage() {
{/* ─── How Delivery Works (Timeline) ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Your Journey
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
From Sign-Up to First Earnings
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Most delivery partners are out earning within 3 days of applying.
</p>
</div>
<div className="relative max-w-3xl mx-auto">
{/* Vertical line */}
<div className="absolute left-[22px] md:left-[26px] top-8 bottom-8 w-0.5 bg-gradient-to-b from-[#6330D6]/30 via-[#6330D6]/20 to-transparent hidden sm:block" />
<div className="space-y-6">
{TIMELINE.map((item, index) => (
<div key={item.step} className="relative flex gap-5 sm:gap-7">
<div className="flex-shrink-0 w-11 h-11 md:w-12 md:h-12 rounded-full bg-[#6330D6] text-white flex items-center justify-center text-xs font-black shadow-[0_8px_20px_rgba(99,48,214,0.25)] relative z-10">
{String(index + 1).padStart(2, "0")}
</div>
<div className="flex-1 pb-2 pt-1">
<div className="flex items-center gap-3 mb-1.5">
<h3 className="text-base font-black text-[#16001D] leading-tight">{item.title}</h3>
<span className="px-2.5 py-0.5 rounded-full bg-[#6330D6]/8 text-[#6330D6] text-[10px] font-black uppercase tracking-wide shrink-0">
{item.time}
</span>
</div>
<p className="text-sm text-[#5E5866] leading-relaxed">{item.desc}</p>
</div>
</div>
))}
<AnimatedSection>
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Your Journey
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
From Sign-Up to First Earnings
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Most delivery partners are out earning within 3 days of applying.
</p>
</div>
</div>
</AnimatedSection>
<AnimatedTimeline items={TIMELINE} />
</div>
</section>
@@ -416,24 +404,26 @@ export default function DeliveryPartnersPage() {
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Common Questions
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
Everything you want to know before joining the Nearle delivery network.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Contact support</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
<AnimatedSection>
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Common Questions
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
Everything you want to know before joining the Nearle delivery network.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Contact support</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
</AnimatedSection>
<FAQAccordion items={FAQ_ITEMS} />
</div>
@@ -441,43 +431,17 @@ export default function DeliveryPartnersPage() {
</section>
{/* ─── CTA Banner ─── */}
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D] text-white">
<div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(0,109,55,0.15),transparent_50%)] pointer-events-none" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_70%,rgba(99,48,214,0.12),transparent_45%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto">
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6">
<MaterialIcon icon="electric_scooter" size={14} />
Start Earning Today
</span>
<h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
Join the Nearle
<br />Delivery Network
</h2>
<p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
Delivery partners in Coimbatore are already earning with Nearle. Sign up today and start delivering in your neighbourhood within days.
</p>
<div className="flex flex-wrap justify-center gap-3.5">
<Link
href="/contact"
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="how_to_reg" size={18} />
<span>Apply Now</span>
</Link>
<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>Talk to Us</span>
</Link>
</div>
</div>
</div>
</div>
</section>
<CTABanner
badge={{ icon: "electric_scooter", label: "Start Earning Today" }}
heading={<>Join the Nearle<br />Delivery Network</>}
body="Delivery partners in Coimbatore are already earning with Nearle. Sign up today and start delivering in your neighbourhood within days."
primary={{ href: "/contact", icon: "how_to_reg", label: "Apply Now" }}
secondary={{ href: "/contact", icon: "phone", label: "Talk to Us" }}
decorations={[
"circle at 30% 30%, rgba(0,109,55,0.15), transparent 50%",
"circle at 70% 70%, rgba(99,48,214,0.12), transparent 45%",
]}
/>
</PremiumPageShell>
);
}

14
src/app/layout.tsx
View File

@@ -1,5 +1,8 @@
import type { Metadata, Viewport } from "next";
import "./globals.css";
import { MotionProvider } from "@/components/layout/MotionProvider";
import { PremiumNavbar } from "@/components/layout/PremiumNavbar";
import { PremiumFooter } from "@/components/layout/PremiumFooter";
const jost = { variable: "font-display" };
const jostBody = { variable: "font-body" };
@@ -70,6 +73,7 @@ export default function RootLayout({
<html
lang="en"
className={`${jost.variable} ${jostBody.variable}`}
data-scroll-behavior="smooth"
suppressHydrationWarning
>
<head>
@@ -86,7 +90,15 @@ export default function RootLayout({
/>
</head>
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
{children}
<MotionProvider>
<div className="min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col">
<PremiumNavbar />
<main className="w-full overflow-x-hidden bg-white">
{children}
</main>
<PremiumFooter />
</div>
</MotionProvider>
</body>
</html>
);

295
src/app/merchants/page.tsx
View File

@@ -5,6 +5,9 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -226,21 +229,23 @@ export default function MerchantsPage() {
{/* ─── Merchant Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What You Get
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Everything Your Store Needs to Grow
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle gives your neighbourhood store the same tools that big online retailers have — without the complexity.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What You Get
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Everything Your Store Needs to Grow
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
Nearle gives your neighbourhood store the same tools that big online retailers have — without the complexity.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
{BENEFITS.map((benefit) => (
<div
<AnimatedCard
key={benefit.title}
className="rounded-2xl border border-[#6330D6]/10 bg-[#FAF7FD] p-5 flex flex-col gap-3 hover:shadow-[0_8px_28px_rgba(22,0,29,0.08)] transition-shadow duration-300"
>
@@ -251,30 +256,32 @@ export default function MerchantsPage() {
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
{/* ─── How It Works ─── */}
<section id="how-it-works" className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Simple Steps
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Up and Running in 24 Hours
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From registration to your first order, we&apos;ve made the process as simple as possible.
</p>
</div>
<AnimatedSection>
<div className="text-center mb-10 md:mb-12">
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
Simple Steps
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
Up and Running in 24 Hours
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
From registration to your first order, we&apos;ve made the process as simple as possible.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<AnimatedGrid className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{HOW_STEPS.map((step) => (
<article
<AnimatedCard
key={step.num}
className="relative flex flex-col rounded-[28px] border border-[#6330D6]/10 bg-white p-7 shadow-[0_8px_32px_rgba(22,0,29,0.06)]"
>
@@ -288,9 +295,9 @@ export default function MerchantsPage() {
{step.title}
</h3>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</article>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</section>
@@ -298,37 +305,39 @@ export default function MerchantsPage() {
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10 overflow-hidden">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-10 lg:gap-16 items-start">
<div>
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Why Nearle
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Your Neighbourhood&apos;s
<br />
<span className="text-[#6330D6]">Best Business Partner</span>
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
Nearle isn&apos;t built like a big delivery platform that squeezes margins. We&apos;re built for neighbourhood stores like yours — where community and trust come first.
</p>
<AnimatedSection>
<div>
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Why Nearle
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Your Neighbourhood&apos;s
<br />
<span className="text-[#6330D6]">Best Business Partner</span>
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-8 max-w-lg">
Nearle isn&apos;t built like a big delivery platform that squeezes margins. We&apos;re built for neighbourhood stores like yours — where community and trust come first.
</p>
{/* Stats row */}
<div className="grid grid-cols-3 gap-5">
{[
{ stat: "2km", label: "Hyperlocal Coverage" },
{ stat: "24h", label: "Time to Go Live" },
{ stat: "Fair", label: "Commission Model" },
].map((s) => (
<div key={s.label} className="text-center p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/8">
<div className="text-2xl md:text-3xl font-display font-black text-[#6330D6]">{s.stat}</div>
<div className="text-[10px] md:text-xs font-bold text-[#5E5866] mt-1 leading-tight">{s.label}</div>
</div>
))}
{/* Stats row */}
<div className="grid grid-cols-3 gap-5">
{[
{ stat: "2km", label: "Hyperlocal Coverage" },
{ stat: "24h", label: "Time to Go Live" },
{ stat: "Fair", label: "Commission Model" },
].map((s) => (
<div key={s.label} className="text-center p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/8">
<div className="text-2xl md:text-3xl font-display font-black text-[#6330D6]">{s.stat}</div>
<div className="text-[10px] md:text-xs font-bold text-[#5E5866] mt-1 leading-tight">{s.label}</div>
</div>
))}
</div>
</div>
</div>
</AnimatedSection>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{WHY_REASONS.map((reason) => (
<div key={reason.title} className="flex gap-3.5 p-4 rounded-2xl border border-[#6330D6]/8 bg-[#FAF7FD]">
<AnimatedCard key={reason.title} className="flex gap-3.5 p-4 rounded-2xl border border-[#6330D6]/8 bg-[#FAF7FD]">
<div className="w-10 h-10 shrink-0 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center">
<MaterialIcon icon={reason.icon} size={20} />
</div>
@@ -336,9 +345,9 @@ export default function MerchantsPage() {
<h4 className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</h4>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
</div>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</div>
</div>
</section>
@@ -346,53 +355,55 @@ export default function MerchantsPage() {
{/* ─── Success Story ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="text-center mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Merchant Story
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 tracking-tight">
Real Results from Real Stores
</h2>
</div>
<AnimatedSection>
<div className="text-center mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Merchant Story
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 tracking-tight">
Real Results from Real Stores
</h2>
</div>
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#F4ECFA_100%)] border border-[#6330D6]/10 shadow-[0_18px_50px_rgba(22,0,29,0.08)] p-8 md:p-10 lg:p-12">
<div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#6330D6]/5 blur-3xl" />
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr_1.5fr] gap-8 lg:gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/10 text-secondary text-xs font-black uppercase tracking-wider mb-5">
<MaterialIcon icon="store" size={14} />
Success Story
</div>
<blockquote className="text-xl md:text-2xl font-black text-[#16001D] leading-snug mb-6">
&ldquo;In three months, my daily orders doubled. Customers who used to call now just scan the QR and order. Even my evening rush feels calmer.&rdquo;
</blockquote>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-[#6330D6]/10 flex items-center justify-center">
<MaterialIcon icon="person" size={22} className="text-[#6330D6]" />
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#F4ECFA_100%)] border border-[#6330D6]/10 shadow-[0_18px_50px_rgba(22,0,29,0.08)] p-8 md:p-10 lg:p-12">
<div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-[#6330D6]/5 blur-3xl" />
<div className="relative z-10 grid grid-cols-1 lg:grid-cols-[1fr_1.5fr] gap-8 lg:gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary/10 text-secondary text-xs font-black uppercase tracking-wider mb-5">
<MaterialIcon icon="store" size={14} />
Success Story
</div>
<div>
<div className="text-sm font-black text-[#16001D]">Ramesh Kumar</div>
<div className="text-xs text-[#5E5866] font-semibold">R.K. Provision Store, R.S. Puram, Coimbatore</div>
<blockquote className="text-xl md:text-2xl font-black text-[#16001D] leading-snug mb-6">
&ldquo;In three months, my daily orders doubled. Customers who used to call now just scan the QR and order. Even my evening rush feels calmer.&rdquo;
</blockquote>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-[#6330D6]/10 flex items-center justify-center">
<MaterialIcon icon="person" size={22} className="text-[#6330D6]" />
</div>
<div>
<div className="text-sm font-black text-[#16001D]">Ramesh Kumar</div>
<div className="text-xs text-[#5E5866] font-semibold">R.K. Provision Store, R.S. Puram, Coimbatore</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
{[
{ value: "2.1×", label: "Daily Orders Growth", icon: "trending_up", color: "text-[#006D37]" },
{ value: "340+", label: "Repeat Customers Built", icon: "people", color: "text-[#6330D6]" },
{ value: "3 hrs", label: "Saved per Day on Calls", icon: "schedule", color: "text-[#006D37]" },
{ value: "4.9 ★", label: "Average Store Rating", icon: "star", color: "text-amber-500" },
].map((m) => (
<div key={m.label} className="rounded-2xl bg-white border border-[#6330D6]/8 p-5 text-center shadow-sm">
<MaterialIcon icon={m.icon} size={22} className={`${m.color} mx-auto`} />
<div className={`text-2xl font-display font-black mt-2 ${m.color}`}>{m.value}</div>
<div className="text-xs text-[#5E5866] font-semibold mt-1 leading-tight">{m.label}</div>
</div>
))}
<AnimatedGrid className="grid grid-cols-2 gap-4">
{[
{ value: "2.1×", label: "Daily Orders Growth", icon: "trending_up", color: "text-[#006D37]" },
{ value: "340+", label: "Repeat Customers Built", icon: "people", color: "text-[#6330D6]" },
{ value: "3 hrs", label: "Saved per Day on Calls", icon: "schedule", color: "text-[#006D37]" },
{ value: "4.9 ★", label: "Average Store Rating", icon: "star", color: "text-amber-500" },
].map((m) => (
<AnimatedCard key={m.label} className="rounded-2xl bg-white border border-[#6330D6]/8 p-5 text-center shadow-sm">
<MaterialIcon icon={m.icon} size={22} className={`${m.color} mx-auto`} />
<div className={`text-2xl font-display font-black mt-2 ${m.color}`}>{m.value}</div>
<div className="text-xs text-[#5E5866] font-semibold mt-1 leading-tight">{m.label}</div>
</AnimatedCard>
))}
</AnimatedGrid>
</div>
</div>
</div>
</AnimatedSection>
</div>
</section>
@@ -400,24 +411,26 @@ export default function MerchantsPage() {
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-[360px_1fr] gap-10 lg:gap-16 items-start">
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Questions Merchants Ask
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
Everything you need to know before joining Nearle. Still have questions? Our team is a call away.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Talk to our team</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
<AnimatedSection>
<div className="lg:sticky lg:top-28">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
FAQs
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4 tracking-tight leading-tight">
Questions Merchants Ask
</h2>
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-6">
Everything you need to know before joining Nearle. Still have questions? Our team is a call away.
</p>
<Link
href="/contact"
className="inline-flex items-center gap-2 text-sm font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Talk to our team</span>
<MaterialIcon icon="arrow_forward" size={16} />
</Link>
</div>
</AnimatedSection>
<FAQAccordion items={FAQ_ITEMS} />
</div>
@@ -425,42 +438,18 @@ export default function MerchantsPage() {
</section>
{/* ─── CTA Banner ─── */}
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] via-[#2B0040] to-[#0A000D] text-white">
<div className="px-6 py-12 md:px-10 md:py-14 lg:px-14 xl:py-12 text-center relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.18),transparent_50%)] pointer-events-none" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_80%,rgba(0,109,55,0.10),transparent_45%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto">
<span className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/15 text-white/70 text-xs font-black uppercase tracking-widest mb-6">
<MaterialIcon icon="storefront" size={14} />
Ready to Grow?
</span>
<h2 className="font-display text-3xl md:text-4xl xl:text-5xl font-black mb-4 tracking-tight leading-tight">
Become a Merchant Partner
</h2>
<p className="text-sm md:text-base text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
Join neighbourhood stores across Coimbatore already selling online with Nearle. Registration takes under 10 minutes.
</p>
<div className="flex flex-wrap justify-center gap-3.5">
<Link
href="/contact"
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 Your Store</span>
</Link>
<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>Talk to Our Team</span>
</Link>
</div>
</div>
</div>
</div>
</section>
<CTABanner
badge={{ icon: "storefront", label: "Ready to Grow?" }}
heading="Become a Merchant Partner"
body="Join neighbourhood stores across Coimbatore already selling online with Nearle. Registration takes under 10 minutes."
primary={{ href: "/contact", icon: "bolt", label: "Register Your Store" }}
secondary={{ href: "/contact", icon: "phone", label: "Talk to Our Team" }}
decorations={[
"circle at 70% 20%, rgba(99,48,214,0.18), transparent 50%",
"circle at 30% 80%, rgba(0,109,55,0.10), transparent 45%",
]}
/>
</PremiumPageShell>
);
}

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

@@ -3,8 +3,9 @@ import Image from "next/image";
import Link from "next/link";
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 { PeopleHero } from "@/components/heroes/PeopleHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -137,83 +138,15 @@ const APP_BENEFITS = [
}
];
const HERO_STATS = [
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
{ title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
{ title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
{ title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
];
export default function PeoplePage() {
const collageCards = [
{ text: "Discover Nearby", icon: "explore" },
{ text: "Save Favourites", icon: "favorite" },
{ text: "Order Anytime", icon: "shopping_bag" }
];
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="border-b border-[#6330D6]/10">
<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 max-w-[1600px] mx-auto">
{/* 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-[0.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-[0.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>
{/* BOTTOM HERO STATS */}
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
<PeopleHero />
{/* ─── Bento Grid of Offerings ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<AnimatedSection>
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="mb-10 xl:mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What we offer
@@ -250,25 +183,28 @@ export default function PeoplePage() {
</article>
))}
</div>
</section>
</section>
</AnimatedSection>
{/* ─── Localized Stats Block ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
<div className="mb-10 xl:mb-8">
<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">
The Neighbourhood App
</h2>
<p className="text-xs md:text-sm text-[#5E5866] mt-2">
Bringing local stores to your doorstep instantly.
</p>
</div>
<AnimatedSection>
<div className="mb-10 xl:mb-8">
<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">
The Neighbourhood App
</h2>
<p className="text-xs md:text-sm text-[#5E5866] mt-2">
Bringing local stores to your doorstep instantly.
</p>
</div>
</AnimatedSection>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
<AnimatedGrid className="grid grid-cols-2 lg:grid-cols-4 gap-6">
{LOCAL_STATS.map((s) => (
<div
<AnimatedCard
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"
>
@@ -279,12 +215,13 @@ export default function PeoplePage() {
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label}
</p>
</div>
</AnimatedCard>
))}
</div>
</AnimatedGrid>
</section>
{/* ─── Ready to Download Section ─── */}
<AnimatedSection>
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">
{/* Subtle glow layers */}
@@ -531,6 +468,7 @@ export default function PeoplePage() {
</div>
</section>
</section>
</AnimatedSection>
</PremiumPageShell>
);
}