330 lines
16 KiB
TypeScript
330 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
import { fadeUp, fadeIn, scaleIn, staggerContainer, viewport } from "@/lib/animations";
|
|
|
|
const FEATURES = [
|
|
{
|
|
title: "Digital Catalogue",
|
|
desc: "Showcase your products online and keep your catalogue updated.",
|
|
icon: "menu_book",
|
|
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
|
alt: "Clean grocery catalogue interface preview",
|
|
tone: "bg-primary/8 text-primary",
|
|
},
|
|
{
|
|
title: "QR Ordering",
|
|
desc: "Let customers scan, browse, and place orders directly from your store.",
|
|
icon: "qr_code",
|
|
visual: "/images/nearle-merchant/qr-stand.webp",
|
|
alt: "QR ordering stand on a local grocery store counter",
|
|
tone: "bg-secondary/8 text-secondary",
|
|
},
|
|
{
|
|
title: "Local Discovery",
|
|
desc: "Get discovered by nearby customers searching for products you sell.",
|
|
icon: "location_on",
|
|
visual: "/images/nearle-merchant/local-map.webp",
|
|
alt: "Local discovery map with purple pins and a store listing",
|
|
tone: "bg-[#de96f9]/10 text-primary",
|
|
},
|
|
{
|
|
title: "Delivery Support",
|
|
desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
|
|
icon: "local_shipping",
|
|
visual: "/images/nearle-merchant/delivery-support.webp",
|
|
alt: "Local delivery partner handing a grocery bag to a customer",
|
|
tone: "bg-rose-500/5 text-rose-600",
|
|
},
|
|
];
|
|
|
|
const BENEFITS = [
|
|
{
|
|
icon: "verified_user",
|
|
title: "Verified & Trusted",
|
|
desc: "All stores are verified for quality and reliability.",
|
|
},
|
|
{
|
|
icon: "groups",
|
|
title: "2L+ Customers",
|
|
desc: "Join thousands of merchants already growing with Nearle.",
|
|
},
|
|
{
|
|
icon: "trending_up",
|
|
title: "Growing Together",
|
|
desc: "We provide the tools, you focus on your customers.",
|
|
},
|
|
{
|
|
icon: "headset_mic",
|
|
title: "Support That Cares",
|
|
desc: "Our team is always here to help you succeed.",
|
|
},
|
|
];
|
|
|
|
function LocalDiscoveryVisual() {
|
|
return (
|
|
<div className="relative h-[260px] w-full overflow-hidden bg-[#FAF8FC] sm:h-[300px]">
|
|
{/* Map Background (SVG) */}
|
|
<svg className="absolute inset-0 h-full w-full opacity-[0.85]" viewBox="0 0 400 300" fill="none" preserveAspectRatio="xMidYMid slice">
|
|
<path d="M-20 50C30 40 100 45 150 70C220 105 280 95 380 60" stroke="#E6DFF0" strokeWidth="8" strokeLinecap="round" />
|
|
<path d="M-10 220C50 190 120 200 180 230C250 260 310 255 400 220" stroke="#DDF0E3" strokeWidth="12" strokeLinecap="round" />
|
|
<path d="M50 -20L80 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
|
|
<path d="M180 -20L150 320" stroke="#E5DEEF" strokeWidth="6" strokeLinecap="round" />
|
|
<path d="M300 -20L270 320" stroke="#EBE4F2" strokeWidth="6" strokeLinecap="round" />
|
|
<path d="M-20 100H420" stroke="#E8E1F0" strokeWidth="6" strokeLinecap="round" />
|
|
<path d="M-20 180H420" stroke="#E2DAEC" strokeWidth="6" strokeLinecap="round" />
|
|
</svg>
|
|
|
|
{/* Halos around main pin */}
|
|
<div className="absolute left-[35%] top-[45%] h-44 w-44 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-xl" />
|
|
<div className="absolute left-[35%] top-[45%] h-28 w-28 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 animate-pulse blur-md" />
|
|
|
|
{/* Main Pin */}
|
|
<div className="absolute left-[35%] top-[45%] z-20 -translate-x-1/2 -translate-y-1/2 drop-shadow-xl transition-transform hover:scale-110">
|
|
<div className="relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] bg-primary">
|
|
<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 shadow-inner" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Other Pins */}
|
|
{[
|
|
["left-[15%] top-[25%]", "bg-primary", "scale-75"],
|
|
["left-[50%] top-[15%]", "bg-primary", "scale-[0.65]"],
|
|
["left-[22%] top-[68%]", "bg-primary", "scale-[0.70]"],
|
|
].map(([pos, color, scale], i) => (
|
|
<div key={i} className={`absolute ${pos} ${scale} z-10 drop-shadow-md`}>
|
|
<div className={`relative h-11 w-11 -rotate-45 rounded-[50%_50%_50%_10%] ${color}`}>
|
|
<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" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Store Card (Right Side) */}
|
|
<div className="absolute bottom-4 right-4 z-30 w-[200px] overflow-hidden rounded-[1.25rem] bg-white shadow-[0_12px_32px_rgba(22,0,29,0.12)] border border-primary/10 sm:bottom-6 sm:right-6 sm:w-[240px]">
|
|
<div className="relative h-[90px] w-full bg-brand-accent-light sm:h-[110px]">
|
|
<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="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">
|
|
<span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Groceries</span>
|
|
<span className="rounded-full bg-brand-accent/10 px-2.5 py-1 text-[9px] font-black text-primary sm:text-[10px]">Essentials</span>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center gap-1.5 text-[10px] font-bold sm:text-[11px]">
|
|
<span className="text-[#006D37]">Open</span>
|
|
<span className="text-on-surface-variant/40">•</span>
|
|
<span className="text-on-surface-variant">Closes 10:00 PM</span>
|
|
</div>
|
|
|
|
<button className="mt-3.5 w-full rounded-xl bg-primary py-2 text-[11px] font-black text-white transition-colors hover:bg-primary-container sm:py-2.5 sm:text-xs">
|
|
View Store
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function BusinessSection() {
|
|
return (
|
|
<section className="section bg-white w-full overflow-hidden">
|
|
<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">
|
|
<motion.div
|
|
className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl"
|
|
animate={{ y: [0, -16, 0] }}
|
|
transition={{ duration: 13, repeat: Infinity, ease: "easeInOut" }}
|
|
/>
|
|
<motion.div
|
|
className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl"
|
|
animate={{ y: [0, 14, 0] }}
|
|
transition={{ duration: 11, repeat: Infinity, ease: "easeInOut" }}
|
|
/>
|
|
|
|
<div className="relative grid gap-6 grid-cols-1 md:gap-7
|
|
xl:grid-cols-[420px_1fr] xl:gap-8 xl:items-start">
|
|
|
|
{/* ── 1. Left text content ── */}
|
|
<motion.div
|
|
className="min-w-0 xl:col-start-1 xl:row-start-1"
|
|
variants={fadeUp}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
{/* Badge */}
|
|
<div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
|
|
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
|
|
<MaterialIcon icon="storefront" size={13} className="text-secondary" />
|
|
</div>
|
|
<span className="text-[11px] font-black uppercase tracking-widest text-secondary">
|
|
Merchant Partnerships
|
|
</span>
|
|
</div>
|
|
|
|
<h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
|
|
Bring Your Store Online with{" "}
|
|
<span className="text-primary font-normal">Nearle.</span>
|
|
</h2>
|
|
|
|
<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>
|
|
|
|
<div className="mt-5 space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
|
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
|
</div>
|
|
<span className="font-bold text-brand-dark text-sm md:text-base">
|
|
Stay in control of your pricing and orders
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
|
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
|
</div>
|
|
<span className="font-bold text-brand-dark text-sm md:text-base">
|
|
Build direct relationships with local families
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-7 flex flex-col gap-3">
|
|
<Link
|
|
href="/businesses"
|
|
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
|
|
>
|
|
Partner With Nearle
|
|
<MaterialIcon icon="arrow_forward" size={18} />
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
|
|
>
|
|
Talk to Our Team
|
|
<MaterialIcon icon="arrow_forward" size={18} />
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* ── 2. Feature cards ── */}
|
|
<motion.div
|
|
className="min-w-0
|
|
order-2 md:order-3
|
|
xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
|
|
grid grid-cols-1 gap-4 md:grid-cols-2"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
{FEATURES.map((feature) => (
|
|
<motion.article
|
|
key={feature.title}
|
|
variants={fadeUp}
|
|
whileHover={{ y: -6, transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] } }}
|
|
className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)] hover:shadow-[0_16px_40px_rgba(22,0,29,0.12)] hover:border-primary/20 transition-[box-shadow,border-color] duration-[250ms]"
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
|
|
<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">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
|
|
{feature.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-auto w-full overflow-hidden">
|
|
{feature.title === "Local Discovery" ? (
|
|
<LocalDiscoveryVisual />
|
|
) : (
|
|
<Image
|
|
src={feature.visual}
|
|
alt={feature.alt}
|
|
width={900}
|
|
height={560}
|
|
sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
|
|
className="block h-auto w-full object-cover"
|
|
/>
|
|
)}
|
|
</div>
|
|
</motion.article>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* ── 3. Success story ── */}
|
|
<motion.div
|
|
className="min-w-0
|
|
order-3 md:order-2
|
|
xl:order-none xl:col-start-1 xl:row-start-2
|
|
overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
|
|
grid grid-cols-[100px_minmax(0,1fr)]"
|
|
variants={scaleIn}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
<div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
|
|
<Image
|
|
src="/images/nearle-merchant/success-owner.webp"
|
|
alt="Indian grocery shop owner using a smartphone inside a kirana store"
|
|
fill
|
|
sizes="100px"
|
|
className="object-cover object-center"
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 px-4 py-4">
|
|
<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">
|
|
Kumar Provision Store
|
|
</h3>
|
|
<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>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* ── Benefits strip ── */}
|
|
<motion.div
|
|
className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={viewport}
|
|
>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
|
|
{BENEFITS.map((b) => (
|
|
<motion.div key={b.title} variants={fadeIn} className="flex items-start gap-3 p-5">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
|
<MaterialIcon icon={b.icon} size={20} />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-black text-brand-dark">{b.title}</div>
|
|
<div className="mt-0.5 text-sm leading-relaxed text-on-surface-variant">{b.desc}</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|