hero section content
This commit is contained in:
@@ -69,7 +69,7 @@ export default function AboutPage() {
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
|
||||
<section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 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_70%_70%,rgba(0,109,55,0.15),transparent_40%)]" />
|
||||
|
||||
@@ -87,7 +87,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section className="relative z-20 -mt-16 mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<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">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our Platform
|
||||
@@ -102,7 +102,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<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
|
||||
@@ -124,8 +124,8 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-16">
|
||||
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
||||
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
@@ -143,7 +143,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Team Section ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left: About team content */}
|
||||
@@ -193,7 +193,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Client Testimonial & Quote ─── */}
|
||||
<section className="bg-brand-dark px-margin-mobile md:px-margin-desktop py-24 text-center text-white">
|
||||
<section className="bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center text-white">
|
||||
<div className="mx-auto max-w-4xl relative">
|
||||
<span className="absolute -top-12 left-1/2 -translate-x-1/2 text-8xl font-black text-brand-accent/10 font-display">
|
||||
“
|
||||
@@ -219,7 +219,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24 text-center">
|
||||
<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
|
||||
|
||||
@@ -7,7 +7,7 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const ROTATOR_WORDS = [
|
||||
"Stand above your competitors!",
|
||||
"Reach the right people, near you.",
|
||||
// "Reach the right people, near you.",
|
||||
"Get noticed in your locality!"
|
||||
];
|
||||
|
||||
@@ -90,9 +90,19 @@ export default function BusinessesPage() {
|
||||
return (
|
||||
<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%)]" />
|
||||
<section className="relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
||||
<Image
|
||||
src="/Nearle Business.png"
|
||||
alt="Nearle Business Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
@@ -107,46 +117,11 @@ export default function BusinessesPage() {
|
||||
</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">
|
||||
<section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
|
||||
<div className="max-w-2xl">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
@@ -172,7 +147,7 @@ export default function BusinessesPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<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
|
||||
@@ -210,7 +185,7 @@ export default function BusinessesPage() {
|
||||
|
||||
{/* ─── 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="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left side: features block (7 cols) */}
|
||||
@@ -277,9 +252,9 @@ export default function BusinessesPage() {
|
||||
</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">
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
|
||||
<div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(252,163,17,0.18),transparent_50%)] animate-pulse-subtle" />
|
||||
<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
|
||||
|
||||
@@ -97,10 +97,10 @@ export default function ContactPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Breadcrumbs & Hero Page Header ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-20 pb-24 text-center">
|
||||
<section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
|
||||
{/* Background Decorative Gradients */}
|
||||
<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_70%_80%,rgba(252,163,17,0.08),transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(203,157,248,0.12),transparent_50%)]" />
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
{/* Breadcrumbs */}
|
||||
@@ -137,7 +137,7 @@ export default function ContactPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="relative z-20 mx-auto -mt-10 max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
@@ -225,7 +225,7 @@ export default function ContactPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Map & Form Section ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-20">
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
|
||||
{/* Left: Google Map (5 Cols) */}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
/* ─── Design Tokens (Material Design 3 inspired) ─── */
|
||||
:root {
|
||||
--surface: #f9f9fc;
|
||||
--surface: #E7D3EF;
|
||||
--surface-dim: #dadadc;
|
||||
--surface-bright: #f9f9fc;
|
||||
--surface-bright: #E7D3EF;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #f3f3f6;
|
||||
--surface-container: #eeeef0;
|
||||
@@ -46,14 +46,14 @@
|
||||
--tertiary-fixed-dim: #ebc246;
|
||||
--on-tertiary-fixed: #241a00;
|
||||
--on-tertiary-fixed-variant: #584400;
|
||||
--background: #f9f9fc;
|
||||
--background: #E7D3EF;
|
||||
--on-background: #1a1c1e;
|
||||
--surface-variant: #e2e2e5;
|
||||
--brand-dark: #120217;
|
||||
--brand-dark-surface: #1e0627;
|
||||
--brand-accent: #fca311;
|
||||
--brand-accent-light: #ffe08b;
|
||||
--brand-cream: #faf8f5;
|
||||
--brand-accent: #e0c8f7;
|
||||
--brand-accent-light: #E4D0FC;
|
||||
--brand-cream: #E7D3EF;
|
||||
}
|
||||
|
||||
/* ─── Tailwind v4 Theme ─── */
|
||||
@@ -327,11 +327,13 @@ body {
|
||||
}
|
||||
|
||||
/* Hero-only clipped background layers */
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 1024px) {
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 785px;
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
min-height: 500px;
|
||||
overflow: visible;
|
||||
padding-bottom: 100px;
|
||||
background:
|
||||
radial-gradient(circle at 62% 48%, rgba(108, 14, 128, 0.7), transparent 36%),
|
||||
radial-gradient(circle at 25% 38%, rgba(55, 0, 74, 0.62), transparent 34%),
|
||||
@@ -358,13 +360,17 @@ body {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Right column occupies exactly 52% of width to ensure diagonal doesn't clip */
|
||||
.hero-visual-layer {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 110px;
|
||||
width: min(50vw, 820px);
|
||||
bottom: 0;
|
||||
width: 52%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
overflow: hidden;
|
||||
@@ -374,20 +380,17 @@ body {
|
||||
.hero-visual-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #ffffff;
|
||||
clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
|
||||
background: #E7D3EF;
|
||||
clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-visual-image {
|
||||
position: absolute;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
right: clamp(48px, 5vw, 96px);
|
||||
bottom: clamp(26px, 4vw, 60px);
|
||||
width: min(78%, 600px);
|
||||
max-width: 600px;
|
||||
max-height: calc(100% - 80px);
|
||||
aspect-ratio: 455 / 374;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
left: 10%; /* Shift logo right to account for diagonal clip path visually */
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@@ -413,10 +416,12 @@ body {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Left column occupies exactly 46% of width to avoid diagonal overlap */
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: min(610px, 48vw);
|
||||
width: 46%;
|
||||
max-width: 46%;
|
||||
padding-top: 94px;
|
||||
animation: hero-copy-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
@@ -424,47 +429,25 @@ body {
|
||||
.hero-stage {
|
||||
padding-left: clamp(72px, 7.5vw, 150px);
|
||||
padding-right: clamp(32px, 4vw, 80px);
|
||||
min-height: 740px;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.hero-cards {
|
||||
.service-cards-wrapper {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transform: translateY(-50%);
|
||||
padding-left: clamp(72px, 7.5vw, 150px);
|
||||
padding-right: clamp(72px, 7.5vw, 150px);
|
||||
margin-bottom: -45px;
|
||||
z-index: 10;
|
||||
margin-top: -85px;
|
||||
padding-left: var(--spacing-margin-desktop);
|
||||
padding-right: var(--spacing-margin-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1099px) {
|
||||
.hero {
|
||||
min-height: 720px;
|
||||
}
|
||||
|
||||
.hero-visual-layer {
|
||||
width: min(52vw, 560px);
|
||||
bottom: 128px;
|
||||
}
|
||||
|
||||
.hero-visual-image {
|
||||
right: -8px;
|
||||
bottom: 52px;
|
||||
width: min(86%, 460px);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
width: min(440px, 58vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (max-width: 1023px) {
|
||||
.hero {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
background: #120018;
|
||||
padding-bottom: 48px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 110px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hero-dark-panel {
|
||||
@@ -502,42 +485,14 @@ body {
|
||||
}
|
||||
|
||||
.hero-visual-layer {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 95%;
|
||||
max-width: 450px;
|
||||
aspect-ratio: 1080 / 867;
|
||||
margin: 20px auto 0 auto;
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-visual-panel {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #ffffff;
|
||||
clip-path: polygon(44% 0, 100% 0, 100% 100%, 14% 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-visual-image {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 12% 6% 12% 20%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-visual-image img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.hero-cards {
|
||||
.service-cards-wrapper {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-top: 40px;
|
||||
margin-top: -48px;
|
||||
overflow-x: auto;
|
||||
padding-left: var(--spacing-margin-mobile);
|
||||
padding-right: var(--spacing-margin-mobile);
|
||||
}
|
||||
@@ -593,3 +548,4 @@ body {
|
||||
transform: translate3d(18px, -8px, 0) scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -97,9 +97,9 @@ export default function PeoplePage() {
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="relative overflow-hidden bg-brand-dark px-margin-mobile md:px-margin-desktop pt-24 pb-32 text-center">
|
||||
<section className="relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-44 pb-48 text-center">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(108,14,128,0.25),transparent_40%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(252,163,17,0.1),transparent_45%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_75%_75%,rgba(203,157,248,0.15),transparent_45%)]" />
|
||||
|
||||
<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">
|
||||
@@ -132,7 +132,7 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<section className="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
|
||||
@@ -171,8 +171,8 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-20">
|
||||
<div className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop">
|
||||
<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">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Nearle Network
|
||||
@@ -205,7 +205,7 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-margin-mobile md:px-margin-desktop py-24">
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="bg-primary rounded-[2.5rem] p-10 md:p-16 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(123,248,161,0.12),transparent_40%)]" />
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ export function AppPromo() {
|
||||
return (
|
||||
<section
|
||||
id="download"
|
||||
className="py-24 px-margin-mobile md:px-margin-desktop bg-brand-cream overflow-hidden border-t border-outline-variant/10"
|
||||
className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-brand-cream overflow-hidden border-t border-outline-variant/10"
|
||||
>
|
||||
<div className="max-w-container-max mx-auto relative">
|
||||
{/* Background Dot pattern */}
|
||||
|
||||
@@ -45,7 +45,7 @@ const STATS = [
|
||||
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<section className="py-24 px-margin-mobile md:px-margin-desktop bg-white">
|
||||
<section className="py-28 px-6 md:px-12 lg:px-20 xl:px-24 bg-background">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
|
||||
{/* Merchant Section Grid */}
|
||||
@@ -115,7 +115,7 @@ export function BusinessSection() {
|
||||
</div>
|
||||
|
||||
{/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */}
|
||||
<div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-8 md:p-16 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
<div className="mt-32 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
{/* Decorative background vectors */}
|
||||
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
@@ -26,163 +26,144 @@ const QUICK_LINKS = [
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div className="hero">
|
||||
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
|
||||
<div className="hero-dark-panel select-none pointer-events-none">
|
||||
{/* Subtle Background Dot Texture (Minimal, barely visible) */}
|
||||
<div className="hero-map-layer select-none">
|
||||
<Image
|
||||
src="/images/slider-glob.png"
|
||||
alt="Subtle Background"
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 40vw"
|
||||
className="object-contain object-left-top"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||
viewBox="0 0 1000 800"
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id="heroRouteGlow"
|
||||
x="-50%"
|
||||
y="-50%"
|
||||
width="200%"
|
||||
height="200%"
|
||||
>
|
||||
<feGaussianBlur stdDeviation="3" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
{/* Minimal glow nodes - only 2 small ones at top */}
|
||||
<circle
|
||||
cx="140"
|
||||
cy="100"
|
||||
r="5"
|
||||
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<circle cx="140" cy="100" r="1.5" className="fill-white" />
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="80"
|
||||
r="5"
|
||||
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<circle cx="300" cy="80" r="1.5" className="fill-white" />
|
||||
|
||||
{/* Only 2 very thin route lines at top - staying clear of text area */}
|
||||
<path
|
||||
d="M140,100 Q220,85 300,80"
|
||||
fill="none"
|
||||
stroke="#c02cff"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4,4"
|
||||
className="animate-route opacity-15"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<path
|
||||
d="M300,80 Q370,110 420,140"
|
||||
fill="none"
|
||||
stroke="#c02cff"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4,4"
|
||||
className="animate-route opacity-12"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
|
||||
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* ─── Main Content Wrapper ─── */}
|
||||
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
|
||||
{/* Left Column: Text & Search Content */}
|
||||
<div className="hero-content text-white select-none">
|
||||
<span className="inline-block text-label-sm text-brand-accent font-black tracking-widest uppercase mb-4 bg-brand-accent/10 px-4 py-1.5 rounded-full border border-brand-accent/20">
|
||||
Express Services
|
||||
</span>
|
||||
|
||||
<h1 className="text-5xl lg:text-[82px] font-display font-black leading-[0.98] tracking-tight mb-7">
|
||||
Express
|
||||
<br />
|
||||
<span className="text-brand-accent drop-shadow-md">
|
||||
Neighborhood
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/80 mb-11 leading-relaxed max-w-2xl">
|
||||
Get groceries, hot meals, daily essentials, and local professional
|
||||
services delivered from trusted partners within{" "}
|
||||
<span className="text-brand-accent font-bold">25-30 minutes</span>.
|
||||
</p>
|
||||
|
||||
{/* Search Input Bar */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center bg-white p-2 rounded-full shadow-2xl border border-white/10 focus-within:ring-4 focus-within:ring-brand-accent/30 transition-all duration-300 max-w-[620px]">
|
||||
<MaterialIcon
|
||||
icon="location_on"
|
||||
size={22}
|
||||
className="ml-4 text-brand-accent animate-pulse-subtle"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your neighbourhood or delivery location..."
|
||||
className="w-full border-none focus:ring-0 focus:outline-none text-body-md text-on-surface font-semibold placeholder-on-surface-variant/50 px-3 py-2 bg-transparent"
|
||||
/>
|
||||
<button className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-6 py-3 rounded-full text-label-sm hover:shadow-lg transition-all active:scale-95 duration-200 whitespace-nowrap cursor-pointer">
|
||||
Find Shops
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Popular tags below */}
|
||||
<div className="flex gap-3 items-center flex-wrap px-4 mt-2">
|
||||
<span className="text-label-sm text-white/40 uppercase tracking-widest font-black text-[10px]">
|
||||
Popular:
|
||||
</span>
|
||||
{["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => (
|
||||
<a
|
||||
key={tag}
|
||||
href="#"
|
||||
className="text-label-sm text-brand-accent-light hover:text-brand-accent transition-colors font-bold"
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dominant delivery image (Overlapping) */}
|
||||
<div className="hero-visual-layer select-none pointer-events-none">
|
||||
<div className="hero-visual-panel" />
|
||||
<div className="hero-visual-image">
|
||||
<>
|
||||
<div className="hero">
|
||||
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
|
||||
<div className="hero-dark-panel select-none pointer-events-none">
|
||||
{/* Subtle Background Dot Texture (Minimal, barely visible) */}
|
||||
<div className="hero-map-layer select-none">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
src="/images/slider-glob.png"
|
||||
alt="Subtle Background"
|
||||
fill
|
||||
sizes="(max-width: 768px) 95vw, 48vw"
|
||||
className="object-contain object-bottom drop-shadow-2xl"
|
||||
sizes="(max-width: 768px) 100vw, 40vw"
|
||||
className="object-contain object-left-top"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Minimal Route Animation (2-3 thin lines only, very subtle) */}
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||
viewBox="0 0 1000 800"
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id="heroRouteGlow"
|
||||
x="-50%"
|
||||
y="-50%"
|
||||
width="200%"
|
||||
height="200%"
|
||||
>
|
||||
<feGaussianBlur stdDeviation="3" result="blur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
{/* Minimal glow nodes - only 2 small ones at top */}
|
||||
<circle
|
||||
cx="140"
|
||||
cy="100"
|
||||
r="5"
|
||||
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<circle cx="140" cy="100" r="1.5" className="fill-white" />
|
||||
|
||||
<circle
|
||||
cx="300"
|
||||
cy="80"
|
||||
r="5"
|
||||
className="fill-[#bd34fe] opacity-20 animate-pulse"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<circle cx="300" cy="80" r="1.5" className="fill-white" />
|
||||
|
||||
{/* Only 2 very thin route lines at top - staying clear of text area */}
|
||||
<path
|
||||
d="M140,100 Q220,85 300,80"
|
||||
fill="none"
|
||||
stroke="#c02cff"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4,4"
|
||||
className="animate-route opacity-15"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
<path
|
||||
d="M300,80 Q370,110 420,140"
|
||||
fill="none"
|
||||
stroke="#c02cff"
|
||||
strokeWidth="1"
|
||||
strokeDasharray="4,4"
|
||||
className="animate-route opacity-12"
|
||||
filter="url(#heroRouteGlow)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Soft purple radial glow behind the diagonal edge (clipped) */}
|
||||
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* ─── Main Content Wrapper ─── */}
|
||||
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
|
||||
{/* Left Column: Text & Search Content */}
|
||||
<div className="hero-content text-white select-none">
|
||||
<span className="inline-block text-label-md text-brand-accent font-black tracking-widest uppercase mb-5 bg-brand-accent/10 px-5 py-2 rounded-full border border-brand-accent/20">
|
||||
Express Services
|
||||
</span>
|
||||
|
||||
<h1 className="text-5xl lg:text-[92px] lg:leading-[0.95] font-display font-black tracking-tight mb-8">
|
||||
Express
|
||||
<br />
|
||||
<span className="text-brand-accent drop-shadow-md">
|
||||
Neighborhood
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg md:text-[22px] md:leading-9 text-white/80 mb-12 leading-relaxed max-w-2xl">
|
||||
Get groceries, hot meals, daily essentials, and local professional
|
||||
services delivered from trusted partners within{" "}
|
||||
<span className="text-brand-accent font-bold">25-30 minutes</span>.
|
||||
</p>
|
||||
|
||||
{/* Mobile/Tablet Only Nearle Bag Logo */}
|
||||
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none">
|
||||
<div className="relative w-[280px] h-[230px] mx-auto">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
fill
|
||||
sizes="(max-width: 1023px) 280px, 0px"
|
||||
className="object-contain drop-shadow-2xl"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Centered Nearle bag visual */}
|
||||
<div className="hero-visual-layer select-none pointer-events-none">
|
||||
<div className="hero-visual-panel" />
|
||||
<div className="hero-visual-image">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Nearle delivery"
|
||||
fill
|
||||
sizes="(max-width: 768px) 95vw, 48vw"
|
||||
className="object-contain drop-shadow-2xl"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlapping Quick Category Links (Anchored at the bottom edge) */}
|
||||
<div className="hero-cards">
|
||||
{/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */}
|
||||
<div className="service-cards-wrapper max-w-container-max mx-auto">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{QUICK_LINKS.map((item) => (
|
||||
<div
|
||||
@@ -215,6 +196,6 @@ export function Hero() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,14 +21,14 @@ const FEATURES = [
|
||||
|
||||
export function HyperlocalFeatures() {
|
||||
return (
|
||||
<section className="bg-[#f7f7f9] py-[72px] px-4 min-[901px]:py-[100px] min-[901px]:px-8 relative overflow-hidden border-y border-outline-variant/10">
|
||||
<section className="bg-background py-28 px-6 md:px-12 lg:px-20 xl:px-24 relative overflow-hidden border-y border-outline-variant/10">
|
||||
{/* Scoped CSS styles for precise layout enforcement */}
|
||||
<style>{`
|
||||
@media (min-width: 901px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: minmax(420px, 0.9fr) minmax(560px, 1.1fr) !important;
|
||||
gap: 56px !important;
|
||||
width: min(1280px, calc(100% - 64px)) !important;
|
||||
width: min(1280px, 100%) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 470px !important;
|
||||
@@ -43,7 +43,7 @@ export function HyperlocalFeatures() {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 32px !important;
|
||||
width: min(1280px, calc(100% - 32px)) !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 420px !important;
|
||||
|
||||
@@ -60,7 +60,7 @@ const CATEGORIES = [
|
||||
|
||||
export function ServiceCategories() {
|
||||
return (
|
||||
<section className="bg-background pt-28 pb-16 px-margin-mobile md:px-margin-desktop">
|
||||
<section className="bg-background pt-32 pb-24 px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
|
||||
|
||||
@@ -124,7 +124,7 @@ export function Footer() {
|
||||
return (
|
||||
<footer className="relative z-10 bg-brand-dark text-white border-t border-white/5 pt-24 pb-6 w-full mt-24">
|
||||
{/* Overlapping Contact Helpdesk Card */}
|
||||
<div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
<div className="absolute -top-20 md:-top-14 left-0 right-0 z-20 max-w-[1380px] mx-auto px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
|
||||
<div className="flex items-center gap-4 text-brand-dark">
|
||||
<div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
|
||||
@@ -147,7 +147,7 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1380px] mx-auto px-margin-mobile md:px-margin-desktop">
|
||||
<div className="max-w-[1380px] mx-auto px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
|
||||
{/* Main content grid: aligned on the same top baseline */}
|
||||
<div className={`grid grid-cols-1 md:grid-cols-2 lg:items-start gap-y-10 gap-x-6 lg:gap-x-12 mb-12 ${
|
||||
|
||||
@@ -17,8 +17,8 @@ export function Navbar() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-outline-variant/20 transition-all duration-300">
|
||||
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-margin-mobile md:px-16 xl:px-24 py-3">
|
||||
<nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
|
||||
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
|
||||
{/* Left: Brand */}
|
||||
<div className="flex items-center">
|
||||
<Link
|
||||
@@ -26,27 +26,26 @@ export function Navbar() {
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
>
|
||||
<Image
|
||||
src="/logo-purple-v2.png"
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={220}
|
||||
width={400}
|
||||
height={50}
|
||||
style={{ height: "auto" }}
|
||||
className="h-9 w-auto object-contain"
|
||||
style={{ height: "40px", width: "auto" }}
|
||||
className="object-contain"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Center: Navigation */}
|
||||
<div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="relative py-1 text-[15px] font-bold leading-5 text-on-surface-variant hover:text-primary transition-all duration-200 group whitespace-nowrap"
|
||||
className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
|
||||
>
|
||||
{link.label}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@@ -55,14 +54,14 @@ export function Navbar() {
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/#download"
|
||||
className="hidden md:inline-flex bg-primary hover:bg-primary-container text-on-primary font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
|
||||
className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-all active:scale-90 cursor-pointer"
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
@@ -73,13 +72,13 @@ export function Navbar() {
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="md:hidden bg-surface-container-lowest border-t border-outline-variant">
|
||||
<div className="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
|
||||
<div className="md:hidden bg-[#4d046a] border-t border-white/10">
|
||||
<div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="px-3 py-2.5 text-body-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low rounded-lg transition-colors"
|
||||
className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
|
||||
Reference in New Issue
Block a user