| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Products | ByteBazaar</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/product-card.js"></script> |
| <script src="components/product-filter.js"></script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col md:flex-row gap-8"> |
| |
| <aside class="md:w-1/4"> |
| <custom-product-filter></custom-product-filter> |
| </aside> |
|
|
| |
| <div class="md:w-3/4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold">All Products</h1> |
| <div class="flex items-center space-x-4"> |
| <span class="text-gray-600">Sort by:</span> |
| <select class="bg-white border border-gray-300 rounded-md px-3 py-2"> |
| <option>Featured</option> |
| <option>Price: Low to High</option> |
| <option>Price: High to Low</option> |
| <option>Top Rated</option> |
| <option>Newest</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/5" |
| title="Neon Blade X" |
| price="1799" |
| category="Gaming Laptop" |
| rating="4.7" |
| ></custom-product-card> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/6" |
| title="Core i9 Extreme" |
| price="499" |
| category="Processor" |
| rating="4.9" |
| ></custom-product-card> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/7" |
| title="Aero 34\" Curved" |
| price="699" |
| category="Monitor" |
| rating="4.6" |
| ></custom-product-card> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/8" |
| title="Thunder Mouse Pro" |
| price="129" |
| category="Accessories" |
| rating="4.5" |
| ></custom-product-card> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/9" |
| title="Nova SSD 2TB" |
| price="249" |
| category="Storage" |
| rating="4.8" |
| ></custom-product-card> |
| <custom-product-card |
| image="http://static.photos/technology/640x360/10" |
| title="Quantum Keyboard" |
| price="199" |
| category="Accessories" |
| rating="4.4" |
| ></custom-product-card> |
| </div> |
|
|
| |
| <div class="flex justify-center mt-12"> |
| <nav class="flex items-center space-x-2"> |
| <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">Previous</a> |
| <a href="#" class="px-4 py-2 border rounded-md bg-blue-500 text-white">1</a> |
| <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">2</a> |
| <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">3</a> |
| <a href="#" class="px-4 py-2 border rounded-md hover:bg-gray-100">Next</a> |
| </nav> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
| |
| <script> |
| feather.replace(); |
| </script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
