add image
This commit is contained in:
@@ -2,148 +2,183 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const BENEFITS = [
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Digital Catalogue",
|
||||
desc: "Showcase your products online easily to nearby customers.",
|
||||
desc: "Showcase your products online and keep your catalogue updated.",
|
||||
icon: "menu_book",
|
||||
iconColor: "bg-primary/5 text-primary",
|
||||
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
||||
alt: "Clean grocery catalogue interface preview",
|
||||
tone: "bg-primary/5 text-primary",
|
||||
},
|
||||
{
|
||||
title: "QR Ordering",
|
||||
desc: "Enable existing customers to scan and place orders directly at your counter.",
|
||||
desc: "Let customers scan, browse, and place orders directly from your store.",
|
||||
icon: "qr_code",
|
||||
iconColor: "bg-secondary/5 text-secondary",
|
||||
visual: "/images/nearle-merchant/qr-stand.webp",
|
||||
alt: "QR ordering stand on a local grocery store counter",
|
||||
tone: "bg-secondary/5 text-secondary",
|
||||
},
|
||||
{
|
||||
title: "Local Discovery",
|
||||
desc: "Get discovered by residents in your neighbourhood searching for your products.",
|
||||
icon: "explore",
|
||||
iconColor: "bg-[#de96f9]/10 text-primary",
|
||||
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: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
|
||||
desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
|
||||
icon: "local_shipping",
|
||||
iconColor: "bg-rose-500/5 text-rose-600",
|
||||
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 = [
|
||||
"No Commission on your orders",
|
||||
"Full Control on pricing",
|
||||
"Dedicated Support for your business",
|
||||
"Grow Your Sales in your area",
|
||||
];
|
||||
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<section className="px-6 py-12 md:py-16">
|
||||
<div className="w-full">
|
||||
|
||||
{/* Merchant Section Grid */}
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left Column: Feature copywriting (7 cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
|
||||
Merchant Partnerships
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
|
||||
Bring Your Store Online with Nearle.
|
||||
</h2>
|
||||
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
|
||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||
</p>
|
||||
<section className="section bg-white w-full overflow-hidden">
|
||||
<div className="page-container">
|
||||
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_48%,#f3e8f6_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-56 w-56 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" />
|
||||
|
||||
<div className="space-y-4 mb-10 text-sm md:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
<div className="relative grid min-w-0 grid-cols-1 gap-6 md:gap-8 xl:grid-cols-[minmax(0,30fr)_minmax(0,28fr)_minmax(0,42fr)] xl:items-stretch">
|
||||
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
||||
<span className="w-fit text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
|
||||
Merchant Partnerships
|
||||
</span>
|
||||
<h2 className="text-[clamp(2.25rem,10vw,2.625rem)] md:text-5xl xl:text-[52px] font-display font-black text-brand-dark mt-6 mb-5 leading-tight tracking-tight">
|
||||
Bring Your Store Online <br className="hidden md:block" />
|
||||
with <span className="text-primary font-normal">Nearle.</span>
|
||||
</h2>
|
||||
<p className="text-body-lg text-on-surface-variant max-w-xl 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-7 space-y-3 text-sm md:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Build direct relationships with local families</span>
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Build direct relationships with local families</span>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-4 sm:flex-row xl:flex-col 2xl:flex-row">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap bg-primary hover:bg-primary-container text-white font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200 sm:w-auto xl:w-full 2xl:w-auto"
|
||||
>
|
||||
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 bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-7 py-3.5 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 sm:w-auto xl:w-full 2xl:w-auto"
|
||||
>
|
||||
Talk to Our Team
|
||||
<MaterialIcon icon="arrow_forward" size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Partner With Nearle
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
Talk to Our Team
|
||||
</Link>
|
||||
<div className="relative h-[clamp(280px,78vw,340px)] min-w-0 overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_60px_rgba(22,0,29,0.14)] md:h-[420px] md:max-h-[420px] xl:col-start-2 xl:row-span-2 xl:row-start-1 xl:h-auto xl:max-h-none xl:min-h-full">
|
||||
<Image
|
||||
src="/images/nearle-merchant/merchant-hero.webp"
|
||||
alt="Indian local grocery shop owner managing store orders on a laptop"
|
||||
fill
|
||||
sizes="(max-width: 767px) 100vw, (max-width: 1279px) 100vw, 28vw"
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="grid min-w-0 grid-cols-[104px_minmax(0,1fr)] gap-4 rounded-[1.5rem] xl:col-start-1 xl:row-start-2">
|
||||
<div className="relative min-h-32 overflow-hidden rounded-[1.5rem] bg-brand-accent-light shadow-[0_18px_35px_rgba(22,0,29,0.10)]">
|
||||
<Image
|
||||
src="/images/nearle-merchant/success-owner.webp"
|
||||
alt="Indian grocery shop owner using a smartphone inside a kirana store"
|
||||
fill
|
||||
sizes="104px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 rounded-[1.5rem] border border-primary/10 bg-white/90 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:p-5">
|
||||
<span className="text-[11px] font-black uppercase tracking-widest text-primary">
|
||||
Success Story
|
||||
</span>
|
||||
<h3 className="mt-2 text-lg font-black leading-tight text-brand-dark md:text-xl">
|
||||
Kumar Provision Store
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-on-surface-variant">
|
||||
Nearle helped us reach more customers in our area and manage orders effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-[repeat(2,minmax(0,1fr))] xl:col-start-3 xl:row-span-2 xl:row-start-1">
|
||||
{FEATURES.map((feature) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
className="flex min-h-[180px] min-w-0 flex-col overflow-hidden rounded-[1.75rem] border border-primary/10 bg-white/92 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.08)] md:min-h-[300px] xl:h-full"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
|
||||
<MaterialIcon icon={feature.icon} size={25} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-black tracking-tight text-brand-dark">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-on-surface-variant md:max-w-[24ch] xl:max-w-none">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-auto aspect-[16/8] w-full self-end overflow-hidden rounded-[1.25rem] bg-brand-accent-light md:aspect-[16/10]">
|
||||
<Image
|
||||
src={feature.visual}
|
||||
alt={feature.alt}
|
||||
fill
|
||||
sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 21vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Benefit Grid Cardless (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
|
||||
<div className="relative mt-6 flex snap-x snap-mandatory gap-3 overflow-x-auto rounded-[1.75rem] border border-primary/10 bg-white/88 p-4 shadow-[0_18px_40px_rgba(22,0,29,0.07)] md:grid md:grid-cols-[repeat(2,minmax(0,1fr))] md:overflow-visible xl:grid-cols-[repeat(4,minmax(0,1fr))]">
|
||||
{BENEFITS.map((benefit) => (
|
||||
<div key={benefit.title} className="flex flex-col items-start group">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
|
||||
<MaterialIcon icon={benefit.icon} size={28} />
|
||||
<div key={benefit} className="flex min-w-[230px] snap-start items-center gap-3 px-2 py-2 md:min-w-0">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
||||
<MaterialIcon icon="check_circle" size={20} />
|
||||
</div>
|
||||
<h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
|
||||
{benefit.desc}
|
||||
</p>
|
||||
<span className="text-sm font-black leading-snug text-brand-dark">
|
||||
{benefit}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
|
||||
<div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
{/* Decorative background vectors */}
|
||||
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
{/* Left copy column */}
|
||||
<div className="md:w-3/5 z-10 text-brand-dark">
|
||||
<span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
|
||||
Piping Hot & Fresh
|
||||
</span>
|
||||
<h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
|
||||
Everything Nearby, <br />From Stores You Trust.
|
||||
</h3>
|
||||
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
|
||||
Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
|
||||
</p>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
|
||||
>
|
||||
Explore Stores Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right visual column */}
|
||||
<div className="md:w-2/5 relative flex justify-center items-center">
|
||||
{/* Soft background shape */}
|
||||
<div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
|
||||
|
||||
<div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
|
||||
<Image
|
||||
src="/images/cat-hot-food.png"
|
||||
alt="Hot meals from Nearle local kitchen partners"
|
||||
width={400}
|
||||
height={400}
|
||||
className="w-full h-full object-cover scale-105"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user