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

update privacy policy page

Browse Source
This commit is contained in:
Aravind
2026-06-26 15:52:17 +05:30
parent 48cafd07c6
commit b6581fc10b
17 changed files with 2695 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,8 +67,9 @@ export default function AboutPage() {
{/* ─── 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">
<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">
@@ -111,16 +112,19 @@ export default function AboutPage() {
isPhoneCenter={false}
/>
</div>
</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 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>
{/* ─── Intro Description Block ─── */}
<section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<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>
@@ -199,7 +203,7 @@ export default function AboutPage() {
</section>
{/* ─── Global Stats counters ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<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">
{LOCAL_COUNTERS.map((c) => (
<div key={c.label} className="flex flex-col items-center text-center">
@@ -216,7 +220,7 @@ export default function AboutPage() {
</section>
{/* ─── Brand Building Banner ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<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

390
src/app/brands/page.tsx Normal file
View File

@@ -0,0 +1,390 @@
import React from "react";
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 { FAQAccordion } from "@/components/ui/FAQAccordion";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Direct-to-Customer Brands",
description:
"Expand your brand across neighbourhood stores with Nearle. FMCG brands, food startups, and local manufacturers reach customers through India's hyperlocal commerce network.",
openGraph: {
title: "Direct-to-Customer Brands | Nearle",
description:
"Partner with Nearle to get your brand into neighbourhood stores. Distribution, retail visibility, marketing campaigns, and real-time analytics — all in one platform.",
url: "https://nearle.in/brands",
},
};
const HERO_STATS = [
{ title: "Distribution Network", icon: "hub", desc: "Neighbourhood stores across city" },
{ title: "Retail Visibility", icon: "visibility", desc: "Premium shelf positioning" },
{ title: "Brand Campaigns", icon: "campaign", desc: "Hyperlocal promotions" },
{ title: "Real-Time Analytics", icon: "analytics", desc: "Sales & reach data" },
];
const WHAT_WE_OFFER = [
{
icon: "hub",
title: "Hyperlocal Distribution",
desc: "Get your products into verified neighbourhood stores across Coimbatore. Nearle's merchant network means your brand reaches the street-level — where most daily purchases actually happen.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
badge: "Distribution",
},
{
icon: "storefront",
title: "Retail Shelf Visibility",
desc: "Premium placement in Nearle's digital catalogue and in-store QR listings. Customers browsing nearby stores see your brand first, creating daily brand touchpoints at zero extra cost.",
tone: "bg-secondary/8 text-secondary",
badge: "Visibility",
},
{
icon: "local_offer",
title: "Hyperlocal Marketing Campaigns",
desc: "Run time-bound offers, festive promotions, and exclusive deals targeted to customers within specific neighbourhoods. Precision marketing that feels personal, not generic.",
tone: "bg-rose-500/8 text-rose-600",
badge: "Marketing",
},
{
icon: "analytics",
title: "Brand & Retail Analytics",
desc: "See real-time sell-through rates, customer purchase frequency, geographic demand patterns, and campaign ROI — all in your brand dashboard.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
badge: "Analytics",
},
{
icon: "inventory_2",
title: "Inventory & Replenishment",
desc: "Nearle connects your supply chain to local store inventory. Get alerts when stock is low, automate replenishment orders, and reduce out-of-stock situations.",
tone: "bg-secondary/8 text-secondary",
badge: "Inventory",
},
{
icon: "handshake",
title: "Dedicated Partner Support",
desc: "A brand partner manager works with you to design your catalogue listings, plan campaigns, onboard new store locations, and report on performance.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
badge: "Support",
},
];
const INDUSTRIES = [
{ icon: "restaurant", label: "Food & Snacks" },
{ icon: "shopping_basket", label: "Grocery & FMCG" },
{ icon: "health_and_safety", label: "Health & Wellness" },
{ icon: "spa", label: "Beauty & Personal Care" },
{ icon: "home", label: "Home & Cleaning" },
{ icon: "pets", label: "Pet Products" },
{ icon: "child_care", label: "Baby & Parenting" },
{ icon: "eco", label: "Organic & Natural" },
{ icon: "devices", label: "Electronics & Accessories" },
];
const PARTNERSHIP_STEPS = [
{
num: "01",
icon: "contact_support",
title: "Talk to Our Sales Team",
desc: "Share your brand story, product categories, and distribution goals. Our team will assess the best approach for your brand on Nearle.",
color: "bg-[#6330D6]/7 text-[#6330D6]",
},
{
num: "02",
icon: "description",
title: "Design Your Brand Partnership",
desc: "Together we define your store coverage, catalogue listings, promotional calendar, and performance targets. We customise every brand partnership.",
color: "bg-secondary/7 text-secondary",
},
{
num: "03",
icon: "inventory",
title: "Onboard Products to the Network",
desc: "Your products are listed across relevant neighbourhood stores, QR catalogues, and the Nearle app. Customers start seeing and buying your brand.",
color: "bg-[#6330D6]/7 text-[#6330D6]",
},
{
num: "04",
icon: "bar_chart",
title: "Track, Optimise, and Grow",
desc: "Monitor your brand's reach and sell-through in real-time. Work with your partner manager to run campaigns and expand to more localities.",
color: "bg-secondary/7 text-secondary",
},
];
const FAQ_ITEMS = [
{
question: "What types of brands does Nearle work with?",
answer: "Nearle works with FMCG brands, local food manufacturers, packaged goods startups, health and wellness companies, beauty brands, organic product makers, and household goods producers. If your product fits on a neighbourhood store shelf, there's a place for it on Nearle.",
},
{
question: "How does distribution through Nearle work?",
answer: "Nearle's merchant network consists of verified neighbourhood stores. Your products are made available through these stores' digital catalogues and QR ordering systems. Customers who order from nearby stores can choose and buy your brand through Nearle's platform.",
},
{
question: "Do I need to handle logistics and delivery?",
answer: "Nearle handles last-mile delivery to customers through its local delivery partner network. You coordinate stock replenishment with our merchant partners or through our supply chain integration. You don't need to manage individual customer deliveries.",
},
{
question: "Can I run promotions specifically for my brand?",
answer: "Yes. Nearle supports brand-specific promotions including buy-one-get-one offers, minimum purchase discounts, festive deals, and new product launch campaigns. Promotions can be targeted by neighbourhood, store type, or customer segment.",
},
{
question: "How is my brand's performance reported?",
answer: "Your brand dashboard shows real-time sales volumes, store-level sell-through rates, geographic demand maps, promotion performance, and customer purchase patterns. Weekly and monthly reports are also available on request.",
},
{
question: "How quickly can my brand go live on Nearle?",
answer: "After the initial partnership agreement, most brands are listed and selling within 2 to 4 weeks. This includes catalogue creation, store onboarding, and initial inventory setup.",
},
{
question: "Does Nearle work with small and emerging brands?",
answer: "Absolutely. Nearle actively works with local manufacturers and emerging brands to help them build neighbourhood-level distribution before scaling. We believe in growing together.",
},
{
question: "What does brand partnership cost?",
answer: "Nearle brand partnerships are structured around a combination of listing fees and sales commissions, tailored to your scale and distribution goals. Contact our sales team for a customised quote.",
},
];
export default function BrandsPage() {
const collageCards = [
{ text: "Local Distribution", icon: "hub" },
{ text: "Brand Campaigns", icon: "campaign" },
{ text: "Retail Analytics", icon: "analytics" },
];
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]">
<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">
<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">
Brand Partnerships
</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">
Expand Your Brand Across
<br />
<span className="text-[#6330D6]">Local Communities.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<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]"
>
Talk to Sales
</Link>
<a
href="#partnership"
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]"
>
See Partnership Process
</a>
</div>
</div>
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/cat-daily-essentials.png"
rightImage="/images/nearle-merchant/local-map.webp"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
</div>
<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>
{/* ─── 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>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{WHAT_WE_OFFER.map((item) => (
<div
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"
>
<div className="flex items-start gap-3">
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${item.tone}`}>
<MaterialIcon icon={item.icon} size={24} />
</div>
<span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide mt-1 ${item.tone} bg-opacity-[0.08]`}>
{item.badge}
</span>
</div>
<div>
<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>
))}
</div>
</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's neighbourhood store network stocks a wide range of everyday product categories. If customers buy it daily, it belongs here.
</p>
</div>
<div className="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-4">
{INDUSTRIES.map((industry) => (
<div
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"
>
<div className="w-10 h-10 rounded-full bg-[#6330D6]/8 text-[#6330D6] flex items-center justify-center">
<MaterialIcon icon={industry.icon} size={20} />
</div>
<span className="text-[10px] font-black text-[#16001D] text-center leading-tight">{industry.label}</span>
</div>
))}
</div>
</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>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{PARTNERSHIP_STEPS.map((step) => (
<article
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)]"
>
<span className="absolute right-5 top-4 font-display text-5xl font-black leading-none text-[#6330D6]/[0.07] select-none">
{step.num}
</span>
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
<MaterialIcon icon={step.icon} size={24} />
</div>
<h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</article>
))}
</div>
</div>
</section>
{/* ─── FAQ ─── */}
<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>
<FAQAccordion items={FAQ_ITEMS} />
</div>
</div>
</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>
</PremiumPageShell>
);
}

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

