footer section fix
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
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 { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -12,71 +14,6 @@ export const metadata: Metadata = {
|
||||
"Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales — all from one simple hyperlocal platform.",
|
||||
};
|
||||
|
||||
const PROCESS_STEPS = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Get Online",
|
||||
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
|
||||
icon: "storefront",
|
||||
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Get Noticed",
|
||||
descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
|
||||
icon: "campaign",
|
||||
color: "bg-secondary/5 text-secondary border-secondary/10"
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Get Simplified",
|
||||
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
|
||||
icon: "auto_awesome",
|
||||
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
|
||||
}
|
||||
];
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Direct Customer Access",
|
||||
descr: "Build direct relationships and trust with residents in your immediate vicinity."
|
||||
},
|
||||
{
|
||||
title: "Become a Partner",
|
||||
descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
|
||||
},
|
||||
{
|
||||
title: "Build Your Brand",
|
||||
descr: "Brand your business on Nearle and reach out to your community with ease."
|
||||
},
|
||||
{
|
||||
title: "Huge Opportunity",
|
||||
descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
|
||||
},
|
||||
{
|
||||
title: "Delight Your Customers",
|
||||
descr: "Delight customers in the neighborhood with a personalized online shopping experience."
|
||||
},
|
||||
{
|
||||
title: "Unique Model",
|
||||
descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
|
||||
},
|
||||
{
|
||||
title: "Reach Right Audience",
|
||||
descr: "We target your ideal customers — people in your neighborhood search for what you offer."
|
||||
},
|
||||
{
|
||||
title: "Increase Your Customers",
|
||||
descr: "Increase walk-in and online customers by targeting local demand."
|
||||
}
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
|
||||
{ value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
|
||||
{ value: "Easy", label: "Direct Customer Access", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
|
||||
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
|
||||
];
|
||||
|
||||
const HERO_BENEFITS = [
|
||||
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
|
||||
@@ -85,6 +22,111 @@ const HERO_BENEFITS = [
|
||||
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
|
||||
];
|
||||
|
||||
function PhoneMapVisual() {
|
||||
return (
|
||||
// Single phone frame — no outer wrapper needed, no floating pills
|
||||
<div
|
||||
className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
|
||||
style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
|
||||
>
|
||||
{/* Status bar */}
|
||||
<div className="flex items-center justify-between px-3 pt-2.5 pb-1">
|
||||
<span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[4, 6, 8, 10].map((h) => (
|
||||
<span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
|
||||
<svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
|
||||
<circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
|
||||
<path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
|
||||
</svg>
|
||||
<span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
|
||||
<svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
|
||||
<path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div
|
||||
className="relative mx-2.5 overflow-hidden rounded-2xl"
|
||||
style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
|
||||
>
|
||||
{/* Street grid */}
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
|
||||
backgroundSize: "16px 16px",
|
||||
}} />
|
||||
{/* Subtle glow under main pin */}
|
||||
<div className="absolute rounded-full bg-[#6330D6]/10"
|
||||
style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
|
||||
|
||||
{/* Large center pin */}
|
||||
<svg className="absolute" aria-hidden="true"
|
||||
style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
|
||||
width="24" height="30" viewBox="0 0 16 20" fill="none">
|
||||
<path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
|
||||
<circle cx="8" cy="8.6" r="3.2" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — top-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — upper-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — lower-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — lower-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Store preview card — bottom sheet inside phone */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
|
||||
{/* Store thumbnail */}
|
||||
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
|
||||
style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
|
||||
<svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
|
||||
<path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
|
||||
<rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
|
||||
<div className="mt-1 flex items-center gap-1">
|
||||
<span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">4.8</span>
|
||||
<span className="text-[7.5px] leading-none">⭐</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
|
||||
<path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BusinessesPage() {
|
||||
const collageCards = [
|
||||
{ text: "Nearby Customers", icon: "people" },
|
||||
@@ -151,7 +193,7 @@ export default function BusinessesPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<div className="max-w-2xl text-left">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
|
||||
Together, we grow
|
||||
@@ -174,133 +216,146 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PROCESS_STEPS.map((ps) => (
|
||||
<div
|
||||
key={ps.step}
|
||||
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
|
||||
>
|
||||
<div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
|
||||
{ps.step}
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
|
||||
<MaterialIcon icon={ps.icon} size={22} />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
{/* Left side: features block (7 cols) */}
|
||||
<div className="lg:col-span-7 text-left">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
Our features
|
||||
{/* ─── Build Your Neighborhood Brand ─── */}
|
||||
<section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
|
||||
<div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-10 lg:mb-12 xl:mb-10">
|
||||
<span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
|
||||
Move Your Business Forward
|
||||
<h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
|
||||
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
|
||||
<p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{FEATURES.map((feat) => (
|
||||
<div key={feat.title} className="flex gap-3">
|
||||
<div className="w-[22px] h-[22px] rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
|
||||
<MaterialIcon icon="check" size={14} className="font-black" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display text-sm font-black text-[#16001D] mb-1">
|
||||
{feat.title}
|
||||
</h4>
|
||||
<p className="text-xs text-[#5E5866] leading-relaxed">
|
||||
{feat.descr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
|
||||
{STATS.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
|
||||
i % 2 === 1 ? "lg:mt-4" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={`w-[34px] h-[34px] rounded-xl flex items-center justify-center ${
|
||||
stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
|
||||
}`}>
|
||||
<MaterialIcon icon={stat.icon} size={18} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
|
||||
<p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
|
||||
stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
|
||||
}`}>
|
||||
{stat.label}
|
||||
</p>
|
||||
{/* Cards grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
|
||||
{/* Card 1 - Get Online */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
01
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
|
||||
<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">
|
||||
Get Online
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center">
|
||||
<div className="relative h-[150px] w-[220px] lg:h-[175px] lg:w-[255px]">
|
||||
<Image
|
||||
src="/images/nearle-how/how-storefront.webp"
|
||||
alt="Local shop storefront with purple awning and now online board"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-contain object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</article>
|
||||
|
||||
{/* Card 2 - Get Noticed */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
02
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
|
||||
<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">
|
||||
Get Noticed
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
|
||||
<PhoneMapVisual />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Card 3 - Get Simplified */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
03
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
|
||||
<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">
|
||||
Get Simplified
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center gap-4">
|
||||
<div className="hidden sm:flex flex-col gap-2 pb-2">
|
||||
{["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
|
||||
<div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm whitespace-nowrap">
|
||||
{chip}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
|
||||
<Image
|
||||
src="/images/nearle-how/how-grocery-bag.webp"
|
||||
alt="Nearle grocery bag filled with vegetables and packaged products"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-contain object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Our Features / Business Grid ─── */}
|
||||
<BusinessFeaturesGrid />
|
||||
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
|
||||
Nearle is Essential for Business Growth
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
|
||||
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3.5">
|
||||
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
|
||||
<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 Interest</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>Contact Experts</span>
|
||||
</Link>
|
||||
<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] to-[#0A000D] text-white">
|
||||
<div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
|
||||
Nearle is Essential for Business Growth
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
|
||||
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3.5">
|
||||
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
|
||||
<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 Interest</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>Contact Experts</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user