update redesign
This commit is contained in:
@@ -1,15 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
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!"
|
||||
];
|
||||
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
|
||||
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
|
||||
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
||||
|
||||
const PROCESS_STEPS = [
|
||||
{
|
||||
@@ -17,7 +13,7 @@ const PROCESS_STEPS = [
|
||||
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"
|
||||
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
@@ -31,7 +27,7 @@ const PROCESS_STEPS = [
|
||||
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"
|
||||
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -71,211 +67,240 @@ const FEATURES = [
|
||||
];
|
||||
|
||||
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" }
|
||||
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
|
||||
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
|
||||
{ value: "5k+", label: "Active Partners", 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" },
|
||||
{ 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" }
|
||||
];
|
||||
|
||||
export default function BusinessesPage() {
|
||||
const [wordIndex, setWordIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length);
|
||||
}, 3000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
const collageCards = [
|
||||
{ text: "Nearby Customers", icon: "people" },
|
||||
{ text: "Orders & Offers", icon: "local_offer" },
|
||||
{ text: "Local Delivery Support", icon: "local_shipping" }
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
|
||||
<div className="page-frame">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 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">
|
||||
<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="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 border-b border-[#6330D6]/10">
|
||||
|
||||
{/* 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
|
||||
</p>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
<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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
|
||||
<div className="max-w-2xl text-left">
|
||||
<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 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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
||||
<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="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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-98"
|
||||
>
|
||||
<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 text-left">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
{/* Left side: features block (7 cols) */}
|
||||
<div className="lg:col-span-7 text-left">
|
||||
<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>
|
||||
List Your Store
|
||||
</a>
|
||||
<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-98"
|
||||
>
|
||||
Explore Solutions
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
|
||||
{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>
|
||||
{/* 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>
|
||||
|
||||
{/* BOTTOM HERO BENEFITS */}
|
||||
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<FeatureStatsRow items={HERO_BENEFITS} />
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
{/* ─── 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
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
|
||||
Move Your Business Forward
|
||||
</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>
|
||||
|
||||
<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-5.5 h-5.5 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 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}
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="bg-primary rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-12 md:p-20 relative text-center">
|
||||
<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"
|
||||
{/* 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" : ""
|
||||
}`}
|
||||
>
|
||||
<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 className="flex items-center justify-between">
|
||||
<div className={`w-8.5 h-8.5 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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── 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">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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 as Partner</span>
|
||||
</a>
|
||||
<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>
|
||||
</section>
|
||||
</PremiumPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user