@@ -24,104 +24,72 @@ const HERO_BENEFITS = [
function PhoneMapVisual() {
return (
// Single phone frame — no outer wrapper needed, no floating pills
<div
className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
>
{/* Status bar */}
<div className="flex items-center justify-between px-3 pt-2.5 pb-1">
<span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
<div className="flex items-center gap-0.5">
{[4, 6, 8, 10].map((h) => (
<span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
))}
</div>
</div>
<div className="relative flex h-full w-full items-center justify-center">
<div className="absolute bottom-1 h-6 w-36 rounded-full bg-[#16001D]/18 blur-xl" />
<div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[264px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
<div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
<div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
<div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-[#16001D]/55">
<span>9:41</span>
<span className="h-1.5 w-5 rounded-full bg-[#16001D]/40" />
</div>
{/* Search bar */}
<div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
<svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
<circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
<path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
</svg>
<span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
<svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
<path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
</svg>
</div>
<div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
<svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
<rect width="140" height="255" fill="#FAF8FC" />
<path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
<path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
<path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
<path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
<path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
<path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
</svg>
{/* Map */}
<div
className="relative mx-2.5 overflow-hidden rounded-2xl"
style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
>
{/* Street grid */}
<div className="absolute inset-0" style={{
backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
backgroundSize: "16px 16px",
}} />
{/* Subtle glow under main pin */}
<div className="absolute rounded-full bg-[#6330D6]/10"
style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
{[
["left-[17%] top-[30%]", "bg-[#6330D6]"],
["right-[16%] top-[28%]", "bg-[#006D37]"],
["left-[20%] bottom-[33%]", "bg-[#006D37]"],
["right-[18%] bottom-[32%]", "bg-[#6330D6]"],
["right-[35%] top-[20%]", "bg-[#6330D6]"],
].map(([position, color]) => (
<div key={position} className={`absolute ${position} z-10`}>
<div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
<div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
</div>
</div>
))}
{/* Large center pin */}
<svg className="absolute" aria-hidden="true"
style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
width="24" height="30" viewBox="0 0 16 20" fill="none">
<path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
<circle cx="8" cy="8.6" r="3.2" fill="white"/>
</svg>
{/* Green pin — top-right */}
<svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Purple pin — upper-left */}
<svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Green pin — lower-left */}
<svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Purple pin — lower-right */}
<svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
</div>
<div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
<div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-[#6330D6]/18 blur-md" />
<div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#6330D6)] shadow-[0_14px_28px_rgba(99,48,214,0.30)]">
<div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
</div>
</div>
{/* Store preview card — bottom sheet inside phone */}
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
{/* Store thumbnail */}
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
<svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
<path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
<rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
</svg>
</div>
<div className="min-w-0 flex-1">
<p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
<div className="mt-1 flex items-center gap-1">
<span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
<span className="text-[7.5px] text-[#5E5866]">•</span>
<span className="text-[7.5px] text-[#5E5866]">4.8</span>
<span className="text-[7.5px] leading-none">⭐</span>
<span className="text-[7.5px] text-[#5E5866]">•</span>
<span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
<div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
<p className="truncate text-[9.5px] font-black leading-none text-[#16001D]">Your Store</p>
<div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-[#5E5866]">
<span className="inline-flex items-center gap-0.5">
<MaterialIcon icon="star" size={10} fill className="text-amber-500" />
4.8
</span>
<span className="font-black text-[#006D37]">Open</span>
<span>0.8 km</span>
</div>
</div>
</div>
</div>
<svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
<path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
Offers
</div>
<div className="absolute -right-7 top-[43%] z-40 rounded-full bg-[#6330D6] px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(99,48,214,0.24)]">
Shop
</div>
</div>
</div>
);
@@ -139,8 +107,9 @@ export default function BusinessesPage() {
{/* ─── 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">
<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">
@@ -184,16 +153,19 @@ export default function BusinessesPage() {
isPhoneCenter={false}
/>
</div>
</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 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>
{/* ─── Intro Highlight Banner ─── */}
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
<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
@@ -279,7 +251,7 @@ export default function BusinessesPage() {
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
</p>
</div>
<div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
<div className="relative z-0 mt-auto h-[270px] lg:h-[290px] flex items-center justify-center">
<PhoneMapVisual />
</div>
</article>

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

@@ -13,7 +13,7 @@ export default function ContactPage() {
return (
<PremiumPageShell>
{/* ─── Contact Section ─── */}
<section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 border-b border-[#6330D6]/10">
<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">
@@ -27,19 +27,20 @@ export default function ContactPage() {
</svg>
</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">
{/* <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="relative z-10 text-[#16001D] max-w-[580px] text-left">
<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 md:text-5xl lg:text-[54px] font-black leading-[1.1] text-[#16001D]">
<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="text-[#5E5866] text-sm md:text-base font-bold mt-6 leading-relaxed">
<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>
@@ -52,7 +53,7 @@ export default function ContactPage() {
</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>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">+91 909 206 8666</p>
</div>
</div>
@@ -63,7 +64,7 @@ export default function ContactPage() {
</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>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">support@nearle.in • partners@nearle.in</p>
</div>
</div>
@@ -74,7 +75,7 @@ export default function ContactPage() {
</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>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
</div>
</div>
@@ -85,14 +86,14 @@ export default function ContactPage() {
</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>
<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-[480px] lg:ml-auto">
<div className="w-full max-w-[660px] justify-self-end pt-10 lg:pt-14 xl:pt-26">
<ContactForm />
</div>
@@ -101,8 +102,9 @@ export default function ContactPage() {
</section>
{/* ─── Map Section ─── */}
<section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<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)]">
<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)]">
<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"
@@ -125,6 +127,7 @@ export default function ContactPage() {
</div>
</div>
</div>
</div>
</section>
</PremiumPageShell>
);

336
src/app/cookies/page.tsx Normal file
View File

@@ -0,0 +1,336 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Cookie Policy",
description:
"Learn about the cookies Nearle uses to keep the platform running, personalise your experience, and improve our services. Manage your cookie preferences here.",
openGraph: {
title: "Cookie Policy | Nearle",
description:
"Nearle's cookie policy — what cookies we use, why we use them, and how to manage your preferences.",
url: "https://nearle.in/cookies",
},
};
const SECTIONS = [
{ id: "what-are-cookies", label: "What Are Cookies?" },
{ id: "essential", label: "Essential Cookies" },
{ id: "performance", label: "Performance Cookies" },
{ id: "analytics", label: "Analytics Cookies" },
{ id: "preference", label: "Preference Cookies" },
{ id: "marketing", label: "Marketing Cookies" },
{ id: "managing", label: "Managing Cookies" },
{ id: "updates", label: "Updates to This Policy" },
];
const COOKIE_TYPES = [
{
id: "essential",
icon: "lock",
title: "Essential Cookies",
description: "These cookies are required for Nearle to function at all. They handle login sessions, shopping cart state, and security tokens. Without them, the app doesn't work.",
required: true,
examples: [
{ name: "nearle_session", purpose: "Keeps you logged in during your browsing session", duration: "Session" },
{ name: "nearle_csrf", purpose: "Protects against cross-site request forgery attacks", duration: "Session" },
{ name: "nearle_auth", purpose: "Authenticates your account securely across pages", duration: "30 days" },
{ name: "cart_id", purpose: "Preserves your shopping cart between visits", duration: "7 days" },
],
tone: "bg-[#6330D6]/8 text-[#6330D6]",
badge: "Always Active",
badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
},
{
id: "performance",
icon: "speed",
title: "Performance Cookies",
description: "These help us understand how fast pages load, where errors occur, and which parts of the platform customers use most. The data is used only to improve Nearle — not to track individuals.",
required: false,
examples: [
{ name: "perf_timing", purpose: "Records page load times to detect slowness", duration: "1 day" },
{ name: "error_log", purpose: "Captures app errors to help our engineering team fix bugs", duration: "Session" },
],
tone: "bg-secondary/8 text-secondary",
badge: "Optional",
badgeColor: "bg-secondary/10 text-secondary",
},
{
id: "analytics",
icon: "analytics",
title: "Analytics Cookies",
description: "Analytics cookies help us understand aggregate usage patterns — how many people browse the grocery section, which searches are most common, and how customers discover local stores. All data is anonymised.",
required: false,
examples: [
{ name: "nearle_analytics", purpose: "Tracks page views and in-app navigation patterns", duration: "12 months" },
{ name: "utm_params", purpose: "Identifies which marketing channel brought you to Nearle", duration: "30 days" },
],
tone: "bg-[#6330D6]/8 text-[#6330D6]",
badge: "Optional",
badgeColor: "bg-[#6330D6]/10 text-[#6330D6]",
},
{
id: "preference",
icon: "tune",
title: "Preference Cookies",
description: "Preference cookies remember your choices — your saved delivery address, your preferred neighbourhood, your language setting, and which stores you've marked as favourites.",
required: false,
examples: [
{ name: "nearle_location", purpose: "Stores your selected neighbourhood and delivery zone", duration: "6 months" },
{ name: "nearle_prefs", purpose: "Remembers your app display and notification preferences", duration: "12 months" },
{ name: "saved_addresses", purpose: "Keeps your delivery addresses for quick reorder", duration: "12 months" },
],
tone: "bg-secondary/8 text-secondary",
badge: "Optional",
badgeColor: "bg-secondary/10 text-secondary",
},
{
id: "marketing",
icon: "campaign",
title: "Marketing Cookies",
description: "Nearle does not use cross-site advertising cookies or sell your data to ad networks. We may use cookies to show you relevant promotions and offers within Nearle itself — based on your neighbourhood and past orders, not third-party tracking.",
required: false,
examples: [
{ name: "offer_seen", purpose: "Tracks which promotions you've already seen to avoid repetition", duration: "7 days" },
{ name: "refer_code", purpose: "Attributes referral discounts to the correct campaign", duration: "30 days" },
],
tone: "bg-rose-500/8 text-rose-600",
badge: "Opt-In Only",
badgeColor: "bg-rose-500/10 text-rose-600",
},
];
export default function CookiePolicyPage() {
return (
<PremiumPageShell>
{/* ─── Hero Bar ─── */}
<section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
<div className="max-w-[1600px] mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<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-5 w-fit">
Legal
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
Cookie Policy
</h1>
<p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
Nearle uses cookies to keep the platform working reliably, remember your preferences, and understand how we can make the experience better. We don&apos;t use cookies to track you across the internet or sell your data.
</p>
</div>
<div className="shrink-0 text-right">
<span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
<div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
</div>
</div>
{/* Quick overview chips */}
<div className="flex flex-wrap gap-3 mt-8">
{[
{ label: "1 Required Cookie Type", icon: "lock" },
{ label: "4 Optional Cookie Types", icon: "tune" },
{ label: "No Advertising Cookies", icon: "block" },
{ label: "No Cross-Site Tracking", icon: "shield" },
].map((chip) => (
<div key={chip.label} className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#6330D6]/12 shadow-sm text-xs font-black text-[#16001D]">
<MaterialIcon icon={chip.icon} size={14} className="text-[#6330D6]" />
{chip.label}
</div>
))}
</div>
</div>
</section>
{/* ─── Content with Sidebar ─── */}
<section className="py-10 md:py-14 bg-white">
<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-[260px_1fr] gap-10 lg:gap-16 items-start">
{/* Sidebar TOC */}
<nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
<p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
<ul className="space-y-1">
{SECTIONS.map((section) => (
<li key={section.id}>
<a
href={`#${section.id}`}
className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
>
{section.label}
</a>
</li>
))}
</ul>
<div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<p className="text-xs font-black text-[#16001D] mb-2">Questions about cookies?</p>
<Link
href="/contact"
className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Contact us</span>
<MaterialIcon icon="arrow_forward" size={14} />
</Link>
</div>
</nav>
{/* Main Content */}
<div className="space-y-12 max-w-none">
{/* What Are Cookies */}
<CookieSection id="what-are-cookies" title="What Are Cookies?">
<p>Cookies are small text files stored on your device when you visit a website or use an app. They let the platform remember information between visits — like whether you&apos;re logged in, what&apos;s in your cart, and which neighbourhood you&apos;ve selected.</p>
<p>On Nearle, we use cookies in the web app and similar technologies (like local storage) in the mobile apps. The principle is the same: store only what&apos;s needed to give you a smooth, personalised experience.</p>
<div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
<MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
<p className="text-sm text-[#5E5866] leading-relaxed">
Nearle does not use third-party advertising networks. We don&apos;t place tracking pixels from Google Ads, Meta, or any other ad platform on our pages.
</p>
</div>
</CookieSection>
{/* Cookie Types */}
{COOKIE_TYPES.map((cookieType) => (
<CookieSection key={cookieType.id} id={cookieType.id} title="">
<div className="flex items-start gap-4 mb-5">
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${cookieType.tone}`}>
<MaterialIcon icon={cookieType.icon} size={24} />
</div>
<div>
<div className="flex items-center gap-3 flex-wrap">
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] leading-tight tracking-tight">
{cookieType.title}
</h2>
<span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wide ${cookieType.badgeColor}`}>
{cookieType.badge}
</span>
</div>
</div>
</div>
<div className="h-px bg-[#6330D6]/10 mb-5" />
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed mb-5">
{cookieType.description}
</p>
<div className="overflow-hidden rounded-2xl border border-[#6330D6]/10">
<table className="w-full text-sm">
<thead className="bg-[#FAF7FD]">
<tr>
<th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Cookie Name</th>
<th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866]">Purpose</th>
<th className="px-4 py-3 text-left text-[10px] font-black uppercase tracking-widest text-[#5E5866] whitespace-nowrap">Duration</th>
</tr>
</thead>
<tbody className="divide-y divide-[#6330D6]/8 bg-white">
{cookieType.examples.map((example) => (
<tr key={example.name}>
<td className="px-4 py-3 font-mono text-xs font-bold text-[#6330D6] whitespace-nowrap">{example.name}</td>
<td className="px-4 py-3 text-xs text-[#5E5866] leading-relaxed">{example.purpose}</td>
<td className="px-4 py-3 text-xs font-semibold text-[#5E5866] whitespace-nowrap">{example.duration}</td>
</tr>
))}
</tbody>
</table>
</div>
</CookieSection>
))}
{/* Managing Cookies */}
<CookieSection id="managing" title="Managing Your Cookie Preferences">
<p>You have control over most cookies Nearle uses. Here&apos;s how to manage them:</p>
<h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Browser</h3>
<p>Every major browser lets you view, delete, and block cookies. Here&apos;s where to find those settings:</p>
<ul className="space-y-1.5 mt-3">
{["Chrome: Settings → Privacy and Security → Cookies",
"Safari: Settings → Safari → Privacy & Security",
"Firefox: Settings → Privacy & Security",
"Edge: Settings → Privacy, Search and Services → Cookies"
].map((item, i) => (
<li key={i} className="flex gap-2.5 text-sm text-[#5E5866]">
<div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
<span>{item}</span>
</li>
))}
</ul>
<h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">Through Your Nearle Account</h3>
<p>You can manage optional cookies from your Nearle account settings. Essential cookies cannot be disabled — they are required for the platform to work.</p>
<div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
<MaterialIcon icon="warning" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
<p className="text-sm text-[#5E5866] leading-relaxed">
Disabling all cookies may cause some features to stop working — like staying logged in or remembering your delivery address. We recommend keeping essential and preference cookies enabled for the best experience.
</p>
</div>
</CookieSection>
{/* Updates */}
<CookieSection id="updates" title="Updates to This Policy">
<p>When we make significant changes to how we use cookies, we will update this page and notify you through the Nearle app. The &quot;Last Updated&quot; date at the top of this page reflects the most recent revision.</p>
<p>For questions about our cookie practices, contact us at:</p>
<div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<div className="space-y-2 text-sm text-[#5E5866]">
<div className="flex gap-2">
<MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<a href="mailto:privacy@nearle.in" className="text-[#6330D6] font-black hover:underline">privacy@nearle.in</a>
</div>
<div className="flex gap-2">
<MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
</div>
</div>
</div>
</CookieSection>
</div>
</div>
</div>
</section>
{/* ─── Bottom nav ─── */}
<section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="flex flex-wrap gap-4 justify-center">
{[
{ label: "Privacy Policy", href: "/privacy", icon: "lock" },
{ label: "Terms of Service", href: "/terms", icon: "gavel" },
{ label: "Contact Us", href: "/contact", icon: "mail" },
].map((link) => (
<Link
key={link.label}
href={link.href}
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
>
<MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
{link.label}
</Link>
))}
</div>
</div>
</section>
</PremiumPageShell>
);
}
function CookieSection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return (
<div id={id} className="scroll-mt-28">
{title && (
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
{title}
</h2>
)}
<div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
{children}
</div>
</div>
);
}

483
src/app/delivery-partners/page.tsx Normal file
View File

@@ -0,0 +1,483 @@
import React from "react";
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 { FAQAccordion } from "@/components/ui/FAQAccordion";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Delivery Partners",
description:
"Deliver locally and earn daily with Nearle. Flexible hours, weekly payouts, and short-distance hyperlocal deliveries. Join Nearle's growing delivery network today.",
openGraph: {
title: "Delivery Partners | Nearle",
description:
"Join Nearle's local delivery network. Deliver within your neighbourhood, earn on your schedule, and get weekly payouts.",
url: "https://nearle.in/delivery-partners",
},
};
const HERO_STATS = [
{ title: "Flexible Hours", icon: "schedule", desc: "Work when it suits you" },
{ title: "Weekly Payouts", icon: "payments", desc: "Earnings settled every week" },
{ title: "Short Distances", icon: "near_me", desc: "Deliver within 2km radius" },
{ title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
];
const BENEFITS = [
{
icon: "access_time",
title: "Flexible Hours",
desc: "Choose your own shifts — morning, afternoon, or evening. Take a day off whenever you need. No fixed schedule, no minimum hours.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "payments",
title: "Weekly Payouts",
desc: "Your earnings are settled every week, directly to your bank account. No waiting for month-end.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "near_me",
title: "Short Local Deliveries",
desc: "Deliver within a 2km radius of your neighbourhood. No long-distance trips. No highway runs. Stay close to home.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "electric_scooter",
title: "Low Fuel, High Efficiency",
desc: "Short distances mean lower fuel costs and more deliveries per hour — which means more money in your pocket.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "headset_mic",
title: "Dedicated Support Team",
desc: "Our local support team is available throughout the day to help with any issues, route changes, or customer questions.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "workspace_premium",
title: "Performance Bonuses",
desc: "Deliver more, earn more. Nearle rewards high-performing delivery partners with weekly bonuses and peak-hour incentives.",
tone: "bg-secondary/8 text-secondary",
},
];
const REQUIREMENTS = [
{
icon: "cake",
title: "Age 18 or Above",
desc: "You must be at least 18 years old to join the Nearle delivery network.",
},
{
icon: "two_wheeler",
title: "A Two-Wheeler Vehicle",
desc: "A bicycle, scooter, or motorcycle in good working condition. Electric vehicles are welcome.",
},
{
icon: "badge",
title: "Valid Documents",
desc: "Aadhaar card, PAN card, and a valid driving licence (for scooter/motorcycle riders).",
},
{
icon: "smartphone",
title: "A Smartphone",
desc: "An Android or iOS smartphone to use the Nearle Delivery Partner app for order tracking and navigation.",
},
];
const TIMELINE = [
{
step: "01",
title: "Sign Up & Submit Documents",
desc: "Register through the Nearle Delivery Partner app. Upload your documents for a quick background verification.",
time: "Day 1",
},
{
step: "02",
title: "Complete a Short Orientation",
desc: "Attend a 1-hour orientation session (online or in-person) to understand how deliveries, payouts, and customer service work.",
time: "Day 2",
},
{
step: "03",
title: "Activate and Go Online",
desc: "Once approved, go online anytime from the app. Orders come to you automatically based on your location.",
time: "Day 3",
},
{
step: "04",
title: "Pick Up Orders",
desc: "When you accept an order, you navigate to the store, pick up the package, and deliver it to the customer — usually within 30 minutes.",
time: "Every Shift",
},
{
step: "05",
title: "Get Paid Weekly",
desc: "Earnings are totalled at the end of each week and credited directly to your bank account every Monday.",
time: "Every Week",
},
];
const EARNINGS = [
{
profile: "Part-Time (2–3 hrs/day)",
deliveries: "8–12 deliveries",
daily: "₹450 – ₹700",
monthly: "₹9,000 – ₹14,000",
icon: "hourglass_empty",
color: "border-[#6330D6]/15 bg-[#FAF7FD]",
accent: "text-[#6330D6]",
},
{
profile: "Full-Time (6–8 hrs/day)",
deliveries: "22–32 deliveries",
daily: "₹1,100 – ₹1,600",
monthly: "₹22,000 – ₹32,000",
icon: "bolt",
color: "border-[#006D37]/15 bg-[#F0FAF4]",
accent: "text-[#006D37]",
},
{
profile: "Peak Hours + Bonuses",
deliveries: "Varies",
daily: "+ ₹200 – ₹400",
monthly: "Up to ₹5,000 extra",
icon: "trending_up",
color: "border-amber-500/15 bg-amber-50",
accent: "text-amber-600",
},
];
const FAQ_ITEMS = [
{
question: "Do I need to own a vehicle to join?",
answer: "Yes, you need your own two-wheeler — a bicycle, scooter, or motorcycle in good working condition. Electric scooters and bikes are also welcome. We don't provide vehicles, but delivery earnings usually cover running costs easily given the short distances.",
},
{
question: "How are earnings calculated?",
answer: "You earn a base delivery fee per order, plus surge pricing during peak hours. High-performing delivery partners also receive weekly performance bonuses. Your earnings are visible in real-time on the app.",
},
{
question: "Can I work in multiple areas?",
answer: "You are assigned a home zone based on your registration address. You can accept deliveries within and around your zone. If you want to expand to another area, you can update your preferred zones in the app.",
},
{
question: "How quickly do I get paid?",
answer: "Your earnings are settled every Monday for the previous week's work. There's no minimum earnings threshold — even a single delivery is paid out.",
},
{
question: "Is there a minimum number of deliveries I have to do?",
answer: "No. Nearle is fully flexible. You can go online whenever you want and go offline whenever you want. There are no minimums — though performance bonuses reward consistency.",
},
{
question: "What if a customer cancels after I've picked up the order?",
answer: "If a cancellation happens after you've reached the store or picked up the order, you still receive a partial fee for the trip. Nearle's policy protects delivery partners from bad-faith cancellations.",
},
{
question: "What happens if I have an accident during a delivery?",
answer: "Safety is our priority. All active delivery partners on Nearle are covered by a delivery protection plan during active delivery slots. We also have an emergency support line available 24 hours a day.",
},
{
question: "How do I handle customer complaints?",
answer: "You don't need to handle complaints directly. If a customer has an issue, they contact Nearle support. Your job is to deliver — we handle the communication, refund decisions, and dispute resolution.",
},
];
export default function DeliveryPartnersPage() {
const collageCards = [
{ text: "Flexible Hours", icon: "access_time" },
{ text: "Weekly Payouts", icon: "payments" },
{ text: "Local Deliveries", icon: "near_me" },
];
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]">
<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">
<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">
Delivery Partners
</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">
Deliver Locally.
<br />
<span className="text-[#6330D6]">Earn Daily.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood — on your own schedule, at your own pace.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<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]"
>
Join the Delivery Network
</Link>
<a
href="#earnings"
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]"
>
See Earnings
</a>
</div>
</div>
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/nearle people.png"
rightImage="/images/nearle-merchant/delivery-support.webp"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
</div>
<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>
{/* ─── 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>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
{BENEFITS.map((benefit) => (
<div
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"
>
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${benefit.tone}`}>
<MaterialIcon icon={benefit.icon} size={24} />
</div>
<div>
<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>
))}
</div>
</div>
</section>
{/* ─── Requirements ─── */}
<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>
<div 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)]">
<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>
<div>
<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>
))}
</div>
</div>
</div>
</section>
{/* ─── 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>
))}
</div>
</div>
</div>
</section>
{/* ─── Earnings Illustration ─── */}
<section id="earnings" 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">
Realistic Earnings
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-3 tracking-tight">
What You Can Earn with Nearle
</h2>
<p className="text-sm md:text-base text-[#5E5866] max-w-2xl mx-auto leading-relaxed">
These are realistic estimates based on current delivery volumes in Coimbatore. Actual earnings depend on your hours, location, and delivery performance.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{EARNINGS.map((tier) => (
<div
key={tier.profile}
className={`rounded-[28px] border-2 p-7 flex flex-col gap-5 ${tier.color}`}
>
<div className={`w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow-sm ${tier.accent}`}>
<MaterialIcon icon={tier.icon} size={24} />
</div>
<div>
<h3 className={`text-base font-black leading-tight ${tier.accent}`}>{tier.profile}</h3>
<p className="text-xs text-[#5E5866] mt-1">{tier.deliveries} per day</p>
</div>
<div className="border-t border-[#6330D6]/10 pt-4 space-y-2">
<div className="flex justify-between items-center">
<span className="text-xs text-[#5E5866] font-semibold">Daily Estimate</span>
<span className={`text-base font-black ${tier.accent}`}>{tier.daily}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-xs text-[#5E5866] font-semibold">Monthly Estimate</span>
<span className={`text-base font-black ${tier.accent}`}>{tier.monthly}</span>
</div>
</div>
</div>
))}
</div>
<p className="text-center text-xs text-[#5E5866] mt-6 max-w-xl mx-auto">
Estimates include base delivery fees only. Peak-hour surge pricing, performance bonuses, and festive incentives are additional. Earnings vary by zone.
</p>
</div>
</section>
{/* ─── FAQ ─── */}
<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>
<FAQAccordion items={FAQ_ITEMS} />
</div>
</div>
</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>
</PremiumPageShell>
);
}

