# Homepage Layout & Section Flow Design Plan

**Project:** Bangladesh Saree E-Commerce Website  
**Page Route:** `/` (Main Storefront Homepage)  
**Core Objective:** Capture the visitor's attention within the first 3 seconds, showcase uncropped saree drapes on both mobile and desktop, build instant social proof with real customer reviews, and guide her naturally toward discovering and ordering a saree.  
**Design System Reference:** Strictly uses the 12 global variables from `global_color_typography_design_plan.md` (`--bg-main`, `--bg-surface`, `--brand-primary`, `--brand-accent`, `--text-primary`, `--text-muted`, `--text-light`, `--border-subtle`, `--state-success`, `--state-error`, `--font-heading`, `--font-body`) and shared standards from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.**

---

## 1. AI Agent Implementation Rules (Strict Directives)

1. **100% Variable-Driven Styling:** Reference only the 12 global variables. Never hardcode hex values or font names.
2. **Contrast & Hover Rule:** `--brand-accent` buttons and badges always use `--text-primary` text; on hover/tap, `--brand-accent` buttons flip to `--brand-primary` background with `--text-light` text.
3. **Mobile-First Responsive Sliders:** All horizontal product sliders on the Homepage follow Section 5 of `global_ui_components_and_content_standards.md`:
   * **Mobile (`320–767px`):** 2 full cards + ~10% peek + touch swipe + **Slim Progress Bar** (`--border-subtle` track, `--brand-primary` thumb) + **"View All →" End Card**.
   * **Tablet (`768–1024px`):** 3 full cards + peek + **Slim Progress Bar** + End Card.
   * **Desktop (`1025px+`):** 4 cards + left/right arrow buttons + **3-Dot Navigation Indicator** (`--brand-primary` active pill, `--brand-accent` inactive dots).
4. **Strict `3:4` Product Portrait Ratio:** Every product card and category weave card uses `3:4` portrait images (`1200 × 1600px`). Mobile Hero uses a dedicated `4:5` portrait image (`1080 × 1350px`).
5. **No Wishlist Heart Icon (`♡`):** Excluded across all cards and banners.

---

## 2. The 8-Section Boutique Rhythm (Why Visitors Stay)

Sitting on the warm `--bg-main` canvas (`64px` vertical section spacing on Desktop / `40px` on Mobile):

| Order | Section Name | Psychological Purpose | Destination Route |
| :--- | :--- | :--- | :--- |
| **Section 1** | **Editorial Split / Portrait Hero** | **Inspire (First 3 Seconds):** Uncropped saree artistry & clear CTA. | `/sarees` (or slide-specific collection) |
| **Section 2** | **Shop by Saree Weave** | **Orient (Next 5 Seconds):** 1-tap access to her favorite fabric. | `/category/[slug]` |
| **Section 3** | **New Arrivals Slider** | **Excite:** 12 newest sarees with instant Image 2 preview & Quick View. | `/collections/new-arrivals` |
| **Section 4** | **Festive & Bridal Spotlight Banner** | **Immerse:** Editorial story breaking up product grids. | `/collections/festive-edit` |
| **Section 5** | **Most Loved Sarees (Best Sellers)** | **Validate:** Top 12 most-ordered sarees across Bangladesh. | `/collections/best-sellers` |
| **Section 6** | **Shop by Budget & Occasion Tiles** | **Simplify:** 4 non-overlapping BDT price brackets in 1 click. | `/collections/all?price=[bracket]` |
| **Section 7** | **Customer Drape Stories (Reviews)** | **Build Trust:** Real verified buyer photos & quotes. | Links to reviewed `/product/[slug]` |
| **Section 8** | **All Collections CTA & Trust Strip** | **Reassure:** Reinforces COD & parcel check right above footer. | `/sarees` |

---

## 3. Section-by-Section Detailed Design Specifications

### Section 1: Editorial Split Hero Showcase (Above the Fold)

* **Desktop Layout (`1025px+`, `max-width: 1280px` Centered):**
  * Framed inside a `--bg-surface` container with a `1px` `--border-subtle` border:
  * **Left Column (`42%` Width — Story & CTA Box, `48px` Padding):**
    * **Eyebrow Label:** Uppercase tag (e.g., `EID & FESTIVE COLLECTION`) in `--font-body` (Semi-Bold `600`, `12px`, letter-spacing `1.5px`, `--text-muted`).
    * **Hero Headline (H1):** High-impact title (e.g., *"Timeless Jamdani & Handloom Sarees"*) in `--font-heading` (Bold `700`, `48px`, `--brand-primary`).
    * **Subtitle Copy:** 1–2 lines in `--font-body` (Regular `400`, `16px`, `--text-muted`).
    * **Primary Button — `EXPLORE SAREES →`:** Height `48px`, `padding: 0 32px`, solid `--brand-accent` fill with `--text-primary` Semi-Bold (`600`, `14px` uppercase) text; flips to `--brand-primary` fill with `--text-light` text on hover/tap.
  * **Right Column (`58%` Width — `4:3` Uncropped Saree Showcase):**
    * Displays 1 to 3 curated slides (`1600 × 1200px`) with cross-fade transition (auto-rotates every `5s` unless reduced-motion is active; pauses on hover) and bottom pagination dots (`[●] ○ ○` in `--brand-primary` / `--brand-accent`).
* **Mobile Layout (`320px – 767px`):**
  * **Top Image Frame:** Renders a dedicated **`4:5` Vertical Portrait Image** (`1080 × 1350px`) at full mobile width so the entire saree drape fills the screen with zero text covering the saree.
  * **Bottom Story Box (`--bg-surface`, `1px` `--border-subtle` border, `20px 16px` padding):** Eyebrow (`11px`), H1 Headline (`32px`, `--brand-primary`), 1-line subtitle (`15px`, `--text-muted`), and full-width **`EXPLORE SAREES →`** button (`48px` height).

---

### Section 2: "Shop by Saree Weave" — Visual Portrait Category Cards

* **Section Header:**
  * Title (H2): `"Shop by Saree Weave"` in `--font-heading` (Semi-Bold `600`, `32px` Desktop / `24px` Mobile, `--brand-primary`).
  * Subtitle: *"Select your favorite fabric handcrafted by Bangladeshi artisans"* (`--text-muted`).
* **Responsive Card Row:**
  * **Desktop (`1025px+`):** **5 or 6 Vertical `3:4` Portrait Cards** in a single balanced row (`gap: 20px`).
  * **Mobile (`320px – 767px`):** Smooth **horizontal touch-swipe row** showing `2.3` cards per screen width (`gap: 12px`, CSS scroll-snap).
* **Category Card Anatomy (`--bg-surface` Frame, `1px` `--border-subtle` Border):**
  * **Top (`3:4` Portrait Image):** Close-up drape photography (*Dhakai Jamdani, Pure Muslin, Royal Katan, Tangail Cotton, Pure Silk*). Gently zooms (`1.04×`) on desktop hover.
  * **Bottom (`12px` Padding, Centered):**
    * Category Name (H4) in `--font-heading` (Semi-Bold `600`, `20px` Desktop / `18px` Mobile, `--text-primary`).
    * Live Count (`e.g., 36 Sarees`) in `--font-body` (`12px`, `--text-muted`).
  * **Interaction:** Hover/tap highlights border in `--brand-primary` and opens `/category/[slug]`.

---

### Section 3: "New Arrivals — Fresh Off the Loom" (Responsive Product Slider)

* **Header Bar (`max-width: 1280px`):**
  * Left (H2): `"New Arrivals"` in `--font-heading` (`32px` Desktop / `24px` Mobile, `--brand-primary`).
  * Right: **`View All New →`** in `--font-body` (Semi-Bold `600`, `--brand-primary` text with `--brand-accent` arrow) linking to `/collections/new-arrivals`.
* **Product Slider & Indicators:**
  * Queries the **12 newest in-stock sarees** across all sub-categories.
  * **Desktop:** 4 cards per view + left/right arrows + **3-Dot Navigation Indicator** (`--brand-primary` active pill, `--brand-accent` inactive dots).
  * **Mobile & Tablet:** 2 cards + peek (Mobile) / 3 cards + peek (Tablet) + **Slim Progress Bar** (`--border-subtle` track, `--brand-primary` thumb) + **"View All New Arrivals →" End Card**.
  * Every card follows the Global Product Card rules (`3:4` portrait, `NEW` badge, `Image 1 → Image 2` + `QUICK VIEW` bar).

---

### Section 4: Featured Spotlight Banner ("The Festive & Bridal Edit")

