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

animation fixed in section

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

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

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