# Collection, Information & Utility Pages Design Plan

**Project:** Bangladesh Saree E-Commerce Website  
**Page Types Covered:**  
1. Complete Website Route Map (Every Link Destination Defined)  
2. Curated Collection Listing Pages (`New Arrivals`, `Festive Edit`, `Offers`, `Most Loved / Best Sellers`)  
3. Information & Policy Pages (`About Our Brand`, `Shipping & Delivery Info`, `Cash on Delivery Guidelines`, `Exchange & Return Policy`, `Saree Wash & Care Guide`, `Contact Us`)  
4. 404 Page Not Found & Unavailable Product Fallback  
**Design System Reference:** Strictly uses global variables from `global_color_typography_design_plan.md` and shared rules from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.**

---

## 1. Complete Website Route Map (Zero Dead Links)

Every navigation link, button, pill, and footer item across the website maps to one of these exact routes:

| Route Pattern | Page / Template Used | Triggered By |
| :--- | :--- | :--- |
| `/` | **Homepage** (`homepage_layout_and_section_flow_plan.md`) | Brand Logo, `Home` menu link |
| `/sarees` | **"All Sarees" Showcase Hub** (`all_sarees_category_showcase_plan.md`) | `All Sarees` menu link, `[ All Sarees ]` switcher pill, Homepage `VIEW ALL SAREE COLLECTIONS →` CTA |
| `/category/[slug]` *(e.g. `/category/jamdani`)* | **Single Category Listing Page** (`single_category_view_all_page_plan.md`) | Mode A category links (`Jamdani`, `Muslin`, `Katan`, `Silk`, `Cotton`), Category Showcase `View All →` links, Homepage `Shop by Saree Weave` cards, Category Switcher Pills |
| `/collections/[slug]` *(e.g. `/collections/new-arrivals`, `/collections/festive-edit`, `/collections/offers`, `/collections/best-sellers`)* | **Curated Collection Listing Page** *(Section 2 below — reuses Single Category grid)* | Mode B menu links (`New Arrivals`, `Festive Edit`, `Offers`), Homepage `View All New →`, `SHOP FESTIVE EDIT →`, `Most Loved` `View All →`, and Homepage Budget Tiles (`/collections/all?price=under-2500`) |
| `/product/[slug]` | **Product Details Page (PDP)** (`product_details_page_pdp_plan.md`) | Clicking any Product Card image (Desktop click / Mobile 2nd tap), title, price, or Quick View `View Full Product Details →` |
| `/checkout` | **Single-Page Guest COD Checkout** (`cart_and_checkout_flow_plan.md`) | `PROCEED TO CHECKOUT →` in Cart Drawer, or `ORDER NOW` (Express Buy) on Quick View / PDP |
| `/order-received/[orderId]` | **Order Received ("Thank You") View** (`cart_and_checkout_flow_plan.md`) | Submitting `CONFIRM ORDER` on Checkout |
| `/about`, `/shipping-policy`, `/cod-policy`, `/exchange-policy`, `/saree-care-guide` | **Editorial Info & Policy Template** *(Section 3 below)* | Global Footer Column 3 links |
| `/contact` | **Contact & Customer Support Page** *(Section 4 below)* | Global Footer `Contact Us` link |
| `*` (404) | **404 Not Found Page** *(Section 5 below)* | Any invalid URL or removed product URL |

---

## 2. Curated Collection Listing Page (`/collections/[slug]`)

When a visitor clicks **`New Arrivals`**, **`Festive Edit`**, **`Offers`**, **`Most Loved Sarees`**, or any of the **4 Homepage Budget Tiles**, they land on this reusable **Collection Listing Page**.

### How It Reuses the Single Category Page Template
It uses the **exact same layout, filter bar, `3:4` product card grid, 12-item batch infinite scroll, warm shimmer skeleton, scroll memory, and floating Back-to-Top button** defined in `single_category_view_all_page_plan.md`, with **two cross-category adjustments**:

1. **Header & Collection Switcher Pills:**
   * **Breadcrumb:** `Home / Collections / [Collection Title]` in `--text-muted`.
   * **H1 Title & Subtitle:**
     * `new-arrivals` → *"New Arrivals"* — *"Fresh off the loom — the newest handpicked sarees added to our collection."*
     * `festive-edit` → *"The Festive & Bridal Edit"* — *"Heirloom Jamdani, Muslin, and Royal Katan weaves crafted for weddings and celebrations."*
     * `offers` → *"Special Offers"* — *"Curated sarees at special seasonal savings."*
     * `best-sellers` → *"Most Loved Sarees"* — *"Our customers' favorite sarees ordered across Bangladesh."*
   * **Quick Switcher Pills Row:** Displays `[ All Sarees ]` `[ New Arrivals ]` `[ Festive Edit ]` `[ Most Loved ]` `[ Offers ]` + Saree fabric pills (`[ Jamdani ]` `[ Muslin ]` `[ Katan ]` `[ Silk ]` `[ Cotton ]`). Active pill uses `--brand-primary` background with `--text-light` text.
2. **Additional "Saree Type" Filter in the Filter Bar:**
   * Because a collection like `New Arrivals` or `Under BDT 2,500` contains sarees from multiple fabrics, the Top Filter Bar includes **`Saree Type`** (*Jamdani, Muslin, Katan, Silk, Cotton, Tangail*) as the first filter dropdown alongside *Color Family, Price Range, Blouse Piece, Work Type, Occasion,* and *In Stock Only*.
