saerdd112123/digital-bazaar-delight
0
1<!DOCTYPE html>2<html lang="en" dir="rtl">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>الکترونیک - ایران لج</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 <style>12 @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;600;700&display=swap');13 body {14 font-family: 'Noto Naskh Arabic', serif;15 }16 .hero-gradient {17 background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);18 }19 .category-card:hover {20 transform: translateY(-5px);21 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);22 }23 .comparison-table {24 width: 100%;25 border-collapse: collapse;26 }27 .comparison-table th, .comparison-table td {28 border: 1px solid #e2e8f0;29 padding: 12px;30 text-align: center;31 }32 .comparison-table th {33 background-color: #f8fafc;34 font-weight: bold;35 }36 </style>37</head>38<body class="bg-gray-50">39 <!-- Navigation -->40 <nav class="bg-white shadow-lg">41 <div class="container mx-auto px-4">42 <div class="flex justify-between items-center py-4">43 <div class="flex items-center space-x-4 space-x-reverse">44 <div class="text-2xl font-bold text-orange-500">ایران لج</div>45 <div class="hidden md:flex items-center space-x-6 space-x-reverse">46 <a href="index.html" class="text-gray-700 hover:text-orange-500">خانه</a>47 <a href="electronics.html" class="text-orange-500">الکترونیک</a>48 <a href="cosmetics.html" class="text-gray-700 hover:text-orange-500">آرایشی بهداشتی</a>49 <a href="#" class="text-gray-700 hover:text-orange-500">تخفیفها</a>50 </div>51 </div>52 <div class="flex items-center space-x-4 space-x-reverse">53 <div class="relative">54 <input type="text" placeholder="جستجو..." class="py-2 pr-10 pl-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">55 <button class="absolute left-3 top-2.5 text-gray-500">56 <i data-feather="search"></i>57 </button>58 </div>59 <button class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200">60 <i data-feather="user"></i>61 </button>62 <button class="p-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 relative">63 <i data-feather="shopping-cart"></i>64 <span class="absolute -top-1 -right-1 bg-orange-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>65 </button>66 </div>67 </div>68 </div>69 </nav>70 71 <!-- Hero Section -->72 <section class="hero-gradient text-white py-16">73 <div class="container mx-auto px-4 text-center">74 <h1 class="text-4xl md:text-5xl font-bold mb-4">محصولات الکترونیکی</h1>75 <p class="text-xl mb-6">بهترین برندهای جهانی با قیمت مناسب و گارانتی معتبر</p>76 </div>77 </section>78 79 <!-- Sub Categories -->80 <section class="py-12 bg-white">81 <div class="container mx-auto px-4">82 <h2 class="text-3xl font-bold text-center mb-12">دستهبندی محصولات الکترونیکی</h2>83 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">84 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">85 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">86 <i data-feather="smartphone" class="text-blue-500 w-8 h-8"></i>87 </div>88 <h3 class="font-bold">موبایل</h3>89 </div>90 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">91 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">92 <i data-feather="tv" class="text-blue-500 w-8 h-8"></i>93 </div>94 <h3 class="font-bold">تلویزیون</h3>95 </div>96 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">97 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">98 <i data-feather="monitor" class="text-blue-500 w-8 h-8"></i>99 </div>100 <h3 class="font-bold">لپتاپ</h3>101 </div>102 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">103 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">104 <i data-feather="watch" class="text-blue-500 w-8 h-8"></i>105 </div>106 <h3 class="font-bold">ساعت هوشمند</h3>107 </div>108 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">109 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">110 <i data-feather="headphones" class="text-blue-500 w-8 h-8"></i>111 </div>112 <h3 class="font-bold">هدفون</h3>113 </div>114 <div class="category-card bg-gray-50 rounded-lg p-4 text-center transition duration-300 cursor-pointer">115 <div class="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-3 flex items-center justify-center">116 <i data-feather="shopping-bag" class="text-blue-500 w-8 h-8"></i>117 </div>118 <h3 class="font-bold">پوشاک</h3>119 </div>120 </div>121 </div>122 </section>123 124 <!-- Comparison Section -->125 <section class="py-12 bg-gray-50">126 <div class="container mx-auto px-4">127 <h2 class="text-3xl font-bold text-center mb-8">مقایسه محصولات</h2>128 <div class="overflow-x-auto">129 <table class="comparison-table bg-white rounded-lg shadow-md">130 <thead>131 <tr>132 <th class="w-1/4">ویژگی</th>133 <th class="w-1/4">گوشی موبایل سامسونگ S22</th>134 <th class="w-1/4">لپتاپ اپل مکبوک پرو</th>135 <th class="w-1/4">ساعت هوشمند اپل واچ</th>136 </tr>137 </thead>138 <tbody>139 <tr>140 <td>تصویر</td>141 <td><img src="http://static.photos/technology/200x200/1" alt="Samsung S22" class="mx-auto h-24"></td>142 <td><img src="http://static.photos/technology/200x200/2" alt="Macbook Pro" class="mx-auto h-24"></td>143 <td><img src="http://static.photos/technology/200x200/3" alt="Apple Watch" class="mx-auto h-24"></td>144 </tr>145 <tr>146 <td>قیمت</td>147 <td>29,750,000 تومان</td>148 <td>43,200,000 تومان</td>149 <td>15,000,000 تومان</td>150 </tr>151 <tr>152 <td>پردازنده</td>153 <td>Exynos 2200</td>154 <td>Apple M1 Pro</td>155 <td>Apple S7</td>156 </tr>157 <tr>158 <td>حافظه RAM</td>159 <td>8GB</td>160 <td>16GB</td>161 <td>1GB</td>162 </tr>163 <tr>164 <td>حافظه داخلی</td>165 <td>128GB</td>166 <td>512GB</td>167 <td>32GB</td>168 </tr>169 <tr>170 <td>باتری</td>171 <td>3700mAh</td>172 <td>Up to 21 hours</td>173 <td>18 hours</td>174 </tr>175 <tr>176 <td>گارانتی</td>177 <td>18 ماه</td>178 <td>24 ماه</td>179 <td>12 ماه</td>180 </tr>181 </tbody>182 </table>183 </div>184 </div>185 </section>186 187 <!-- Featured Products -->188 <section class="py-12 bg-white">189 <div class="container mx-auto px-4">190 <div class="flex justify-between items-center mb-8">191 <h2 class="text-3xl font-bold">محصولات پرفروش الکترونیکی</h2>192 <a href="#" class="text-orange-500 flex items-center">193 مشاهده همه194 <i data-feather="chevron-left" class="mr-2"></i>195 </a>196 </div>197 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">198 <!-- Product Card 1 -->199 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">200 <div class="relative">201 <img src="http://static.photos/technology/320x240/5" alt="Product" class="w-full h-48 object-cover">202 <div class="absolute top-2 left-2 bg-orange-500 text-white text-xs px-2 py-1 rounded">15% تخفیف</div>203 </div>204 <div class="p-4">205 <h3 class="font-bold mb-2">گوشی موبایل سامسونگ گلکسی S22</h3>206 <div class="flex justify-between items-center">207 <div>208 <span class="text-gray-500 line-through text-sm">35,000,000 تومان</span>209 <span class="font-bold text-orange-500 block">29,750,000 تومان</span>210 </div>211 <button class="bg-orange-500 text-white p-2 rounded-full hover:bg-orange-600">212 <i data-feather="shopping-cart" class="w-4 h-4"></i>213 </button>214 </div>215 </div>216 </div>217 218 <!-- Product Card 2 -->219 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">220 <div class="relative">221 <img src="http://static.photos/technology/320x240/6" alt="Product" class="w-full h-48 object-cover">222 <div class="absolute top-2 left-2 bg-orange-500 text-white text-xs px-2 py-1 rounded">10% تخفیف</div>223 </div>224 <div class="p-4">225 <h3 class="font-bold mb-2">لپتاپ اپل مکبوک پرو 13 اینچ</h3>226 <div class="flex justify-between items-center">227 <div>228 <span class="text-gray-500 line-through text-sm">48,000,000 تومان</span>229 <span class="font-bold text-orange-500 block">43,200,000 تومان</span>230 </div>231 <button class="bg-orange-500 text-white p-2 rounded-full hover:bg-orange-600">232 <i data-feather="shopping-cart" class="w-4 h-4"></i>233 </button>234 </div>235 </div>236 </div>237 238 <!-- Product Card 3 -->239 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">240 <div class="relative">241 <img src="http://static.photos/technology/320x240/7" alt="Product" class="w-full h-48 object-cover">242 </div>243 <div class="p-4">244 <h3 class="font-bold mb-2">هدفون بیسیم سونی WH-1000XM4</h3>245 <div class="flex justify-between items-center">246 <div>247 <span class="font-bold text-orange-500 block">12,500,000 تومان</span>248 </div>249 <button class="bg-orange-500 text-white p-2 rounded-full hover:bg-orange-600">250 <i data-feather="shopping-cart" class="w-4 h-4"></i>251 </button>252 </div>253 </div>254 </div>255 256 <!-- Product Card 4 -->257 <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition duration-300">258 <div class="relative">259 <img src="http://static.photos/technology/320x240/8" alt="Product" class="w-full h-48 object-cover">260 <div class="absolute top-2 left-2 bg-orange-500 text-white text-xs px-2 py-1 rounded">25% تخفیف</div>261 </div>262 <div class="p-4">263 <h3 class="font-bold mb-2">ساعت هوشمند اپل واچ سری 7</h3>264 <div class="flex justify-between items-center">265 <div>266 <span class="text-gray-500 line-through text-sm">20,000,000 تومان</span>267 <span class="font-bold text-orange-500 block">15,000,000 تومان</span>268 </div>269 <button class="bg-orange-500 text-white p-2 rounded-full hover:bg-orange-600">270 <i data-feather="shopping-cart" class="w-4 h-4"></i>271 </button>272 </div>273 </div>274 </div>275 </div>276 </div>277 </section>278 279 <!-- Footer -->280 <footer class="bg-gray-800 text-white py-12">281 <div class="container mx-auto px-4">282 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">283 <div>284 <h3 class="text-xl font-bold mb-4">ایران لج</h3>285 <p class="text-gray-400 mb-4">بزرگترین مرجع خرید آنلاین با تنوع محصولات بینظیر</p>286 <div class="flex space-x-4 space-x-reverse">287 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-orange-500 transition duration-300">288 <i data-feather="instagram"></i>289 </a>290 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-orange-500 transition duration-300">291 <i data-feather="twitter"></i>292 </a>293 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-orange-500 transition duration-300">294 <i data-feather="facebook"></i>295 </a>296 <a href="#" class="bg-gray-700 p-2 rounded-full hover:bg-orange-500 transition duration-300">297 <i data-feather="linkedin"></i>298 </a>299 </div>300 </div>301 <div>302 <h3 class="text-lg font-bold mb-4">دسترسی سریع</h3>303 <ul class="space-y-2">304 <li><a href="index.html" class="text-gray-400 hover:text-orange-500 transition duration-300">خانه</a></li>305 <li><a href="electronics.html" class="text-orange-500">الکترونیک</a></li>306 <li><a href="cosmetics.html" class="text-gray-400 hover:text-orange-500 transition duration-300">آرایشی بهداشتی</a></li>307 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">وبلاگ</a></li>308 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">تماس با ما</a></li>309 </ul>310 </div>311 <div>312 <h3 class="text-lg font-bold mb-4">خدمات مشتریان</h3>313 <ul class="space-y-2">314 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">پرسشهای متداول</a></li>315 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">رویه بازگرداندن کالا</a></li>316 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">شرایط استفاده</a></li>317 <li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">حریم خصوصی</a></li>318 </ul>319 </div>320 <div>321 <h3 class="text-lg font-bold mb-4">تماس با ما</h3>322 <ul class="space-y-2">323 <li class="flex items-center space-x-2 space-x-reverse">324 <i data-feather="map-pin" class="w-5 h-5"></i>325 <span class="text-gray-400">تهران، خیابان ولیعصر</span>326 </li>327 <li class="flex items-center space-x-2 space-x-reverse">328 <i data-feather="phone" class="w-5 h-5"></i>329 <span class="text-gray-400">021-12345678</span>330 </li>331 <li class="flex items-center space-x-2 space-x-reverse">332 <i data-feather="mail" class="w-5 h-5"></i>333 <span class="text-gray-400">info@iranlog.com</span>334 </li>335 </ul>336 </div>337 </div>338 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">339 <p>© 2023 ایران لج. تمام حقوق محفوظ است.</p>340 </div>341 </div>342 </footer>343 344 <script>345 feather.replace();346 </script>347</body>348</html>