Design a modern, responsive eCommerce website for a tech-savvy audience that showcases and sells the latest computer hardware components. The site should feature a sleek, dark-mode friendly interface with high-resolution images and categorized product listings including CPUs, GPUs, motherboards, RAM, SSDs, cooling systems, and peripherals. Integrate dynamic filters, product comparison tools, real-time stock and pricing updates, customer reviews, and an AI-powered recommendation engine. The homepage should highlight featured products, latest releases, best-sellers, and limited-time deals. Include a secure checkout system, user account management, and a blog/news section for hardware reviews and build guides. Optimize the site for SEO, fast loading, and mobile-first performance. Name of the site is ugadgets.pk - Initial Deployment
1e3c8cc verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>uGadgets.pk - Pakistan's Premier Tech Hardware Store</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| light: '#3b82f6', | |
| DEFAULT: '#2563eb', | |
| dark: '#1d4ed8', | |
| }, | |
| secondary: { | |
| light: '#f43f5e', | |
| DEFAULT: '#e11d48', | |
| dark: '#be123c', | |
| }, | |
| dark: { | |
| 900: '#0f172a', | |
| 800: '#1e293b', | |
| 700: '#334155', | |
| 600: '#475569', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #64748b; | |
| } | |
| /* Animation for featured products */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| /* Product card hover effect */ | |
| .product-card { | |
| transition: all 0.3s ease; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Loading spinner */ | |
| .spinner { | |
| width: 24px; | |
| height: 24px; | |
| border: 3px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col"> | |
| <!-- Top Announcement Bar --> | |
| <div class="bg-secondary-600 text-white text-center py-2 px-4 text-sm"> | |
| <p>🚀 Free Shipping on Orders Over Rs. 10,000 | 💯 7-Day Return Policy | 🔥 Limited Time Deals</p> | |
| </div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark-800/80 backdrop-blur-md shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-4"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 dark:text-gray-300"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <a href="#" class="flex items-center"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">uGadgets.pk</span> | |
| </a> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="hidden md:flex flex-1 mx-8"> | |
| <div class="relative w-full max-w-xl"> | |
| <input type="text" placeholder="Search for processors, graphics cards..." | |
| class="w-full py-2 px-4 rounded-full border border-gray-300 dark:border-dark-700 bg-white dark:bg-dark-800 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-500 text-white p-1 rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 relative"> | |
| <i class="fas fa-heart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-secondary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-secondary-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">5</span> | |
| </a> | |
| <a href="#" class="hidden md:flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <span class="text-sm">Account</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Navigation --> | |
| <nav class="hidden md:block py-2"> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium">Home</a></li> | |
| <li class="relative group"> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium flex items-center"> | |
| Products <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <div class="absolute left-0 mt-2 w-48 bg-white dark:bg-dark-800 rounded-md shadow-lg py-1 z-50 hidden group-hover:block"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">Processors</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">Graphics Cards</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">Motherboards</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">RAM</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">Storage</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-700">Cooling</a> | |
| </div> | |
| </li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium">Deals</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium">PC Builder</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium">Blog</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="mb-4"> | |
| <input type="text" placeholder="Search products..." | |
| class="w-full py-2 px-4 rounded border border-gray-300 dark:border-dark-700 bg-white dark:bg-dark-800 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Home</a></li> | |
| <li> | |
| <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 flex justify-between items-center"> | |
| Products <i class="fas fa-chevron-down"></i> | |
| </a> | |
| <ul class="pl-4 mt-2 space-y-2 hidden"> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Processors</a></li> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Graphics Cards</a></li> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Motherboards</a></li> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">RAM</a></li> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Storage</a></li> | |
| <li><a href="#" class="block py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Cooling</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Deals</a></li> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">PC Builder</a></li> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Blog</a></li> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Contact</a></li> | |
| <li><a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400">Account</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <!-- Hero Section --> | |
| <section class="relative rounded-xl overflow-hidden mb-8"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-dark-900 to-transparent z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Tech Gadgets" class="w-full h-64 md:h-96 object-cover"> | |
| <div class="absolute inset-0 flex items-center z-20 px-8"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-3xl md:text-5xl font-bold text-white mb-4">Build Your Ultimate Gaming Rig</h1> | |
| <p class="text-lg text-gray-200 mb-6">Premium components at unbeatable prices. Free shipping on orders over Rs. 10,000.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Shop Now</a> | |
| <a href="#" class="bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-lg font-medium transition duration-300 backdrop-blur-sm">PC Builder Tool</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Grid --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <span class="w-1 h-8 bg-primary-500 mr-3"></span> | |
| Shop By Category | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-microchip text-primary-600 dark:text-primary-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Processors</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">120+ Products</p> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-gamepad text-purple-600 dark:text-purple-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Graphics Cards</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">85+ Products</p> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-network-wired text-blue-600 dark:text-blue-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Motherboards</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">60+ Products</p> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-memory text-green-600 dark:text-green-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">RAM</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">90+ Products</p> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-database text-yellow-600 dark:text-yellow-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Storage</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">150+ Products</p> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="p-4 flex flex-col items-center"> | |
| <div class="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-3"> | |
| <i class="fas fa-fan text-red-600 dark:text-red-400 text-xl"></i> | |
| </div> | |
| <h3 class="font-medium text-center">Cooling</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">70+ Products</p> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <span class="w-1 h-8 bg-secondary-500 mr-3"></span> | |
| Featured Products | |
| </h2> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-secondary-500 text-white text-xs font-bold px-2 py-1 rounded">-15%</div> | |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Intel Core i9-13900K" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">Intel Core i9-13900K</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">24 Cores / 32 Threads @ 5.8GHz</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 95,999</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 112,999</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">New</div> | |
| <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="NVIDIA RTX 4090" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">NVIDIA RTX 4090 Founders</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.9</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">24GB GDDR6X / DLSS 3</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 325,000</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">Bestseller</div> | |
| <img src="https://images.unsplash.com/photo-1587202372775-e229a0a8df98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Samsung 980 Pro 1TB" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">Samsung 980 Pro 1TB</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">PCIe 4.0 NVMe M.2 SSD</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 32,999</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 36,500</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Corsair Vengeance RGB" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">Corsair Vengeance RGB 32GB</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.6</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">DDR5 5600MHz (2x16GB)</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 42,500</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Banner Section --> | |
| <section class="mb-12"> | |
| <div class="bg-gradient-to-r from-dark-800 to-dark-700 rounded-xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Custom PC Building Service</h2> | |
| <p class="text-gray-300 mb-6">Let our experts build your dream PC with premium components and cable management.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white text-dark-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition duration-300">Get Started</a> | |
| <a href="#" class="bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-lg font-medium transition duration-300 backdrop-blur-sm">View Sample Builds</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1563213026-b9a98a9d9b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Custom PC Build" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Arrivals --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <span class="w-1 h-8 bg-green-500 mr-3"></span> | |
| New Arrivals | |
| </h2> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium flex items-center"> | |
| View All <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Product Card 5 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="AMD Ryzen 9 7950X" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">AMD Ryzen 9 7950X</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">16 Cores / 32 Threads @ 5.7GHz</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 89,999</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 6 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">Limited</div> | |
| <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="ASUS ROG Strix B650" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">ASUS ROG Strix B650-F</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">AM5 / DDR5 / WiFi 6E</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 52,500</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 7 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1587202372775-e229a0a8df98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="NZXT Kraken Z73" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">NZXT Kraken Z73</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">360mm RGB AIO Liquid Cooler</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 38,999</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 8 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-secondary-500 text-white text-xs font-bold px-2 py-1 rounded">-10%</div> | |
| <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Logitech G Pro X" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">Logitech G Pro X</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.6</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Wireless Gaming Headset</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 29,999</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 33,500</span> | |
| </div> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Deals Section --> | |
| <section class="mb-12"> | |
| <div class="bg-gradient-to-r from-secondary-600 to-secondary-500 rounded-xl p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-2xl font-bold text-white">Flash Sale - Limited Time!</h2> | |
| <p class="text-white/90">Huge discounts on selected items. Offer ends soon!</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="text-center"> | |
| <div class="bg-white/20 text-white rounded-lg px-4 py-2 font-bold text-xl">02</div> | |
| <span class="text-white text-xs mt-1 block">Hours</span> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white/20 text-white rounded-lg px-4 py-2 font-bold text-xl">45</div> | |
| <span class="text-white text-xs mt-1 block">Minutes</span> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white/20 text-white rounded-lg px-4 py-2 font-bold text-xl">30</div> | |
| <span class="text-white text-xs mt-1 block">Seconds</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Deal Card 1 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">-25%</div> | |
| <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="AMD Ryzen 7 7700X" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">AMD Ryzen 7 7700X</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.7</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">8 Cores / 16 Threads @ 5.4GHz</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 62,999</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 83,999</span> | |
| </div> | |
| <button class="bg-secondary-500 hover:bg-secondary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deal Card 2 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">-20%</div> | |
| <img src="https://images.unsplash.com/photo-1592155931584-901ac15763e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="NVIDIA RTX 4070 Ti" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">NVIDIA RTX 4070 Ti</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">12GB GDDR6X / DLSS 3</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 185,000</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 230,000</span> | |
| </div> | |
| <button class="bg-secondary-500 hover:bg-secondary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deal Card 3 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">-30%</div> | |
| <img src="https://images.unsplash.com/photo-1587202372775-e229a0a8df98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="WD Black SN850X 2TB" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">WD Black SN850X 2TB</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.9</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">PCIe 4.0 NVMe M.2 SSD</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 39,999</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 57,000</span> | |
| </div> | |
| <button class="bg-secondary-500 hover:bg-secondary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deal Card 4 --> | |
| <div class="product-card bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm border border-gray-100 dark:border-dark-700"> | |
| <div class="relative"> | |
| <div class="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">-15%</div> | |
| <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="Corsair RM850x" class="w-full h-48 object-contain p-4"> | |
| <button class="absolute top-2 right-2 bg-white dark:bg-dark-700 rounded-full w-8 h-8 flex items-center justify-center shadow-md hover:bg-gray-100 dark:hover:bg-dark-600"> | |
| <i class="far fa-heart text-gray-600 dark:text-gray-300"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium text-gray-800 dark:text-gray-200">Corsair RM850x (2021)</h3> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-sm ml-1 text-gray-600 dark:text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">850W 80+ Gold Fully Modular</p> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Rs. 28,499</span> | |
| <span class="text-sm line-through text-gray-500 dark:text-gray-400 ml-2">Rs. 33,500</span> | |
| </div> | |
| <button class="bg-secondary-500 hover:bg-secondary-600 text-white rounded-full w-8 h-8 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <span class="w-1 h-8 bg-blue-500 mr-3"></span> | |
| Latest Tech News & Guides | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm"> | |
| <img src="https://images.unsplash.com/photo-1563213026-b9a98a9d9b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="PC Building Guide" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> | |
| <span>June 15, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>10 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">Ultimate PC Building Guide 2023</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Learn how to build your dream gaming PC with our step-by-step guide covering component selection, assembly, and optimization.</p> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium inline-flex items-center"> | |
| Read More <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm"> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" | |
| alt="GPU Comparison" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> | |
| <span>June 10, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>8 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">RTX 40 Series vs RX 7000: Which Should You Buy?</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">We compare NVIDIA's RTX 40 series and AMD's RX 7000 GPUs to help you decide which is best for your needs and budget.</p> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium inline-flex items-center"> | |
| Read More <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg overflow-hidden shadow-sm"> | |
| <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" | |
| alt="Cooling Solutions" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> | |
| <span>June 5, 2023</span> | |
| <span class="mx-2">•</span> | |
| <span>6 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">Air vs Liquid Cooling: Pros and Cons</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Explore the differences between air and liquid cooling solutions to determine which is right for your PC build.</p> | |
| <a href="#" class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium inline-flex items-center"> | |
| Read More <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="bg-gradient-to-r from-dark-800 to-dark-700 rounded-xl p-8"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Stay Updated with Tech Trends</h2> | |
| <p class="text-gray-300 mb-6">Subscribe to our newsletter for the latest product releases, exclusive deals, and tech news.</p> | |
| <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" | |
| class="flex-grow px-4 py-3 rounded-lg bg-white/20 backdrop-blur-sm text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition duration-300 whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-dark-800 text-gray-300 pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <!-- Column 1 --> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-4">uGadgets.pk</h3> | |
| <p class="mb-4">Pakistan's premier destination for premium computer hardware and gaming components.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Processors</a></li> | |
| <li><a href="#" class="hover:text-white">Graphics Cards</a></li> | |
| <li><a href="#" class="hover:text-white">Motherboards</a></li> | |
| <li><a href="#" class="hover:text-white">RAM</a></li> | |
| <li><a href="#" class="hover:text-white">Storage</a></li> | |
| <li><a href="#" class="hover:text-white">Cooling</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="hover:text-white">Shipping Policy</a></li> | |
| <li><a href="#" class="hover:text-white">Returns & Warranty</a></li> | |
| <li><a href="#" class="hover:text-white">Track Order</a></li> | |
| <li><a href="#" class="hover:text-white">PC Builder Tool</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-primary-500"></i> | |
| <span>123 Tech Street, Karachi, Pakistan</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-primary-500"></i> | |
| <span>+92 300 1234567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-primary-500"></i> | |
| <span>support@ugadgets.pk</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-clock mr-3 text-primary-500"></i> | |
| <span>Mon-Sat: 10AM - 8PM</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-dark-700 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm mb-4 md:mb-0">© 2023 uGadgets.pk. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-sm hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-sm hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-sm hover:text-white">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-800 shadow-lg-t flex justify-around items-center py-3 px-4 z-50"> | |
| <a href="#" class="flex flex-col items-center text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-home text-lg"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-th-large text-lg"></i> | |
| <span class="text-xs mt-1">Categories</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-search text-lg"></i> | |
| <span class="text-xs mt-1">Search</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-shopping-cart text-lg"></i> | |
| <span class="text-xs mt-1">Cart</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-600 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400"> | |
| <i class="fas fa-user text-lg"></i> | |
| <span class="text-xs mt-1">Account</span> | |
| </a> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Mobile category dropdown toggle | |
| const categoryDropdowns = document.querySelectorAll('#mobile-menu ul li a'); | |
| categoryDropdowns.forEach(dropdown => { | |
| if (dropdown.nextElementSibling && dropdown.nextElementSibling.tagName === 'UL') { | |
| dropdown.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const submenu = dropdown.nextElementSibling; | |
| submenu.classList.toggle('hidden'); | |
| const icon = dropdown.querySelector('i'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| } | |
| }); | |
| // Product card hover effect | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.classList.add('transform', 'scale-105'); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.classList.remove('transform', 'scale-105'); | |
| }); | |
| }); | |
| // Countdown timer for flash sale | |
| function updateCountdown() { | |
| const hoursElement = document.querySelector('.countdown-hours'); | |
| const minutesElement = document.querySelector('.countdown-minutes'); | |
| const secondsElement = document.querySelector('.countdown-seconds'); | |
| // This is just a demo - in a real app you would calculate the actual time remaining | |
| let hours = 2; | |
| let minutes = 45; | |
| let seconds = 30; | |
| // Decrement seconds | |
| if (seconds > 0) { | |
| seconds--; | |
| } else { | |
| seconds = 59; | |
| if (minutes > 0) { | |
| minutes--; | |
| } else { | |
| minutes = 59; | |
| if (hours > 0) { | |
| hours--; | |
| } else { | |
| // Sale has ended | |
| hours = 0; | |
| minutes = 0; | |
| seconds = 0; | |
| } | |
| } | |
| } | |
| // Update the display | |
| document.querySelector('.countdown-hours').textContent = hours.toString().padStart(2, '0'); | |
| document.querySelector('.countdown-minutes').textContent = minutes.toString().padStart(2, '0'); | |
| document.querySelector('.countdown-seconds').textContent = seconds.toString().padStart(2, '0'); | |
| } | |
| // Update countdown every second | |
| setInterval(updateCountdown, 1000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=us3aaa/ugadgetpk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |