fix hero section layout in homepage
This commit is contained in:
@@ -38,39 +38,38 @@ const COUNTERS = [
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 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>
|
||||
<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>
|
||||
|
||||
<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.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
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>
|
||||
<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.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
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="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 text-center">
|
||||
{/* ─── 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>
|
||||
@@ -80,34 +79,32 @@ export default function AboutPage() {
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<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"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={24} />
|
||||
{/* ─── 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={`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>
|
||||
<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>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<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">
|
||||
{/* ─── 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">
|
||||
@@ -121,39 +118,39 @@ export default function AboutPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
|
||||
<div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl 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">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</Link>
|
||||
{/* ─── 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">
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -88,42 +88,41 @@ export default function BusinessesPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 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>
|
||||
<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">
|
||||
Nearle for Business
|
||||
</p>
|
||||
<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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
<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="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</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">
|
||||
{/* ─── 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>
|
||||
@@ -143,53 +142,50 @@ export default function BusinessesPage() {
|
||||
<span>Talk to an Expert</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
{/* ─── 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="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
|
||||
{ps.step}
|
||||
<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 text-left">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</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>
|
||||
))}
|
||||
</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">
|
||||
{/* ─── 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">
|
||||
<div className="lg:col-span-7 text-left">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our features
|
||||
</span>
|
||||
@@ -220,7 +216,7 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
|
||||
{STATS.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
@@ -246,14 +242,11 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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">
|
||||
{/* ─── 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">
|
||||
@@ -281,8 +274,8 @@ export default function BusinessesPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { ContactForm } from "@/components/contact/ContactForm";
|
||||
import type { Metadata } from "next";
|
||||
@@ -11,10 +10,9 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
|
||||
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<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">
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<section className="bg-brand-dark 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 min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
|
||||
{/* Subtle decorative blurred purple glow behind left content */}
|
||||
<div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
|
||||
@@ -23,7 +21,7 @@ export default function ContactPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
|
||||
|
||||
{/* Left Column — MUST BE VISIBLE */}
|
||||
<div className="relative z-10 text-white max-w-[580px]">
|
||||
<div className="relative z-10 text-white max-w-[580px] text-left">
|
||||
<span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
|
||||
LET’S CONNECT
|
||||
</span>
|
||||
@@ -79,99 +77,97 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 424, Diwan Bahadur Rd,<br />
|
||||
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
|
||||
Coimbatore, Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Phones */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 424, Diwan Bahadur Rd,<br />
|
||||
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
|
||||
Coimbatore, Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Email */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
{/* Card 2: Phones */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
{/* Card 3: Email */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ─── Map Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
|
||||
{/* ─── Map Section ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
|
||||
<div className="relative w-full h-[450px]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
@@ -197,7 +193,6 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1131,6 +1131,41 @@ body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ─── Shared Premium Framed Layout Classes ─── */
|
||||
.page-canvas {
|
||||
@apply bg-[#E6D7EA] flex flex-col gap-0;
|
||||
}
|
||||
|
||||
.page-frame {
|
||||
@apply mx-auto w-full;
|
||||
max-width: min(100% - 16px, 1560px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 24px, 1560px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 40px, 1680px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 56px, 1840px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 96px, 2200px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,29 +8,17 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
|
||||
<div className="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
|
||||
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-2 md:pt-3 lg:pt-4 pb-0">
|
||||
<div className="page-frame">
|
||||
<Hero />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<ServiceCategories />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<WhyNearle />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<HowItWorks />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<HyperlocalFeatures />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<BusinessSection />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<StoreQRSection />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -145,81 +145,80 @@ export default function PeoplePage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="hero-background select-none pointer-events-none">
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Nearle People Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-right"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<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="hero-background select-none pointer-events-none">
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Nearle People Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-right"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hero-content 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 People
|
||||
</p>
|
||||
<div className="hero-content 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 People
|
||||
</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>Redefining Local Living.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_SLIDES[slideIndex]}
|
||||
<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>Redefining Local Living.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_SLIDES[slideIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="experience-section 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="mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
What we offer
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Everything You Need, Just a Click Away
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
What we offer
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Everything You Need, Just a Click Away
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="experience-grid">
|
||||
{OFFERINGS.map((offering) => (
|
||||
<article
|
||||
key={offering.title}
|
||||
className="experience-card"
|
||||
>
|
||||
<Image
|
||||
src={offering.image}
|
||||
alt={offering.title}
|
||||
fill
|
||||
sizes="(max-width: 1023px) 100vw, 33vw"
|
||||
className="experience-card__image"
|
||||
/>
|
||||
<div className="experience-card__overlay" />
|
||||
<div className="experience-card__content">
|
||||
<div className="experience-card__icon">
|
||||
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
|
||||
<div className="experience-grid">
|
||||
{OFFERINGS.map((offering) => (
|
||||
<article
|
||||
key={offering.title}
|
||||
className="experience-card"
|
||||
>
|
||||
<Image
|
||||
src={offering.image}
|
||||
alt={offering.title}
|
||||
fill
|
||||
sizes="(max-width: 1023px) 100vw, 33vw"
|
||||
className="experience-card__image"
|
||||
/>
|
||||
<div className="experience-card__overlay" />
|
||||
<div className="experience-card__content text-left">
|
||||
<div className="experience-card__icon">
|
||||
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
|
||||
</div>
|
||||
<h3>{offering.title}</h3>
|
||||
<p>{offering.descr}</p>
|
||||
</div>
|
||||
<h3>{offering.title}</h3>
|
||||
<p>{offering.descr}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<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="text-center mb-12">
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<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="mb-12">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Nearle Network
|
||||
</span>
|
||||
@@ -247,12 +246,10 @@ export default function PeoplePage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-20">
|
||||
<div className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2.5rem] p-8 md:p-12 lg:p-14 relative overflow-hidden shadow-2xl border border-white/5">
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] 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-8 md:p-12 lg:p-14 relative text-center">
|
||||
{/* Subtle ambient light gradient overlays */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
|
||||
@@ -452,8 +449,8 @@ export default function PeoplePage() {
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<div className="text-left text-brand-dark">
|
||||
<p className="text-xs font-black leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -555,8 +552,8 @@ export default function PeoplePage() {
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<div className="text-left text-brand-dark">
|
||||
<p className="text-xs font-black leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -596,8 +593,8 @@ export default function PeoplePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user