# Quick View Modal Page Design Plan **Project:** Bangladesh Saree E-Commerce Website **Component Type:** Global Interactive Popup Overlay (Desktop Centered 2-Column Modal / Mobile Slide-Up Bottom Sheet) **Trigger:** Opens when a visitor clicks or taps the **`QUICK VIEW`** button bar on any Product Card across the website. **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. Modal Objective & Conversion Goal The **Quick View Modal** lets shoppers inspect all angles of a saree, verify essential buying details (**Fabric, Saree Length, Blouse Piece, Work Type, and Stock Status**), and either **Add to Cart** (opening the Cart Drawer) or **Order Immediately** (Express Buy to Checkout) without losing their scroll position on the current page. * **No Wishlist Icon (`♡`):** Excluded to keep the modal clean and focused on product inspection and conversion. * **Future-Proof Size Slot:** Includes a conditional slot for **Size Pills (`S, M, L, XL, XXL`)** that stays hidden when `parentDepartment === "Sarees"` and automatically appears in the future for stitched items (*Kurtis, Salwar Kameez*). --- ## 2. Modal Container, Dimensions & Backdrop Styling * **Screen Backdrop Overlay:** Dimmed background (`--text-primary` at `60%` opacity with subtle `4px` blur). Clicking outside on the backdrop or pressing `ESC` closes the modal. * **Modal Surface & Border:** `--bg-main` background with a `1px` solid `--border-subtle` border. * **Desktop Dimensions (`1025px+`):** Centered modal box (`max-width: 920px`, width `92%`, auto height up to `88vh`), divided into a **50% / 50% 2-Column Split Layout** (Left `50%` Image Slider / Right `50%` Product Details & Actions). * **Tablet Dimensions (`768px – 1024px`):** Centered 2-column modal (`max-width: 820px`, `50% / 50%` split). * **Mobile Dimensions (`320px – 767px`):** Smooth slide-up **Bottom Sheet** (`height: 88dvh`, `width: 100vw`, top corners rounded `16px`), stacking the swipeable Image Slider on top and Product Info & Action Buttons below inside a smooth vertical scroll container. * **Close Button (`✕`):** * Positioned inside the **top-right corner** of the modal box (`top: 14px; right: 14px`). * Circular button (`36px × 36px` Desktop / `44px × 44px` Mobile) using `--bg-surface` background, `1px` `--border-subtle` border, and `--text-primary` `✕` icon; flips to `--brand-primary` background with `--text-light` icon on hover/tap. --- ## 3. Left Column: Interactive Saree Image Slider (`50%` Desktop Width) 1. **Image Frame & Aspect Ratio:** * Strict **`3:4` Vertical Portrait** aspect ratio (`--bg-surface` background with `1px` `--border-subtle` border). * **Top-Left Badge (Conditional, Max 1):** Displays `SOLD OUT`, `-15%`, or `NEW` following Section 3 of `global_ui_components_and_content_standards.md` (`--brand-accent` fill with `--text-primary` bold text for discount/new). 2. **Prev / Next Slide Arrows (`<` `>`):** * Vertically centered on the left and right edges of the photo (`38px × 38px` circular buttons in `--bg-main` at `85%` opacity, `1px` `--border-subtle` border, `--text-primary` icon; flips to `--brand-primary` background with `--text-light` icon on hover/tap). * Supports smooth touch swipe on mobile/tablet and cycles through all uploaded angles of the saree (*Front Drape, Aanchal Closeup, Border Detail, Blouse Piece, Full View*). 3. **Bottom Pagination Dots:** * Centered at the bottom of the image frame (`● ○ ○ ○`). * **Active Dot:** Elongated pill in `--brand-primary`. * **Inactive Dots:** Circular dots in `--brand-accent`. --- ## 4. Right Column: Product Information & Conversion Stack (`50%` Desktop Width) ### A. Header & Pricing Block 1. **Sub-Category Tag (Eyebrow Label):** * Uppercase sub-category name (e.g., `JAMDANI SAREE` or `COTTON SAREE`) in `--font-body` (Semi-Bold `600`, `12px`, letter-spacing `1.5px`, `--text-muted`). 2. **Product Title:** * Full saree name in `--font-heading` (Semi-Bold `600`, `28px` Desktop / `22px` Mobile, `--text-primary`). 3. **Price, Savings Pill & Stock Status Row:** * **Current Price:** Whole-number formatting (`BDT 4,500`) in `--font-body` (Bold `700`, `22px` Desktop / `18px` Mobile, `--text-primary`). * **Old Price (If Discounted):** Struck-through (`~~BDT 5,200~~`) in `--font-body` (Regular `400`, `16px` Desktop / `14px` Mobile, `--text-muted`). * **Savings Pill (If Discounted):** **`SAVE 13%`** in `--brand-accent` background fill with `--text-primary` Semi-Bold (`600`, `12px`) text. * **Stock Line:** `● In Stock — Ready to Ship` (dot in `--state-success`, text in `--text-primary`, `13px` Medium). If `stockQty <= 3`, shows `"Only [X] left in stock"` in `--state-error` (`12px`). ### B. Quick Highlights Box (`2×2` Key Saree Specs) Placed inside a `--bg-surface` box with a `1px` solid `--border-subtle` border (`12px` internal padding). Uses the **exact same label/value color hierarchy as the PDP**: | Spec Label (`--text-muted`, Regular `400`, `13px` `--font-body`) | Spec Value (`--text-primary`, Semi-Bold `600`, `14px` `--font-body`) | | :--- | :--- | | **Fabric** | e.g., *80-Count Pure Cotton Jamdani* | | **Saree Length** | e.g., *12 Haat (5.5 Meters)* | | **Blouse Piece** | e.g., *Included (1 Yard Unstitched)* or *Not Included* | | **Work / Pattern** | e.g., *Handwoven Zari Motif* | *(Future-Proof Slot: If `sizes` is populated on a future Kurti or Salwar Kameez, a row of Size Pills `[ S ] [ M ] [ L ] [ XL ]` renders immediately below this box; stays hidden for all Sarees).* ### C. Quantity Selector * **Label:** `Quantity` in `--font-body` (Medium `500`, `14px`, `--text-primary`). * **Stepper Box:** `[ − 1 + ]` (`120px` wide, `44px` tall, `--bg-main` background, `1px` `--border-subtle` border, `--text-primary` symbols). Caps at available stock. ### D. Dual-Button Conversion Stack & Full Details Link Follows Section 2 & Section 8 of `global_ui_components_and_content_standards.md`: 1. **Secondary Outlined Button (Top) — `ADD TO CART`:** * **Style:** Full width (`100%`), height `48px`, `--bg-main` background, `1.5px` solid `--brand-primary` border, `--brand-primary` Semi-Bold (`600`, `14px` uppercase) text. Hover fills with `--bg-surface`. * **Action:** Adds saree to bag, closes the Quick View Modal, updates header bag counter, and opens the **Right Slide-Out Cart Drawer**. 2. **Primary Accent Button (Bottom) — `ORDER NOW` (Express Buy):** * **Style:** Full width (`100%`), height `48px` directly below `ADD TO CART`, solid `--brand-accent` background with `--text-primary` Semi-Bold (`600`, `14px` uppercase) text. * **Hover / Tap State:** Background flips to `--brand-primary` and text flips to `--text-light`. * **Action (Express Buy):** Routes directly to `/checkout` with **only this saree** loaded for instant Cash on Delivery ordering, leaving any existing items in the shopping bag untouched. 3. **Sold-Out Fallback State:** * If `inStock === false`, both buttons are replaced by a single disabled button (`height: 48px`) labeled **`SOLD OUT`** in `--bg-surface` background, `1px` `--border-subtle` border, and `--text-muted` text. 4. **Bottom Link — `View Full Product Details →`:** * Centered below `ORDER NOW` in `--font-body` (Semi-Bold `600`, `14px`, `--brand-primary` text with `--brand-accent` hover underline). * **Action:** Opens the full **Product Details Page (PDP)** (`/product/[slug]`) for weave zoom, complete specification table, care instructions, and customer reviews. --- ## 5. Visual Wireframe Blueprint (Quick View Modal — `920px` `50% / 50%` Split) ```text +---------------------------------------------------------------------------------+ | [✕] | | +---------------------------------+ JAMDANI SAREE | | | [-13%] | Crimson Handwoven Dhakai Jamdani Saree | | | | (Product Title --font-heading 28px) | | | | | | | | BDT 4,500 ~~BDT 5,200~~ [ SAVE 13% ] | | | [<] SAREE PHOTO [>] | ● In Stock — Ready to Ship | | | SLIDER | +--------------------------------------+ | | | (3:4 Portrait) | | Fabric: 80-Count Cotton Jamdani| | | | | | Saree Length: 12 Haat (5.5 Meters) | | | | | | Blouse Piece: Included (1 Yd Unst.) | | | | | | Work/Pattern: Handwoven Zari Motif | | | | | +--------------------------------------+ | | | | Quantity: [ − 1 + ] | | | | | | | | +--------------------------------------+ | | | | | ADD TO CART | | <-- Outlined (--brand-primary) | | | +--------------------------------------+ | | | | +--------------------------------------+ | | | [●] ○ ○ ○ | | ORDER NOW | | <-- Solid (--brand-accent) | +---------------------------------+ +--------------------------------------+ | | View Full Product Details → | +---------------------------------------------------------------------------------+ ```