fix footer section padding
This commit is contained in:
@@ -9,7 +9,7 @@ const FEATURES = [
|
||||
icon: "menu_book",
|
||||
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
||||
alt: "Clean grocery catalogue interface preview",
|
||||
tone: "bg-primary/5 text-primary",
|
||||
tone: "bg-primary/8 text-primary",
|
||||
},
|
||||
{
|
||||
title: "QR Ordering",
|
||||
@@ -17,7 +17,7 @@ const FEATURES = [
|
||||
icon: "qr_code",
|
||||
visual: "/images/nearle-merchant/qr-stand.webp",
|
||||
alt: "QR ordering stand on a local grocery store counter",
|
||||
tone: "bg-secondary/5 text-secondary",
|
||||
tone: "bg-secondary/8 text-secondary",
|
||||
},
|
||||
{
|
||||
title: "Local Discovery",
|
||||
@@ -38,59 +38,96 @@ const FEATURES = [
|
||||
];
|
||||
|
||||
const BENEFITS = [
|
||||
"No Commission on your orders",
|
||||
"Full Control on pricing",
|
||||
"Dedicated Support for your business",
|
||||
"Grow Your Sales in your area",
|
||||
{
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<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="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" />
|
||||
|
||||
<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">
|
||||
{/*
|
||||
* Grid layout:
|
||||
* mobile (<768px) : 1 col — text → cards (1/row) → success story [via CSS order]
|
||||
* tablet (768–1279px) : 1 col — text → success story → cards 2×2 [via CSS order]
|
||||
* 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">
|
||||
|
||||
{/* ── 1. Left text content (always col-1 row-1) ── */}
|
||||
<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>
|
||||
{/* 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="text-body-lg text-on-surface-variant max-w-xl leading-relaxed">
|
||||
|
||||
<p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
|
||||
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="mt-5 space-y-3">
|
||||
<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="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">Stay in control of your pricing and orders</span>
|
||||
<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="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="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">Build direct relationships with local families</span>
|
||||
<span className="font-bold text-brand-dark text-sm md:text-base">
|
||||
Build direct relationships with local families
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-4 sm:flex-row xl:flex-col 2xl:flex-row">
|
||||
<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 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"
|
||||
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 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"
|
||||
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} />
|
||||
@@ -98,85 +135,98 @@ export function BusinessSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
{/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
|
||||
mobile : order-2 → appears after text, before success story
|
||||
tablet : order-3 → appears after text + success story
|
||||
desktop : explicit col-2, row-span-2
|
||||
*/}
|
||||
<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">
|
||||
{FEATURES.map((feature) => (
|
||||
<article
|
||||
key={feature.title}
|
||||
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)]"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</article>
|
||||
))}
|
||||
</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)]">
|
||||
{/* ── 3. Success story ──
|
||||
mobile : order-3 → appears after feature cards
|
||||
tablet : order-2 → appears after text, before cards
|
||||
desktop : explicit col-1, row-2 (below text in left column)
|
||||
*/}
|
||||
<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)]">
|
||||
<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="104px"
|
||||
className="object-cover"
|
||||
sizes="100px"
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
</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">
|
||||
<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-2 text-lg font-black leading-tight text-brand-dark md:text-xl">
|
||||
<h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
|
||||
Kumar Provision Store
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-on-surface-variant">
|
||||
<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>
|
||||
</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>
|
||||
{/* ── Benefits strip ── */}
|
||||
<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)]">
|
||||
<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) => (
|
||||
<div key={b.title} 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 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 className="text-sm font-black text-brand-dark">{b.title}</div>
|
||||
<div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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} 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>
|
||||
<span className="text-sm font-black leading-snug text-brand-dark">
|
||||
{benefit}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user