# "All Sarees" Category Showcase Page & Global Product Card Plan **Project:** Bangladesh Saree E-Commerce Website **Page Route:** `/sarees` (Main Category Hub — "All Sarees" Page & Future Women's Parent Departments) **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 component standards from `global_ui_components_and_content_standards.md`. **Zero hardcoded hex codes or font names.** --- ## 1. Page Objective & Concept Instead of showing hundreds of unorganized sarees on a single endless page, the **"All Sarees" Page (`/sarees`)** acts as a curated **Category Showcase Hub**: * Visitors browse a vertical stack of horizontal product sliders—one section for each Saree Sub-Category (*Dhakai Jamdani, Pure Muslin, Royal Katan, Tangail Cotton, Pure Silk, etc.*). * Each category row previews a **maximum of the 12 newest in-stock products**. * **Mobile-First Slider Experience:** Displays **2 cards + ~10% peek** on Mobile with a **slim progress bar** and a **"View All [Category] →" end card**; displays **4 cards per row** on Desktop with arrow buttons and **3-dot navigation**. * Clicking **"View All →"** on any row opens that category's dedicated **Single Category Listing Page** (`/category/[slug]`). --- ## 2. Future-Proof 2-Level Category Hierarchy To sell **only Sarees now** while keeping the frontend and future database ready for **other women's wear later**, the store uses a **2-Level Parent/Child Category Structure** sharing this exact reusable template: | Level | Current Setup (Phase 1: Sarees Only) | Future Expansion (Phase 2: Multi-Department) | | :--- | :--- | :--- | | **Parent Department (Level 1)** | **Sarees** (`/sarees`) | **Sarees**, **Salwar Kameez**, **Kurtis**, **Dupattas**, **Jewelry** | | **Sub-Categories (Level 2)** | Jamdani, Muslin, Katan, Silk, Cotton, Tangail *(future: Georgette, Bridal)* | Each new Parent Department gets its own Sub-Categories and automatically reuses this exact horizontal slider showcase layout. | --- ## 3. Section-by-Section Layout Blueprint (`/sarees`) The page canvas uses `--bg-main` (80% base color zone). At the top of the page sits a compact header (`Home / All Sarees` breadcrumb in `--text-muted` + H1 `"All Saree Collections"` in `--font-heading`, Bold `700`, `48px` Desktop / `32px` Mobile, `--brand-primary`). Below the header, each active Saree Sub-Category is stacked vertically (`64px` gap on Desktop / `40px` gap on Mobile) separated by a `1px` `--border-subtle` divider. ### Anatomy of Each Category Section (Top to Bottom) #### A. Section Header Bar (Top Row) * **Left Side — Saree Category Title (H2):** * Displays the category name (e.g., *"Jamdani Sarees"*, *"Pure Muslin"*, *"Royal Katan"*). * **Typography & Color:** `--font-heading` (Semi-Bold `600`, `32px` Desktop / `24px` Mobile) in `--brand-primary`. * **Right Side — `View All →` Link:** * Aligned with the category title. * **Typography & Color:** `--font-body` (Semi-Bold `600`, `15px` Desktop / `14px` Mobile) in `--brand-primary`; on hover/tap, the underline and arrow highlight in `--brand-accent`. * **Destination:** Opens `/category/[slug]` (`single_category_view_all_page_plan.md`). #### B. Responsive Horizontal Product Slider (Middle Row) * **Product Query Rule:** Queries a **maximum of the 12 newest in-stock products** from that sub-category (sold-out items are excluded from showcase sliders). * **Responsive Card Layout (Mobile-First):** * **Mobile (`320px – 767px`):** **2 full Product Cards + ~10% peek of the 3rd card** on the right edge to invite horizontal touch swiping (`gap: 12px`, CSS scroll-snap). * **Tablet (`768px – 1024px`):** **3 full Product Cards + small peek** (`gap: 16px`, touch swipe). * **Desktop (`1025px+`):** **4 Product Cards** side-by-side (`gap: 20px`), navigated via left/right circular arrow buttons (`40px × 40px`, `--bg-surface` fill with `--text-primary` icon; flips to `--brand-primary` fill with `--text-light` icon on hover) or mouse drag. * **Mobile & Tablet "View All" End Card (After the 12th Saree):** * On touch devices, a final `3:4` card appears at the end of the horizontal swipe strip (`--bg-surface` background, `1px` `--border-subtle` border) displaying centered text **`"View All [Category] →"`** in `--font-heading` H4 (`--brand-primary`) and the total item count (`e.g., 48 Sarees` in `--text-muted`). Tapping routes directly to `/category/[slug]`. #### C. Bottom Slider Indicator (Mobile Progress Bar vs. Desktop 3-Dot Indicator) Follows Section 5 of `global_ui_components_and_content_standards.md`: 1. **Mobile & Tablet Indicator (`320px – 1024px` — Slim Progress Bar):** * Centered below the cards (`width: 120px` Mobile / `160px` Tablet, `height: 3px`). * **Track:** `--border-subtle`. * **Moving Thumb:** `--brand-primary` (width proportional to visible cards ÷ total cards; moves smoothly as the user swipes). 2. **Desktop Indicator (`1025px+` — 3-Dot Navigation):** * Centered below the 4 product cards (`12 products ÷ 4 cards per view = 3 dots`): * **Dot 1 (Default Active):** Products **1 – 4** * **Dot 2:** Products **5 – 8** * **Dot 3:** Products **9 – 12** * *(If a category has 5–8 products, shows 2 dots; if 4 or fewer products, indicator hides automatically).* * **Active Dot:** Elongated pill (`24px × 8px`) filled with `--brand-primary`. * **Inactive Dots:** Circular dots (`8px × 8px`) filled with `--brand-accent`. * **Interaction:** Clicking any dot smoothly scrolls the carousel to that group of 4 sarees. --- ## 4. Global Product Card Anatomy & Interactive Rules (Used Site-Wide) Every Product Card across the entire website (`/sarees`, Homepage sliders, Single Category grids, Collection pages, and PDP related sliders) follows these exact rules: ### A. Static Card Structure 1. **Card Frame:** `--bg-surface` background with a `1px` solid `--border-subtle` border. 2. **Image Container (Top):** * **Strict Aspect Ratio:** **`3:4` Vertical Portrait** (`1200 × 1600px` standard). * **Top-Left Status Badge (Maximum 1 Badge per Card):** * Priority: `SOLD OUT` > `-15%` (Discount) > `NEW` (within 14 days of `createdAt`). * Discount (`-15%`) and `NEW` badges use `--brand-accent` background fill with `--text-primary` Semi-Bold (`600`) uppercase `--font-body` text (`12px` Desktop / `11px` Mobile). * `SOLD OUT` badge uses `--bg-surface` background, `1px` `--border-subtle` border, and `--text-muted` text. * **No Wishlist Heart Icon (`♡`):** Never place a heart icon on the card. 3. **Product Info Box (Bottom, `12px` Padding):** * **Product Title:** 1–2 lines max (truncated with ellipsis if longer) in `--font-body` (Medium `500`, `16px` Desktop / `14px` Mobile, `--text-primary`). * **Price Row:** * Current Price: Clean whole-number formatting (`BDT 4,500`) in `--font-body` (Bold `700`, `18px` Desktop / `15px` Mobile, `--text-primary`). * Old Price (if `oldPriceBDT > priceBDT`): Struck-through (`~~BDT 5,200~~`) beside the current price in `--font-body` (Regular `400`, `14px` Desktop / `12px` Mobile, `--text-muted`). --- ### B. Deterministic Hover, Touch & Click Routing Rules #### 1. Desktop Interaction (Mouse Hover on Card Image) * **Image Transition:** Hovering the mouse over the card image smoothly slides horizontally (`250ms ease-out`) from **Image 1 (Primary Front Drape)** to **Image 2 (Secondary Preview / Aanchal Close-Up)**. *(If a product has only 1 image, applies a gentle `1.04×` zoom instead).* * **`QUICK VIEW` Bar Reveal:** Simultaneously slides up a full-width **`QUICK VIEW`** button bar (`height: 42px`) along the bottom edge of the image frame: * **Default Bar State:** `--brand-accent` background fill with `--text-primary` Semi-Bold (`600`, `13px` uppercase) `--font-body` text. * **Direct Button Hover State:** Moving the cursor directly onto the `QUICK VIEW` bar flips its background to `--brand-primary` and text to `--text-light`. #### 2. Mobile & Tablet Interaction (Touch / Finger Tap) Horizontal finger swiping scrolls the category slider smoothly. Tapping a card works as follows: * **1st Tap on Product Image:** Smoothly slides that card's photo from **Image 1 → Image 2** AND slides up the bottom **`QUICK VIEW`** button bar (`height: 40px`, `--brand-accent` background with `--text-primary` text). *(Tapping any other card automatically resets the previous card back to Image 1).* * **Tapping the `QUICK VIEW` Bar:** Opens the **Quick View Modal** (`quick_view_modal_page_plan.md`) as a slide-up Mobile Bottom Sheet without leaving the page. * **2nd Tap on Product Image (outside the `QUICK VIEW` bar):** Opens the full **Product Details Page (PDP)** (`/product/[slug]`). * **1st Tap on Product Title or Price (below the image):** Immediately opens the full **Product Details Page (PDP)** (`/product/[slug]`) in a single tap. --- ## 5. Visual Wireframe Blueprints (Desktop & Mobile) ### A. Desktop Category Row (`1280px` — 4 Cards + 3-Dot Indicator) ```text +-----------------------------------------------------------------------------------+ | Jamdani Sarees (H2 --brand-primary) View All → | +-----------------------------------------------------------------------------------+ | | | [NORMAL CARD STATE] [HOVER / 1ST TAP STATE] [NORMAL CARD STATE] | | +--------------------+ +--------------------+ +--------------------+ | | | [-15%] | | < Slides to Img #2 | | [NEW] | | | | | | | | | | | | Primary Saree | | Secondary Saree | | Primary Saree | | | | Image #1 (3:4) | | Image #2 (Aanchal)| | Image #1 (3:4) | | | | | | | | | | | | | +--------------------+ | | | | | | | [ QUICK VIEW ] | <-- (--brand-accent bg / | | | +--------------------+ +--------------------+ --text-primary txt) +----+ | | Crimson Jamdani | | Golden Silk Jamdani| | Ivory Muslin Saree | | | | BDT 4,500 | | BDT 6,200 | | BDT 5,800 | | | +--------------------+ +--------------------+ +--------------------+ | | | | [●] (○) (○) | | (Desktop 3-Dot Navigation: --brand-primary / --brand-accent) | +-----------------------------------------------------------------------------------+ ``` ### B. Mobile Category Row (`375px – 430px` — 2 Cards + Peek + Progress Bar) ```text +--------------------------------------------+ | Jamdani Sarees View All → | +--------------------------------------------+ | +-----------------+ +-----------------+ +--| | | [-15%] | | < Image #2 > | | | | | IMAGE 1 | | (1st Tap) | |P | | | (3:4 Portrait) | |-----------------| |E | | | | | [ QUICK VIEW ] | |E | | +-----------------+ +-----------------+ |K | | | Crimson Jamdani | | Golden Jamdani | | | | | BDT 4,500 | | BDT 6,200 | | | | +-----------------+ +-----------------+ +--| | [======----------] | <-- Slim Progress Bar | (--brand-primary / --border-subtle) | +--------------------------------------------+ ``` --- ## 6. Dynamic Frontend Config Notes for This Page 1. **Category Priority (`displayOrder`):** Categories are rendered in the order defined in `storeConfig` / category data (allowing *Katan* or *Jamdani* to sit at the top during Eid/Wedding season). 2. **Empty Category Protection:** Categories with `0` active products are automatically hidden. 3. **12-Product Cap:** Slices at most the 12 newest in-stock products per category row.