diff --git a/AGENTS.md b/AGENTS.md
index 4d94105..b55974e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,13 +1,216 @@
+# Nearle Project Guide
-# 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:
+## Project
-1. For frontend UI, layout, responsive, styling, or screenshot-reference tasks, you MAY start the Next.js local development server using `npm run dev`.
-2. For those frontend visual tasks, you MAY open and inspect `http://localhost:3000` locally.
-3. For those frontend visual tasks, you MAY capture local screenshots for before/after comparison.
-4. `npm run build` verifies compilation only. Do not claim a visual issue is fixed based only on build success.
-5. For visual tasks, inspect localhost before reporting completion.
-6. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
-7. For frontend UI, layout, responsive, styling, and screenshot-reference tasks, the agent must inspect localhost before reporting completion. Screenshots are required only for major layout changes, responsive/mobile changes, hero/footer changes, or when explicitly requested by the user. For small isolated CSS spacing fixes, screenshots are optional. The human developer gives final approval only.
\ No newline at end of file
+Nearle is a premium hyperlocal commerce platform connecting
+
+- Customers
+- Local Merchants
+- Delivery Partners
+- Brands
+
+The experience should feel:
+
+- Premium
+- Modern
+- Minimal
+- Community-first
+- Human
+- Trustworthy
+
+Avoid generic SaaS designs.
+
+---
+
+# Tech Stack
+
+- Next.js 16 App Router
+- React
+- TypeScript
+- Tailwind CSS
+- MaterialIcon component
+
+IMPORTANT
+
+This project uses the latest Next.js version.
+
+Before changing framework APIs, read
+
+node_modules/next/dist/docs/
+
+Follow the latest conventions.
+
+---
+
+# Design System
+
+Preserve the existing Nearle identity.
+
+Never change unless explicitly requested:
+
+- Brand colors
+- Typography
+- Border radius
+- Layout hierarchy
+- Section order
+- Existing content
+- Existing illustrations
+
+Always extend the current design instead of redesigning it.
+
+---
+
+# UI Rules
+
+Always match existing Nearle pages.
+
+Reuse:
+
+- Hero layouts
+- CTA buttons
+- Card styles
+- Section spacing
+- Grid system
+- Shadows
+- Glass effects
+- Gradients
+
+Avoid Bootstrap-style layouts.
+
+---
+
+# Motion Rules
+
+Use:
+
+- Framer Motion
+- CSS transitions
+
+Avoid:
+
+- Heavy GSAP
+- Layout animations
+- Flashy effects
+
+Animation style:
+
+- Apple
+- Linear
+- Stripe
+- Vercel
+
+Use only:
+
+- opacity
+- transform
+- scale
+- translate
+
+Respect prefers-reduced-motion.
+
+---
+
+# Code Rules
+
+Never rewrite files unnecessarily.
+
+Only modify required code.
+
+Preserve formatting.
+
+Do not rename components unless necessary.
+
+Reuse existing components before creating new ones.
+
+Create reusable components when repeated more than twice.
+
+---
+
+# Performance
+
+Maintain 60 FPS.
+
+Avoid unnecessary re-renders.
+
+Avoid layout shift.
+
+Prefer GPU-friendly animations.
+
+Optimize images.
+
+---
+
+# SEO
+
+Every new page should include:
+
+- Metadata
+- Title
+- Description
+- OpenGraph
+- Semantic HTML
+
+---
+
+# Content Rules
+
+Write content specifically for Nearle.
+
+Tone:
+
+- Friendly
+- Premium
+- Community-first
+- Local
+- Trustworthy
+
+Avoid AI-sounding or generic marketing copy.
+
+Prefer real examples involving:
+
+- neighbourhood stores
+- customers
+- delivery partners
+- local commerce
+- digital catalogues
+- QR ordering
+
+---
+
+# Execution Rules
+
+Frontend Tasks
+
+- You MAY run npm run dev.
+- Inspect localhost before reporting visual fixes.
+- Use screenshots only for major UI changes.
+
+Build
+
+- npm run build only verifies compilation.
+- Never claim visual fixes based only on build success.
+
+---
+
+# Workflow
+
+Before editing
+
+1. Read the target file.
+2. Understand existing implementation.
+3. Modify only the required code.
+4. Avoid unrelated refactoring.
+5. Keep code production ready.
+6. Return concise summaries.
+
+---
+
+# Response Rules
+
+Do not explain obvious code.
+
+Do not rewrite unchanged code.
+
+Do not introduce unnecessary abstractions.
+
+Focus only on the requested task.
\ No newline at end of file
diff --git a/desktop_screenshot.png b/desktop_screenshot.png
index bce2f86..c639224 100644
Binary files a/desktop_screenshot.png and b/desktop_screenshot.png differ
diff --git a/mobile_screenshot.png b/mobile_screenshot.png
index a5891bd..b8088a5 100644
Binary files a/mobile_screenshot.png and b/mobile_screenshot.png differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index a3d2f1d..5f72ca7 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,8 +3,9 @@ import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
-import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { AboutHero } from "@/components/heroes/AboutHero";
+import { AnimatedSection } from "@/components/motion/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -48,93 +49,27 @@ const LOCAL_COUNTERS = [
{ count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
];
-const HERO_STATS = [
- { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
- { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
- { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
- { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
-];
export default function AboutPage() {
- const collageCards = [
- { text: "Local First", icon: "store" },
- { text: "Trusted Network", icon: "verified" },
- { text: "Connected Communities", icon: "groups" }
- ];
-
return (
{/* ─── Hero Section ─── */}
-
- {/* TWO-COLUMN GRID */}
-
-
-
- {/* Left Column: Copy & Actions */}
-
-
- About Nearle
-
-
-
- Built for Every
-
- Neighbourhood.
-
-
-
- Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
-
- 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.
-
-
+
+
+
+ Our Platform
+
+
+ Nearle Neighbourhood Commerce
+
+
+ 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.
+
@@ -214,41 +149,43 @@ export default function AboutPage() {
{c.label}
-
+
))}
-
+
{/* ─── Brand Building Banner ─── */}
-
-
-
- Don't miss the opportunity
-
-
- Build Your Brand with Nearle
-
-
- Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
-
+ Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
+
- Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand.
-
-
-
-
- Talk to Sales
-
-
-
- Send an Enquiry
-
-
-
-
-
-
+ Ready to Grow in Every Neighbourhood?}
+ body="Let's talk about what a Nearle brand partnership looks like for your products. Our sales team will design a custom plan for your brand."
+ primary={{ href: "/contact", icon: "forum", label: "Talk to Sales" }}
+ secondary={{ href: "/contact", icon: "mail", label: "Send an Enquiry" }}
+ decorations={[
+ "circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
+ "circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
+ ]}
+ />
);
}
diff --git a/src/app/businesses/page.tsx b/src/app/businesses/page.tsx
index c6b36e5..83696f3 100644
--- a/src/app/businesses/page.tsx
+++ b/src/app/businesses/page.tsx
@@ -3,9 +3,11 @@ import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
-import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
+import { BusinessHero } from "@/components/heroes/BusinessHero";
+import { AnimatedSection } from "@/components/motion/AnimatedSection";
+import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
+import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -15,12 +17,6 @@ export const metadata: Metadata = {
};
-const HERO_BENEFITS = [
- { title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
- { title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
- { title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
- { title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
-];
function PhoneMapVisual() {
return (
@@ -96,102 +92,42 @@ function PhoneMapVisual() {
}
export default function BusinessesPage() {
- const collageCards = [
- { text: "Nearby Customers", icon: "people" },
- { text: "Orders & Offers", icon: "local_offer" },
- { text: "Local Delivery Support", icon: "local_shipping" }
- ];
-
return (
{/* ─── Hero Section ─── */}
-
- {/* TWO-COLUMN GRID */}
-
-
-
- {/* Left Column: Copy & Actions */}
-
-
- Nearle for Business
-
-
-
- Grow Your Local Business,
-
- Neighbourhood by Neighbourhood.
-
-
-
- Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
-
-
-
- {/* TODO: Replace with real merchant onboarding URL once confirmed */}
-
- List Your Store
-
-
- Explore Solutions
-
-
-
-
- {/* Right Column: Visual Collage */}
-
-
-
-
-
-
- {/* BOTTOM HERO BENEFITS */}
-
-
-
-
-
-
+
{/* ─── Intro Highlight Banner ─── */}
-
-
-
- Together, we grow
-
-
- Get set in minutes and delight the Neighborhood
-
-
- Nearle is built to help businesses like Yours establish a local online presence and empower neighborhood customers to discover and interact with you directly.
-
-
-
-
-
- Talk to an Expert
-
-
-
+
+
+
+
+ Together, we grow
+
+
+ Get set in minutes and delight the Neighborhood
+
+
+ Nearle is built to help businesses like Yours establish a local online presence and empower neighborhood customers to discover and interact with you directly.
+
+
+
+
+
+ Talk to an Expert
+
+
+
+
{/* ─── Build Your Neighborhood Brand ─── */}
{/* Header */}
+
How it works
@@ -203,11 +139,12 @@ export default function BusinessesPage() {
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
@@ -298,37 +305,39 @@ export default function MerchantsPage() {
-
-
- Why Nearle
-
-
- Your Neighbourhood's
-
- Best Business Partner
-
-
- Nearle isn't built like a big delivery platform that squeezes margins. We're built for neighbourhood stores like yours — where community and trust come first.
-
+
+
+
+ Why Nearle
+
+
+ Your Neighbourhood's
+
+ Best Business Partner
+
+
+ Nearle isn't built like a big delivery platform that squeezes margins. We're built for neighbourhood stores like yours — where community and trust come first.
+
+
+ {/* Left Column: slow, deliberate stagger — thoughtful pacing */}
+
+
+ About Nearle
+
+
+
+ Built for Every
+
+ Neighbourhood.
+
+
+
+ Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
+
+
+
+
+ Our Story
+
+
+ Join Our Journey
+
+
+
+
+ {/* Right Column: soft scale-up — gentle and community-first */}
+
+
+
+
+
+ {/* Left Column: animated with unique stagger */}
+
+
+ Nearle for Business
+
+
+
+ Grow Your Local Business,
+
+ Neighbourhood by Neighbourhood.
+
+
+
+ Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
+
+
+
+
+ List Your Store
+
+
+ Explore Solutions
+
+
+
+
+ {/* Right Column: subtle fade-in — HeroVisualCollage internal animations choreograph each element */}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/heroes/ContactHero.tsx b/src/components/heroes/ContactHero.tsx
new file mode 100644
index 0000000..2fcb989
--- /dev/null
+++ b/src/components/heroes/ContactHero.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { ContactForm } from "@/components/contact/ContactForm";
+import { fadeUp, fadeUpStrong, slideInRight, staggerContainer, viewport } from "@/lib/animations";
+
+const CONTACT_INFO = [
+ {
+ icon: "phone",
+ label: "Call Us",
+ value: "+91 909 206 8666",
+ },
+ {
+ icon: "mail",
+ label: "Email Us",
+ value: "nearle@care.in",
+ },
+ {
+ icon: "location_on",
+ label: "Address",
+ value: "424, DB Rd, R.S. Puram, Coimbatore, TN 641002",
+ },
+];
+
+// Choreography: professional, clear sequence
+// Left column — each info row staggers in from left; h1 has strong upward entry
+// Form card slides in from right with slight delay
+// Info rows use a tighter stagger to feel organised and systematic
+const infoRowVariant = {
+ hidden: { opacity: 0, x: -18 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
+ },
+};
+
+const formVariant = {
+ hidden: { opacity: 0, x: 40 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: { duration: 0.65, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], delay: 0.25 },
+ },
+};
+
+const infoStagger = {
+ hidden: {},
+ visible: { transition: { staggerChildren: 0.08 } },
+};
+
+export function ContactHero() {
+ return (
+
+
+ {/* Decorative map grid — not animated so it stays subtle */}
+
+
+
+
+
+
+
+ {/* Left Column — Contact Info: sequential stagger from top */}
+
+
+ Contact Us
+
+
+
+ We're Here to
+ Help You.
+
+
+
+ Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
+
+
+ {/* Info rows: each row staggers in from left */}
+
+ {CONTACT_INFO.map((item) => (
+
+
+
+
+
+
{item.label}
+
{item.value}
+
+
+ ))}
+
+
+
+ {/* Right Column: form slides in from right */}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/heroes/PeopleHero.tsx b/src/components/heroes/PeopleHero.tsx
new file mode 100644
index 0000000..dc82c86
--- /dev/null
+++ b/src/components/heroes/PeopleHero.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import {
+ scaleInSpring,
+ fadeUpStrong,
+ fadeUp,
+ slideInLeftSubtle,
+ fadeIn,
+ staggerFast,
+} from "@/lib/animations";
+
+const HERO_STATS = [
+ { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
+ { title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
+ { title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
+ { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" },
+];
+
+const COLLAGE_CARDS = [
+ { text: "Discover Nearby", icon: "explore" },
+ { text: "Save Favourites", icon: "favorite" },
+ { text: "Order Anytime", icon: "shopping_bag" },
+];
+
+// Choreography: badge bounces in (spring) → h1 strong fade-up → p subtle up → CTAs slide from left
+// Fast stagger (0.07) gives a snappy, energetic feel — phone/fast/mobile-first vibe
+const badgeVariant = scaleInSpring;
+const titleVariant = fadeUpStrong;
+const descVariant = fadeUp;
+const ctaVariant = slideInLeftSubtle;
+
+export function PeopleHero() {
+ return (
+
+
+
+
+ {/* Left Column: snappy fast-stagger sequence */}
+
+
+ Nearle for People
+
+
+
+ Your Neighbourhood,
+
+ Now in Your Pocket.
+
+
+
+ Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
+
+
+
+
+ Get the App
+
+
+ Explore Stores
+
+
+
+
+ {/* Right Column: subtle fade — HeroVisualCollage's internal animations handle phone, images, badges individually */}
+
+
+
+
+
+ {/* Description */}
Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
-
-
+
- Explore Stores
-
-
+ Explore Stores
+
+
+
- Get the App
-
-
+
+ Get the App
+
+
+
- {/* RIGHT COLUMN: Creative Overlapping Strips Collage */}
-
+ {/* RIGHT COLUMN: Individual image + center card animations */}
+
- {/* Logo - Left */}
+ {/* Logo */}
- {/* Desktop Navigation - Center */}
+ {/* Desktop Navigation */}
- {/* Mobile Toggle - Right */}
+ {/* Mobile Toggle */}