216 lines
2.7 KiB
Markdown
216 lines
2.7 KiB
Markdown
# 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. |