* **Container:** Centered `max-width: 1280px` box in `--bg-surface` with `1px` `--border-subtle` border.
* **Desktop (`1025px+`):** 2-Column Split (`55%` Left Dual `3:4` Photo Collage showing full saree drape + macro Zari weave / `45%` Right Editorial Story & CTA Box).
* **Mobile (`320px – 767px`):** Portrait image stacked on top, story & full-width button below.
* **Content & CTA:**
  * Eyebrow: `ARTISAN SPOTLIGHT` (`--text-muted`).
  * Heading (H2): *"Crafted for Weddings & Festive Celebrations"* (`--font-heading`, `32px` Desktop / `24px` Mobile, `--brand-primary`).
  * Copy: 2 sentences in `--font-body` (`--text-muted`).
  * Button: **`SHOP FESTIVE EDIT →`** (`48px` height, `--brand-accent` fill with `--text-primary` text; flips to `--brand-primary` with `--text-light` on hover/tap) linking to `/collections/festive-edit`.

---

### Section 5: "Most Loved Sarees" — Best Sellers Slider

* **Header Bar (`max-width: 1280px`):**
  * Left (H2): `"Most Loved Sarees"` in `--font-heading` (`32px` Desktop / `24px` Mobile, `--brand-primary`).
  * Right: **`View All →`** linking to `/collections/best-sellers`.
* **Product Slider & Indicators:**
  * Queries up to **12 best-selling in-stock sarees** (sorted by `salesCount` or pinned in `storeConfig`).
  * Uses the exact same **Desktop 4-Card + 3-Dot** and **Mobile 2-Card + Peek + Slim Progress Bar + End Card** architecture as Section 3.

---

### Section 6: "Shop by Budget & Occasion" — 4 Non-Overlapping Price Tiles

* **Section Header (H2):** Centered `"Shop by Budget & Occasion"` in `--font-heading` (`32px` Desktop / `24px` Mobile, `--brand-primary`).
* **Responsive Grid:** `4 columns` in a single row on Desktop (`gap: 20px`) / **`2 × 2` Grid** on Mobile (`gap: 12px`).
* **The 4 Non-Overlapping Tiles (`--bg-surface` background, `1px` `--border-subtle` border, centered text):**
  1. **Tile 1 — `Under BDT 2,500`:** Subtext *"Everyday & Office Cotton →"* → Routes to `/collections/all?price=under-2500`
  2. **Tile 2 — `BDT 2,500 – 4,999`:** Subtext *"Classic Handloom & Tangail →"* → Routes to `/collections/all?price=2500-4999`
  3. **Tile 3 — `BDT 5,000 – 9,999`:** Subtext *"Festive Jamdani & Muslin →"* → Routes to `/collections/all?price=5000-9999`
  4. **Tile 4 — `BDT 10,000 & Above`:** Subtext *"Royal Katan & Bridal Edit →"* → Routes to `/collections/all?price=10000-plus`
* **Tile Typography & Hover:** Heading (H4) in `--font-heading` (Semi-Bold `600`, `20px` Desktop / `18px` Mobile, `--brand-primary`), subtext in `--font-body` (`13px`, `--text-muted`). On hover/tap, tile fills with `--brand-primary` and text flips to `--text-light`.

---

### Section 7: "Loved by Women Across Bangladesh" — Customer Drape Stories

Follows Section 1C of `reviews_chat_and_social_sharing_plan.md`:
* **Section Header (H2):** `"Loved by Women Across Bangladesh"` (`--font-heading`, `32px` Desktop / `24px` Mobile, `--brand-primary`) + subtitle *"Real drape moments and verified reviews from our customers"* (`--text-muted`).
* **Responsive Layout:** 3 or 4 Testimonial Cards in a row on Desktop (+ dots) / horizontal touch-swipe showing `1.2` cards on Mobile (+ slim progress bar).
* **Testimonial Card (`--bg-surface`, `1px` `--border-subtle` border):** Customer `4:5` photo (or saree thumbnail), `★★★★★` in `--brand-primary`, short review quote (`--text-primary`), Reviewer Name + City + `✓ Verified Buyer` (`--state-success` check), and bottom link **`Viewed: [Saree Title] →`** (`--brand-primary`) linking to that saree's PDP.

---

### Section 8: All Collections Gateway CTA & Bangladesh Buyer Assurance Strip

1. **Centered Catalog Gateway:**
   * Text: *"Explore every saree fabric, color, and weave in our complete showcase"* (`15px`, `--text-muted`).
   * Button: **`VIEW ALL SAREE COLLECTIONS →`** (`48px` height, `--brand-accent` fill with `--text-primary` Semi-Bold uppercase text; flips to `--brand-primary` with `--text-light` on hover) routing to `/sarees`.
