diff --git a/AGENTS.md b/AGENTS.md index 8bd0e39..5079312 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,5 +1,12 @@ - -# This is NOT the Next.js you know +# This is NOT the Next.js you know This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. - +# STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER) +Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources: + +1. DO NOT start the Next.js dev server or any local server. +2. DO NOT use curl, browser tools, Puppeteer, or any network request to test localhost or any local API endpoints. +3. DO NOT attempt to take screenshots, scrape pages, or self-verify visual/functional changes locally. +4. DO NOT write "VERIFICATION REQUIRED" or attempt to run integration tests unless explicitly asked. +5. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files. +6. The human developer will always be responsible for running the server, executing the code, and verifying it locally. \ No newline at end of file diff --git a/public/Nearle Business.png b/public/Nearle Business.png new file mode 100644 index 0000000..4c3c897 Binary files /dev/null and b/public/Nearle Business.png differ diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 871b1cd..7811942 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -69,7 +69,7 @@ export default function AboutPage() {
{/* ─── Hero Section ─── */} -
+
@@ -87,7 +87,7 @@ export default function AboutPage() {
{/* ─── Intro Description Block ─── */} -
+
Our Platform @@ -102,7 +102,7 @@ export default function AboutPage() {
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */} -
+
{STRATEGY_CARDS.map((card) => (
{/* ─── Global Stats counters ─── */} -
-
+
+
{COUNTERS.map((c) => (
@@ -143,7 +143,7 @@ export default function AboutPage() {
{/* ─── Team Section ─── */} -
+
{/* Left: About team content */} @@ -193,7 +193,7 @@ export default function AboutPage() {
{/* ─── Client Testimonial & Quote ─── */} -
+
“ @@ -219,7 +219,7 @@ export default function AboutPage() {
{/* ─── Brand Building Banner ─── */} -
+
Don't miss the opportunity diff --git a/src/app/businesses/page.tsx b/src/app/businesses/page.tsx index 4751869..7c6f03d 100644 --- a/src/app/businesses/page.tsx +++ b/src/app/businesses/page.tsx @@ -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 (
{/* ─── Hero Section with Animated Rotator ─── */} -
-
-
+
+ {/* Background Image with Overlay */} +
+ Nearle Business Background +
+

@@ -107,46 +117,11 @@ export default function BusinessesPage() { -

- India's #1 Neighborhood Commerce App. Join the futuristic community lifestyle living and move your business forward. -

- - {/* App Download Links */} -
{/* ─── Intro Highlight Banner ─── */} -
+
@@ -172,7 +147,7 @@ export default function BusinessesPage() {
{/* ─── Timeline / Core Process Steps ─── */} -
+
How it works @@ -210,7 +185,7 @@ export default function BusinessesPage() { {/* ─── Grid Stats & Value Prop ─── */}
-
+
{/* Left side: features block (7 cols) */} @@ -277,9 +252,9 @@ export default function BusinessesPage() {
{/* ─── Join/Download Call to Action ─── */} -
+
-
+

Nearle is Essential for Business Growth diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index b7a000a..2288358 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -97,10 +97,10 @@ export default function ContactPage() { return (
{/* ─── Breadcrumbs & Hero Page Header ─── */} -
+
{/* Background Decorative Gradients */}
-
+
{/* Breadcrumbs */} @@ -137,7 +137,7 @@ export default function ContactPage() {
{/* ─── Four Contact Info Cards ─── */} -
+
{/* Card 1: Location */} @@ -225,7 +225,7 @@ export default function ContactPage() {
{/* ─── Map & Form Section ─── */} -
+
{/* Left: Google Map (5 Cols) */} diff --git a/src/app/globals.css b/src/app/globals.css index 7692096..7c42bc4 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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); } } + diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx index 60461e7..eda33ad 100644 --- a/src/app/people/page.tsx +++ b/src/app/people/page.tsx @@ -97,9 +97,9 @@ export default function PeoplePage() {
{/* ─── Hero Section ─── */} -
+
-
+

@@ -132,7 +132,7 @@ export default function PeoplePage() {

{/* ─── 9 Core Offerings Bento Grid ─── */} -
+
What we offer @@ -171,8 +171,8 @@ export default function PeoplePage() {
{/* ─── Localized Stats Block ─── */} -
-
+
+
Nearle Network @@ -205,7 +205,7 @@ export default function PeoplePage() {
{/* ─── Ready to Download Section ─── */} -
+
diff --git a/src/components/home/AppPromo.tsx b/src/components/home/AppPromo.tsx index abc979c..f385b41 100644 --- a/src/components/home/AppPromo.tsx +++ b/src/components/home/AppPromo.tsx @@ -23,7 +23,7 @@ export function AppPromo() { return (
{/* Background Dot pattern */} diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx index ea5ebff..c5c6b71 100644 --- a/src/components/home/BusinessSection.tsx +++ b/src/components/home/BusinessSection.tsx @@ -45,7 +45,7 @@ const STATS = [ export function BusinessSection() { return ( -
+
{/* Merchant Section Grid */} @@ -115,7 +115,7 @@ export function BusinessSection() {
{/* CURVED PROMO BANNER: Inspired by GoMoto Hottest Pizza Banner */} -
+
{/* Decorative background vectors */}
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index 50cb1f5..0e241f5 100644 --- a/src/components/home/Hero.tsx +++ b/src/components/home/Hero.tsx @@ -26,163 +26,144 @@ const QUICK_LINKS = [ export function Hero() { return ( -
- {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */} -
- {/* Subtle Background Dot Texture (Minimal, barely visible) */} -
- Subtle Background -
- - {/* Minimal Route Animation (2-3 thin lines only, very subtle) */} - - - - - - - - - - - {/* Minimal glow nodes - only 2 small ones at top */} - - - - - - - {/* Only 2 very thin route lines at top - staying clear of text area */} - - - - - {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */} -
-
- - {/* ─── Main Content Wrapper ─── */} -
- {/* Left Column: Text & Search Content */} -
- - Express Services - - -

- Express -
- - Neighborhood - -

- -

- Get groceries, hot meals, daily essentials, and local professional - services delivered from trusted partners within{" "} - 25-30 minutes. -

- - {/* Search Input Bar */} -
-
- - - -
- - {/* Popular tags below */} -
- - Popular: - - {["Fresh Produce", "African Bakery", "Pet Care"].map((tag) => ( - - {tag} - - ))} -
-
-
- - {/* Right Column: Dominant delivery image (Overlapping) */} -
-
-
+ <> +
+ {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */} +
+ {/* Subtle Background Dot Texture (Minimal, barely visible) */} +
Nearle delivery
+ + {/* Minimal Route Animation (2-3 thin lines only, very subtle) */} + + + + + + + + + + + {/* Minimal glow nodes - only 2 small ones at top */} + + + + + + + {/* Only 2 very thin route lines at top - staying clear of text area */} + + + + + {/* Soft purple radial glow behind the diagonal edge (clipped) */} +
+
+ + {/* ─── Main Content Wrapper ─── */} +
+ {/* Left Column: Text & Search Content */} +
+ + Express Services + + +

+ Express +
+ + Neighborhood + +

+ +

+ Get groceries, hot meals, daily essentials, and local professional + services delivered from trusted partners within{" "} + 25-30 minutes. +

+ + {/* Mobile/Tablet Only Nearle Bag Logo */} +
+
+ Nearle delivery +
+
+
+ + {/* Right Column: Centered Nearle bag visual */} +
+
+
+ Nearle delivery +
+
- {/* Overlapping Quick Category Links (Anchored at the bottom edge) */} -
+ {/* Overlapping Quick Category Links (Moved outside of .hero for correct overflow behavior) */} +
{QUICK_LINKS.map((item) => (
-
+ ); } diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx index 3e85158..910dba2 100644 --- a/src/components/home/HyperlocalFeatures.tsx +++ b/src/components/home/HyperlocalFeatures.tsx @@ -21,14 +21,14 @@ const FEATURES = [ export function HyperlocalFeatures() { return ( -
+
{/* Scoped CSS styles for precise layout enforcement */}