VIP4343/thunderbolt-bazaar
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ThunderBolt Bazaar ⚡</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>12</head>13<body class="bg-gray-50">14 <!-- Navigation -->15 <nav class="bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-lg sticky top-0 z-50">16 <div class="container mx-auto px-4">17 <div class="flex justify-between items-center py-4">18 <div class="flex items-center space-x-2">19 <i data-feather="zap" class="w-8 h-8 animate-pulse"></i>20 <span class="text-xl font-bold">ThunderBolt Bazaar</span>21 </div>22 <div class="hidden md:flex space-x-6">23 <a href="index.html" class="hover:text-yellow-300 transition duration-300 font-medium">Home</a>24 <a href="categories.html" class="hover:text-yellow-300 transition duration-300 font-medium">Categories</a>25 <a href="#flash-sales" class="hover:text-yellow-300 transition duration-300 font-medium">Flash Sales</a>26 <a href="account.html" class="hover:text-yellow-300 transition duration-300 font-medium">Account</a>27 </div>28 <div class="flex items-center space-x-4">29 <div class="relative">30 <input type="text" placeholder="Search products..." class="bg-white text-gray-800 rounded-full px-4 py-2 w-40 md:w-64 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all duration-300">31 <i data-feather="search" class="absolute right-3 top-2.5 text-gray-500"></i>32 </div>33 <a href="cart.html" class="p-2 rounded-full hover:bg-blue-700 transition duration-300 relative">34 <i data-feather="shopping-cart"></i>35 <span class="absolute -top-1 -right-1 bg-yellow-400 text-blue-800 text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>36 </a>37 <a href="account.html" class="p-2 rounded-full hover:bg-blue-700 transition duration-300">38 <i data-feather="user"></i>39 </a>40 </div>41 </div>42 </div>43 </nav>44 45 <!-- Hero Section -->46 <div id="vanta-bg" class="relative h-96 overflow-hidden">47 <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-70 flex items-center justify-center">48 <div class="text-center text-white px-4">49 <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-fade-in-down">Shop at Lightning Speed</h1>50 <p class="text-xl mb-8 animate-fade-in-up">Millions of products with thunder-fast delivery</p>51 <button class="bg-yellow-400 text-blue-800 font-bold px-8 py-3 rounded-full hover:bg-yellow-300 transition transform hover:scale-105 shadow-lg animate-bounce">52 Start Shopping Now53 </button>54 </div>55 </div>56 </div>57 58 <!-- Categories Section -->59 <section class="py-16 bg-white">60 <div class="container mx-auto px-4">61 <h2 class="text-3xl font-bold text-center mb-12">Shop by Category</h2>62 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">63 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">64 <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-full p-6 mb-3 group-hover:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">65 <i data-feather="smartphone" class="w-8 h-8 mx-auto text-blue-600"></i>66 </div>67 <span class="font-medium">Electronics</span>68 </div>69 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">70 <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-full p-6 mb-3 group-hover:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">71 <i data-feather="shirt" class="w-8 h-8 mx-auto text-blue-600"></i>72 </div>73 <span class="font-medium">Fashion</span>74 </div>75 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">76 <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-full p-6 mb-3 group-hover:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">77 <i data-feather="home" class="w-8 h-8 mx-auto text-blue-600"></i>78 </div>79 <span class="font-medium">Home</span>80 </div>81 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">82 <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-full p-6 mb-3 group-hover:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">83 <i data-feather="heart" class="w-8 h-8 mx-auto text-blue-600"></i>84 </div>85 <span class="font-medium">Beauty</span>86 </div>87 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">88 <div class="bg-gradient-to-br from-blue-极狐 to-purple-100 rounded-full p-6 mb-3 group-hover:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">89 <i data-feather="utensils" class="w-8 h-8 mx-auto text-blue-600"></i>90 </div>91 <span class="font-medium">Food</span>92 </div>93 <div class="text-center group cursor-pointer transform hover:scale-110 transition duration-300">94 <div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-full p-6 mb-3 group-h极狐:from-blue-200 group-hover:to-purple-200 transition duration-300 shadow-md">95 <i data-feather="more-horizontal" class="w-8 h-8 mx-auto text-blue-600"></极狐>96 </div>97 <span class="font-medium">More</span>98 </div>99 </div>100 </div>101 </section>102 103 <!-- Flash Sales Section -->104 <section id="flash-sales" class="py-16 bg-gradient-to-r from-blue-50 to-purple-50">105 <div class="container mx-auto px-4">106 <div class="flex items-center justify-between mb-8">107 <h2 class="text-3xl font-bold">Flash Sales ⚡</h2>108 <div class="flex items-center space-x-4">109 <span class="text-lg font-medium">Ends in:</span>110 <div class="flex space-x-2">111 <div class="bg-blue-600 text-white px-3 py-1 rounded font-mono text-lg">02</div>112 <div class="bg-blue-600 text-white px-3 py-1 rounded font-mono text-lg">15</div>113 <div class="bg-blue-600 text-white px-3 py-1 rounded font-mono text-lg">48</div>114 </div>115 </div>116 </div>117 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">118 <!-- Product Cards -->119 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">120 <div class="relative">121 <img src="http://static.photos/technology/320x240/1" alt="Smartphone" class="w-full h-48 object-cover">122 <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-20%</div>123 </div>124 <div class="p-6">125 <h3 class="font-semibold mb-2 text-lg">Premium Smartphone</h3>126 <div class="flex items-center mb-2">127 <div class="text-yellow-400 flex">128 <i data-feather="star" class="w-4 h-4 fill-current"></i>129 <i data-feather="star" class="w-4 h-4 fill-current"></i>130 <i data-feather="star" class="w-4 h-4 fill-current"></i>131 <i data-feather="star" class="w-4 h-4 fill-current"></i>132 <i data-feather="star" class="w-4 h-4"></i>133 </div>134 <span class="text-sm text-gray-600 ml-2">(128 reviews)</span>135 </div>136 <div class="flex items-center justify-between mb-4">137 <span class="text-2xl font-bold text-blue-600">฿12,999</span>138 <span class="text-sm text-gray-500 line-through">฿15,999</span>139 </div>140 <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300 flex items-center justify-center space-x-2">141 <i data-feather="shopping-cart" class="w-4 h-4"></i>142 <span>Add to Cart</span>143 </button>144 </div>145 </div>146 147 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">148 <div class="relative">149 <img src="http://static.photos/fashion/320x240/2" alt="Fashion Item" class="w-full h-48 object-cover">150 <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-33%</div>151 </div>152 <div class="p-6">153 <h3 class="font-semibold mb-2 text-lg">Designer T-Shirt</h3>154 <div class="flex items-center mb-2">155 <div class="text-yellow-400 flex">156 <i data-feather极狐="star" class="w-4 h-4 fill-current"></i>157 <i data-feather="star" class="w-4 h-4 fill-current"></i>158 <i data-feather="star" class="w-4 h-4 fill-current"></i>159 <i data-feather="star" class="w-4 h-4 fill-current"></i>160 <i data-feather="star" class="w-4 h-4 fill-current"></i>161 </div>162 <span class="text-sm text-gray-600 ml-2">(89 reviews)</span>163 </div>164 <div class="flex items-center justify-between mb-4">165 <span class="text-2xl font-bold text-blue-600">฿599</span>166 <span class="极狐-sm text-gray-500 line-through">฿899</span>167 </div>168 <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300 flex items-center justify-center space-x-2">169 <i data-feather="shopping-cart" class="w-4 h-4"></i>170 <span>Add to Cart</span>171 </button>172 </div>173 </div>174 175 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">176 <div class="relative">177 <img src="http://static.photos/home/320x240/3" alt="Home Item" class="w-full h-48 object-cover">178 <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-24%</div>179 </div>180 <div class="p-6">181 <h3 class="font-semibold mb-2 text-lg">Smart Coffee Maker</h3>182 <div class="flex items-center mb-2">183 <div class="text-yellow-400 flex">184 <i data-feather="star" class="w-4 h-4 fill-current"></i>185 <i data-feather="star" class="w-4 h-4 fill-current"></i>186 <i data-feather="star" class="w-4 h-4 fill-current"></i>187 <极狐 data-feather="star" class="w-4 h-4 fill-current"></i>188 <i data-feather="star" class="w-4 h-4"></i>189 </div>190 <span class="text-sm text-gray-600 ml-2">(67 reviews)</span>191 </div>192 <div class="flex items-center justify-between mb-4">193 <span class="text-2xl font-bold text-blue-600">฿2,499</span>194 <span class="text-sm text-gray-500 line-through">฿3,299</span>195 </div>196 <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300 flex items-center justify-center space-x-2">197 <i data-feather="shopping-cart" class="w-4 h-4"></i>198 <span>Add to Cart</span>199 </button>200 </div>201 </div>202 203 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">204 <div class="relative">205 <img src="http://static.photos/beauty/320x240/4" alt="Beauty Product" class="w-full h-48 object-cover">206 <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">-24%</div>207 </div>208 <div class="p-6">209 <h3 class="font-semibold mb-2 text-lg">Premium Skincare Set</h3>210 <div class="flex items-center mb-2">211 <div class="text-yellow-400 flex">212 <i data-feather="star" class="w-4 h-4 fill-current"></i>213 <i data-feather="star" class="w-4 h-4 fill-current"></i>214 <i data-feather="star" class="w-4 h-4 fill-current"></i>215 <i data-feather="star" class="w-4 h-4 fill-current"></i>216 <i data-feather="star" class="w-4 h-4"></i>217 </div>218 <span class="text-sm text-gray-600 ml-2">(142 reviews)</span>219 </div>220 <div class="flex items-center justify-between mb-4">221 <span class="text-2xl font-bold text-blue-600">฿1,899</span>222 <span class="text-sm text-gray-500 line-through">฿2,499</span>223 </div>224 <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300 flex items-center justify-center space-x-2">225 <i data-feather="shopping-cart" class="w-4 h-4"></i>226 <span>Add to Cart</span>227 </button>228 </div>229 </div>230 </div>231 </div>232 </section>233 234 <!-- Featured Products -->235 <section class="py-16 bg-white">236 <div class="container mx-auto px-4">237 <h2 class="text-3xl font-bold text-center mb-12">Featured Products</h2>238 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">239 <!-- Featured Product Cards -->240 <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">241 <a href="product-detail.html" class="block relative">242 <img src="http://static.photos/technology/320x240/5" alt="Wireless Earbuds" class="w-full h-48 object-cover">243 <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition duration-300"></div>244 </a>245 <div class="p-6">246 <a href="product-detail.html" class="font-semibold mb-2 text-lg hover:text-blue-600 transition duration-300 block">Wireless Earbuds Pro</a>247 <div class="flex items-center mb-2">248 <div class="text-yellow-400 flex">249 <i data-feather="250</body>251</html>