2. **4-Pillar Bangladesh Trust Strip (Directly Above Footer):**
   * Full-width `--bg-surface` band with `1px` `--border-subtle` top/bottom borders (`4 columns` on Desktop / `2 × 2 grid` on Mobile):
     1. **`Cash on Delivery (COD)`** — *Pay in cash at your doorstep across all 64 districts.*
     2. **`Easy Parcel Inspection`** — *Check your saree in front of the rider upon delivery.*
     3. **`100% Authentic Weaves`** — *Directly curated from master weavers in Bangladesh.*
     4. **`Fast Doorstep Delivery`** — *2–3 Days Inside Dhaka • 3–5 Days Outside Dhaka.*
   * Title in `--font-body` Semi-Bold (`600`, `14px`, `--brand-primary`); subtext in `--font-body` Regular (`400`, `13px`, `--text-muted`).

---

## 4. Visual Wireframe Blueprint (Mobile Homepage `375px – 430px`)

```text
+--------------------------------------------+
| [ ☰ ]           BRAND LOGO          [ 🛍 2 ]| <-- Sticky Header (--brand-primary)
+--------------------------------------------+
|         UNCROPPED 4:5 PORTRAIT HERO        |
|             SAREE MODEL PHOTO              |
|                  [●] ○ ○                   |
+--------------------------------------------+
| EID & FESTIVE COLLECTION (--bg-surface)    |
| Timeless Jamdani & Handloom Sarees (32px)  |
| +----------------------------------------+ |
| |            EXPLORE SAREES →            | | <-- Primary (--brand-accent)
| +----------------------------------------+ |
+--------------------------------------------+
| Shop by Saree Weave (Swipe Horizontal ->)  |
| +---------------+ +---------------+ +----+ |
| |   3:4 Photo   | |   3:4 Photo   | |3:4 | |
| |    Jamdani    | |  Pure Muslin  | |Kata| |
| |   36 Sarees   | |   24 Sarees   | |18..| |
| +---------------+ +---------------+ +----+ |
+--------------------------------------------+
| New Arrivals                 View All New →|
| +-----------------+ +-----------------+ +--|
| | [NEW]           | | < Slides to #2 >| |P |
| |   SAREE CARD 1  | | [  QUICK VIEW ] | |E |
| |   BDT 4,500     | |   BDT 6,200     | |E |
| +-----------------+ +-----------------+ +--|
|             [======----------]             | <-- Slim Progress Bar
+--------------------------------------------+
| +----------------------------------------+ |
| |      FESTIVE SPOTLIGHT PHOTO (3:4)     | |
| |----------------------------------------| |
| | ARTISAN SPOTLIGHT (--bg-surface)       | |
| | Crafted for Weddings & Festivities     | |
| | [         SHOP FESTIVE EDIT →        ] | |
| +----------------------------------------+ |
+--------------------------------------------+
| Most Loved Sarees              View All →  |
| +-----------------+ +-----------------+ +--|
| |   BEST SELLER 1 | |   BEST SELLER 2 | |P |
| +-----------------+ +-----------------+ +--|
|             [======----------]             | <-- Slim Progress Bar
+--------------------------------------------+
| Shop by Budget & Occasion (2x2 Grid)       |
| +------------------+  +------------------+ |
| | Under BDT 2,500  |  | BDT 2,500–4,999  | |
| | Everyday Cotton→ |  | Classic Weaves → | |
| +------------------+  +------------------+ |
| +------------------+  +------------------+ |
| | BDT 5,000–9,999  |  |BDT 10,000 & Above| |
| | Festive Jamdani→ |  | Bridal & Katan → | |
| +------------------+  +------------------+ |
+--------------------------------------------+
| Loved by Women Across Bangladesh (Reviews) |
| +-----------------------------------+ +---+|
| | [4:5 Photo] ★★★★★ "So soft!"      | |   ||
| | Sadia, Dhaka ✓ Verified Buyer     | |   ||
| +-----------------------------------+ +---+|
|             [========--------]             |
+--------------------------------------------+
| +----------------------------------------+ |
| |     VIEW ALL SAREE COLLECTIONS →       | |
| +----------------------------------------+ |
+--------------------------------------------+
| [2x2 BANGLADESH TRUST STRIP (--bg-surface)]|
|  ✓ Cash on Delivery  |  ✓ Parcel Check     |
|  ✓ Authentic Weaves  |  ✓ Fast BD Shipping |
+============================================+
| [ GLOBAL MOBILE FOOTER (--brand-primary) ] |
+============================================+
```