# Nearle Project Guide

## Project

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.