|
|
<!DOCTYPE html> |
|
|
<html lang="fa" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ShopVista - فروشگاه آنلاین حرفهای</title> |
|
|
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>"> |
|
|
<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="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#eef2ff', |
|
|
100: '#e0e7ff', |
|
|
200: '#c7d2fe', |
|
|
300: '#a5b4fc', |
|
|
400: '#818cf8', |
|
|
500: '#6366f1', |
|
|
600: '#4f46e5', |
|
|
700: '#4338ca', |
|
|
800: '#3730a3', |
|
|
900: '#312e81', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#faf5ff', |
|
|
100: '#f3e8ff', |
|
|
200: '#e9d5ff', |
|
|
300: '#d8b4fe', |
|
|
400: '#c084fc', |
|
|
500: '#a855f7', |
|
|
600: '#9333ea', |
|
|
700: '#7e22ce', |
|
|
800: '#6b21a8', |
|
|
900: '#581c87', |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
'sans': ['Inter', 'system-ui', 'sans-serif'], |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> |
|
|
|
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="components/product-card.js"></script> |
|
|
<script src="components/cart-sidebar.js"></script> |
|
|
|
|
|
|
|
|
<shop-navbar></shop-navbar> |
|
|
|
|
|
|
|
|
<main class="pt-20"> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden bg-gradient-to-br from-primary-600 to-secondary-600"> |
|
|
<div class="container mx-auto px-4 py-16"> |
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div class="text-white space-y-6 animate-fade-in"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold leading-tight"> |
|
|
تخفیفات ویژه <span class="text-yellow-300">تابستانی</span> |
|
|
</h1> |
|
|
<p class="text-xl opacity-90">تا 70% تخفیف محصولات منتخب - فرصت محدود!</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#deals" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-semibold hover:bg-yellow-300 transform hover:scale-105 transition-all duration-300 shadow-lg"> |
|
|
مشاهده پیشنهادات |
|
|
</a> |
|
|
<a href="#products" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-primary-600 transition-all duration-300"> |
|
|
فروشگاه |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative animate-float"> |
|
|
<div class="absolute inset-0 bg-primary-400 rounded-full blur-3xl opacity-30"></div> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="محصولات فناوری" class="relative z-10 w-full rounded-2xl shadow-2xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">دستهبندیهای پرطرفدار</h2> |
|
|
<p class="text-gray-600 dark:text-gray-300">هر آنچه نیاز دارید در دستهبندیهای ما پیدا میکنید</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">موبایل</h3> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">لپتاپ</h3> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">لوازم جانبی</h3> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">صوتی تصویری</h3> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 00-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">گیمینگ</h3> |
|
|
</div> |
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all cursor-pointer group"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-center font-semibold dark:text-white">ساعت هوشمند</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100 dark:bg-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">محصولات ویژه</h2> |
|
|
<p class="text-gray-600 dark:text-gray-300">منتخب بهترینها با ضمانت کیفیت</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
<product-card |
|
|
data-id="1" |
|
|
data-title="گوشی آیفون 13 پرو مکس" |
|
|
data-price="45,000,000 تومان" |
|
|
data-discount="15" |
|
|
data-image="http://static.photos/technology/320x240/101"> |
|
|
</product-card> |
|
|
<product-card |
|
|
data-id="2" |
|
|
data-title="لپتاپ مکبوک پرو M2" |
|
|
data-price="85,000,000 تومان" |
|
|
data-discount="10" |
|
|
data-image="http://static.photos/technology/320x240/102"> |
|
|
</product-card> |
|
|
<product-card |
|
|
data-id="3" |
|
|
data-title="سامسونگ گلکسی S23 Ultra" |
|
|
data-price="35,000,000 تومان" |
|
|
data-discount="20" |
|
|
data-image="http://static.photos/technology/320x240/103"> |
|
|
</product-card> |
|
|
<product-card |
|
|
data-id="4" |
|
|
data-title="هدیر ایرپاد پرو 2" |
|
|
data-price="12,000,000 تومان" |
|
|
data-discount="5" |
|
|
data-image="http://static.photos/technology/320x240/104"> |
|
|
</product-card> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="deals" class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl p-8 md:p-12 text-white"> |
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<h2 class="text-4xl font-bold mb-4">فروش ویژه هفته</h2> |
|
|
<p class="text-xl mb-6 opacity-90">تا 70% تخفیف بر روی محصولات منتخب</p> |
|
|
<div class="flex items-center gap-4 mb-8"> |
|
|
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center"> |
|
|
<div class="text-3xl font-bold">02</div> |
|
|
<div class="text-sm">روز</div> |
|
|
</div> |
|
|
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center"> |
|
|
<div class="text-3xl font-bold">14</div> |
|
|
<div class="text-sm">ساعت</div> |
|
|
</div> |
|
|
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center"> |
|
|
<div class="text-3xl font-bold">37</div> |
|
|
<div class="text-sm">دقیقه</div> |
|
|
</div> |
|
|
<div class="bg-white/20 backdrop-blur rounded-lg p-3 text-center"> |
|
|
<div class="text-3xl font-bold">52</div> |
|
|
<div class="text-sm">ثانیه</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="inline-block bg-white text-orange-500 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors"> |
|
|
مشاهده پیشنهادات |
|
|
</a> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<img src="http://static.photos/office/640x360/201" alt="فروش ویژه" class="rounded-xl shadow-2xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white dark:bg-gray-900"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2 dark:text-white">ارسال سریع</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300">ارسال رایگان برای سفارشات بالای ۵۰۰ هزار تومان</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-4 flex items-center justify-center"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2 dark:text-white">ضمانت اصالت</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300">همه محصولات اصل و با گارانتی معتبر</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2 dark:text-white">پشتیبانی ۲۴/۷</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300">همیشه آماده پاسخگویی به سوالات شما</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="w-16 h-16 bg-gradient-to-br from-red-400 to-red-600 rounded-full mx-auto mb-4 flex items-center justify-center"> |
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="white"> |
|
|
<path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"/> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2 dark:text-white">بازگشت آسان</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300">۷ روز ضمانت بازگشت کالا</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-primary-600 to-secondary-600"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-2xl mx-auto text-center text-white"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">عضویت در خبرنامه</h2> |
|
|
<p class="text-xl mb-8 opacity-90">از تخفیفها و محصولات جدید باخبر شوید</p> |
|
|
<form class="flex flex-col md:flex-row gap-4 max-w-md mx-auto"> |
|
|
<input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none"> |
|
|
<button type="submit" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-semibold hover:bg-yellow-300 transition-colors"> |
|
|
عضویت |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<shop-footer></shop-footer> |
|
|
|
|
|
|
|
|
<cart-sidebar id="cartSidebar"></cart-sidebar> |
|
|
|
|
|
<script> |
|
|
|
|
|
const cartBtn = document.querySelector('#cartBtn'); |
|
|
const cartSidebar = document.getElementById('cartSidebar'); |
|
|
|
|
|
cartBtn.addEventListener('click', () => { |
|
|
cartSidebar.open(); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCartCount(count) { |
|
|
document.getElementById('cartCount').textContent = count; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.add-to-cart-btn').forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
const count = parseInt(document.getElementById('cartCount').textContent) + 1; |
|
|
updateCartCount(count); |
|
|
cartSidebar.open(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
