remove unused files
This commit is contained in:
@@ -1,17 +1,313 @@
|
||||
"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 (
|
||||
<section className="min-h-[70vh] bg-surface px-margin-mobile md:px-margin-desktop py-24">
|
||||
<div className="mx-auto max-w-container-max text-center">
|
||||
<p className="text-label-sm font-black uppercase tracking-widest text-primary">
|
||||
Nearle for Business
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-brand-dark md:text-6xl">
|
||||
Grow with neighborhood delivery.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-on-surface-variant">
|
||||
Partner with Nearle to reach nearby customers, manage local demand, and deliver faster within your neighborhood.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(0,109,55,0.15),transparent_40%)]" />
|
||||
|
||||
<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>
|
||||
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
India's #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward.
|
||||
</p>
|
||||
|
||||
{/* App Download Links */}
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Download on the</div>
|
||||
<div className="text-sm font-black">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-44 rounded-xl border border-white/20 hover:bg-white/10 transition-colors p-1 flex items-center justify-center bg-white/5 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3 text-white text-left">
|
||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent" />
|
||||
<div>
|
||||
<div className="text-[10px] uppercase font-bold text-white/60">Get it on</div>
|
||||
<div className="text-sm font-black">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<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-margin-mobile md:px-margin-desktop 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-margin-mobile md:px-margin-desktop">
|
||||
<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-margin-mobile md:px-margin-desktop 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(252,163,17,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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user