466
src/app/merchants/page.tsx Normal file
View File

@@ -0,0 +1,466 @@
import React from "react";
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 { FAQAccordion } from "@/components/ui/FAQAccordion";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Merchant Partners",
description:
"Bring your neighbourhood store online with Nearle. Get discovered by nearby customers, manage orders, run local offers, and build repeat sales — all from one simple platform.",
openGraph: {
title: "Merchant Partners | Nearle",
description:
"Join thousands of neighbourhood merchants growing with Nearle. Digital catalogue, QR ordering, local discovery, and order management — all in one place.",
url: "https://nearle.in/merchants",
},
};
const HERO_STATS = [
{ title: "Digital Catalogue", icon: "menu_book", desc: "Showcase your products" },
{ title: "QR Ordering", icon: "qr_code", desc: "Scan & order from your store" },
{ title: "Local Discovery", icon: "location_on", desc: "Get found by nearby customers" },
{ title: "Order Management", icon: "assignment", desc: "Track every order live" },
];
const BENEFITS = [
{
icon: "menu_book",
title: "Digital Catalogue",
desc: "Upload your entire product range with photos, pricing, and availability. Keep it updated in minutes — no technical skills needed.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "qr_code",
title: "QR Ordering",
desc: "Place a Nearle QR stand on your counter. Customers scan, browse your menu, and place orders right from their phone.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "location_on",
title: "Hyperlocal Discovery",
desc: "Appear in local searches for products you sell. Nearby customers find you first — before they find a big delivery app.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "receipt_long",
title: "Order Management",
desc: "Accept, track, and fulfil orders from a single dashboard. Get notified instantly when a new order comes in.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "campaign",
title: "Promotions & Offers",
desc: "Run flash sales, festive offers, and loyalty deals that reach customers in your neighbourhood automatically.",
tone: "bg-rose-500/8 text-rose-600",
},
{
icon: "repeat",
title: "Repeat Customers",
desc: "Customers who order once keep coming back. Build a loyal neighbourhood following that chooses you over big platforms.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "bar_chart",
title: "Sales Dashboard",
desc: "See what's selling, when your peak hours are, and which offers work. Make smarter decisions for your store.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "people_nearby",
title: "Nearby Customer Reach",
desc: "Connect with families and residents living within 2km of your store — your most valuable, loyal customer base.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
];
const HOW_STEPS = [
{
num: "01",
icon: "app_registration",
title: "Register Your Store",
desc: "Sign up with your phone number, business name, and store address. Our team verifies and activates your profile within 24 hours.",
color: "bg-[#6330D6]/7 text-[#6330D6]",
},
{
num: "02",
icon: "add_photo_alternate",
title: "Upload Your Catalogue",
desc: "Add your products with photos, prices, and stock levels. Our onboarding team helps you get set up fast — even if you're starting from scratch.",
color: "bg-secondary/7 text-secondary",
},
{
num: "03",
icon: "notifications_active",
title: "Receive Orders",
desc: "When a nearby customer places an order, you get notified instantly. Accept, prepare, and hand off — it's that simple.",
color: "bg-[#6330D6]/7 text-[#6330D6]",
},
{
num: "04",
icon: "trending_up",
title: "Grow Locally",
desc: "Run offers, build a loyal customer base, and watch your neighbourhood sales grow month on month. Your store. Your terms.",
color: "bg-secondary/7 text-secondary",
},
];
const WHY_REASONS = [
{ icon: "verified_user", title: "Trusted by the Community", desc: "Nearle is built for neighbourhood trust — we verify stores and protect customers so your reputation matters." },
{ icon: "savings", title: "Lower Commission Than Big Platforms", desc: "Keep more of what you earn. Nearle charges fair, transparent rates — no hidden fees, no nasty surprises." },
{ icon: "support_agent", title: "Dedicated Onboarding Support", desc: "Your own Nearle partner manager helps you get online, upload your catalogue, and answer every question." },
{ icon: "local_fire_department", title: "Built for Indian Kirana Culture", desc: "From vegetable vendors to cloth merchants — Nearle is designed around how Indian neighbourhood stores actually work." },
{ icon: "schedule", title: "You Control Your Hours", desc: "Set your opening hours, manage stock, and pause orders whenever you need. No pressure. No locked-in contracts." },
{ icon: "groups", title: "Local Customer Community", desc: "Join a platform where customers genuinely care about supporting neighbourhood stores over large national brands." },
];
const FAQ_ITEMS = [
{
question: "Is Nearle free to join as a merchant?",
answer: "Getting started on Nearle is free. We charge a small, fair commission only when you successfully complete an order. There are no monthly fees, no listing fees, and no setup charges.",
},
{
question: "How long does it take to go live on Nearle?",
answer: "Most merchants go live within 24 to 48 hours of registration. Our onboarding team reaches out to verify your store, help you upload your catalogue, and activate your listing.",
},
{
question: "Do I need a smartphone or computer?",
answer: "You just need a smartphone. The Nearle Merchant app works on Android and iOS. You can manage orders, update your catalogue, and track earnings from your phone.",
},
{
question: "What kind of stores can join Nearle?",
answer: "Nearle welcomes all neighbourhood stores — grocery and kirana shops, bakeries, medical stores, fruit vendors, cloth merchants, stationery shops, pet stores, electronics retailers, and more. If you serve your local community, you belong on Nearle.",
},
{
question: "How do customers pay for their orders?",
answer: "Customers can pay online through UPI, debit/credit cards, or wallets — or choose cash on delivery. You receive payouts to your bank account on a weekly settlement cycle.",
},
{
question: "Can I run offers and discounts for my customers?",
answer: "Absolutely. You can set up item-level discounts, minimum order offers, festive deals, and loyalty rewards through your merchant dashboard. Nearle also runs platform-wide promotions where you can opt in.",
},
{
question: "What if I don't have a digital catalogue ready?",
answer: "Our onboarding team will help you build your catalogue from scratch. Just give us a price list or let us visit your store, and we'll get your products uploaded.",
},
{
question: "Does Nearle provide delivery partners?",
answer: "Yes. Nearle has a growing network of local delivery partners who can fulfil orders for your store. You can also use your own delivery staff for short-distance orders if you prefer.",
},
{
question: "How are disputes or refunds handled?",
answer: "Our customer support team handles all customer disputes. For genuine quality or delivery issues, we work with both you and the customer to find a fair resolution. We protect merchants from fraudulent claims.",
},
{
question: "Is my business data secure with Nearle?",
answer: "Yes. Your store data, customer information, and earnings are protected with industry-standard security practices. We never share your business data with third parties.",
},
];
export default function MerchantsPage() {
const collageCards = [
{ text: "Digital Catalogue", icon: "menu_book" },
{ text: "Local Orders", icon: "receipt_long" },
{ text: "Nearby Customers", icon: "people_nearby" },
];
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]">
<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">
<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">
Merchant Partners
</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">
Bring Your Store Online
<br />
<span className="text-[#6330D6]">with Nearle.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business — without leaving your store.
</p>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<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]"
>
Become a Merchant Partner
</Link>
<a
href="#how-it-works"
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]"
>
See How It Works
</a>
</div>
</div>
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/nearle-merchant/catalogue-ui.webp"
rightImage="/Nearle Business.png"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
</div>
<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>
{/* ─── 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>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
{BENEFITS.map((benefit) => (
<div
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"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center shrink-0 ${benefit.tone}`}>
<MaterialIcon icon={benefit.icon} size={22} />
</div>
<div>
<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>
))}
</div>
</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>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
{HOW_STEPS.map((step) => (
<article
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)]"
>
<span className="absolute right-5 top-4 font-display text-5xl font-black leading-none text-[#6330D6]/[0.07] select-none">
{step.num}
</span>
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
<MaterialIcon icon={step.icon} size={24} />
</div>
<h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</article>
))}
</div>
</div>
</section>
{/* ─── Why Merchants Choose Nearle ─── */}
<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>
{/* 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 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]">
<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>
<div>
<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>
))}
</div>
</div>
</div>
</section>
{/* ─── 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>
<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>
<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 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>
))}
</div>
</div>
</div>
</div>
</section>
{/* ─── FAQ ─── */}
<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>
<FAQAccordion items={FAQ_ITEMS} />
</div>
</div>
</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>
</PremiumPageShell>
);
}

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

