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

update merchant and delivery

Browse Source
This commit is contained in:
Aravind
2026-07-03 13:00:59 +05:30
parent 4f51f772c0
commit 0823fe3333
23 changed files with 242 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/delivery.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
public/merchant.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

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

@@ -102,12 +102,12 @@ export default function AboutPage() {
>
<MaterialIcon icon={card.icon} size={28} />
</div>
<h3
<p
className="font-display font-black text-[#16001D]"
style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
>
{card.title}
</h3>
</p>
<p
className="text-[#5E5866]"
style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
@@ -146,7 +146,7 @@ export default function AboutPage() {
<div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={c.icon} size={22} />
</div>
<h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
<p className="text-4xl font-display font-black text-[#16001D]">{c.count}</p>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label}
</p>

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

@@ -186,7 +186,7 @@ export default function BrandsPage() {
</span>
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</p>
<p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
</div>
</AnimatedCard>
@@ -307,9 +307,9 @@ export default function BrandsPage() {
<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">
<p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
</p>
<p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
</AnimatedCard>
))}

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

@@ -152,9 +152,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="storefront" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Online
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
</p>
@@ -181,9 +181,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="campaign" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Noticed
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
</p>
@@ -202,9 +202,9 @@ export default function BusinessesPage() {
<MaterialIcon icon="auto_awesome" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
<p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Simplified
</h3>
</p>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
</p>

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

@@ -38,7 +38,7 @@ export default function ContactPage() {
<MaterialIcon icon="store" size={16} className="text-white" />
</div>
<div className="text-left">
<h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
<p className="text-xs font-black text-[#16001D]">R.S. Puram Hub</p>
<p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
</div>
</div>

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

@@ -2,8 +2,7 @@ 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 { DeliveryHero } from "@/components/heroes/DeliveryHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -23,13 +22,6 @@ export const metadata: Metadata = {
},
};
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 your neighbourhood" },
{ title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
];
const BENEFITS = [
{
icon: "access_time",
@@ -161,67 +153,9 @@ const FAQ_ITEMS = [
];
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="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<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.webp"
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>
<DeliveryHero />
{/* ─── Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -250,7 +184,7 @@ export default function DeliveryPartnersPage() {
<MaterialIcon icon={benefit.icon} size={24} />
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
<p className="mt-2 text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</AnimatedCard>
@@ -291,7 +225,7 @@ export default function DeliveryPartnersPage() {
<MaterialIcon icon={req.icon} size={22} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{req.title}</h4>
<p className="text-sm font-black text-[#16001D]">{req.title}</p>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
</div>
</AnimatedCard>

2
src/app/globals.css
View File

@@ -723,7 +723,7 @@ body {
backdrop-filter: blur(10px);
}
.experience-card h3 {
.experience-card__title {
color: white;
font-size: clamp(24px, 2vw, 34px);
line-height: 1.1;

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

@@ -2,8 +2,7 @@ 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 { MerchantsHero } from "@/components/heroes/MerchantsHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -22,13 +21,6 @@ export const metadata: Metadata = {
},
};
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",
@@ -164,67 +156,9 @@ const FAQ_ITEMS = [
];
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="hidden md:flex md:flex-row md:gap-3.5 mt-8">
<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.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>
<MerchantsHero />
{/* ─── Merchant Benefits Grid ─── */}
<section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -253,7 +187,7 @@ export default function MerchantsPage() {
<MaterialIcon icon={benefit.icon} size={22} />
</div>
<div>
<h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
<p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
<p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
</div>
</AnimatedCard>
@@ -291,9 +225,9 @@ export default function MerchantsPage() {
<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">
<p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
{step.title}
</h3>
</p>
<p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
</AnimatedCard>
))}
@@ -342,7 +276,7 @@ export default function MerchantsPage() {
<MaterialIcon icon={reason.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</h4>
<p className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</p>
<p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
</div>
</AnimatedCard>

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

@@ -181,7 +181,7 @@ export default function PeoplePage() {
<div className="experience-card__icon">
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
</div>
<h3>{offering.title}</h3>
<p className="experience-card__title">{offering.title}</p>
<p>{offering.descr}</p>
</div>
</article>
@@ -215,7 +215,7 @@ export default function PeoplePage() {
<div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={s.icon} size={20} />
</div>
<h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
<p className="text-3xl font-display font-black text-[#16001D]">{s.count}</p>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label}
</p>
@@ -293,7 +293,7 @@ export default function PeoplePage() {
<MaterialIcon icon={b.icon} size={20} />
</div>
<div className="text-left relative z-10">
<h4 className="text-base font-black text-white leading-none">{b.title}</h4>
<p className="text-base font-black text-white leading-none">{b.title}</p>
<p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1">{b.microcopy}</p>
<p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
</div>
@@ -458,7 +458,7 @@ export default function PeoplePage() {
<MaterialIcon icon={b.icon} size={16} />
</div>
<div>
<h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
<p className="text-sm font-black text-white leading-tight">{b.title}</p>
<p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
</div>
</div>

4
src/app/privacy/page.tsx
View File

@@ -82,7 +82,7 @@ export default function PrivacyPolicyPage() {
<MaterialIcon icon={point.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{point.title}</h4>
<p className="text-sm font-black text-[#16001D]">{point.title}</p>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
</div>
</div>
@@ -246,7 +246,7 @@ export default function PrivacyPolicyPage() {
<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>
<p className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</p>
<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" />

4
src/app/terms/page.tsx
View File

@@ -84,7 +84,7 @@ export default function TermsOfServicePage() {
<MaterialIcon icon={card.icon} size={20} />
</div>
<div>
<h4 className="text-sm font-black text-[#16001D]">{card.title}</h4>
<p className="text-sm font-black text-[#16001D]">{card.title}</p>
<p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{card.desc}</p>
</div>
</div>
@@ -254,7 +254,7 @@ export default function TermsOfServicePage() {
<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>
<p className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</p>
<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" />

4
src/components/businesses/BusinessFeaturesGrid.tsx
View File

@@ -483,12 +483,12 @@ export function BusinessFeaturesGrid() {
</svg>
</div>
<div className="min-w-0">
<h4
<p
className="font-display font-black text-[#16001D]"
style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 8 }}
>
{feat.title}
</h4>
</p>
<p className="text-[#5E5866]" style={{ fontSize: 15, lineHeight: 1.55 }}>
{feat.descr}
</p>

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

@@ -259,7 +259,7 @@ export function ContactForm() {
<MaterialIcon icon="check_circle" size={24} />
</div>
<div className="flex-1">
<h4 className="text-body-md font-black text-white">Message Sent!</h4>
<p className="text-body-md font-black text-white">Message Sent!</p>
<p className="text-body-sm text-white/70 mt-1 leading-normal">
Thank you for reaching out. We will get back to you within 24 hours.
</p>

2
src/components/delivery/AnimatedTimeline.tsx
View File

@@ -56,7 +56,7 @@ export function AnimatedTimeline({ items }: { items: TimelineItem[] }) {
</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>
<p className="text-base font-black text-[#16001D] leading-tight">{item.title}</p>
<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>

2
src/components/heroes/ContactHero.tsx
View File

@@ -127,7 +127,7 @@ export function ContactHero() {
<MaterialIcon icon={item.icon} size={18} />
</div>
<div className="text-left">
<h4 className="text-[#16001D] text-sm font-black">{item.label}</h4>
<p className="text-[#16001D] text-sm font-black">{item.label}</p>
<p className="text-[#5E5866] text-sm font-semibold mt-0.5">{item.value}</p>
</div>
</motion.div>

96
src/components/heroes/DeliveryHero.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { HeroLogo } from "@/components/heroes/HeroLogo";
import { staggerFast } from "@/lib/animations";
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 your neighbourhood" },
{ title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
];
const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description → CTA
const badgeVariant = {
hidden: { opacity: 0, scale: 0.88 },
visible: { opacity: 1, scale: 1, transition: { type: "spring" as const, stiffness: 280, damping: 20, delay: 0.9 } },
};
const titleVariant = {
hidden: { opacity: 0, y: 36 },
visible: { opacity: 1, y: 0, transition: { duration: 0.65, delay: 1.05, ease: EASE } },
};
const descVariant = {
hidden: { opacity: 0, y: 24 },
visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.25, ease: EASE } },
};
const ctaVariant = {
hidden: { opacity: 0, y: 16 },
visible: { opacity: 1, y: 0, transition: { duration: 0.45, delay: 1.4, ease: EASE } },
};
export function DeliveryHero() {
return (
<section className="w-full flex flex-col select-none bg-white">
<div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
<Image
src="/delivery.png"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
<div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
<motion.div
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
variants={staggerFast}
initial="hidden"
animate="visible"
>
<HeroLogo />
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
>
Delivery Partners
</motion.span>
<motion.h1
variants={titleVariant}
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
>
Deliver Locally.
<br />
<span className="text-[#A855F7]">Earn Daily.</span>
</motion.h1>
<motion.p
variants={descVariant}
className="text-lg sm:text-xl md:text-xl lg:text-2xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood, on your own schedule, at your own pace.
</motion.p>
</motion.div>
</div>
</div>
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
);
}

96
src/components/heroes/MerchantsHero.tsx Normal file
View File

@@ -0,0 +1,96 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { HeroLogo } from "@/components/heroes/HeroLogo";
import { staggerContainer } from "@/lib/animations";
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 EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description → CTA
const badgeVariant = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0, transition: { duration: 0.5, delay: 0.9, ease: EASE } },
};
const titleVariant = {
hidden: { opacity: 0, y: 28 },
visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.05, ease: EASE } },
};
const descVariant = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.45, delay: 1.25, ease: "easeOut" as const } },
};
const ctaVariant = {
hidden: { opacity: 0, y: 16 },
visible: { opacity: 1, y: 0, transition: { duration: 0.45, delay: 1.4, ease: EASE } },
};
export function MerchantsHero() {
return (
<section className="w-full flex flex-col select-none bg-white">
<div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
<Image
src="/merchant.png"
alt=""
fill
sizes="100vw"
className="absolute inset-0 z-0 h-full w-full object-cover object-[45%_center] md:object-[50%_center] xl:object-center"
priority
fetchPriority="high"
aria-hidden="true"
/>
<div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
<div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
<motion.div
className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
variants={staggerContainer}
initial="hidden"
animate="visible"
>
<HeroLogo />
<motion.span
variants={badgeVariant}
className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
>
Merchant Partners
</motion.span>
<motion.h1
variants={titleVariant}
className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
>
Bring Your Store Online
<br />
<span className="text-[#A855F7]">with Nearle.</span>
</motion.h1>
<motion.p
variants={descVariant}
className="max-w-[780px] text-lg sm:text-xl md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
>
Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business, without leaving your store.
</motion.p>
</motion.div>
</div>
</div>
<div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
<FeatureStatsRow items={HERO_STATS} />
</div>
</div>
</section>
);
}

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

@@ -108,7 +108,7 @@ function LocalDiscoveryVisual() {
<Image src="/images/nearle-merchant/success-owner.webp" alt="Owner" fill className="object-cover" />
</div>
<div className="p-3.5 sm:p-4">
<h4 className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</h4>
<p className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</p>
<p className="mt-0.5 truncate text-[10px] font-medium text-on-surface-variant sm:text-[11px]">Gandhi Nagar, West Delhi</p>
<div className="mt-2.5 flex gap-1.5">
@@ -238,9 +238,9 @@ export function BusinessSection() {
<MaterialIcon icon={feature.icon} size={22} />
</div>
<div className="min-w-0">
<h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
<p className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
{feature.title}
</h3>
</p>
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
{feature.desc}
</p>
@@ -290,9 +290,9 @@ export function BusinessSection() {
<span className="text-[10px] font-black uppercase tracking-widest text-primary">
Success Story
</span>
<h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
<p className="mt-1.5 text-base font-black leading-tight text-brand-dark">
Kumar Provision Store
</h3>
</p>
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
Nearle helped us reach more customers in our area and manage orders effortlessly.
</p>

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

@@ -378,9 +378,9 @@ export function HowItWorks() {
<MaterialIcon icon={step.icon} size={28} />
</div>
<div className="relative z-10 mt-7 max-w-[22rem] lg:mt-8">
<h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
<p className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
{step.title}
</h3>
</p>
<p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
{step.desc}
</p>

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

@@ -115,9 +115,9 @@ export function HyperlocalFeatures() {
</div>
<div>
<h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
<p className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
{item.title}
</h3>
</p>
<p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
{item.desc}
</p>

4
src/components/home/ServiceCategories.tsx
View File

@@ -137,9 +137,9 @@ export function ServiceCategories() {
{/* Card Body */}
<div className="p-6 flex flex-col flex-grow justify-between min-h-[160px]">
<div>
<h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
<p className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
{cat.name}
</h3>
</p>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
{cat.desc}
</p>

4
src/components/home/WhyNearle.tsx
View File

@@ -100,9 +100,9 @@ export function WhyNearle() {
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-5 shrink-0 ${card.color}`}>
<MaterialIcon icon={card.icon} size={27} />
</div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
<p className="font-display text-xl font-black text-brand-dark mb-3">
{card.title}
</h3>
</p>
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
{card.desc}
</p>