337 lines
19 KiB
TypeScript
337 lines
19 KiB
TypeScript
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 = {
|
|
title: "Nearle for Business",
|
|
description:
|
|
"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 HERO_BENEFITS = [
|
|
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
|
|
{ title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
|
|
{ title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
|
|
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
|
|
];
|
|
|
|
function PhoneMapVisual() {
|
|
return (
|
|
<div className="relative flex h-full w-full items-center justify-center">
|
|
<div className="absolute bottom-1 h-6 w-36 rounded-full bg-[#16001D]/18 blur-xl" />
|
|
<div className="relative aspect-[9/19] h-[94%] min-h-[228px] max-h-[264px] rounded-[2.1rem] bg-[#120019] p-1.5 shadow-[0_26px_62px_rgba(22,0,29,0.25)]">
|
|
<div className="relative h-full overflow-hidden rounded-[1.7rem] bg-[#FAF8FC]">
|
|
<div className="absolute left-1/2 top-2.5 z-30 h-3.5 w-12 -translate-x-1/2 rounded-full bg-[#120019]" />
|
|
<div className="absolute inset-x-0 top-0 z-20 flex items-center justify-between px-4 pt-3.5 text-[7px] font-black text-[#16001D]/55">
|
|
<span>9:41</span>
|
|
<span className="h-1.5 w-5 rounded-full bg-[#16001D]/40" />
|
|
</div>
|
|
|
|
<div className="absolute inset-x-1.5 bottom-1.5 top-7 overflow-hidden rounded-[1.35rem] bg-[linear-gradient(145deg,#FAF8FC,#F1E7F8)]">
|
|
<svg className="absolute inset-0 h-full w-full" viewBox="0 0 140 255" fill="none" aria-hidden="true">
|
|
<rect width="140" height="255" fill="#FAF8FC" />
|
|
<path d="M-20 50C12 40 41 42 64 54C91 68 112 64 158 48" stroke="#E3D9EA" strokeWidth="8" strokeLinecap="round" />
|
|
<path d="M-18 178C24 158 51 164 78 179C102 192 124 192 158 174" stroke="#DDF0E3" strokeWidth="14" strokeLinecap="round" opacity="0.75" />
|
|
<path d="M24 -20L35 282" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M83 -24L73 280" stroke="#DED4E8" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M126 -16L112 268" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M-18 72H158" stroke="#E7DFEE" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M-18 122H158" stroke="#DED5E8" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M-18 212H158" stroke="#E9E2F0" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M-12 244L150 28" stroke="#E6DEED" strokeWidth="5" strokeLinecap="round" />
|
|
<path d="M6 180C35 155 48 130 70 117C92 104 108 91 125 70" stroke="#7C3AED" strokeWidth="1.8" strokeDasharray="3 5" strokeLinecap="round" opacity="0.55" />
|
|
<path d="M70 117C47 103 30 92 14 73" stroke="#006D37" strokeWidth="1.6" strokeDasharray="3 5" strokeLinecap="round" opacity="0.38" />
|
|
</svg>
|
|
|
|
{[
|
|
["left-[17%] top-[30%]", "bg-[#6330D6]"],
|
|
["right-[16%] top-[28%]", "bg-[#006D37]"],
|
|
["left-[20%] bottom-[33%]", "bg-[#006D37]"],
|
|
["right-[18%] bottom-[32%]", "bg-[#6330D6]"],
|
|
["right-[35%] top-[20%]", "bg-[#6330D6]"],
|
|
].map(([position, color]) => (
|
|
<div key={position} className={`absolute ${position} z-10`}>
|
|
<div className={`relative h-5 w-5 -rotate-45 rounded-[50%_50%_50%_10%] ${color} shadow-[0_5px_12px_rgba(22,0,29,0.12)]`}>
|
|
<div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className="absolute left-1/2 top-[38%] z-20 -translate-x-1/2 -translate-y-1/2">
|
|
<div className="absolute left-1/2 top-[82%] h-10 w-16 -translate-x-1/2 rounded-full bg-[#6330D6]/18 blur-md" />
|
|
<div className="relative h-16 w-16 -rotate-45 rounded-[50%_50%_50%_12%] bg-[linear-gradient(135deg,#8B5CF6,#6330D6)] shadow-[0_14px_28px_rgba(99,48,214,0.30)]">
|
|
<div className="absolute left-1/2 top-1/2 h-7 w-7 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-2 left-2.5 right-2.5 z-30 h-[30%] rounded-2xl bg-white/94 p-2.5 shadow-[0_10px_26px_rgba(22,0,29,0.14)] backdrop-blur">
|
|
<p className="truncate text-[9.5px] font-black leading-none text-[#16001D]">Your Store</p>
|
|
<div className="mt-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[7.5px] font-bold text-[#5E5866]">
|
|
<span className="inline-flex items-center gap-0.5">
|
|
<MaterialIcon icon="star" size={10} fill className="text-amber-500" />
|
|
4.8
|
|
</span>
|
|
<span className="font-black text-[#006D37]">Open</span>
|
|
<span>0.8 km</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -left-8 top-[29%] z-40 rounded-full bg-white px-3 py-1.5 text-[9px] font-black text-[#006D37] shadow-[0_10px_22px_rgba(22,0,29,0.14)] ring-1 ring-[#006D37]/10">
|
|
Offers
|
|
</div>
|
|
<div className="absolute -right-7 top-[43%] z-40 rounded-full bg-[#6330D6] px-3 py-1.5 text-[9px] font-black text-white shadow-[0_10px_22px_rgba(99,48,214,0.24)]">
|
|
Shop
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function BusinessesPage() {
|
|
const collageCards = [
|
|
{ text: "Nearby Customers", icon: "people" },
|
|
{ text: "Orders & Offers", icon: "local_offer" },
|
|
{ text: "Local Delivery Support", icon: "local_shipping" }
|
|
];
|
|
|
|
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]">
|
|
{/* TWO-COLUMN GRID */}
|
|
<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">
|
|
|
|
{/* Left Column: Copy & Actions */}
|
|
<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">
|
|
Nearle for Business
|
|
</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">
|
|
Grow Your Local Business,
|
|
<br />
|
|
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
|
|
</h1>
|
|
|
|
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
|
|
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
|
{/* 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 md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
|
>
|
|
List Your Store
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
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]"
|
|
>
|
|
Explore Solutions
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Visual Collage */}
|
|
<div className="w-full">
|
|
<HeroVisualCollage
|
|
centerImage="/nearlenewlogo.png"
|
|
leftImage="/images/cat-daily-essentials.png"
|
|
rightImage="/Nearle Business.png"
|
|
glassCards={collageCards}
|
|
isPhoneCenter={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* BOTTOM HERO BENEFITS */}
|
|
<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_BENEFITS} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Intro Highlight Banner ─── */}
|
|
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:px-20 xl:py-8 2xl:px-24 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
|
|
</span>
|
|
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-3 leading-tight">
|
|
Get set in minutes and delight the Neighborhood
|
|
</h2>
|
|
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
|
|
Nearle is built to help businesses like <strong className="text-[#6330D6]">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-4 shrink-0">
|
|
<Link
|
|
href="/contact"
|
|
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm shadow-md active:scale-95 transition-all flex items-center gap-2"
|
|
>
|
|
<MaterialIcon icon="chat" size={18} />
|
|
<span>Talk to an Expert</span>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── 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-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
|
|
Build Your Neighborhood Brand
|
|
</h2>
|
|
<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>
|
|
|
|
{/* 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-[270px] lg:h-[290px] flex items-center 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="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>
|
|
</PremiumPageShell>
|
|
);
|
|
}
|