@@ -156,8 +156,9 @@ export default function PeoplePage() {
{/* ─── 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">
<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">
@@ -200,16 +201,19 @@ export default function PeoplePage() {
isPhoneCenter={true}
/>
</div>
</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 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>
{/* ─── Bento Grid of Offerings ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<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
@@ -249,7 +253,7 @@ export default function PeoplePage() {
</section>
{/* ─── Localized Stats Block ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<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

339
src/app/privacy/page.tsx Normal file
View File

@@ -0,0 +1,339 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Privacy Policy",
description:
"Learn how Nearle collects, uses, and protects your personal information. Our privacy policy covers customers, merchants, and delivery partners on the Nearle platform.",
openGraph: {
title: "Privacy Policy | Nearle",
description:
"Nearle's privacy policy — how we handle your data across our hyperlocal commerce platform.",
url: "https://nearle.in/privacy",
},
};
const SECTIONS = [
{ id: "information-we-collect", label: "Information We Collect" },
{ id: "why-we-collect", label: "Why We Collect It" },
{ id: "how-we-use", label: "How We Use It" },
{ id: "sharing", label: "Sharing Information" },
{ id: "security", label: "Security" },
{ id: "cookies", label: "Cookies" },
{ id: "your-rights", label: "Your Rights" },
{ id: "contact", label: "Contact Us" },
];
const KEY_POINTS = [
{
icon: "lock",
title: "We Don't Sell Your Data",
desc: "Your personal information is never sold to third-party advertisers or data brokers. Ever.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "visibility_off",
title: "Minimal Data Collection",
desc: "We only collect information that's genuinely needed to make Nearle work for you.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "manage_accounts",
title: "You Stay in Control",
desc: "Access, update, or delete your data anytime from your Nearle account settings.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
];
export default function PrivacyPolicyPage() {
return (
<PremiumPageShell>
{/* ─── Hero Bar ─── */}
<section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
<div className="max-w-[1600px] mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<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-5 w-fit">
Legal
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
Privacy Policy
</h1>
<p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
Nearle is committed to protecting your privacy. This policy explains how we collect, use, and safeguard information across our hyperlocal commerce platform — for customers, merchants, and delivery partners.
</p>
</div>
<div className="shrink-0 text-right">
<span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
<div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
</div>
</div>
{/* Key points */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
{KEY_POINTS.map((point) => (
<div key={point.title} className="flex gap-3 p-4 rounded-2xl bg-white border border-[#6330D6]/8 shadow-sm">
<div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${point.tone}`}>
<MaterialIcon icon={point.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{point.title}</h4>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* ─── Content with Sidebar TOC ─── */}
<section className="py-10 md:py-14 bg-white">
<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-[260px_1fr] gap-10 lg:gap-16 items-start">
{/* Sidebar TOC */}
<nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
<p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
<ul className="space-y-1">
{SECTIONS.map((section) => (
<li key={section.id}>
<a
href={`#${section.id}`}
className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
>
{section.label}
</a>
</li>
))}
</ul>
<div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<p className="text-xs font-black text-[#16001D] mb-2">Have a privacy question?</p>
<Link
href="/contact"
className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Contact us</span>
<MaterialIcon icon="arrow_forward" size={14} />
</Link>
</div>
</nav>
{/* Main Content */}
<div className="prose-nearle max-w-none space-y-12">
<PolicySection id="information-we-collect" title="Information We Collect">
<p>When you use Nearle — whether you&apos;re a customer ordering groceries from a neighbourhood store, a merchant managing your digital catalogue, or a delivery partner on your route — we collect information that helps us deliver the service.</p>
<PolicySubheading>For Customers</PolicySubheading>
<PolicyList items={[
"Name, phone number, and email address when you create a Nearle account",
"Delivery address and neighbourhood location to match you with nearby stores",
"Order history, item preferences, and past interactions on the platform",
"Payment details (processed securely — Nearle does not store card numbers)",
"Device type, app version, and approximate location during active sessions",
]} />
<PolicySubheading>For Merchants</PolicySubheading>
<PolicyList items={[
"Business name, address, phone number, and GSTIN",
"Bank account details for weekly order payouts",
"Product catalogue content, pricing, and stock updates",
"Order fulfilment data and customer satisfaction scores",
"Dashboard usage data to improve merchant tools",
]} />
<PolicySubheading>For Delivery Partners</PolicySubheading>
<PolicyList items={[
"Full name, phone number, Aadhaar, and PAN details for identity verification",
"Bank account for weekly earnings settlement",
"Real-time GPS location during active delivery shifts for routing and safety",
"Delivery completion records and performance metrics",
]} />
</PolicySection>
<PolicySection id="why-we-collect" title="Why We Collect It">
<p>We collect the minimum information needed to make Nearle work reliably and safely for everyone in the neighbourhood.</p>
<PolicyList items={[
"To create and secure your account on the Nearle platform",
"To match customers with the nearest verified neighbourhood stores",
"To process orders, payments, and merchant payouts accurately",
"To dispatch and route delivery partners efficiently",
"To send order confirmations, delivery updates, and service alerts",
"To detect fraud and prevent misuse of the platform",
"To improve our product experience based on actual usage patterns",
"To comply with Indian legal and regulatory obligations",
]} />
</PolicySection>
<PolicySection id="how-we-use" title="How We Use Your Information">
<p>Your information stays within the Nearle platform to serve you. Here&apos;s exactly how:</p>
<PolicySubheading>Order Fulfilment</PolicySubheading>
<p>When a customer places an order, we share their delivery address and contact number with the merchant store and the assigned delivery partner — only for that specific delivery. Once the order is complete, access is revoked.</p>
<PolicySubheading>Customer Discovery</PolicySubheading>
<p>We use your neighbourhood location to surface stores, products, and offers that are genuinely nearby — not stores 20km away. We don&apos;t build advertising profiles or sell your browsing behaviour.</p>
<PolicySubheading>Merchant Analytics</PolicySubheading>
<p>Merchants see aggregated data about their own customers — sales trends, popular items, delivery times. They do not see individual customer profiles, phone numbers, or personal details.</p>
<PolicySubheading>Delivery Partner Routing</PolicySubheading>
<p>We use real-time GPS location data during active delivery shifts to assign orders and optimise routes. Location tracking stops the moment a delivery partner goes offline.</p>
<PolicySubheading>Platform Improvement</PolicySubheading>
<p>We analyse usage patterns in aggregate to make Nearle faster, cleaner, and more reliable. No individual is profiled for this purpose.</p>
</PolicySection>
<PolicySection id="sharing" title="Sharing Your Information">
<p>We do not sell, rent, or trade your personal information to anyone outside Nearle. Here are the limited cases where information is shared:</p>
<PolicyList items={[
"With merchants: only the delivery address and contact number needed to prepare and hand over your order",
"With delivery partners: only the pickup location, drop-off address, and a masked contact number for that specific delivery",
"With payment processors: to securely complete transactions — they are bound by PCI DSS standards",
"With government authorities: only when legally required by Indian law or a court order",
"With fraud prevention systems: to detect and prevent fake accounts and chargebacks",
]} />
<PolicyNote>
Third-party services integrated into Nearle (such as mapping providers and SMS gateways) operate under strict data processing agreements. They cannot use your data for their own purposes.
</PolicyNote>
</PolicySection>
<PolicySection id="security" title="How We Keep Your Data Secure">
<p>Nearle takes security seriously — because neighbourhood trust is our entire business model.</p>
<PolicyList items={[
"All data is transmitted over encrypted HTTPS connections",
"Passwords are hashed and never stored in plain text",
"Payment information is handled by PCI DSS-compliant payment gateways",
"Access to production systems is restricted to authorised Nearle engineers with multi-factor authentication",
"We conduct regular security audits and vulnerability assessments",
"Data is backed up and stored in geographically redundant, encrypted storage",
]} />
<p>If you ever suspect unauthorised access to your Nearle account, contact our support team immediately at <a href="mailto:security@nearle.in" className="text-[#6330D6] font-black hover:underline">security@nearle.in</a>.</p>
</PolicySection>
<PolicySection id="cookies" title="Cookies and Tracking">
<p>Nearle uses cookies and similar technologies to keep the platform running smoothly. Our full <Link href="/cookies" className="text-[#6330D6] font-black hover:underline">Cookie Policy</Link> explains each type in detail. In short:</p>
<PolicyList items={[
"Essential cookies: required for login, cart, and core app functions — cannot be disabled",
"Performance cookies: help us understand how pages are used and where errors occur",
"Preference cookies: remember your settings, neighbourhood, and saved addresses",
"Analytics cookies: aggregate, anonymised data on platform usage — no individual profiles",
]} />
<p>We do not use advertising cookies or cross-site tracking. You can manage cookie preferences from your browser settings or your Nearle account.</p>
</PolicySection>
<PolicySection id="your-rights" title="Your Privacy Rights">
<p>Under the Information Technology Act, 2000 and emerging Indian data protection law, you have the following rights:</p>
<PolicyList items={[
"Right to access: request a copy of the personal data Nearle holds about you",
"Right to correction: update or correct inaccurate information in your profile",
"Right to deletion: request removal of your account and associated personal data",
"Right to portability: receive your data in a machine-readable format where applicable",
"Right to withdraw consent: for optional data uses, you can withdraw consent at any time",
"Right to raise a grievance: contact our Grievance Officer (details below) for any privacy concern",
]} />
<p>To exercise any of these rights, email us at <a href="mailto:privacy@nearle.in" className="text-[#6330D6] font-black hover:underline">privacy@nearle.in</a> from your registered email address. We respond within 30 days.</p>
</PolicySection>
<PolicySection id="contact" title="Contact and Grievance Officer">
<p>If you have any questions, concerns, or complaints about this Privacy Policy or how Nearle handles your data, please contact:</p>
<div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<h4 className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</h4>
<div className="space-y-2 text-sm text-[#5E5866]">
<div className="flex gap-2">
<MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<a href="mailto:privacy@nearle.in" className="text-[#6330D6] font-black hover:underline">privacy@nearle.in</a>
</div>
<div className="flex gap-2">
<MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
</div>
</div>
<p className="text-xs text-[#5E5866] mt-4">We will acknowledge your request within 48 hours and resolve it within 30 days.</p>
</div>
<p className="mt-6 text-sm text-[#5E5866]">
We may update this Privacy Policy from time to time. When we do, we will notify you via the Nearle app and update the &ldquo;Last Updated&rdquo; date above. Continued use of Nearle after changes constitutes your acceptance of the revised policy.
</p>
</PolicySection>
</div>
</div>
</div>
</section>
{/* ─── Bottom nav to other policies ─── */}
<section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="flex flex-wrap gap-4 justify-center">
{[
{ label: "Terms of Service", href: "/terms", icon: "gavel" },
{ label: "Cookie Policy", href: "/cookies", icon: "cookie" },
{ label: "Contact Us", href: "/contact", icon: "mail" },
].map((link) => (
<Link
key={link.label}
href={link.href}
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
>
<MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
{link.label}
</Link>
))}
</div>
</div>
</section>
</PremiumPageShell>
);
}
function PolicySection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return (
<div id={id} className="scroll-mt-28">
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
{title}
</h2>
<div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
{children}
</div>
</div>
);
}
function PolicySubheading({ children }: { children: React.ReactNode }) {
return (
<h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">
{children}
</h3>
);
}
function PolicyList({ items }: { items: string[] }) {
return (
<ul className="space-y-2 mt-3">
{items.map((item, i) => (
<li key={i} className="flex gap-2.5">
<div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
<span>{item}</span>
</li>
))}
</ul>
);
}
function PolicyNote({ children }: { children: React.ReactNode }) {
return (
<div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
<MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
<p className="text-sm text-[#5E5866] leading-relaxed">{children}</p>
</div>
);
}

