update redesign
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
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 type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -14,7 +16,7 @@ const STRATEGY_CARDS = [
|
||||
title: "Our Mission",
|
||||
descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
|
||||
icon: "target",
|
||||
color: "bg-primary/5 text-primary border-primary/10"
|
||||
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
|
||||
},
|
||||
{
|
||||
title: "Our Vision",
|
||||
@@ -26,131 +28,169 @@ const STRATEGY_CARDS = [
|
||||
title: "Why Nearle",
|
||||
descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
|
||||
icon: "help_outline",
|
||||
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20"
|
||||
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
|
||||
}
|
||||
];
|
||||
|
||||
const COUNTERS = [
|
||||
const LOCAL_COUNTERS = [
|
||||
{ count: "100+", label: "Customers Served", icon: "people" },
|
||||
{ count: "100+", label: "Active Businesses", icon: "store" },
|
||||
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
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 ─── */}
|
||||
<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="/about.png"
|
||||
alt="About Nearle Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
const HERO_STATS = [
|
||||
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
|
||||
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
|
||||
{ title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
|
||||
{ title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
|
||||
];
|
||||
|
||||
<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">
|
||||
We are Nearle
|
||||
</p>
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
|
||||
We build Neighbourhoods.
|
||||
export default function AboutPage() {
|
||||
const collageCards = [
|
||||
{ text: "Local First", icon: "store" },
|
||||
{ text: "Trusted Network", icon: "verified" },
|
||||
{ text: "Connected Communities", icon: "groups" }
|
||||
];
|
||||
|
||||
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="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">
|
||||
About Nearle
|
||||
</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">
|
||||
Built for Every
|
||||
<br />
|
||||
<span className="text-[#6330D6]">Neighbourhood.</span>
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
|
||||
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
|
||||
Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our Platform
|
||||
</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6">
|
||||
Nearle Neighbourhood Commerce
|
||||
</h2>
|
||||
<p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
|
||||
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<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="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col text-left"
|
||||
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<a
|
||||
href="#story-section"
|
||||
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={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={24} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<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 text-center">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4">
|
||||
<MaterialIcon icon={c.icon} size={24} />
|
||||
</div>
|
||||
<h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
|
||||
<p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
|
||||
{c.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<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 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Don't miss the opportunity
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
|
||||
Build Your Brand with Nearle
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
Our Story
|
||||
</a>
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
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"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Merchant</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-surface-container hover:bg-surface-container-high text-brand-dark 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="download" size={18} />
|
||||
<span>Download App</span>
|
||||
Join Our Journey
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Right Column: Visual Collage */}
|
||||
<div className="w-full">
|
||||
<HeroVisualCollage
|
||||
centerImage="/nearlenewlogo.png"
|
||||
leftImage="/Nearle Business.png"
|
||||
rightImage="/nearle people.png"
|
||||
glassCards={collageCards}
|
||||
isPhoneCenter={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM HERO STATS */}
|
||||
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<FeatureStatsRow items={HERO_STATS} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
Our Platform
|
||||
</span>
|
||||
<h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-4">
|
||||
Nearle Neighbourhood Commerce
|
||||
</h2>
|
||||
<p className="mx-auto max-w-3xl text-sm md:text-base text-[#5E5866] leading-relaxed font-semibold">
|
||||
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<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 grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 shrink-0 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={22} />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-[#16001D] mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{LOCAL_COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
<div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
|
||||
<MaterialIcon icon={c.icon} size={22} />
|
||||
</div>
|
||||
<h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
|
||||
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
|
||||
{c.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
|
||||
Don't miss the opportunity
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4 mb-4">
|
||||
Build Your Brand with Nearle
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] max-w-2xl mx-auto mb-8 leading-relaxed font-semibold">
|
||||
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-lg transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Merchant</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] 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="download" size={18} />
|
||||
<span>Download App</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</PremiumPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user