401→   401→          <p class="text-gray-400 text-xs mt-1">35+ items</p>
   402→   402→        </a>
   403→   403→      </div>
   404→   404→    </div>
   405→   405→  </section>
   406→   406→
   407→   407→  <!-- ================================================================
   408→   408→       5. PROMOTIONAL BANNERS
   409→   409→       Highlighted sales banners with CTAs
   410→   410→       ================================================================ -->
   411→   411→  <section class="py-8 lg:py-12 bg-gray-50">
   412→   412→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   413→   413→      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 fade-up">
   414→   414→        <!-- Promo Banner 1: Winter Sale -->
   415→   415→        <a href="#" class="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-brand to-brand-dark p-6 lg:p-10 min-h-[200px] flex items-center">
   416→   416→          <div class="relative z-10">
   417→   417→            <span class="inline-block bg-white text-brand text-xs font-bold px-3 py-1 rounded-full mb-3">Winter Collection</span>
   418→   418→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">50% OFF</h3>
   419→   419→            <p class="text-white/80 text-sm mb-4">Warm up your wardrobe with premium winter essentials</p>
   420→   420→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
   421→   421→              Shop Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
   422→   422→            </span>
   423→   423→          </div>
   424→   424→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">🧥</div>
   425→   425→        </a>
   426→   426→        <!-- Promo Banner 2: Drop Shoulder -->
   427→   427→        <a href="#" class="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-gray-900 to-gray-700 p-6 lg:p-10 min-h-[200px] flex items-center">
   428→   428→          <div class="relative z-10">
   429→   429→            <span class="inline-block bg-brand text-white text-xs font-bold px-3 py-1 rounded-full mb-3">New Arrivals</span>
   430→   430→            <h3 class="text-2xl lg:text-3xl font-heading font-bold text-white mb-2">Drop Shoulder</h3>
   431→   431→            <p class="text-gray-300 text-sm mb-4">Trendy oversized fits for everyday style</p>
   432→   432→            <span class="inline-flex items-center gap-2 text-white font-semibold text-sm group-hover:gap-3 transition-all">
   433→   433→              Explore <i data-lucide="arrow-right" class="w-4 h-4"></i>
   434→   434→            </span>
   435→   435→          </div>
   436→   436→          <div class="absolute right-4 bottom-4 text-6xl opacity-20 group-hover:opacity-30 transition">👕</div>
   437→   437→        </a>
   438→   438→      </div>
   439→   439→    </div>
   440→   440→  </section>
   441→   441→
   442→   442→  <!-- ================================================================
   443→   443→       6. PRODUCT GRID SECTION
   444→   444→       New Arrivals with filter sidebar and product cards
   445→   445→       ================================================================ -->
   446→   446→  <section id="products" class="py-12 lg:py-16 bg-white">
   447→   447→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   448→   448→      <!-- Section Title -->
   449→   449→      <div class="text-center mb-8 lg:mb-10 fade-up">
   450→   450→        <h2 class="text-2xl lg:text-3xl font-heading font-bold text-gray-900">New Arrivals</h2>
   451→   451→        <p class="text-gray-500 mt-2 text-sm">Fresh styles, just for you</p>
   452→   452→      </div>
   453→   453→
   454→   454→      <!-- Filter Bar with Category Pills -->
   455→   455→      <div class="flex items-center justify-between mb-6 gap-4 flex-wrap">
   456→   456→        <div class="flex items-center gap-3 overflow-x-auto no-scrollbar pb-2" id="category-pills">
   457→   457→          <button class="category-pill px-4 py-2 bg-brand text-white text-sm font-medium rounded-full whitespace-nowrap" data-cat="All">All</button>
   458→   458→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Panjabi">Panjabi</button>
   459→   459→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="T-Shirt">T-Shirt</button>
   460→   460→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Shirt">Shirt</button>
   461→   461→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Trouser">Trouser</button>
   462→   462→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Drop Shoulder">Drop Shoulder</button>
   463→   463→          <button class="category-pill px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full hover:bg-brand hover:text-white transition whitespace-nowrap" data-cat="Winter Wear">Winter Wear</button>
   464→   464→        </div>
   465→   465→        <!-- Filter Toggle (mobile) and Sort (desktop) -->
   466→   466→        <div class="flex items-center gap-3">
   467→   467→          <button id="filter-toggle-btn" class="lg:hidden flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-700 hover:border-brand hover:text-brand transition">
   468→   468→            <i data-lucide="sliders-horizontal" class="w-4 h-4"></i> Filters
   469→   469→          </button>
   470→   470→          <select class="hidden lg:block px-4 py-2 border border-gray-200 rounded-full text-sm text-gray-600 focus:outline-none focus:border-brand">
   471→   471→            <option>Sort by: Featured</option>
   472→   472→            <option>Price: Low to High</option>
   473→   473→            <option>Price: High to Low</option>
   474→   474→            <option>Newest First</option>
   475→   475→            <option>Best Selling</option>
   476→   476→          </select>
   477→   477→        </div>
   478→   478→      </div>
   479→   479→
   480→   480→      <!-- Product Grid Layout with Sidebar -->
   481→   481→      <div class="flex gap-6">
   482→   482→
   483→   483→        <!-- ── Desktop Sidebar Filters ────────────────────────────── -->
   484→   484→        <aside class="hidden lg:block w-64 flex-shrink-0">
   485→   485→          <div class="bg-gray-50 rounded-2xl p-5 space-y-6 sticky top-32">
   486→   486→            <h4 class="font-semibold text-gray-900 flex items-center gap-2">
   487→   487→              <i data-lucide="filter" class="w-4 h-4 text-brand"></i> Filters
   488→   488→            </h4>
   489→   489→
   490→   490→            <!-- Price Range Filter -->
   491→   491→            <div>
   492→   492→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
   493→   493→              <div class="flex justify-between text-xs text-gray-500 mb-2">
   494→   494→                <span id="price-min-label">৳450</span>
   495→   495→                <span id="price-max-label">৳3,000</span>
   496→   496→              </div>
   497→   497→              <input type="range" id="price-range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
   498→   498→              <div class="flex gap-2 mt-3">
   499→   499→                <input type="number" value="450" class="w-full px-2 py-1.5 text-xs border border-gray-200 rounded-lg text-center focus:outline-none focus:border-brand" />
   500→   500→                <input type="number" value="3000" class="w-full px-2 py-1.5 text-xs border border-gray-200 rounded-lg text-center focus:outline-none focus:border-brand" />
   501→   501→              </div>
   502→   502→            </div>
   503→   503→
   504→   504→            <!-- Color Filter -->
   505→   505→            <div>
   506→   506→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   507→   507→              <div class="flex flex-wrap gap-2">
   508→   508→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition" title="Black"></button>
   509→   509→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition" title="White"></button>
   510→   510→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition" title="Blue"></button>
   511→   511→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition" title="Gray"></button>
   512→   512→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition" title="Green"></button>
   513→   513→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition" title="Red"></button>
   514→   514→                <button class="w-8 h-8 rounded-full bg-amber-100 border-2 border-transparent hover:border-brand transition" title="Cream"></button>
   515→   515→                <button class="w-8 h-8 rounded-full bg-purple-900 border-2 border-transparent hover:border-brand transition" title="Maroon"></button>
   516→   516→              </div>
   517→   517→            </div>
   518→   518→
   519→   519→            <!-- Size Filter -->
   520→   520→            <div>
   521→   521→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   522→   522→              <div class="grid grid-cols-3 gap-2">
   523→   523→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">S</button>
   524→   524→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">M</button>
   525→   525→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">L</button>
   526→   526→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">XL</button>
   527→   527→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">2XL</button>
   528→   528→                <button class="size-btn px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600 hover:border-brand hover:text-brand transition">3XL</button>
   529→   529→              </div>
   530→   530→            </div>
   531→   531→
   532→   532→            <!-- Apply Filters Button -->
   533→   533→            <button class="w-full py-2.5 bg-brand hover:bg-brand-dark text-white font-medium text-sm rounded-xl transition">
   534→   534→              Apply Filters
   535→   535→            </button>
   536→   536→          </div>
   537→   537→        </aside>
   538→   538→
   539→   539→        <!-- ── Mobile Filter Drawer ────────────────────────────────── -->
   540→   540→        <div id="mobile-filter-overlay" class="lg:hidden fixed inset-0 bg-black/50 z-50 hidden"></div>
   541→   541→        <div id="mobile-filter-drawer" class="lg:hidden fixed top-0 left-0 h-full w-80 bg-white z-50 shadow-2xl transform -translate-x-full transition-transform duration-300">
   542→   542→          <div class="flex items-center justify-between p-4 border-b border-gray-100">
   543→   543→            <span class="font-semibold text-gray-900">Filters</span>
   544→   544→            <button id="close-filter-drawer" class="p-1 text-gray-500 hover:text-gray-800">
   545→   545→              <i data-lucide="x" class="w-6 h-6"></i>
   546→   546→            </button>
   547→   547→          </div>
   548→   548→          <div class="p-4 overflow-y-auto max-h-[calc(100vh-60px)] space-y-6">
   549→   549→            <!-- Price -->
   550→   550→            <div>
   551→   551→              <h5 class="text-sm font-medium text-gray-700 mb-3">Price Range</h5>
   552→   552→              <div class="flex justify-between text-xs text-gray-500 mb-2">
   553→   553→                <span>৳450</span><span>৳3,000</span>
   554→   554→              </div>
   555→   555→              <input type="range" min="450" max="3000" value="1500" class="w-full cursor-pointer" />
   556→   556→            </div>
   557→   557→            <!-- Color -->
   558→   558→            <div>
   559→   559→              <h5 class="text-sm font-medium text-gray-700 mb-3">Color</h5>
   560→   560→              <div class="flex flex-wrap gap-2">
   561→   561→                <button class="w-8 h-8 rounded-full bg-gray-900 border-2 border-transparent hover:border-brand transition"></button>
   562→   562→                <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 hover:border-brand transition"></button>
   563→   563→                <button class="w-8 h-8 rounded-full bg-blue-600 border-2 border-transparent hover:border-brand transition"></button>
   564→   564→                <button class="w-8 h-8 rounded-full bg-gray-400 border-2 border-transparent hover:border-brand transition"></button>
   565→   565→                <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-transparent hover:border-brand transition"></button>
   566→   566→                <button class="w-8 h-8 rounded-full bg-red-600 border-2 border-transparent hover:border-brand transition"></button>
   567→   567→              </div>
   568→   568→            </div>
   569→   569→            <!-- Size -->
   570→   570→            <div>
   571→   571→              <h5 class="text-sm font-medium text-gray-700 mb-3">Size</h5>
   572→   572→              <div class="grid grid-cols-3 gap-2">
   573→   573→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">S</button>
   574→   574→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">M</button>
   575→   575→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">L</button>
   576→   576→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">XL</button>
   577→   577→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">2XL</button>
   578→   578→                <button class="px-3 py-1.5 text-xs border border-gray-200 rounded-lg text-gray-600">3XL</button>
   579→   579→              </div>
   580→   580→            </div>
   581→   581→            <button class="w-full py-2.5 bg-brand text-white font-medium text-sm rounded-xl">Apply Filters</button>
   582→   582→          </div>
   583→   583→        </div>
   584→   584→
   585→   585→        <!-- ── Product Cards Grid ─────────────────────────────────── -->
   586→   586→        <div class="flex-1">
   587→   587→          <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5" id="product-grid">
   588→   588→            <!-- Product cards will be rendered by JavaScript -->
   589→   589→          </div>
   590→   590→
   591→   591→          <!-- Load More Button -->
   592→   592→          <div class="text-center mt-10 fade-up">
   593→   593→            <button id="load-more-btn" class="px-10 py-3 border-2 border-brand text-brand font-semibold rounded-full hover:bg-brand hover:text-white transition-all duration-300">
   594→   594→              Load More Products
   595→   595→            </button>
   596→   596→          </div>
   597→   597→        </div>
   598→   598→      </div>
   599→   599→    </div>
   600→   600→  </section>
   601→   601→
   602→   602→  <!-- ================================================================
   603→   603→       7. TRUST / FEATURES BAR
   604→   604→       Free delivery, returns, payment, support icons
   605→   605→       ================================================================ -->
   606→   606→  <section class="py-10 lg:py-14 bg-gray-50">
   607→   607→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   608→   608→      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 fade-up">
   609→   609→        <div class="text-center p-4">
   610→   610→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   611→   611→            <i data-lucide="truck" class="w-6 h-6 text-brand"></i>
   612→   612→          </div>
   613→   613→          <h4 class="font-semibold text-gray-800 text-sm">Free Delivery</h4>
   614→   614→          <p class="text-gray-500 text-xs mt-1">On orders above ৳1,500</p>
   615→   615→        </div>
   616→   616→        <div class="text-center p-4">
   617→   617→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   618→   618→            <i data-lucide="refresh-cw" class="w-6 h-6 text-brand"></i>
   619→   619→          </div>
   620→   620→          <h4 class="font-semibold text-gray-800 text-sm">Easy Returns</h4>
   621→   621→          <p class="text-gray-500 text-xs mt-1">7-day return policy</p>
   622→   622→        </div>
   623→   623→        <div class="text-center p-4">
   624→   624→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   625→   625→            <i data-lucide="shield-check" class="w-6 h-6 text-brand"></i>
   626→   626→          </div>
   627→   627→          <h4 class="font-semibold text-gray-800 text-sm">Secure Payment</h4>
   628→   628→          <p class="text-gray-500 text-xs mt-1">COD & bKash available</p>
   629→   629→        </div>
   630→   630→        <div class="text-center p-4">
   631→   631→          <div class="w-14 h-14 bg-brand/10 rounded-full flex items-center justify-center mx-auto mb-3">
   632→   632→            <i data-lucide="headphones" class="w-6 h-6 text-brand"></i>
   633→   633→          </div>
   634→   634→          <h4 class="font-semibold text-gray-800 text-sm">24/7 Support</h4>
   635→   635→          <p class="text-gray-500 text-xs mt-1">WhatsApp & phone</p>
   636→   636→        </div>
   637→   637→      </div>
   638→   638→    </div>
   639→   639→  </section>
   640→   640→
   641→   641→  <!-- ================================================================
   642→   642→       8. FOOTER
   643→   643→       Brand info, links, social media, policies
   644→   644→       ================================================================ -->
   645→   645→  <footer class="bg-gray-900 text-gray-300 pt-12 lg:pt-16 pb-24 lg:pb-8">
   646→   646→    <div class="max-w-7xl mx-auto px-4 lg:px-8">
   647→   647→      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
   648→   648→
   649→   649→        <!-- Brand Column -->
   650→   650→        <div>
   651→   651→          <h3 class="text-xl font-heading font-bold text-white mb-4">
   652→   652→            <span class="text-brand">X</span>evon
   653→   653→          </h3>
   654→   654→          <p class="text-gray-400 text-sm leading-relaxed mb-4">
   655→   655→            Xevon is a premium Bangladeshi fashion brand offering high-quality Panjabi, Shirts, T-Shirts, Trousers, and Winter Wear for the modern gentleman. Style meets comfort.
   656→   656→          </p>
   657→   657→          <div class="flex gap-3">
   658→   658→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Facebook">
   659→   659→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
   660→   660→            </a>
   661→   661→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="Instagram">
   662→   662→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
   663→   663→            </a>
   664→   664→            <a href="#" class="w-9 h-9 bg-gray-800 hover:bg-brand rounded-full flex items-center justify-center transition" title="YouTube">
   665→   665→              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
   666→   666→            </a>
   667→   667→          </div>
   668→   668→        </div>
   669→   669→
   670→   670→        <!-- Quick Links -->
   671→   671→        <div>
   672→   672→          <h4 class="text-white font-semibold mb-4">Quick Links</h4>
   673→   673→          <ul class="space-y-2.5 text-sm">
   674→   674→            <li><a href="#" class="hover:text-brand transition">Home</a></li>
   675→   675→            <li><a href="#" class="hover:text-brand transition">Shop</a></li>
   676→   676→            <li><a href="#" class="hover:text-brand transition">New Arrivals</a></li>
   677→   677→            <li><a href="#" class="hover:text-brand transition">Best Sellers</a></li>
   678→   678→            <li><a href="#" class="hover:text-brand transition">Sale</a></li>
   679→   679→            <li><a href="#" class="hover:text-brand transition">Contact Us</a></li>
   680→   680→          </ul>
   681→   681→        </div>
   682→   682→
   683→   683→        <!-- Customer Service / Policies -->
   684→   684→        <div>
   685→   685→          <h4 class="text-white font-semibold mb-4">Customer Service</h4>
   686→   686→          <ul class="space-y-2.5 text-sm">
   687→   687→            <li><a href="#" class="hover:text-brand transition">Privacy Policy</a></li>
   688→   688→            <li><a href="#" class="hover:text-brand transition">Terms & Conditions</a></li>
   689→   689→            <li><a href="#" class="hover:text-brand transition">Return & Refund Policy</a></li>
   690→   690→            <li><a href="#" class="hover:text-brand transition">Delivery Information</a></li>
   691→   691→            <li><a href="#" class="hover:text-brand transition">Track Order</a></li>
   692→   692→          </ul>
   693→   693→        </div>
   694→   694→
   695→   695→        <!-- Contact Info -->
   696→   696→        <div>
   697→   697→          <h4 class="text-white font-semibold mb-4">Contact Us</h4>
   698→   698→          <ul class="space-y-3 text-sm">
   699→   699→            <li class="flex items-start gap-2">
   700→   700→              <i data-lucide="map-pin" class="w-4 h-4 text-brand mt-0.5 flex-shrink-0"></i>
   701→   701→              <span>Gulshan-2, Dhaka 1212,<br/>Bangladesh</span>
   702→   702→            </li>
   703→   703→            <li class="flex items-center gap-2">
   704→   704→              <i data-lucide="phone" class="w-4 h-4 text-brand flex-shrink-0"></i>
   705→   705→              <a href="tel:+8801234567890" class="hover:text-brand transition">+880 1234-567890</a>
   706→   706→            </li>
   707→   707→            <li class="flex items-center gap-2">
   708→   708→              <i data-lucide="mail" class="w-4 h-4 text-brand flex-shrink-0"></i>
   709→   709→              <a href="mailto:hello@xevon.com.bd" class="hover:text-brand transition">hello@xevon.com.bd</a>
   710→   710→            </li>
   711→   711→          </ul>
   712→   712→        </div>
   713→   713→      </div>
   714→   714→
   715→   715→      <!-- Copyright -->
   716→   716→      <div class="border-t border-gray-800 mt-10 pt-6 text-center text-xs text-gray-500">
   717→   717→        <p>&copy; 2025 Xevon. All rights reserved. Designed with love in Bangladesh.</p>
   718→   718→      </div>
   719→   719→    </div>
   720→   720→  </footer>
   721→   721→
   722→   722→  <!-- ================================================================
   723→   723→       9. SIDE DRAWER CART
   724→   724→       Slide-in panel from right with cart items and checkout
   725→   725→       ================================================================ -->
   726→   726→  <div id="cart-overlay" class="fixed inset-0 bg-black/50 z-50 hidden opacity-0"></div>
   727→   727→  <div id="cart-drawer" class="fixed top-0 right-0 h-full w-full max-w-md bg-white z-50 shadow-2xl transform translate-x-full flex flex-col">
   728→   728→    <!-- Drawer Header -->
   729→   729→    <div class="flex items-center justify-between p-4 border-b border-gray-100">
   730→   730→      <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
   731→   731→        <i data-lucide="shopping-bag" class="w-5 h-5 text-brand"></i>
   732→   732→        Shopping Cart <span id="cart-drawer-count" class="text-sm text-gray-400">(0)</span>
   733→   733→      </h3>
   734→   734→      <button id="close-cart-drawer" class="p-1 text-gray-500 hover:text-gray-800 transition">
   735→   735→        <i data-lucide="x" class="w-6 h-6"></i>
   736→   736→      </button>
   737→   737→    </div>
   738→   738→    <!-- Cart Items Container -->
   739→   739→    <div id="cart-items-container" class="flex-1 overflow-y-auto p-4">
   740→   740→      <!-- Empty State -->
   741→   741→      <div id="cart-empty-state" class="flex flex-col items-center justify-center h-full text-gray-400">
   742→   742→        <i data-lucide="shopping-bag" class="w-16 h-16 mb-4 opacity-30"></i>
   743→   743→        <p class="text-lg font-medium mb-2">Your cart is empty</p>
   744→   744→        <p class="text-sm">Add some items to get started!</p>
   745→   745→      </div>
   746→   746→      <!-- Cart Items List (hidden by default) -->
   747→   747→      <div id="cart-items-list" class="space-y-4 hidden"></div>
   748→   748→    </div>
   749→   749→    <!-- Cart Footer with Subtotal and Checkout -->
   750→   750→    <div id="cart-footer" class="hidden border-t border-gray-100 p-4 bg-gray-50">
   751→   751→      <div class="space-y-2 mb-4">
   752→   752→        <div class="flex justify-between text-sm">
   753→   753→          <span class="text-gray-500">Subtotal</span>
   754→   754→          <span id="cart-subtotal" class="font-medium">৳0</span>
   755→   755→        </div>
   756→   756→        <div class="flex justify-between text-sm">
   757→   757→          <span class="text-gray-500">Delivery</span>
   758→   758→          <span class="text-green-600 font-medium">Free</span>
   759→   759→        </div>
   760→   760→        <div class="border-t border-gray-200 pt-2 flex justify-between">
   761→   761→          <span class="font-semibold">Total</span>
   762→   762→          <span id="cart-total" class="font-bold text-brand text-lg">৳0</span>
   763→   763→        </div>
   764→   764→      </div>
   765→   765→      <button class="w-full py-3 bg-brand hover:bg-brand-dark text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-[1.02]">
   766→   766→        Proceed to Checkout
   767→   767→      </button>
   768→   768→      <button id="continue-shopping-btn" class="w-full py-2.5 mt-2 text-sm text-gray-600 hover:text-brand transition">
   769→   769→        Continue Shopping
   770→   770→      </button>
   771→   771→    </div>
   772→   772→  </div>
   773→   773→
   774→   774→  <!-- ================================================================
   775→   775→       10. MOBILE BOTTOM NAVIGATION BAR
   776→   776→       Fixed bottom bar: Home | Shop | Cart | Wishlist
   777→   777→       ================================================================ -->
   778→   778→  <nav id="mobile-nav" class="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
   779→   779→    <div class="grid grid-cols-4 h-16">
   780→   780→      <a href="#" class="flex flex-col items-center justify-center gap-0.5 text-brand">
   781→   781→        <i data-lucide="home" class="w-5 h-5"></i>
   782→   782→        <span class="text-[10px] font-medium">Home</span>
   783→   783→      </a>
   784→   784→      <a href="#products" class="flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   785→   785→        <i data-lucide="grid-3x3" class="w-5 h-5"></i>
   786→   786→        <span class="text-[10px] font-medium">Shop</span>
   787→   787→      </a>
   788→   788→      <button id="mobile-cart-btn" class="relative flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   789→   789→        <i data-lucide="shopping-bag" class="w-5 h-5"></i>
   790→   790→        <span id="mobile-cart-badge" class="hidden absolute top-1 right-1/4 w-4 h-4 bg-brand text-white text-[9px] font-bold rounded-full items-center justify-center">0</span>
   791→   791→        <span class="text-[10px] font-medium">Cart</span>
   792→   792→      </button>
   793→   793→      <a href="#" class="relative flex flex-col items-center justify-center gap-0.5 text-gray-400 hover:text-brand transition">
   794→   794→        <i data-lucide="heart" class="w-5 h-5"></i>
   795→   795→        <span id="mobile-wishlist-badge" class="hidden absolute top-1 right-1/4 w-4 h-4 bg-brand text-white text-[9px] font-bold rounded-full items-center justify-center">0</span>
   796→   796→        <span class="text-[10px] font-medium">Wishlist</span>
   797→   797→      </a>
   798→   798→    </div>
   799→   799→  </nav>
   800→   800→

[showing lines 401-800 of 1187; use offset=801 with limit to continue reading]