343
src/app/terms/page.tsx Normal file
View File

@@ -0,0 +1,343 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Terms of Service",
description:
"Read Nearle's Terms of Service. Understand your rights and responsibilities as a customer, merchant, or delivery partner on India's hyperlocal neighbourhood commerce platform.",
openGraph: {
title: "Terms of Service | Nearle",
description:
"Nearle's terms of service — governing accounts, orders, payments, merchant and delivery partner responsibilities.",
url: "https://nearle.in/terms",
},
};
const SECTIONS = [
{ id: "accounts", label: "Accounts" },
{ id: "orders", label: "Orders" },
{ id: "payments", label: "Payments" },
{ id: "merchant-responsibilities", label: "Merchant Responsibilities" },
{ id: "delivery-responsibilities", label: "Delivery Partner Responsibilities" },
{ id: "acceptable-use", label: "Acceptable Use" },
{ id: "refunds", label: "Refunds & Cancellations" },
{ id: "termination", label: "Termination" },
{ id: "liability", label: "Limitation of Liability" },
{ id: "contact", label: "Contact Us" },
];
const SUMMARY_CARDS = [
{
icon: "gavel",
title: "Governed by Indian Law",
desc: "These terms are governed by Indian law. Disputes are subject to courts in Coimbatore, Tamil Nadu.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
{
icon: "handshake",
title: "Fair Use Platform",
desc: "Nearle is a community platform. Abuse, fraud, or misuse of any kind will result in account termination.",
tone: "bg-secondary/8 text-secondary",
},
{
icon: "support_agent",
title: "We're Here to Help",
desc: "Disputes? Refund questions? Our support team resolves issues fairly for all parties involved.",
tone: "bg-[#6330D6]/8 text-[#6330D6]",
},
];
export default function TermsOfServicePage() {
return (
<PremiumPageShell>
{/* ─── Hero Bar ─── */}
<section className="w-full bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA] border-b border-[#6330D6]/10 py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20">
<div className="max-w-[1600px] mx-auto">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<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-5 w-fit">
Legal
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[52px] font-black text-[#16001D] leading-tight tracking-tight">
Terms of Service
</h1>
<p className="text-sm md:text-base text-[#5E5866] mt-4 max-w-2xl leading-relaxed font-semibold">
These Terms of Service govern your use of the Nearle platform — including the customer app, merchant dashboard, and delivery partner app. By using Nearle, you agree to these terms.
</p>
</div>
<div className="shrink-0 text-right">
<span className="text-xs text-[#5E5866] font-semibold">Effective Date</span>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 January 2025</div>
<div className="text-xs text-[#5E5866] mt-2 font-semibold">Last Updated</div>
<div className="text-sm font-black text-[#16001D] mt-0.5">1 June 2026</div>
</div>
</div>
{/* Summary cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
{SUMMARY_CARDS.map((card) => (
<div key={card.title} className="flex gap-3 p-4 rounded-2xl bg-white border border-[#6330D6]/8 shadow-sm">
<div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 ${card.tone}`}>
<MaterialIcon icon={card.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{card.title}</h4>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{card.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* ─── Content with Sidebar TOC ─── */}
<section className="py-10 md:py-14 bg-white">
<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-[260px_1fr] gap-10 lg:gap-16 items-start">
{/* Sidebar TOC */}
<nav className="lg:sticky lg:top-24 hidden lg:block" aria-label="Page sections">
<p className="text-[10px] font-black uppercase tracking-widest text-[#5E5866] mb-4">On This Page</p>
<ul className="space-y-1">
{SECTIONS.map((section) => (
<li key={section.id}>
<a
href={`#${section.id}`}
className="block text-sm font-semibold text-[#5E5866] hover:text-[#6330D6] py-1.5 px-3 rounded-xl hover:bg-[#6330D6]/5 transition-all duration-200"
>
{section.label}
</a>
</li>
))}
</ul>
<div className="mt-8 p-4 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<p className="text-xs font-black text-[#16001D] mb-2">Questions about these terms?</p>
<Link
href="/contact"
className="inline-flex items-center gap-1.5 text-xs font-black text-[#6330D6] hover:text-[#5225b8] transition-colors"
>
<span>Contact us</span>
<MaterialIcon icon="arrow_forward" size={14} />
</Link>
</div>
</nav>
{/* Main Content */}
<div className="space-y-12 max-w-none">
<TermsSection id="accounts" title="1. Accounts">
<p>To use Nearle, you must create an account using your phone number. You are responsible for keeping your account secure and for all activity that occurs under it.</p>
<TermsList items={[
"You must be at least 18 years old to create an account (or have guardian consent if aged 16–18)",
"You may only hold one active customer account on Nearle",
"You must provide accurate information during registration and keep it up to date",
"Sharing or transferring your account to another person is not permitted",
"You must notify Nearle immediately if you suspect unauthorised access to your account",
]} />
<p>Nearle reserves the right to suspend or terminate accounts that appear fraudulent, inactive, or in violation of these terms.</p>
</TermsSection>
<TermsSection id="orders" title="2. Orders">
<p>When you place an order through Nearle, you are entering into a purchase agreement with the merchant store, not with Nearle. Nearle facilitates the transaction and delivery but is not the seller of the goods.</p>
<TermsList items={[
"Orders are confirmed only after the merchant accepts them — availability is not guaranteed",
"Order contents, quantities, and prices are as listed at the time of placement",
"Substitutions may be offered by the merchant if an item is unavailable — you can accept or cancel",
"Estimated delivery times are approximate and may vary based on store preparation and delivery conditions",
"You must be reachable at the delivery address at the time of order fulfillment",
]} />
<TermsNote>
If a merchant is unable to fulfill your order, you will be notified promptly and fully refunded. Nearle is not liable for merchant-side stock issues.
</TermsNote>
</TermsSection>
<TermsSection id="payments" title="3. Payments">
<p>Payments on Nearle are processed through secure, PCI DSS-compliant payment gateways. Nearle accepts UPI, debit/credit cards, net banking, and wallets. Cash on Delivery is available in select zones.</p>
<TermsList items={[
"All prices are inclusive of applicable taxes unless stated otherwise",
"Delivery fees, if applicable, are shown clearly before order confirmation",
"Nearle does not store card numbers or payment credentials",
"Merchant payouts are processed weekly on a settlement cycle",
"Delivery partner earnings are settled weekly, every Monday",
"Disputed transactions should be raised within 7 days of the transaction date",
]} />
</TermsSection>
<TermsSection id="merchant-responsibilities" title="4. Merchant Responsibilities">
<p>Merchants listed on Nearle agree to maintain the quality and accuracy of their stores, products, and order fulfilment.</p>
<TermsList items={[
"Maintain accurate product listings, including correct prices and availability",
"Accept and fulfil orders within agreed preparation times",
"Deliver quality products that match the description in the digital catalogue",
"Not list counterfeit, expired, or prohibited goods on the platform",
"Handle customer orders with care and communicate delays promptly",
"Follow all applicable food safety, health, and trade regulations",
"Not attempt to take transactions outside the Nearle platform",
"Respond to Nearle merchant support queries within 24 hours",
]} />
<p>Repeated complaints, low ratings, or violations of merchant responsibilities may result in listing suspension or removal from the platform.</p>
</TermsSection>
<TermsSection id="delivery-responsibilities" title="5. Delivery Partner Responsibilities">
<p>Delivery partners accept orders on a voluntary basis and are responsible for safe, timely deliveries.</p>
<TermsList items={[
"Maintain a valid driving licence and vehicle registration (where applicable)",
"Handle all customer orders with care — no tampering with sealed packages",
"Deliver to the correct address and confirm delivery through the app",
"Behave respectfully toward customers and merchants at all times",
"Follow road safety rules during all delivery shifts",
"Not accept cash payments from customers unless approved for Cash on Delivery orders",
"Keep the Nearle app updated and maintain a functioning smartphone during shifts",
]} />
<TermsNote>
Delivery partners are independent contractors, not employees of Nearle. They are responsible for their own taxes on earnings.
</TermsNote>
</TermsSection>
<TermsSection id="acceptable-use" title="6. Acceptable Use">
<p>Nearle is a platform built on community trust. The following are strictly prohibited:</p>
<TermsList items={[
"Creating fake accounts, fake reviews, or impersonating another person",
"Placing fraudulent orders with no intention to receive or pay",
"Using Nearle to sell prohibited, illegal, or unsafe products",
"Attempting to reverse-engineer, scrape, or misuse the Nearle platform",
"Harassing, threatening, or abusing merchants, delivery partners, or customers",
"Using multiple accounts to abuse promotions, discounts, or referral programs",
"Interfering with the platform's technical infrastructure or security",
]} />
<p>Violations will result in immediate account suspension without refund of any outstanding balance.</p>
</TermsSection>
<TermsSection id="refunds" title="7. Refunds and Cancellations">
<TermsSubheading>Customer Cancellations</TermsSubheading>
<p>You may cancel an order within 2 minutes of placing it for a full refund. Once a merchant has confirmed and started preparing your order, cancellations are at the merchant&apos;s discretion.</p>
<TermsSubheading>Merchant Cancellations</TermsSubheading>
<p>If a merchant cancels your order due to unavailability or stock issues, you will receive a full refund to your original payment method within 5 to 7 business days.</p>
<TermsSubheading>Damaged or Incorrect Orders</TermsSubheading>
<p>If you receive a damaged, missing, or incorrect item, report it to Nearle support within 2 hours of delivery with a photo. We will review the case and issue a full or partial refund as appropriate.</p>
<TermsSubheading>Refund Timeline</TermsSubheading>
<TermsList items={[
"UPI and wallet refunds: within 24 hours",
"Debit/credit card refunds: 5 to 7 business days",
"Cash on Delivery orders: credited to Nearle wallet for future use",
]} />
</TermsSection>
<TermsSection id="termination" title="8. Termination">
<p>Either party may terminate the relationship at any time:</p>
<TermsList items={[
"Customers can delete their account through the Nearle app settings at any time",
"Merchants can offboard from the platform with 30 days written notice",
"Delivery partners can deactivate their partner profile at any time without penalty",
]} />
<p>Nearle reserves the right to suspend or permanently terminate any account — customer, merchant, or delivery partner — for violations of these terms, fraud, safety concerns, or behaviour that harms the community. We will notify affected parties where legally required.</p>
</TermsSection>
<TermsSection id="liability" title="9. Limitation of Liability">
<p>Nearle provides its platform on an &quot;as available&quot; basis. While we strive for a reliable, high-quality service, the following limitations apply:</p>
<TermsList items={[
"Nearle is not liable for product quality, freshness, or accuracy — those are the merchant's responsibility",
"Nearle is not liable for delivery delays caused by weather, traffic, or force majeure",
"Nearle is not responsible for losses arising from account compromise due to sharing credentials",
"Our aggregate liability to any user for any claim shall not exceed the value of the disputed transaction",
]} />
<p>These limitations do not affect statutory rights under Indian consumer protection law.</p>
</TermsSection>
<TermsSection id="contact" title="10. Contact and Disputes">
<p>For questions about these Terms of Service or to raise a dispute, contact:</p>
<div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
<h4 className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</h4>
<div className="space-y-2 text-sm text-[#5E5866]">
<div className="flex gap-2">
<MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<a href="mailto:legal@nearle.in" className="text-[#6330D6] font-black hover:underline">legal@nearle.in</a>
</div>
<div className="flex gap-2">
<MaterialIcon icon="location_on" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />
<span>424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002</span>
</div>
</div>
<p className="text-xs text-[#5E5866] mt-4">These terms are governed by Indian law. Disputes are subject to the exclusive jurisdiction of courts in Coimbatore, Tamil Nadu.</p>
</div>
</TermsSection>
</div>
</div>
</div>
</section>
{/* ─── Bottom nav ─── */}
<section className="py-8 bg-[#FAF7FD] border-t border-[#6330D6]/10">
<div className="px-6 md:px-12 lg:px-16 xl:px-20 max-w-[1600px] mx-auto">
<div className="flex flex-wrap gap-4 justify-center">
{[
{ label: "Privacy Policy", href: "/privacy", icon: "lock" },
{ label: "Cookie Policy", href: "/cookies", icon: "cookie" },
{ label: "Contact Us", href: "/contact", icon: "mail" },
].map((link) => (
<Link
key={link.label}
href={link.href}
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#6330D6]/15 bg-white text-sm font-black text-[#16001D] hover:border-[#6330D6]/30 hover:bg-[#6330D6]/5 transition-all duration-200"
>
<MaterialIcon icon={link.icon} size={16} className="text-[#6330D6]" />
{link.label}
</Link>
))}
</div>
</div>
</section>
</PremiumPageShell>
);
}
function TermsSection({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
return (
<div id={id} className="scroll-mt-28">
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mb-5 pb-4 border-b border-[#6330D6]/10 leading-tight tracking-tight">
{title}
</h2>
<div className="space-y-4 text-sm md:text-base text-[#5E5866] leading-relaxed">
{children}
</div>
</div>
);
}
function TermsSubheading({ children }: { children: React.ReactNode }) {
return (
<h3 className="text-base md:text-lg font-black text-[#16001D] mt-5 mb-2">
{children}
</h3>
);
}
function TermsList({ items }: { items: string[] }) {
return (
<ul className="space-y-2 mt-3">
{items.map((item, i) => (
<li key={i} className="flex gap-2.5">
<div className="w-1.5 h-1.5 rounded-full bg-[#6330D6] mt-2 shrink-0" />
<span>{item}</span>
</li>
))}
</ul>
);
}
function TermsNote({ children }: { children: React.ReactNode }) {
return (
<div className="flex gap-3 p-4 rounded-2xl bg-[#6330D6]/5 border border-[#6330D6]/10 mt-4">
<MaterialIcon icon="info" size={18} className="text-[#6330D6] shrink-0 mt-0.5" />
<p className="text-sm text-[#5E5866] leading-relaxed">{children}</p>
</div>
);
}

2
src/components/contact/ContactForm.tsx
View File

@@ -95,7 +95,7 @@ export function ContactForm() {
return (
<>
<div className="w-full max-w-[520px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-7 md:p-10 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
<div className="w-full max-w-[660px] lg:ml-auto bg-white rounded-[2rem] md:rounded-[2.5rem] p-8 md:p-12 border border-outline-variant/25 shadow-[0_20px_60px_rgba(0,0,0,0.28)] relative overflow-hidden">
{/* Background Accent Mesh */}
<div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-32 h-32 bg-secondary/5 rounded-full blur-2xl" />

6
src/components/home/BusinessSection.tsx
View File

@@ -63,7 +63,7 @@ const BENEFITS = [
export function BusinessSection() {
return (
<section className="section bg-white w-full overflow-hidden">
<div className="page-container">
<div className="mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
<div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
@@ -75,7 +75,7 @@ export function BusinessSection() {
* desktop (≥1280px) : 2 col — [left: text + success story] | [right: cards 2×2]
*/}
<div className="relative grid gap-6 grid-cols-1 md:gap-7
xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
xl:grid-cols-[420px_1fr] xl:gap-8 xl:items-start">
{/* ── 1. Left text content (always col-1 row-1) ── */}
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
@@ -94,7 +94,7 @@ export function BusinessSection() {
<span className="text-primary font-normal">Nearle.</span>
</h2>
<p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
<p className="max-w-md text-base text-on-surface-variant leading-relaxed">
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
</p>

91
src/components/home/HowItWorks.tsx
View File

@@ -101,31 +101,73 @@ function GrowthPill() {
function PhoneMapVisual() {
return (
// Outer wrapper: position anchor for the floating pills (no overflow-hidden here)
<div className="relative h-44 w-40">
{/* Inner phone frame: overflow-hidden keeps rounded corners clean */}
<div className="absolute inset-0 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
<div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
Search local stores
<div className="relative flex h-full w-full items-center justify-center">
<div className="absolute bottom-1 h-6 w-36 rounded-full bg-brand-dark/18 blur-xl" />
<div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[256px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
<div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
<div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
<div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-brand-dark/55">
<span>9:41</span>
<span className="h-1.5 w-5 rounded-full bg-brand-dark/40" />
</div>
<div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
<svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
<rect width="140" height="255" fill="#FAF8FC" />
<path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
<path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
<path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
<path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
<path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
<path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
<path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
<path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
</svg>
{[
["left-[17%] top-[30%]", "bg-primary"],
["right-[16%] top-[28%]", "bg-[#006D37]"],
["left-[20%] bottom-[33%]", "bg-[#006D37]"],
["right-[18%] bottom-[32%]", "bg-primary"],
["right-[35%] top-[20%]", "bg-primary"],
].map(([position, color]) => (
<div key={position} className={`absolute ${position} z-10`}>
<div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
<div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
</div>
</div>
))}
<div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
<div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-primary/18 blur-md" />
<div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_14px_28px_rgba(101,20,154,0.30)]">
<div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
</div>
</div>
<div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
<p className="truncate text-[9.5px] font-black leading-none text-brand-dark">Your Store</p>
<div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-on-surface-variant">
<span className="inline-flex items-center gap-0.5">
<MaterialIcon icon="star" size={10} fill className="text-amber-500" />
4.8
</span>
<span className="font-black text-[#006D37]">Open</span>
<span>0.8 km</span>
</div>
</div>
</div>
</div>
<div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
<div className="absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(#d7c4dd 1px, transparent 1px), linear-gradient(90deg, #d7c4dd 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
<MaterialIcon icon="location_on" size={30} className="absolute left-14 top-8 text-primary" />
<span className="absolute left-4 top-5 h-2.5 w-2.5 rounded-full bg-primary" />
<span className="absolute bottom-4 right-5 h-2.5 w-2.5 rounded-full bg-secondary" />
<div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
Offers
</div>
<div className="absolute bottom-3 left-5 right-5 rounded-2xl bg-white p-2 shadow-lg">
<p className="text-[9px] font-black text-brand-dark">Your Store</p>
<p className="text-[7px] font-bold text-on-surface-variant">Open nearby</p>
<div className="absolute -right-7 top-[43%] z-40 rounded-full bg-primary px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(101,20,154,0.24)]">
Shop
</div>
</div>
{/* Pills: outside overflow-hidden so they float beyond the phone frame */}
<span className="absolute -left-3 top-16 z-10 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
Offers
</span>
<span className="absolute -right-3 top-24 z-10 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
Shop
</span>
</div>
);
}
@@ -149,9 +191,8 @@ function StepVisual({ type }: { type: string }) {
}
if (type === "phone") {
// Center the phone so the floating pills don't reach the card edges
return (
<div className="flex h-full items-end justify-center pb-2">
<div className="flex h-full items-center justify-center">
<PhoneMapVisual />
</div>
);
@@ -232,7 +273,7 @@ export function HowItWorks() {
</div>
{/* CARDS SECTION */}
<div className="page-container">
<div className="mx-auto w-full max-w-[2200px] px-6 lg:px-10 xl:px-12">
<div className="mt-10 text-center md:mt-14 xl:mt-10">
<span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
How It Works
@@ -265,7 +306,7 @@ export function HowItWorks() {
{step.desc}
</p>
</div>
<div className="relative z-0 mt-auto h-48 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 lg:h-52">
<div className={`relative z-0 mt-auto w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 ${step.visual === "phone" ? "h-64 lg:h-72" : "h-48 lg:h-52"}`}>
<StepVisual type={step.visual} />
</div>
</article>

132
src/components/home/HyperlocalFeatures.tsx
View File

@@ -27,72 +27,123 @@ const FEATURES = [
export function HyperlocalFeatures() {
return (
<section className="section bg-white w-full relative">
<section className="relative bg-white w-full py-1 lg:py-1">
{/* Subtle background radial glows */}
<div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
<div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
{/* Inner container */}
<div className="page-container relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-center">
<div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
<div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-center">
{/* Left Column: Visual Storytelling */}
<div className="w-full max-w-[530px] justify-self-center relative rounded-[2rem] border border-outline-variant/15 bg-slate-100/50 z-10 overflow-hidden aspect-[10/11] lg:h-[580px]">
{/* Main Background Cover Image */}
<div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
<Image
src="/images/cat-daily-essentials.png"
alt="Local store background"
fill
sizes="(max-width: 900px) 420px, 470px"
className="object-cover"
priority
/>
<div className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_52%_42%,rgba(124,58,237,0.12),transparent_34%),linear-gradient(145deg,rgba(255,255,255,0.94),rgba(243,232,246,0.62))]" />
<div className="absolute inset-6 rounded-[1.5rem] overflow-hidden bg-white/55 ring-1 ring-white/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
<svg
className="absolute inset-0 h-full w-full"
viewBox="0 0 640 700"
fill="none"
aria-hidden="true"
>
<rect width="640" height="700" fill="#FAF8FC" />
<path d="M-26 184C70 156 159 154 245 192C328 229 407 229 487 193C563 159 628 153 690 178" stroke="#E2DAE9" strokeWidth="18" strokeLinecap="round" opacity="0.9" />
<path d="M-14 520C92 480 181 482 255 524C352 579 440 581 546 531C603 504 654 490 704 496" stroke="#E8E0EF" strokeWidth="24" strokeLinecap="round" opacity="0.8" />
<path d="M100 -40L162 742" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
<path d="M300 -42L258 744" stroke="#E9E1F0" strokeWidth="10" strokeLinecap="round" />
<path d="M510 -30L462 740" stroke="#E5DEEC" strokeWidth="12" strokeLinecap="round" />
<path d="M-26 84H690" stroke="#EDE7F3" strokeWidth="10" strokeLinecap="round" />
<path d="M-26 328H690" stroke="#E1D9E8" strokeWidth="12" strokeLinecap="round" />
<path d="M-26 628H690" stroke="#E9E2F0" strokeWidth="10" strokeLinecap="round" />
<path d="M-8 680L658 22" stroke="#E7DFEE" strokeWidth="10" strokeLinecap="round" />
<path d="M52 736L700 240" stroke="#EEE8F4" strokeWidth="8" strokeLinecap="round" />
<path d="M-62 296L614 -30" stroke="#E9E3F0" strokeWidth="10" strokeLinecap="round" />
<path d="M74 246L197 182L350 238L502 166L615 218" stroke="#D9EFDF" strokeWidth="46" strokeLinecap="round" opacity="0.45" />
<path d="M30 594L156 546L272 594L389 532L540 576" stroke="#DDF2E3" strokeWidth="50" strokeLinecap="round" opacity="0.42" />
<path d="M210 470C254 421 285 375 320 350C369 316 422 302 484 268" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.58" />
<path d="M320 350C271 319 229 293 174 286C123 279 89 252 55 225" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
<path d="M320 350C377 385 431 429 500 430" stroke="#006D37" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.42" />
<path d="M320 350C335 281 367 227 430 190" stroke="#7C3AED" strokeWidth="3" strokeLinecap="round" strokeDasharray="4 11" opacity="0.45" />
</svg>
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.52),rgba(255,255,255,0.14)_44%,rgba(255,255,255,0.48))]" />
</div>
{/* Banner Label at Top */}
<div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
<span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
<h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
<div className="absolute top-[22%] left-[14%] z-50 rounded-full bg-white/88 backdrop-blur-xl px-4 py-3 shadow-[0_16px_42px_rgba(23,0,31,0.10)] border border-white/80 flex items-center gap-2">
<MaterialIcon icon="sell" size={18} className="text-[#006D37]" />
<span className="text-xs md:text-sm font-black text-[#006D37]">Offers Nearby</span>
</div>
{/* Main Store/Product Card (Middle floating) */}
<div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-[18px] border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
<div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
<Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
<div className="absolute top-[33%] left-[12%] z-50 rounded-full bg-white/86 backdrop-blur-xl px-4 py-3 shadow-[0_14px_38px_rgba(23,0,31,0.09)] border border-white/80 flex items-center gap-2">
<MaterialIcon icon="schedule" size={18} className="text-primary" />
<span className="text-xs md:text-sm font-black text-primary">Open Now</span>
</div>
{[
["left-[31%] top-[24%]", "bg-primary", "scale-90"],
["right-[20%] top-[22%]", "bg-[#006D37]", "scale-100"],
["right-[13%] top-[39%]", "bg-primary", "scale-90"],
["left-[20%] top-[52%]", "bg-primary", "scale-80"],
["left-[37%] bottom-[31%]", "bg-[#006D37]", "scale-95"],
["right-[31%] top-[33%]", "bg-primary", "scale-100"],
].map(([position, color, scale]) => (
<div key={position} className={`absolute ${position} ${scale} z-20`}>
<div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_14px_28px_rgba(101,20,154,0.22)]`}>
<div className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/92" />
</div>
</div>
<div className="flex-1 min-w-0">
<h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
<p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
<div className="flex items-center gap-1 mt-1.5">
<MaterialIcon icon="star" size={14} className="text-amber-500" />
<span className="text-xs font-bold text-brand-dark">Top Rated</span>
<span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
))}
<div className="absolute left-1/2 top-[41%] z-30 -translate-x-1/2 -translate-y-1/2">
<div className="absolute left-1/2 top-[78%] h-20 w-36 -translate-x-1/2 rounded-full bg-primary/15 blur-md" />
<div className="absolute left-1/2 top-[87%] h-8 w-24 -translate-x-1/2 rounded-full bg-primary/30" />
<div className="relative h-28 w-28 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#65149A)] shadow-[0_30px_60px_rgba(101,20,154,0.30)] md:h-32 md:w-32">
<div className="absolute left-1/2 top-1/2 h-12 w-12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/94 shadow-inner md:h-14 md:w-14" />
</div>
</div>
<div className="absolute left-[30%] right-[4%] top-[49%] z-40 rounded-[1.35rem] border border-white/80 bg-white/88 p-2.5 shadow-[0_24px_70px_rgba(23,0,31,0.16)] backdrop-blur-xl md:left-[45%] md:right-[5%] md:top-[52%] md:p-4">
<div className="flex items-center gap-3">
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-2xl bg-brand-accent/40 ring-1 ring-outline-variant/20 md:h-20 md:w-20">
<Image src="/images/cat-daily-essentials.png" alt="Sri Krishna Groceries storefront" fill sizes="80px" className="object-cover" />
</div>
<div className="min-w-0 flex-1">
<h5 className="truncate text-sm font-black text-brand-dark md:text-base">Sri Krishna Groceries</h5>
<p className="mt-0.5 truncate text-xs font-medium text-on-surface-variant md:text-sm">Fresh Harvest & Daily Needs</p>
<div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs md:text-sm">
<span className="inline-flex items-center gap-1 font-bold text-on-surface-variant">
<MaterialIcon icon="star" size={15} fill className="text-amber-500" />
4.8
</span>
<span className="inline-flex items-center gap-1 font-black text-[#006D37]">
<span className="h-2 w-2 rounded-full bg-[#16A34A]" />
Open Now
</span>
<span className="font-bold text-on-surface-variant">0.8 km away</span>
</div>
</div>
</div>
</div>
{/* Small Delivery Status Card (Bottom floating) */}
<div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
<div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
<MaterialIcon icon="check" size={16} className="text-white font-bold" />
<div className="absolute bottom-[8%] left-[7%] right-[7%] z-40 flex items-center gap-4 rounded-[1.35rem] border border-white/15 bg-[linear-gradient(135deg,#7C3AED,#65149A)] px-5 py-4 text-white shadow-[0_24px_60px_rgba(101,20,154,0.28)]">
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-white shadow-[0_10px_24px_rgba(23,0,31,0.12)]">
<MaterialIcon icon="check" size={24} className="text-primary" />
</div>
<div className="min-w-0">
<p className="text-xs md:text-sm font-black">Order Confirmed</p>
<p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
<p className="text-sm font-black md:text-base">Order Confirmed</p>
<p className="mt-0.5 text-xs font-medium text-white/82 md:text-sm">Your local store is preparing your order</p>
</div>
</div>
</div>
{/* Right Column: Feature Panel directly on page background */}
<div className="w-full py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
<div className="w-full py-6 md:py-8 lg:py-10 pl-4 md:pl-8 lg:pl-12 xl:pl-44 relative z-10 text-[#16001D]">
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
Community & Trust
</span>
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-6 mb-8 leading-tight tracking-tight">
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight">
Built Around Your<br />
<span className="text-primary font-black">Neighbourhood</span>
</h3>
@@ -132,10 +183,10 @@ export function HyperlocalFeatures() {
</div>
{/* Divider Line above CTA Area */}
<hr className="border-t border-[#EEE7F4] my-8 relative z-10" />
<hr className="border-t border-[#EEE7F4] my-6 relative z-10" />
{/* Onboarding Call to Action */}
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
<div className="mt-2 flex flex-wrap gap-6 items-center relative z-10">
<Link
href="/#download"
className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
@@ -162,4 +213,3 @@ export function HyperlocalFeatures() {
</section>
);
}

22
src/components/layout/PremiumFooter.tsx
View File

@@ -14,16 +14,16 @@ const COMPANY = [
];
const PARTNERSHIPS = [
{ label: "Merchant Partner", href: "/businesses" },
{ label: "Delivery Partner", href: "#" },
{ label: "Direct to Customer Brands", href: "#" },
{ label: "Merchant Partner", href: "/merchants" },
{ label: "Delivery Partner", href: "/delivery-partners" },
{ label: "Direct to Customer Brands", href: "/brands" },
// { label: "Local Real Estate", href: "#" },
];
const LEGAL = [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
// { label: "Sitemap", href: "#" },
];
@@ -54,7 +54,7 @@ export function PremiumFooter() {
<div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
<a
href="https://www.facebook.com/"
href="https://www.facebook.com/nearledigital"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
@@ -64,7 +64,7 @@ export function PremiumFooter() {
</a>
<a
href="https://www.instagram.com/"
href="https://www.instagram.com/nearledigital/"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
@@ -191,15 +191,15 @@ export function PremiumFooter() {
</p>
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
<Link href="#" className="transition-colors hover:text-white">
<Link href="/privacy" className="transition-colors hover:text-white">
Privacy Policy
</Link>
<span className="select-none font-bold opacity-35">·</span>
<Link href="#" className="transition-colors hover:text-white">
<Link href="/terms" className="transition-colors hover:text-white">
Terms of Service
</Link>
<span className="select-none font-bold opacity-35">·</span>
<Link href="#" className="transition-colors hover:text-white">
<Link href="/contact" className="transition-colors hover:text-white">
Help Center
</Link>
</div>

3
src/components/layout/PremiumNavbar.tsx
View File

@@ -24,7 +24,8 @@ export function PremiumNavbar() {
};
return (
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
// <header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
<header className="sticky top-0 z-50 w-full bg-[#83429f] border-b border-white/10 text-white">
<div className="relative mx-auto flex h-16 w-full max-w-[1600px] items-center px-6 md:h-20 md:px-10 xl:px-16">
{/* Logo - Left */}
<Link

57
src/components/ui/FAQAccordion.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { useState } from "react";
import { MaterialIcon } from "./MaterialIcon";
export type FAQItem = {
question: string;
answer: string;
};
type FAQAccordionProps = {
items: FAQItem[];
};
export function FAQAccordion({ items }: FAQAccordionProps) {
const [openIndex, setOpenIndex] = useState<number | null>(null);
return (
<div className="space-y-3">
{items.map((item, index) => (
<div
key={index}
className="rounded-2xl border border-[#6330D6]/10 bg-white overflow-hidden shadow-[0_2px_12px_rgba(22,0,29,0.04)] transition-shadow hover:shadow-[0_4px_18px_rgba(22,0,29,0.07)]"
>
<button
type="button"
onClick={() => setOpenIndex(openIndex === index ? null : index)}
className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left"
aria-expanded={openIndex === index}
>
<span className="text-sm md:text-base font-black text-[#16001D] leading-snug">
{item.question}
</span>
<div
className={`flex-shrink-0 w-8 h-8 rounded-full bg-[#6330D6]/8 flex items-center justify-center text-[#6330D6] transition-transform duration-300 ${
openIndex === index ? "rotate-180" : ""
}`}
>
<MaterialIcon icon="expand_more" size={20} />
</div>
</button>
<div
className={`overflow-hidden transition-all duration-300 ease-in-out ${
openIndex === index
? "max-h-[500px] opacity-100"
: "max-h-0 opacity-0"
}`}
>
<p className="px-6 pb-5 text-sm md:text-base text-[#5E5866] leading-relaxed border-t border-[#6330D6]/5 pt-4">
{item.answer}
</p>
</div>
</div>
))}
</div>
);
}