3. **Homepage Budget Tile Routing:**
   * Clicking a Budget Tile on the Homepage routes to `/collections/all?price=under-2500` (or `2500-4999`, `5000-9999`, `10000-plus`), which opens this template with that **Price Range filter chip already active** (`[ Price: Under BDT 2,500 ✕ ]`).

---

## 3. Information & Policy Pages Template

Used for all 5 footer information pages:
1. **`/about`** — *About Our Brand & Artisans*
2. **`/shipping-policy`** — *Shipping & Delivery Charges (Inside & Outside Dhaka)*
3. **`/cod-policy`** — *Cash on Delivery (COD) & Parcel Check Guidelines*
4. **`/exchange-policy`** — *Exchange & Return Policy*
5. **`/saree-care-guide`** — *Saree Wash & Fabric Care Guide (Jamdani, Muslin, Katan, Silk, Cotton)*

### Layout & Typography (`max-width: 760px` Centered on `--bg-main` Canvas)
* **Top Header Block:**
  * Breadcrumb: `Home / [Page Title]` (`--font-body`, `13px`, `--text-muted`).
  * H1 Title in `--font-heading` (Bold `700`, `48px` Desktop / `32px` Mobile, `--brand-primary`).
  * Quick Policy Navigation Pills (so visitors can switch between *Shipping*, *COD Guidelines*, *Exchange Policy*, and *Care Guide* in 1 tap): Active pill in `--brand-primary` with `--text-light` text; inactive pills in `--bg-surface` with `1px` `--border-subtle` border and `--text-primary` text.
* **Content Container:**
  * Framed inside a clean `--bg-surface` card (`1px` `--border-subtle` border, `36px` Desktop / `20px` Mobile padding) or structured sections separated by `1px` `--border-subtle` dividers:
  * **Section Headings (H2/H3):** `--font-heading` (Semi-Bold `600`, `--brand-primary`).
  * **Body Paragraphs & Bullet Lists:** `--font-body` (Regular `400`, `16px` Desktop / `15px` Mobile, line-height `1.7`, `--text-muted` with key terms in Semi-Bold `--text-primary`).
  * **Dynamic Delivery Values:** On `/shipping-policy` and `/cod-policy`, the Inside Dhaka (`BDT 70`, `2–3 Business Days`) and Outside Dhaka (`BDT 130`, `3–5 Business Days`) values are pulled directly from the central `storeConfig` so they never go out of sync.
* **Bottom CTA Box:**
  * Centered button **`EXPLORE OUR SAREES →`** (Primary button: `--brand-accent` fill with `--text-primary` text; flips to `--brand-primary` with `--text-light` on hover/tap).

---

## 4. Contact & Customer Support Page (`/contact`)

* **Container:** `max-width: 1024px` centered on `--bg-main` canvas.
* **Top Header:** H1 `"Get in Touch"` in `--font-heading` (`--brand-primary`) + subtitle *"Have a question about a saree, fabric, or delivery? Our team in Dhaka is happy to help."* (`--text-muted`).
* **2-Column Desktop / Stacked Mobile Layout:**
  * **Left Column (`45%` — Direct Support Channels in `--bg-surface` Card with `1px` `--border-subtle` Border):**
    * **Call / Helpline:** Phone number from `storeConfig` (`+880 1XXX-XXXXXX`), Support Hours (`Daily, 10:00 AM – 10:00 PM`).
    * **WhatsApp / Messenger Instant Chat:** Primary button **`CHAT ON WHATSAPP →`** (`--brand-accent` fill with `--text-primary` text) opening the store's WhatsApp/Messenger directly.
    * **Email:** Support email address.
    * **Location:** Dhaka, Bangladesh.
  * **Right Column (`55%` — Simple Inquiry Form in `--bg-surface` Card with `1px` `--border-subtle` Border):**
    * Fields (`48px` height, `--bg-main` background, `1px` `--border-subtle` border):
      1. `Your Name *`
      2. `Mobile Number *` (11-digit BD format)
      3. `Email Address (Optional)`
      4. `Message / Saree SKU Inquiry *` (Textarea)
    * Submit Button: **`SEND MESSAGE`** (Primary `--brand-accent` button; shows toast `"Message sent! Our team will contact you shortly ✓"` in `--state-success`).

---

## 5. 404 Not Found & Unavailable Saree Page

* **Centered Box (`max-width: 600px`) on `--bg-main` Canvas:**
  * Eyebrow Label: `PAGE NOT FOUND` (`--text-muted`).
  * H1 Heading: `"We Couldn't Find That Page"` (or `"This Saree Is No Longer Available"` if triggered on `/product/[slug]`) in `--font-heading` (`--brand-primary`).
  * Body Copy: *"The link you followed may be outdated, or the saree may have been retired from our collection."* (`--text-muted`).
  * Action Button: **`EXPLORE ALL SAREES →`** (`--brand-accent` fill with `--text-primary` bold text) routing to `/sarees`.
* **Below the Box:** Renders the **"Most Loved Sarees" 4-Card Slider** (with mobile progress bar / desktop 3-dot indicator) so the visitor can immediately browse popular sarees instead of leaving the website.