# 📄 MUKTADI BOOTS — Project Summary

### 1. Executive Concept
MUKTADI BOOTS is a premium, high-conversion Direct-to-Consumer (DTC) digital storefront designed to compete with elite global heritage footwear brands. By merging timeless Western silhouettes with exceptional local luxury craftsmanship, the platform prioritizes deep editorial storytelling, extreme technical product specifications, and a frictionless, high-average-order-value (AOV) checkout mechanism.

### 2. Technical Stack Configuration
*   **Core Engine:** React 18+ bundled via Vite (optimized for instant compilation inside Lovable.dev)
*   **Design Framework:** Tailwind CSS utilizing explicit, custom arbitrary values
*   **UI Components:** Shadcn UI + Radix primitives (fully accessible)
*   **State Control:** React Context + Hooks for unified global cart & sizing computations
*   **Icon Library:** Lucide React (Minimalist line weight variants)

### 3. High-Value Custom Implementations
*   **Compound Variant Grid Matrix:** Replaces generic single dropdowns with an interactive selection matrix separating length (**US 7 - 13**) from width dimensions (**Standard D, Wide EE**), eliminating sizing mismatch returns.
*   **Intelligent Size Calibration Engine:** An interactive inline wizard mapping high-volume athletic shoe profiles (Nike/Adidas) to traditional lasted footwear volumes, minimizing return shipping overheads.
*   **AOV Accelerator Module:** An automated upsell pipeline built into the checkout stream displaying matching accessory lines (cedar trees, premium wax dressings) derived from the selected product's exact leather finish.

---

# 🚀 Lovable.dev Engineering Prompt

Build a premium, fully production-ready DTC luxury footwear e-commerce application named "MUKTADI BOOTS". The aesthetic must strictly replicate European and American high-end heritage brands (e.g., Viberg, Alden, Crockett & Jones).

### 1. Design Tokens & Styling (Tailwind)
- Use a luxurious, minimal color palette: Obsidian Black (#0A0A0A) for headers, Rich Espresso (#1A110E) for structural elements, Warm Ivory/Champagne (#FDFBF7) for page backgrounds, and Soft Muted Gold (#C5A880) for micro-accents and buttons.
- Typography: Use elegant Serif headers (like Playfair Display) paired with sharp, high-readability geometric Sans-serif text (like Inter) for a modern luxury feel. Use large margins and plenty of whitespace.

### 2. Required Core Pages & Functional Routes
Generate a single-page application structure using React Router containing:
1. **Homepage (`/`):**
   - Immersive hero section with editorial styling ("The Masterclass of Bengali Leatherwork Meets Heritage Design").
   - "The Anatomy of a Luxury Boot" interactive technical component (clickable hotspots showing Goodyear Welt, leather lining, cork filling).
   - Curated product lookbook arrays and a section highlighting the tannery lineage.
2. **Product Detail Page (`/product/:slug`):**
   - High-fidelity multi-image gallery with zoom mechanics.
   - Sizing Matrix: Users must click to choose their Size (US 7 to 13, half sizes included) AND Width (Standard D, Wide EE). Ensure unavailable combinations are cross-hatched out dynamically.
   - Live AI Sizing Assistant: Modal that inputs the user's sneaker size (Nike/Adidas) and automatically outputs their recommended MUKTADI boot size (calculating the standard 0.5 size down drop).
   - Dynamic tab panels detailing "Leather Specifications", "Goodyear Welt Construction", and "Boot Care/Conditioning".
3. **Cart & Secure Checkout Dashboard (`/checkout`):**
   - Sliding panel mini-cart showing selection details with size/width metrics explicitly listed.
   - Upsell trigger offering Premium Cedar Shoe Trees and Luxury Leather Cream at checkout.
   - Multi-step validation form using React Hook Form to calculate regional shipping tiers automatically.

### 3. Production Architecture Verification
- State Management: Implement robust React context or local state to ensure items added to the cart persist across navigation transitions.
- Fully functional filter matrix on the `/shop` route allowing users to segment items by Leather Type (Chromexcel, Suede, Shell Cordovan) and Sole Type (Dainite, Commando, Leather).
- Ensure 100% responsive handling across mobile viewports, substituting grid carousels for native finger-swipes.