File size: 5,399 Bytes
ac3b6d4 e15bd5e ac3b6d4 e15bd5e ac3b6d4 e15bd5e ac3b6d4 a5c6e85 6eb9420 e15bd5e 6eb9420 e15bd5e 6eb9420 e15bd5e 6eb9420 e15bd5e 6eb9420 e15bd5e ac3b6d4 e15bd5e ac3b6d4 e15bd5e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bizrah Electronics - Premium Gadgets & Tech</title>
<link rel="stylesheet" href="style.css">
<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">
</head>
<body class="bg-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8 max-w-7xl">
<!-- Hero Banner -->
<section class="relative bg-gradient-to-r from-green-600 to-green-700 rounded-xl p-8 mb-12 text-white overflow-hidden">
<div class="max-w-2xl relative z-10">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Premium Electronics with Professional Installation</h1>
<p class="text-xl mb-6">Shop smart TVs, audio systems & home appliances with free delivery in Nairobi</p>
<div class="flex flex-wrap gap-4">
<a href="/products.html" class="bg-white text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition flex items-center">
<i class="fas fa-shopping-cart mr-2"></i> Shop Now
</a>
<a href="#services" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-600 transition flex items-center">
<i class="fas fa-tools mr-2"></i> Our Services
</a>
</div>
</div>
<div class="absolute right-0 top-0 h-full w-1/2 bg-[url('http://static.photos/technology/1024x576/1')] bg-cover bg-center opacity-20"></div>
</section>
<!-- Featured Categories -->
<section class="mb-12">
<h2 class="text-2xl font-bold mb-6">Shop by Category</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<category-card
title="Smartphones"
image="http://static.photos/technology/640x360/1"
link="/category/smartphones">
</category-card>
<category-card
title="Laptops"
image="http://static.photos/technology/640x360/2"
link="/category/laptops">
</category-card>
<category-card
title="Audio"
image="http://static.photos/technology/640x360/3"
link="/category/audio">
</category-card>
<category-card
title="Accessories"
image="http://static.photos/technology/640x360/4"
link="/category/accessories">
</category-card>
</div>
</section>
<!-- Featured Products -->
<section>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
<div>
<h2 class="text-2xl md:text-3xl font-bold">Featured Products</h2>
<p class="text-gray-600">Limited time offers - shop now before they're gone!</p>
</div>
<div class="flex items-center gap-4">
<div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium flex items-center">
<i class="fas fa-clock mr-2"></i>
<span id="deal-countdown">24:59:59</span>
</div>
<a href="/products.html" class="text-green-600 hover:text-green-700 font-medium flex items-center">
View All <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<product-card
name="iPhone 15 Pro"
price="999"
image="http://static.photos/technology/640x360/5"
rating="4.8"
id="prod-001">
</product-card>
<product-card
name="MacBook Air M2"
price="1099"
image="http://static.photos/technology/640x360/6"
rating="4.7"
id="prod-002">
</product-card>
<product-card
name="Sony WH-1000XM5"
price="399"
image="http://static.photos/technology/640x360/7"
rating="4.9"
id="prod-003">
</product-card>
<product-card
name="Samsung Galaxy S23"
price="799"
image="http://static.photos/technology/640x360/8"
rating="4.6"
id="prod-004">
</product-card>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/category-card.js"></script>
<script src="components/product-card.js"></script>
<script src="script.js"></script>
</body>
</html> |