Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>دیجی شاپ - فروشگاه اینترنتی</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=IranSans:wght@300;400;500;700&display=swap'); | |
| body { | |
| font-family: 'IranSans', sans-serif; | |
| } | |
| .search-box { | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
| } | |
| .category-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| .product-card:hover { | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| .discount-badge { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-color: #ef394e; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 0 0 8px 0; | |
| font-size: 12px; | |
| } | |
| .scroll-container { | |
| scrollbar-width: none; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-800 text-white py-2 px-4 text-sm"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="hover:text-red-400"><i class="fas fa-headset ml-1"></i> پشتیبانی</a> | |
| <a href="#" class="hover:text-red-400"><i class="fas fa-map-marker-alt ml-1"></i> فروشگاه ها</a> | |
| <a href="#" class="hover:text-red-400"><i class="fas fa-percent ml-1"></i> تخفیف ها</a> | |
| </div> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="hover:text-red-400"><i class="fas fa-user ml-1"></i> ورود / ثبت نام</a> | |
| <a href="#" class="hover:text-red-400"><i class="fas fa-shopping-cart ml-1"></i> سبد خرید</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="mb-4 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold text-red-600">دیجیشاپ</a> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="w-full md:w-1/2 relative"> | |
| <div class="search-box flex rounded-lg overflow-hidden border border-gray-300"> | |
| <input type="text" placeholder="جستجوی محصولات..." class="w-full px-4 py-2 focus:outline-none"> | |
| <button class="bg-red-600 text-white px-6 py-2 hover:bg-red-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="absolute mt-1 w-full bg-white shadow-lg rounded-lg z-10 hidden"> | |
| <div class="p-2 border-b"> | |
| <a href="#" class="block hover:bg-gray-100 p-2">گوشی موبایل سامسونگ</a> | |
| <a href="#" class="block hover:bg-gray-100 p-2">لپ تاپ ایسوس</a> | |
| <a href="#" class="block hover:bg-gray-100 p-2">هدفون بی سیم</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Actions --> | |
| <div class="hidden md:flex space-x-4 space-x-reverse mt-4 md:mt-0"> | |
| <a href="#" class="flex flex-col items-center text-gray-700 hover:text-red-600"> | |
| <i class="fas fa-user-circle text-2xl"></i> | |
| <span class="text-xs mt-1">حساب کاربری</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-700 hover:text-red-600"> | |
| <i class="fas fa-heart text-2xl"></i> | |
| <span class="text-xs mt-1">علاقهمندیها</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-700 hover:text-red-600 relative"> | |
| <i class="fas fa-shopping-cart text-2xl"></i> | |
| <span class="text-xs mt-1">سبد خرید</span> | |
| <span class="absolute -top-2 -right-2 bg-red-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Categories --> | |
| <div class="bg-white py-3 border-b"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto scroll-container space-x-6 space-x-reverse"> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-mobile-alt text-xl mb-1"></i> | |
| <span class="text-xs">موبایل</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-laptop text-xl mb-1"></i> | |
| <span class="text-xs">لپ تاپ</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-headphones text-xl mb-1"></i> | |
| <span class="text-xs">هدفون</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-tshirt text-xl mb-1"></i> | |
| <span class="text-xs">پوشاک</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">خانه و آشپزخانه</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-gamepad text-xl mb-1"></i> | |
| <span class="text-xs">کنسول بازی</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-book text-xl mb-1"></i> | |
| <span class="text-xs">کتاب</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-baby text-xl mb-1"></i> | |
| <span class="text-xs">کودک</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-utensils text-xl mb-1"></i> | |
| <span class="text-xs">خوراکی</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center px-4 py-2 whitespace-nowrap hover:text-red-600"> | |
| <i class="fas fa-ellipsis-h text-xl mb-1"></i> | |
| <span class="text-xs">بیشتر</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Hero Slider --> | |
| <div class="relative rounded-xl overflow-hidden mb-8"> | |
| <div class="flex overflow-hidden h-64 md:h-96"> | |
| <div class="w-full flex-shrink-0 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white"> | |
| <div class="text-center px-8"> | |
| <h2 class="text-2xl md:text-4xl font-bold mb-4">فروش ویژه تابستانه</h2> | |
| <p class="mb-6">تا 50% تخفیف برای محصولات منتخب</p> | |
| <button class="bg-white text-blue-600 px-6 py-2 rounded-full font-bold hover:bg-gray-100">مشاهده محصولات</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-white"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300"></button> | |
| <button class="w-3 h-3 rounded-full bg-gray-300"></button> | |
| </div> | |
| </div> | |
| <!-- Categories Section --> | |
| <div class="mb-10"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">دستهبندیها</h2> | |
| <a href="#" class="text-blue-600 text-sm flex items-center"> | |
| مشاهده همه | |
| <i class="fas fa-chevron-left mr-1 text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-red-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-mobile-alt text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">موبایل</h3> | |
| <p class="text-gray-500 text-xs mt-1">1254 محصول</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-laptop text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">لپ تاپ</h3> | |
| <p class="text-gray-500 text-xs mt-1">784 محصول</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-headphones text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">هدفون</h3> | |
| <p class="text-gray-500 text-xs mt-1">532 محصول</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-yellow-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-tshirt text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">پوشاک</h3> | |
| <p class="text-gray-500 text-xs mt-1">1567 محصول</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-purple-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-home text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">خانه و آشپزخانه</h3> | |
| <p class="text-gray-500 text-xs mt-1">987 محصول</p> | |
| </a> | |
| <a href="#" class="category-card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md"> | |
| <div class="bg-pink-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-gamepad text-pink-600 text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium">کنسول بازی</h3> | |
| <p class="text-gray-500 text-xs mt-1">321 محصول</p> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Special Offers --> | |
| <div class="mb-10"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">پیشنهادهای ویژه</h2> | |
| <a href="#" class="text-blue-600 text-sm flex items-center"> | |
| مشاهده همه | |
| <i class="fas fa-chevron-left mr-1 text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden relative"> | |
| <div class="discount-badge">20%</div> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/114644633.jpg" alt="گوشی موبایل سامسونگ" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">گوشی موبایل سامسونگ مدل Galaxy A23</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(142)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-xs line-through">12,990,000 تومان</p> | |
| <p class="text-red-600 font-bold">10,290,000 تومان</p> | |
| </div> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden relative"> | |
| <div class="discount-badge">15%</div> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="لپ تاپ ایسوس" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">لپ تاپ ایسوس مدل Vivobook 15 X515JA</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(87)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-xs line-through">24,990,000 تومان</p> | |
| <p class="text-red-600 font-bold">21,290,000 تومان</p> | |
| </div> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden relative"> | |
| <div class="discount-badge">30%</div> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="هدفون بی سیم" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">هدفون بی سیم سامسونگ مدل Galaxy Buds 2</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(215)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-xs line-through">4,990,000 تومان</p> | |
| <p class="text-red-600 font-bold">3,490,000 تومان</p> | |
| </div> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden relative"> | |
| <div class="discount-badge">10%</div> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="کنسول بازی" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">کنسول بازی سونی مدل PlayStation 5</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(63)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-500 text-xs line-through">29,990,000 تومان</p> | |
| <p class="text-red-600 font-bold">26,990,000 تومان</p> | |
| </div> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Products --> | |
| <div class="mb-10"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">پرفروشترینها</h2> | |
| <a href="#" class="text-blue-600 text-sm flex items-center"> | |
| مشاهده همه | |
| <i class="fas fa-chevron-left mr-1 text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="شارژر همراه" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">شارژر همراه شیائومی مدل Redmi 10000mAh</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(342)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-red-600 font-bold">1,290,000 تومان</p> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="ماوس بی سیم" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">ماوس بی سیم لاجیتک مدل M185</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(187)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-red-600 font-bold">890,000 تومان</p> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="هارد اکسترنال" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">هارد اکسترنال سیگیت مدل Expansion 1TB</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(256)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-red-600 font-bold">2,490,000 تومان</p> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-card bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <img src="https://dkstatics-public.digikala.com/digikala-products/117234310.jpg" alt="فلش مموری" class="w-full h-48 object-contain"> | |
| <div class="p-4"> | |
| <h3 class="font-medium text-sm mb-2">فلش مموری ساندیسک مدل Ultra Dual Drive 64GB</h3> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400 text-xs"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs mr-1">(432)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <p class="text-red-600 font-bold">490,000 تومان</p> | |
| <button class="bg-red-100 text-red-600 p-2 rounded-full hover:bg-red-200"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Logos --> | |
| <div class="mb-10"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold">برندهای محبوب</h2> | |
| <a href="#" class="text-blue-600 text-sm flex items-center"> | |
| مشاهده همه | |
| <i class="fas fa-chevron-left mr-1 text-xs"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="grid grid-cols-3 md:grid-cols-6 gap-4"> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://www.samsung.com/etc/designs/smg/global/imgs/logo-square-144.png" alt="Samsung" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Xiaomi_logo_%282021-%29.svg/1200px-Xiaomi_logo_%282021-%29.svg.png" alt="Xiaomi" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" alt="Apple" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Asus_logo_2017.svg/1200px-Asus_logo_2017.svg.png" alt="Asus" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Huawei_logo.svg/1200px-Huawei_logo.svg.png" alt="Huawei" class="h-12 object-contain"> | |
| </div> | |
| <div class="flex items-center justify-center p-2 border rounded-lg hover:shadow-md"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Logitech_Logo_09.svg/1200px-Logitech_Logo_09.svg.png" alt="Logitech" class="h-12 object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Services --> | |
| <div class="mb-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white rounded-lg shadow-sm p-6 flex items-start"> | |
| <div class="bg-blue-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-truck text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">تحویل سریع و رایگان</h3> | |
| <p class="text-gray-600 text-sm">تحویل رایگان برای خریدهای بالای 200 هزار تومان</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 flex items-start"> | |
| <div class="bg-green-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">گارانتی بازگشت</h3> | |
| <p class="text-gray-600 text-sm">7 روز ضمانت بازگشت وجه</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6 flex items-start"> | |
| <div class="bg-purple-50 p-3 rounded-full mr-4"> | |
| <i class="fas fa-headset text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold mb-2">پشتیبانی 24 ساعته</h3> | |
| <p class="text-gray-600 text-sm">پشتیبانی آنلاین در تمام ساعات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-10 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"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">دیجیشاپ</h3> | |
| <p class="text-gray-400 text-sm mb-4">فروشگاه اینترنتی دیجیشاپ با بیش از 10 سال سابقه در زمینه فروش آنلاین محصولات دیجیتال و غیر دیجیتال</p> | |
| <div class="flex space-x-4 space-x-reverse"> | |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">خدمات مشتریان</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">پرسشهای متداول</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">رویه بازگرداندن کالا</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">شرایط استفاده</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">حریم خصوصی</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">راهنمای خرید</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">نحوه ثبت سفارش</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">رویه ارسال سفارش</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">شیوههای پرداخت</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">پیگیری سفارش</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">با ما در تماس باشید</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i> | |
| <p class="text-gray-400 text-sm">تهران، خیابان آزادی، جنب متروی دانشگاه شریف</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-400"></i> | |
| <p class="text-gray-400 text-sm">021-12345678</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <p class="text-gray-400 text-sm">info@digishop.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <p class="text-gray-400 text-sm text-center">© 2023 دیجیشاپ - تمام حقوق محفوظ است</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg flex justify-around py-3"> | |
| <a href="#" class="flex flex-col items-center text-gray-700"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">خانه</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-700"> | |
| <i class="fas fa-search text-xl"></i> | |
| <span class="text-xs mt-1">جستجو</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-700"> | |
| <i class="fas fa-list text-xl"></i> | |
| <span class="text-xs mt-1">دستهبندی</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-700 relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="text-xs mt-1">سبد خرید</span> | |
| <span class="absolute -top-1 -right-2 bg-red-600 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span> | |
| </a> | |
| </div> | |
| <script> | |
| // Simple JavaScript for interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Search box focus | |
| const searchInput = document.querySelector('.search-box input'); | |
| const searchDropdown = document.querySelector('.search-box + div'); | |
| searchInput.addEventListener('focus', function() { | |
| searchDropdown.classList.remove('hidden'); | |
| }); | |
| searchInput.addEventListener('blur', function() { | |
| setTimeout(() => { | |
| searchDropdown.classList.add('hidden'); | |
| }, 200); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Product card hover effect | |
| const productCards = document.querySelectorAll('.product-card'); | |
| productCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-5px)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| }); | |
| </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=Abolfazllllllllllllll/pluto" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |