# Ambassador.pk — Clone Project Plan

## 1. Asal Website Ka Taaruf (Analysis)

**Website:** https://ambassador.pk
**Business:** Ambassador — Commercial / Industrial Kitchen Equipment supplier & manufacturer (Lahore, Pakistan). Restaurants, hotels aur institutions ke liye professional kitchen solutions.

### Technology jis par asal site bani hai
- **Framework:** Next.js (React based) — image URLs mein `/_next/image` optimization se confirm.
- **Rendering:** Server-side rendering + client-side data fetching (products "Loading products…" dynamically API se aate hain).
- **Backend/API:** Products, membership, orders ke liye ek backend API hai (`/our-collection` etc.).
- **Extra widgets:** WhatsApp chat widget, newsletter subscription, complaint portal.

### Humara Clone Stack (Latest Code)
| Cheez | Technology |
|-------|-----------|
| Framework | **Next.js 15** (App Router) + React 19 |
| Language | TypeScript |
| Styling | **Tailwind CSS v4** |
| UI Components | shadcn/ui + lucide-react icons |
| Images | Asal site se download karke `public/images/` mein |
| Data | Pehle mock/JSON data (baad mein API optional) |
| Deployment | Vercel (ya static export) |

> **DECISION (user confirmed — UPDATED):** Sirf **FRONTEND** banana hai — same to same design aur sab kuch. Koi backend/database/login nahi. Products ka real data asal site se scrape kar liya hai (`data/products.json` — 134 products, 42 categories) aur usay **static JSON** ki tarah use karenge.

### Frontend-only Approach
| Cheez | Technology |
|-------|-----------|
| Framework | Next.js 16 (App Router) + React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Data | Static JSON (`src/data/products.json`, `categories.json`) — scraped |
| Images | Cloudinary URLs (asal jaise) ya download karke `public/images/` |
| Cart | Client-side (localStorage / React Context) — sirf UI, koi order backend nahi |
| Auth/Login | Sirf UI form (dikhawe ka, koi real auth nahi) |
| Deploy | Vercel / static export |

---

## 2. Website Structure (Pages)

Navigation menu (asal site se):
1. **Home** (`/`)
2. **Products / Our Collection** (`/products`)
3. **About** (`/about`)
4. **Custom Kitchen** (`/custom-kitchen`)
5. **Gallery** (`/gallery`)
6. **Our Branches** (`/branches`)
7. **Contact Us** (`/contact`)

Extra: **Login / My Account**, **Cart / Orders**, **Complaint Portal**.

---

## 3. Home Page Ke Sections (exact content)

1. **Header / Navbar** — logo + menu + Login/Account button + cart + search.
2. **Hero:** Heading "Premium Commercial Kitchen Equipment", tagline "Engineered for performance, built for the professional kitchen — where quality meets reliability." Buttons: `Explore Products`, `Learn More`.
3. **Industry Leading / Featured** section.
4. **Limited Time Offers (Hot Deals)** — button `View All Sales`.
5. **Trusted By** — client logos (Domino's, Subway, Marriott, etc.) — "1,200+ businesses".
6. **Design · Fabricate · Install** (Custom Kitchen) — steps: Site survey → 2D/3D design → Approval → Installation. Button `See how custom kitchen works` / `Request a consultation`.
7. **What We Offer** — product range / categories.
8. **Why Ambassador** — features: 25+ years (since 1999), 500+ products, 1-Year warranty, nationwide delivery & installation.
9. **Membership / Member Benefits (B2B)** — "1,000+ businesses", buttons `Create Free Account`, `Sign In to My Account`.
10. **CTA section** — `Browse All Products`, `Request a Quote`.
11. **Footer** (neeche detail).
12. **WhatsApp floating widget**.

### Statistics (exact)
- 1,200+ businesses across Pakistan
- 25+ years experience (since 1999)
- 500+ products in stock
- 1,000+ businesses using membership

### Footer (exact)
- **Address:** 5-A Fazal Elahi Road, Rehman Pura Link Ferozpur Road, Lahore, Pakistan
- **Phone:** +92 331 4937412
- **UAN:** 042-111-313-106
- **Email:** info@ambassador.pk
- **Links:** Products, Custom Kitchen, Gallery, About, Contact, Branches, Orders, Complaint Portal
- **Social:** Facebook, Instagram, LinkedIn, YouTube
- Newsletter subscription box

---

## 4. Design System

- **Colors:** Primary dark + red accent (kitchen/industrial theme) — asal site se exact hex extract karenge.
- **Typography:** Clean sans-serif (asal site ke font ka nom check karke match karenge).
- **Layout:** Grid-based product cards, rounded corners, shadows, hover effects.
- **Responsive:** Mobile-first (mobile, tablet, desktop).

---

## 5. Kaam Karne Ka Tareeqa (Steps)

### Phase 0 — Setup
- [ ] `create-next-app` (TypeScript + Tailwind + App Router).
- [ ] shadcn/ui + lucide-react install.
- [ ] Folder structure banao: `app/`, `components/`, `lib/`, `data/`, `public/images/`.

### Phase 1 — Assets Nikalna (Images/Content scrape)
- [ ] Asal site ke images, logo, hero banners, client logos, product photos download karo → `public/images/`.
- [ ] Exact colors, fonts, text content extract karke `data/` JSON mein rakho.
- [ ] Products ka data (naam, price, category, image) API/HTML se collect karo.

### Phase 2 — Core Layout
- [ ] Navbar + Footer components.
- [ ] Global styling / theme (colors, fonts).
- [ ] Reusable components: Button, Card, Section, Container.

### Phase 3 — Pages Banao
- [ ] Home page (saare 12 sections).
- [ ] Products page (grid, categories, filters, product cards).
- [ ] Product detail page.
- [ ] About, Custom Kitchen, Gallery, Branches, Contact pages.
- [ ] Login / Account (mock).

### Phase 4 — Features
- [ ] Cart functionality (local state / context).
- [ ] Search & filter.
- [ ] WhatsApp widget, newsletter form.
- [ ] Contact form.

### Phase 5 — Polish & Deploy
- [ ] Responsive check har page.
- [ ] SEO meta tags.
- [ ] Performance (image optimization).
- [ ] Vercel pe deploy.

---

## 6. Folder Structure (planned)

```
ambassador/
├── app/
│   ├── layout.tsx
│   ├── page.tsx                 # Home
│   ├── products/page.tsx
│   ├── products/[slug]/page.tsx
│   ├── about/page.tsx
│   ├── custom-kitchen/page.tsx
│   ├── gallery/page.tsx
│   ├── branches/page.tsx
│   └── contact/page.tsx
├── components/
│   ├── layout/ (Navbar, Footer, WhatsAppWidget)
│   ├── home/ (Hero, HotDeals, TrustedBy, ...)
│   └── ui/ (Button, Card, ...)
├── data/ (products.json, categories.json, branches.json)
├── lib/ (utils.ts)
├── public/images/ (saari images yahan)
└── plan.md
```

---

## 7. Decisions (FINAL)
1. **Scope:** Sirf frontend — koi backend/DB/real auth nahi. ✅
2. **Products:** Real scraped data (134 products, 42 categories) static JSON se. ✅
3. **Cart/Login:** Sirf UI (client-side cart localStorage; login form dikhawe ka). ✅
4. **Images:** Cloudinary URLs asal jaise use karenge (ya optional download). ✅

---

## 8. Progress (COMPLETE ✅)
- [x] API/data scrape (134 products, 42 categories, 176 images) → `src/data/`
- [x] Next.js 16 + TS + Tailwind 4 scaffold + `npm install`
- [x] Data `src/data/` + TypeScript types (`src/lib/`)
- [x] Brand theme (teal #0F4C69 + orange #E36630, Geist font)
- [x] Layout: Navbar (search+cart+mobile) + Footer (newsletter) + WhatsApp widget
- [x] Home page — 8 sections (Hero, TrustedBy, Categories, HotDeals, CustomKitchen, WhyUs, Membership, CTA)
- [x] Products page + sidebar category filter + search + sort
- [x] Product detail page (gallery, specs, qty, related) — 134 static pages
- [x] Client-side cart (localStorage) + cart page + WhatsApp checkout
- [x] About, Custom Kitchen, Gallery, Branches, Contact (form), Login/Signup (mock)
- [x] `npm run build` PASS — 146 static pages generated
- [x] Dev/prod server verified — saare routes HTTP 200, Cloudinary images render

### Chalane ka tareeqa
```
cd d:\ambassador
npm run dev     # development (http://localhost:3000)
npm run build   # production build
npm run start   # production server
```

### Aage optional
- Images Cloudinary se local `public/images/` mein download (offline ke liye)
- Real backend/DB/auth (agar future mein chahiye)
- Asli client logos aur gallery ki asli installation photos add karna
```