289 lines
12 KiB
TypeScript
289 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
|
|
const ROTATOR_WORDS = [
|
|
"Stand above your competitors!",
|
|
// "Reach the right people, near you.",
|
|
"Get noticed in your locality!"
|
|
];
|
|
|
|
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-primary/5 text-primary border-primary/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-brand-accent/10 text-brand-accent border-brand-accent/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: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
|
|
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
|
|
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
|
|
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" }
|
|
];
|
|
|
|
export default function BusinessesPage() {
|
|
const [wordIndex, setWordIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length);
|
|
}, 3000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative min-h-screen bg-background">
|
|
{/* ─── Hero Section with Animated Rotator ─── */}
|
|
<section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
|
|
{/* Background Image with Overlay */}
|
|
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
|
<Image
|
|
src="/Nearle Business.png"
|
|
alt="Nearle Business Background"
|
|
fill
|
|
sizes="100vw"
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-[#120217]/50" />
|
|
</div>
|
|
|
|
<div className="relative z-10 mx-auto max-w-container-max">
|
|
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
|
Nearle for Business
|
|
</p>
|
|
|
|
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
|
<span>Power your business.</span>
|
|
<br />
|
|
<span className="relative inline-block text-brand-accent min-h-[1.2em] transition-all duration-500">
|
|
{ROTATOR_WORDS[wordIndex]}
|
|
</span>
|
|
</h1>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Intro Highlight Banner ─── */}
|
|
<section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
|
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
|
|
<div className="max-w-2xl">
|
|
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
|
Together, we grow
|
|
</span>
|
|
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight">
|
|
Get set in minutes and delight the Neighborhood
|
|
</h2>
|
|
<p className="text-body-md text-on-surface-variant leading-relaxed">
|
|
Nearle is built to help businesses like <strong className="text-primary">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-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2"
|
|
>
|
|
<MaterialIcon icon="chat" size={18} />
|
|
<span>Talk to an Expert</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Timeline / Core Process Steps ─── */}
|
|
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
|
|
<div className="text-center mb-16">
|
|
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
|
How it works
|
|
</span>
|
|
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
|
Build Your Neighborhood Brand
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
|
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="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
|
|
>
|
|
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
|
|
{ps.step}
|
|
</div>
|
|
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
|
|
<MaterialIcon icon={ps.icon} size={28} />
|
|
</div>
|
|
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
|
{ps.title}
|
|
</h3>
|
|
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
|
{ps.descr}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Grid Stats & Value Prop ─── */}
|
|
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
|
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
|
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
|
|
|
{/* Left side: features block (7 cols) */}
|
|
<div className="lg:col-span-7">
|
|
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
|
Our features
|
|
</span>
|
|
<h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6">
|
|
Move Your Business Forward
|
|
</h2>
|
|
<p className="text-body-md text-on-surface-variant mb-12 max-w-2xl">
|
|
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
|
{FEATURES.map((feat) => (
|
|
<div key={feat.title} className="flex gap-4">
|
|
<div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
|
|
<MaterialIcon icon="check" size={16} className="font-black" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-display text-[15px] font-black text-brand-dark mb-1">
|
|
{feat.title}
|
|
</h4>
|
|
<p className="text-body-sm text-on-surface-variant 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-6">
|
|
{STATS.map((stat, i) => (
|
|
<div
|
|
key={stat.label}
|
|
className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
|
|
i % 2 === 1 ? "lg:mt-8" : ""
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
|
|
stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
|
|
}`}>
|
|
<MaterialIcon icon={stat.icon} size={20} />
|
|
</div>
|
|
</div>
|
|
<div className="mt-8">
|
|
<p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
|
|
<p className={`text-[11px] font-bold mt-1 ${
|
|
stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
|
|
}`}>
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Join/Download Call to Action ─── */}
|
|
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
|
|
<div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
|
|
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
|
|
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
|
|
Nearle is Essential for Business Growth
|
|
</h2>
|
|
<p className="text-body-lg text-white/80 mb-10 leading-relaxed">
|
|
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-4">
|
|
<a
|
|
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2"
|
|
>
|
|
<MaterialIcon icon="bolt" size={18} />
|
|
<span>Register as Partner</span>
|
|
</a>
|
|
<Link
|
|
href="/contact"
|
|
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
|
>
|
|
<MaterialIcon icon="phone" size={18} />
|
|
<span>Contact Experts</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|