# KINGZONE EXPRESS - COMPLETE UI STRUCTURE & COMPONENT MAP ## AI NAVIGATION GUIDE This document helps AI models understand the UI structure, component hierarchy, and user interaction flows. AI can use this to: - Help users navigate the website - Explain where to find specific features - Guide users through actions - Understand page layouts - Assist with troubleshooting UI issues --- ## GLOBAL LAYOUT STRUCTURE ``` ┌─────────────────────────────────────────────────────────────────┐ │ HEADER (Sticky Top - Fixed) │ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ [☰ Menu] Logo │ Search Bar (Full Width) │ Icons │ │ │ │ ──────────────────────────────────────────────────────── │ │ │ │ Address/Location Strip (with login prompt) │ │ │ └───────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ MAIN CONTENT AREA │ │ (Page specific content with max-width 1400px) │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ FOOTER │ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ About | Quick Links | Categories | Support │ │ │ │ Social Media Icons (10+ platforms) │ │ │ │ Copyright & Trust Badges │ │ │ └───────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## HEADER COMPONENTS ### Top Row (Logo + Navigation + Icons) ``` ┌──────────────────────────────────────────────────────────────────────────────────┐ │ LEFT SIDE │ RIGHT SIDE │ │ ┌──────────────────────┐ │ ┌──────────────────────────────────┐ │ │ │ [☰] KINGZONE │ │ │ Home Categories Orders │ │ │ │ EXPRESS │ │ │ Wishlist Cart Login/Profile │ │ │ └──────────────────────┘ │ └──────────────────────────────────┘ │ │ │ ┌────────┐ ┌────────┐ ┌──────────┐ │ │ │ │ 📞 │ │ 🔔 │ │ 🏪 Sell │ │ │ │ │Support │ │Notif │ │ Store │ │ │ │ └────────┘ └────────┘ └──────────┘ │ └──────────────────────────────────────────────────────────────────────────────────┘ ``` **Interactive Elements:** - **[☰] Menu**: Opens mobile navigation drawer with overlay - **Logo**: Navigates to homepage - **Home**: Navigates to homepage - **Categories**: Navigates to `/categories` - **Orders**: Navigates to `/orders` (authenticated) or redirects to login - **Wishlist**: Navigates to `/wishlist` with heart icon animation - **Cart**: Navigates to `/cart` with item count badge - **Login/Profile**: Toggle between login and profile based on auth state - **Support**: Navigates to `/contact-support` with unread count badge - **Notification**: Navigates to `/notifications` with count badge - **[Sell]** : Navigates to seller portal (`https://sellercenter.kingzoneexpress.com`) ### Search Bar (Row 2) ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ [🔍 Search products, brands, categories...] [Products ▼] [🔍 Search] │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` **Search Modes:** - Products (Default) - Searches product titles, descriptions, product numbers, tags - Stores - Searches store names and store numbers - Categories - Searches category names and slugs **Behavior:** - Auto-suggest on typing with debounce (300ms) - Enter key or click Search button to submit - Navigates to: `/search?q={query}&mode={mode}` - Shows loading state during search ### Address Strip (Row 3) ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ [📍] [PRIMARY ADDRESS DISPLAY] [Login to add address] [Click here →] │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` **States:** - **Guest**: Shows "Login to add address" + "Click here to login →" - **Logged in (no address)**: Shows "Add your delivery address" + "Add address →" with blue link - **Logged in (has address)**: Shows user's full address with town/city + "Change address →" - **Address click**: Navigates to `/address` page --- ## SIDEBAR (Mobile Menu Overlay) ``` ┌─────────────────────────────────────────────────────────────────┐ │ ☰ KingZone Express [✕] Close │ ├─────────────────────────────────────────────────────────────────┤ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ [👤 Login/Profile] (with user avatar and name) │ │ │ └───────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────┤ │ 🏠 Home │ │ 📂 Categories │ │ 📋 Orders │ │ ❤️ Wishlist │ │ 🛒 Cart │ │ 🛍️ Sell / Store │ │ 📞 Support │ │ 🔔 Notifications │ ├─────────────────────────────────────────────────────────────────┤ │ ──── MORE ──── │ │ 📦 Track Order │ │ 🎯 Affiliate Program │ │ ❓ FAQ │ │ 📝 Blog │ │ 🏷️ Deals & Offers │ ├─────────────────────────────────────────────────────────────────┤ │ 🌙 Dark Mode (if available) │ │ 🌐 Language: English / اردو │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## FOOTER STRUCTURE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ ABOUT US QUICK LINKS CATEGORIES SUPPORT │ │ ┌────────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐│ │ │ KingZone Express │ │ Home │ │ Mobiles │ │ FAQ ││ │ │ Pakistan's #1 │ │ All Products │ │ Laptops │ │ Contact Us ││ │ │ Online Store │ │ Hot Deals │ │ Fashion │ │ Return Policy││ │ │ Head Office: │ │ New Arrivals │ │ Home │ │ Privacy ││ │ │ Bahawalpur │ │ Summer Deals │ │ Appliances │ │ Terms ││ │ │ Multan Road │ │ Winter Deals │ │ Electronics │ │ Shipping ││ │ │ Flyover │ │ Future Deals │ │ Accessories │ │ ││ │ └────────────────────┘ └──────────────┘ └──────────────┘ └──────────────┘│ ├────────────────────────────────────────────────────────────────────────────────────┤ │ FOLLOW US Payment Methods │ │ ┌──────────────────────────────────────────────────────────────┐ ┌────────────┐│ │ │ [f] [ig] [x] [tt] [yt] [wa] [snap] [pin] [threads] │ │ [COD] ││ │ └──────────────────────────────────────────────────────────────┘ │ [Cards] ││ │ │ [Easypaisa]││ │ │ [JazzCash]││ │ └────────────┘│ ├────────────────────────────────────────────────────────────────────────────────────┤ │ © 2026 KingZone Express. All Rights Reserved. │ │ Design & Developed by KingZone Express Team │ │ Cash on Delivery • Free Shipping over Rs. 2,999 • 7-Day Easy Returns │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## HOMEPAGE STRUCTURE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ HERO SLIDER (Full Width, Auto-play) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [←] 🎯 Banner Image [→] │ │ │ │ Title: "Summer Sale!" │ │ │ │ Subtitle: "Up to 50% off on selected items" │ │ │ │ CTA: [Shop Now →] │ │ │ │ [● ● ● ●] Pagination Dots │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ SHOP BY CATEGORY (Horizontal Scroll) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Shop by Category [View All →] │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ │ │📱 │ │🎧 │ │👜 │ │⌚ │ │👗 │ │👔 │ │👛 │ │⌚ ││ │ │ │ │Mobiles│ │Acces. │ │Bags │ │Watches│ │Women │ │Men │ │Wallet│ │Baby ││ │ │ │ │ 24 │ │ 18 │ │ 12 │ │ 15 │ │ 30 │ │ 22 │ │ 8 │ │ 6 ││ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘│ │ │ │ ... more categories (horizontal scroll with arrows) │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ HOT DEALS (Horizontal Scroll with Countdown) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 🔥 Hot Deals [View All →] │ │ │ │ ⏰ Ends in: 12:34:56 │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ │ │ -30% 🔥 │ │ -40% 🔥 │ │ -25% 🔥 │ │ -50% 🔥 │ │ │ │ │ │ Rs.1,499 │ │ Rs.899 │ │ Rs.799 │ │ Rs.2,499│ │ │ │ │ │ ⭐4.5(12)│ │ ⭐4.8(8) │ │ ⭐4.2(5) │ │ ⭐4.9(20)│ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ NEW ARRIVALS (Horizontal Scroll) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ✨ New Arrivals [View All →] │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ New Item │ │ New Item │ │ New Item │ │ New Item │ │ │ │ │ │ ✨ NEW │ │ ✨ NEW │ │ ✨ NEW │ │ ✨ NEW │ │ │ │ │ │ Rs.599 │ │ Rs.899 │ │ Rs.1,299 │ │ Rs.699 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ FUTURE DEALS (Horizontal Scroll) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📅 Future Deals [View All →] │ │ │ │ ⏰ Coming Soon! │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Coming │ │ Coming │ │ Coming │ │ Coming │ │ │ │ │ │ Soon! │ │ Soon! │ │ Soon! │ │ Soon! │ │ │ │ │ │ 🎁 │ │ 🎁 │ │ 🎁 │ │ 🎁 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ SUMMER DEALS (Horizontal Scroll) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ☀️ Summer Deals [View All →] │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Summer │ │ Summer │ │ Summer │ │ Summer │ │ │ │ │ │ Special │ │ Special │ │ Special │ │ Special │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ WINTER DEALS (Horizontal Scroll) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❄️ Winter Deals [View All →] │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Winter │ │ Winter │ │ Winter │ │ Winter │ │ │ │ │ │ Special │ │ Special │ │ Special │ │ Special │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ALL PRODUCTS (Infinite Scroll with Skeleton Loader) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ All Products │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ │ │ Rs.499 │ │ Rs.699 │ │ Rs.999 │ │ Rs.1,199│ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ │ │ Rs.399 │ │ Rs.799 │ │ Rs.899 │ │ Rs.1,499│ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ │ [Loading...] (Infinite scroll trigger) │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## PRODUCT CARD STRUCTURE ``` ┌──────────────────────────────────────────────────────────────┐ │ ┌────────────────────────────────────────────────────────┐ │ │ │ [Product Image] │ │ ← Square 1:1 ratio │ │ 🔥 HOT / ✨ NEW / ⭐ Top Rated │ │ ← Badge overlay │ │ ❤️ Wishlist Button (top right corner) │ │ ← Heart icon │ └────────────────────────────────────────────────────────┘ │ │ Product Name │ ← Max 2 lines │ Brand/Store Name │ ← Optional, small │ ⭐⭐⭐⭐☆ (4.5) 128 reviews │ ← Rating with count │ ┌────────────────────────────────────────────────────────┐ │ │ │ Rs. 1,499 Rs. 2,499 -40% OFF │ │ ← Price with discount │ └────────────────────────────────────────────────────────┘ │ │ ✅ In Stock / 🚫 Out of Stock / ⚠️ Low Stock │ ← Stock status │ 📦 Free Shipping / 🚚 Express Delivery │ ← Delivery badge │ ┌────────────────────────────────────────────────────────┐ │ │ │ [🛒 Add to Cart] │ │ ← Primary CTA │ └────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────┘ ``` --- ## PRODUCT DETAIL PAGE (PDP) ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ Breadcrumb: Home > Category > Subcategory > Product Name │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────┐ ┌──────────────────────────────────────────┐ │ │ │ GALLERY SECTION │ │ PRODUCT INFO │ │ │ │ ┌──────────────────────────┐ │ │ Product Name │ │ │ │ │ Main Image │ │ │ Product Number: KZE-PROD-XXXXXXXXX │ │ │ │ │ (Zoomable on click) │ │ │ ⭐⭐⭐⭐☆ 4.5 (128 Reviews) │ │ │ │ └──────────────────────────┘ │ │ │ │ │ │ [Thumb] [Thumb] [Thumb] [V] │ │ ┌────────────────────────────────────┐ │ │ │ │ [←] Navigation Arrows [→] │ │ │ Rs. 1,499 Rs. 2,499 -40% OFF │ │ │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ [📤 Share] [❤️ Wishlist] │ │ │ │ │ └────────────────────────────────┘ │ Colors: ● Black ● White ● Blue │ │ │ │ Sizes: S M L XL XXL │ │ │ │ │ │ │ │ ✅ In Stock (50 units) │ │ │ │ 📦 Free Delivery (2-3 days) │ │ │ │ ↺ 7-Day Easy Returns │ │ │ │ 🛡️ 1-Year Warranty │ │ │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ [🛒 Add to Cart] [⚡ Buy Now] │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ Seller: Store Name │ │ │ │ │ │ ✅ Verified Seller │ │ │ │ │ │ ⭐ 4.8 (200+ Reviews) │ │ │ │ │ │ 📍 Location: City │ │ │ │ │ │ [🏪 Visit Store] │ │ │ │ │ └────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ TABS: [Description] [Specifications] [Reviews] [Delivery & Returns] │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Full product description with formatting... │ │ │ │ │ │ │ │ Specifications Table: │ │ │ │ ┌────────────────────┬──────────────────────────────────────────────┐ │ │ │ │ │ Brand │ XYZ │ │ │ │ │ │ Model │ XYZ-123 │ │ │ │ │ │ Material │ Premium Quality │ │ │ │ │ │ Dimensions │ 10 x 20 x 5 cm │ │ │ │ │ │ Weight │ 500g │ │ │ │ │ │ Color Options │ Black, White, Blue │ │ │ │ │ │ Warranty │ 1 Year │ │ │ │ │ └────────────────────┴──────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ CUSTOMER REVIEWS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ⭐⭐⭐⭐⭐ "Excellent product! Fast delivery." │ │ │ │ └─ John D. (Verified Purchase) - Dec 25, 2024 │ │ │ │ ⭐⭐⭐⭐ "Good quality but delivery took 3 days." │ │ │ │ └─ Sarah K. (Verified Purchase) - Dec 20, 2024 │ │ │ │ │ │ │ │ [Load More Reviews] [✏️ Write a Review] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ RELATED PRODUCTS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ You May Also Like │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ │ │ Rs.699 │ │ Rs.899 │ │ Rs.1,299 │ │ Rs.599 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## CATEGORY PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ Categories > Category Name │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [Icon] Category Name (XX Products) │ │ │ │ Category Description │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ SUB-CATEGORIES (If any) │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [Subcategory 1 (12)] [Subcategory 2 (8)] [Subcategory 3 (5)] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ FILTERS & SORTING │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [Price: Min─Max] [Rating: 4+] [In Stock] [Sort: Relevance ▼] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ PRODUCT GRID (2-5 columns based on screen size) │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ [Load More] button or Infinite scroll │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## SEARCH RESULTS PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ Search Results for "{query}" │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ [All (245)] [Products (200)] [Stores (35)] [Categories (10)] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 🔍 FILTERS │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ Price: [1000] — [5000] [Apply] │ │ │ │ │ │ Rating: [★] [★★] [★★★] [★★★★] [★★★★★] │ │ │ │ │ │ ☑ In Stock Only ☑ Verified Sellers │ │ │ │ │ │ Sort By: [Relevance ▼] │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ PRODUCT RESULTS (with relevance score badges) │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ 92% match│ │ 85% match│ │ 78% match│ │ 71% match│ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ Rs.499 │ │ Rs.699 │ │ Rs.999 │ │ Rs.1,199│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ 65% match│ │ 58% match│ │ 52% match│ │ 45% match│ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ Rs.399 │ │ Rs.799 │ │ Rs.899 │ │ Rs.1,499│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ STORE RESULTS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 🏪 Store Name 1 ⭐ 4.8 ✅ Verified (85% match) │ │ │ │ 📍 City, Pakistan 📦 250+ products │ │ │ ├────────────────────────────────────────────────────────────────────────────┤ │ │ │ 🏪 Store Name 2 ⭐ 4.5 ✅ Verified (72% match) │ │ │ │ 📍 City, Pakistan 📦 180+ products │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ CATEGORY RESULTS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📁 Category Name 1 (12 products) (88% match) │ │ │ │ 📁 Category Name 2 (8 products) (75% match) │ │ │ │ 📁 Category Name 3 (5 products) (62% match) │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## CART PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 🛒 Shopping Cart │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [Image] Product Name 1 Qty: [2] Rs. 1,499 │ │ │ │ │ │ Color: Black, Size: L Total: Rs. 2,998 │ │ │ │ │ │ ✅ In Stock [🗑️ Remove] │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [Image] Product Name 2 Qty: [1] Rs. 899 │ │ │ │ │ │ Color: White, Size: M Total: Rs. 899 │ │ │ │ │ │ ✅ In Stock [🗑️ Remove] │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [Image] Product Name 3 Qty: [3] Rs. 599 │ │ │ │ │ │ No variants Total: Rs. 1,797 │ │ │ │ │ │ ⚠️ Only 2 left in stock! [🗑️ Remove] │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ORDER SUMMARY │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Subtotal (6 items) Rs. 5,694 │ │ │ │ Delivery Fee Rs. 0 (Free) │ │ │ │ Tax (13%) Rs. 740 │ │ │ │ Discount (SUMMER10) -Rs. 569 │ │ │ ├────────────────────────────────────────────────────────────────────────────┤ │ │ │ Total Rs. 5,865 │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [✏️ Apply Coupon] [Promo Code] [Apply] │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ [🛒 Continue Shopping] [✅ Proceed to Checkout] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ RECOMMENDED PRODUCTS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ You May Also Like │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ │ │ Product │ │ Product │ │ Product │ │ │ │ │ │ Rs.699 │ │ Rs.899 │ │ Rs.1,299 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## CHECKOUT PRO PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 🚀 Checkout │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 1. DELIVERY ADDRESS │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Full Name: [________________________] │ │ │ │ Mobile: [________________________] Email: [________________________] │ │ │ │ Province: [Punjab ▼] City: [________________________] │ │ │ │ Town/Chowk: [________________________] │ │ │ │ Street/Road: [________________________] │ │ │ │ House Number: [________________________] │ │ │ │ │ │ │ │ [Select from Saved Addresses] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 2. DELIVERY METHOD │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [●] Local Delivery (Same/Next day) - Rs. 150 │ │ │ │ [○] Standard Delivery (2-4 days) - Rs. 250 │ │ │ │ [○] Express Delivery (1-2 days) - Rs. 399 │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 3. PAYMENT METHOD │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [●] Cash on Delivery (COD) (Pay when you receive) │ │ │ │ [○] Credit/Debit Card (Visa/Mastercard) │ │ │ │ [○] EasyPaisa (Mobile wallet) │ │ │ │ [○] JazzCash (Mobile wallet) │ │ │ │ [○] Bank Transfer (IBAN required) │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ORDER SUMMARY │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Order Summary │ │ │ │ ──────────────────────────────────────────────────────────────────────── │ │ │ │ Subtotal (6 items) Rs. 5,694 │ │ │ │ Delivery Fee Rs. 150 │ │ │ │ Tax (13%) Rs. 740 │ │ │ │ Discount -Rs. 569 │ │ │ │ ──────────────────────────────────────────────────────────────────────── │ │ │ │ Total Rs. 6,015 │ │ │ │ │ │ │ │ ⚠️ You will pay when you receive the order │ │ │ │ │ │ │ │ [🔒 Place Order (Pay on Delivery)] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ 🔒 Your information is secure. No login required. │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## ORDER MANAGEMENT ### Orders Page ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 📋 My Orders │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ [All] [Pending] [Processing] [Shipped] [Delivered] [Cancelled] [Returned] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Order #KZE-2024-00123 │ │ │ │ 📅 Dec 25, 2024 💰 Rs. 6,015 🚚 Shipped │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [Image] Product 1 Qty: 2 Rs. 2,998 │ │ │ │ │ │ [Image] Product 2 Qty: 1 Rs. 899 │ │ │ │ │ │ [Image] Product 3 Qty: 3 Rs. 1,797 │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ [Track Order] [Cancel Order] [View Details] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Order #KZE-2024-00120 │ │ │ │ 📅 Dec 20, 2024 💰 Rs. 2,499 ✅ Delivered │ │ │ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ [Image] Product 4 Qty: 1 Rs. 2,499 │ │ │ │ │ └──────────────────────────────────────────────────────────────────────┘ │ │ │ │ [⭐ Review Order] [🔄 Return Order] [🔄 Buy Again] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` ### Order Tracking ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 📦 Track Order │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ Order #KZE-2024-00123 │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ✅ │◄──►│ ✅ │◄──►│ ⏳ │◄──►│ ⏳ │◄──►│ ⏳ │◄──►│ ⏳ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ Pending Confirmed Processing Shipped Out for Delivered │ │ │ │ Delivery │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📍 Current Location: Out for Delivery │ │ │ │ 📅 Estimated Delivery: Dec 28, 2024 │ │ │ │ 🚚 Courier: KZE Express │ │ │ │ 🔢 Tracking ID: KZE-TRK-12345 │ │ │ │ 📞 Driver Contact: +92 308 4950422 │ │ │ │ │ │ │ │ [📱 Share Tracking] [📞 Call Driver] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ Delivery Timeline: │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 10:30 AM - Order out for delivery │ │ │ │ 09:00 AM - Package received by delivery partner │ │ │ │ Yesterday - Order shipped from warehouse │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## USER PROFILE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 👤 My Profile │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────┐ │ │ │ │ │Avatar│ John Doe │ │ │ │ └──────┘ john@email.com │ │ │ │ +92 300 1234567 │ │ │ │ 📍 Bahawalpur, Pakistan │ │ │ │ │ │ │ │ [✏️ Edit Profile] [🔒 Change Password] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ [📋 Orders] [❤️ Wishlist] [📍 Addresses] [🔒 Security] [🎯 Affiliate] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 📊 Quick Stats │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Total Orders│ │ Wishlist │ │ Reviews │ │ Loyalty │ │ │ │ 25 │ │ 12 │ │ 8 │ │ 1,234 pts │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 🔐 Security │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Last Login: Dec 25, 2024 10:30 AM │ │ │ │ Login Method: Phone OTP │ │ │ │ Account Status: ✅ Active │ │ │ │ │ │ │ │ [🗑️ Delete Account] (15-day grace period) │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## WISHLIST ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ ❤️ My Wishlist │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ (12 items saved) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ ❤️ │ │ ❤️ │ │ ❤️ │ │ ❤️ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ Rs.499 │ │ Rs.899 │ │ Rs.1,299 │ │ Rs.699 │ │ │ │ ⭐4.5 │ │ ⭐4.8 │ │ ⭐4.2 │ │ ⭐4.9 │ │ │ │ [Add Cart]│ │ [Add Cart]│ │ [Add Cart]│ │ [Add Cart]│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [Image] │ │ [Image] │ │ [Image] │ │ [Image] │ │ │ │ ❤️ │ │ ❤️ │ │ ❤️ │ │ ❤️ │ │ │ │ Product │ │ Product │ │ Product │ │ Product │ │ │ │ Rs.399 │ │ Rs.799 │ │ Rs.899 │ │ Rs.1,499│ │ │ │ ⭐4.0 │ │ ⭐4.6 │ │ ⭐4.3 │ │ ⭐4.7 │ │ │ │ [Add Cart]│ │ [Add Cart]│ │ [Add Cart]│ │ [Add Cart]│ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ [Clear All] │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## AFFILIATE DASHBOARD ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 🎯 Affiliate Dashboard │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ Referral Code: KZE-ABC123 │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [📋 Copy Code] [🔗 Share Link] [📊 View Reports] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 📊 Performance Stats │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Total Clicks│ │ Total Sales │ │ Commission │ │ Withdrawable│ │ │ │ 1,234 │ │ 56 │ │ Rs. 4,567 │ │ Rs. 3,000 │ │ │ │ ↑ 12% │ │ ↑ 8% │ │ ↑ 15% │ │ ↑ 10% │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 📈 Recent Activity │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Dec 25: Commission Rs. 500 from order #KZE-2024-00123 │ │ │ │ Dec 24: New referral - John Doe signed up │ │ │ │ Dec 23: Commission Rs. 300 from order #KZE-2024-00122 │ │ │ │ Dec 22: 25 clicks from Facebook campaign │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ [💳 Withdraw Earnings] │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## CONTACT SUPPORT ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 📞 Contact Support │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 💬 Quick Contact Options │ │ │ │ │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ │ │ │ │ 📱 WhatsApp │ │ 📧 Email │ │ 📞 Phone │ │ │ │ │ │ +92 308 4950422 │ │ support@ │ │ +92 308 4950422 │ │ │ │ │ │ [Chat Now →] │ │ kingzoneexpress │ │ [Call Now →] │ │ │ │ │ │ │ │ .com │ │ │ │ │ │ │ │ 24/7 Available │ │ Response: 24hrs │ │ 9AM - 10PM │ │ │ │ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ✍️ Send a Message │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ Name: [________________________] │ │ │ │ Email: [________________________] │ │ │ │ Order #: [________________________] │ │ │ │ Subject: [________________________] │ │ │ │ Message: [________________________________________________________] │ │ │ │ [________________________________________________________] │ │ │ │ │ │ │ │ [📨 Send Message] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ 📚 FAQ Quick Links │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ [Order] [Payment] [Delivery] [Returns] [Account] [Shipping] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## FAQ PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ ❓ Frequently Asked Questions │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ Search: [🔍 _______________________________] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ Categories: [All] [Order] [Payment] [Delivery] [Returns] [Account] [Shipping] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❓ How to place an order? │ │ │ │ 💡 Answer: To place an order, search for your product, add to cart, │ │ │ │ proceed to checkout, enter address, select payment method, and place │ │ │ │ order. You'll receive confirmation via SMS. │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❓ What is Cash on Delivery (COD)? │ │ │ │ 💡 Answer: Cash on Delivery allows you to pay in cash when your order │ │ │ │ is delivered to your doorstep. We offer COD across all major cities │ │ │ │ in Pakistan. │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❓ How to return a product? │ │ │ │ 💡 Answer: You can return a product within 7 days of delivery. Go to │ │ │ │ My Orders → Select Order → Click Return → Choose Reason → Submit. │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❓ How to create an account? │ │ │ │ 💡 Answer: Click 'Login' → 'Create New Account' → Enter details → │ │ │ │ Verify OTP → Account created. You can also signup via phone. │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ❓ How to track my order? │ │ │ │ 💡 Answer: Login to your account → Go to 'My Orders' → Click on the │ │ │ │ order → View real-time status with tracking updates. │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## BLOG PAGE ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 📝 KingZone Express Blog │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ Categories: [All] [Shopping Tips] [Product Reviews] [Updates] [Deals] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📄 How to Order Online with Cash on Delivery │ │ │ │ 📅 Dec 25, 2024 👁️ 1.2K views 💬 45 comments │ │ │ │ Learn the complete process of ordering online with cash on delivery │ │ │ │ in Pakistan. Step-by-step guide for new users. │ │ │ │ [Read More →] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📄 How to Return a Product on KingZone Express │ │ │ │ 📅 Dec 20, 2024 👁️ 890 views 💬 32 comments │ │ │ │ Complete guide on returning products, eligibility criteria, and │ │ │ │ refund process. 7-day easy returns. │ │ │ │ [Read More →] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 📄 Best Online Shopping Deals in Pakistan 2024 │ │ │ │ 📅 Dec 15, 2024 👁️ 2.3K views 💬 67 comments │ │ │ │ Discover the best online shopping deals, discounts, and promotions │ │ │ │ available across Pakistan. Save big on your purchases! │ │ │ │ [Read More →] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ [Load More Articles] │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## NOTIFICATIONS ``` ┌────────────────────────────────────────────────────────────────────────────────────┐ │ 🔔 Notifications │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ [All] [Unread] [Orders] [Promotions] [System] │ ├────────────────────────────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 🔵 Order Confirmed │ │ │ │ Your order #KZE-2024-00123 has been confirmed. │ │ │ │ 📅 2 minutes ago │ │ │ │ [View Order] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ⚪ Flash Sale Alert │ │ │ │ 50% off on selected items. Hurry up before stock runs out! │ │ │ │ 📅 1 hour ago │ │ │ │ [Shop Now] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ ⚪ Order Delivered │ │ │ │ Your order #KZE-2024-00120 has been delivered successfully. │ │ │ │ 📅 2 days ago │ │ │ │ [Write Review] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ │ ┌────────────────────────────────────────────────────────────────────────────┐ │ │ │ 🟢 Wishlist Price Drop │ │ │ │ One of your wishlist items has dropped in price! │ │ │ │ Product Name was Rs. 2,499 now Rs. 1,999 │ │ │ │ 📅 3 days ago │ │ │ │ [View Product] │ │ │ └────────────────────────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────────┘ ``` --- ## MODALS & OVERLAYS ### Login Modal ``` ┌─────────────────────────────────────────────────────────────────┐ │ 🔐 Welcome Back! [✕] │ ├─────────────────────────────────────────────────────────────────┤ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ Phone/Email: [_____________________________________] │ │ │ │ Password: [_____________________________________] │ │ │ │ │ │ │ │ ☑ Remember Me [Forgot Password?] │ │ │ │ │ │ │ │ [🔓 Login] │ │ │ │ │ │ │ │ ──── OR ──── │ │ │ │ │ │ │ │ [🔵 Google] [📱 Phone OTP] │ │ │ │ │ │ │ │ Don't have an account? [✨ Register] │ │ │ └───────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Add to Cart Modal ``` ┌─────────────────────────────────────────────────────────────────┐ │ ✅ Added to Cart! [✕] │ ├─────────────────────────────────────────────────────────────────┤ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ ┌────────┐ │ │ │ │ │[Image] │ Product Name │ │ │ │ └────────┘ Quantity: 1 │ │ │ │ Price: Rs. 1,499 │ │ │ ├───────────────────────────────────────────────────────────┤ │ │ │ Cart Total: Rs. 3,297 │ │ │ │ │ │ │ │ [🛒 View Cart] [🔄 Continue Shopping] │ │ │ └───────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Account Deletion Modal ``` ┌─────────────────────────────────────────────────────────────────┐ │ ⚠️ Delete Account [✕] │ ├─────────────────────────────────────────────────────────────────┤ │ ┌───────────────────────────────────────────────────────────┐ │ │ │ Are you sure you want to delete your account? │ │ │ │ │ │ │ │ ⚠️ This action is irreversible. │ │ │ │ │ │ │ │ • Your account will be scheduled for deletion │ │ │ │ • You have 15 days to recover your account │ │ │ │ • All data will be permanently removed │ │ │ │ │ │ │ │ Reason: [Select reason ▼] │ │ │ │ │ │ │ │ [🗑️ Delete Account] [❌ Cancel] │ │ │ └───────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## UI COMPONENT REFERENCE ### Buttons | Type | Style | Usage | |------|-------|-------| | **Primary** | Blue/Orange gradient, white text | Add to Cart, Place Order, Login, Submit | | **Secondary** | White background, blue border | Cancel, Back, View All | | **Danger** | Red background, white text | Delete, Remove, Cancel Order | | **Success** | Green background, white text | Confirm, Continue, Apply | | **Link** | Blue text, no background | Forgot Password, View More, See All | | **Icon** | Icon only, circular | Wishlist, Share, Close, Navigation | | **Outline** | Transparent with border | Filter, Clear, Reset | ### Badges & Labels | Type | Style | Usage | |------|-------|-------| | **Count** | Red circle, white number, small | Cart items, Notifications | | **Status** | Colored text with icon | ✅ In Stock (Green), 🚫 Out of Stock (Red), ⚠️ Low Stock (Orange) | | **Discount** | Orange background, white text | -40% OFF, SALE | | **Hot** | Red gradient background | 🔥 HOT, 🔥 Trending | | **New** | Blue background, white text | ✨ NEW, 🆕 Just Added | | **Verified** | Blue checkmark, green badge | ✅ Verified Seller, ✅ Verified Purchase | | **Best Seller** | Gold background | 🏆 Best Seller, ⭐ Top Rated | | **Limited** | Red/White gradient | ⏳ Limited Time, 🎯 Limited Stock | ### Cards | Type | Style | Usage | |------|-------|-------| | **Product** | Square image, price, add to cart | Product listing, Search results | | **Category** | Icon, name, product count | Category grid, Homepage | | **Order** | Status badge, items list, action buttons | Orders page, Order history | | **Review** | Avatar, name, rating, text, date | Reviews section, PDP | | **Store** | Logo, name, rating, location, product count | Store listing, Search results | | **Deal** | Image, countdown timer, discount | Hot deals, Seasonal deals | | **Dashboard** | Icon, number, percentage change | Affiliate dashboard, Stats | ### Form Inputs | Type | Style | Usage | |------|-------|------| | **Text Input** | Border, padding, focus state | Name, Email, Address fields | | **Number Input** | Step controls, validation | Quantity, Price filters | | **Select** | Dropdown arrow, options list | Category, Province, Sort | | **Checkbox** | Square with check mark | Terms, Remember me, Filters | | **Radio** | Circle with dot | Payment method, Delivery method | | **Textarea** | Multi-line, resize handle | Message, Review form | | **Phone Input** | Country code dropdown, formatted | Phone number, Contact | | **Search Input** | Magnifying icon, clear button | Search bar, Search page | ### Loading States | Type | Style | Usage | |------|-------|------| | **Spinner** | Circular rotating animation | Page load, Form submission | | **Skeleton** | Shimmering placeholder | Product cards, Image loading | | **Progress Bar** | Horizontal fill animation | Order placement, Checkout | | **Shimmer** | Gradient moving animation | Product grid, Category grid | --- ## NAVIGATION FLOWS ### User Journey: Browse and Purchase ``` Home → Browse Categories → Select Category → View Products → Click Product → Product Detail → Select Variants (Color/Size) → Add to Cart → Cart → Review Items → Proceed to Checkout → Enter Address → Select Delivery Method → Choose Payment → Place Order → Order Confirmation → Track Order → Receive Delivery ``` ### User Journey: Return Product ``` Orders → Find Order → Click Return Order → Select Return Reason → Submit Return Request → Wait for Approval → Package Product → Schedule Pickup/Drop-off → Track Return Status → Receive Refund ``` ### User Journey: Track Order ``` Orders → Select Order → Track Order → View Real-time Status → See Location → Contact Driver → Get Delivery Estimate ``` ### User Journey: Search ``` Search Bar → Enter Query → Auto-suggest → View Results Page → Apply Filters (Price, Rating) → Sort Results → Click Product → Product Detail → Add to Cart / Buy Now ``` ### User Journey: Affiliate ``` Affiliate Page → Sign Up → Get Referral Code → Share Link → Track Clicks → View Dashboard → See Earnings → Withdraw ``` ### User Journey: Account Management ``` Profile → View/Edit Details → Manage Addresses → Change Password → View Orders → Manage Wishlist → Affiliate Dashboard → Account Deletion (15-day grace) ``` ### User Journey: Support ``` Contact Support → Choose Channel (WhatsApp/Email/Phone/Chat) → Describe Issue → Get Response → Follow-up → Resolution ``` ### User Journey: Blog ``` Blog Page → Browse Categories → Click Post → Read Article → Share Post → Leave Comment → View Related Posts ``` --- ## RESPONSIVE BREAKPOINTS | Breakpoint | Width | Grid Columns | Behavior | |------------|-------|--------------|----------| | **Small Mobile** | < 380px | 1 column | Stacked layout, compact cards | | **Mobile** | 380px - 480px | 2 columns | Full width, touch optimized | | **Mobile** | 481px - 768px | 2 columns | Normal padding, touch targets | | **Tablet** | 769px - 1024px | 3 columns | Sidebar visible, hover states | | **Desktop** | 1025px - 1440px | 4 columns | Full layout, advanced features | | **Large Desktop** | > 1440px | 5-6 columns | Max width 1400px, spacious | --- ## ACCESSIBILITY FEATURES ### Keyboard Navigation - Tab order follows visual layout - Focus indicators on all interactive elements - Enter/Space triggers buttons and links - Escape closes modals and overlays ### Screen Reader Support - ARIA labels on all interactive elements - Proper heading hierarchy (H1-H6) - Descriptive alt text for images - Role attributes for custom components - Announcement of dynamic content updates ### Color Contrast - WCAG 2.1 AA compliant contrast ratios - Color is not the only means of conveying information - High contrast mode support ### Touch Support - Touch targets minimum 44x44px - Adequate spacing between touch targets - No hover-only interactions on mobile --- ## END OF UI STRUCTURE DOCUMENTATION