|
|
<!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://unpkg.com/feather-icons"></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"> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
|
|
|
<shop-navbar></shop-navbar> |
|
|
|
|
|
<main class="pt-20"> |
|
|
|
|
|
<section class="bg-gradient-to-br from-purple-600 to-pink-600 text-white py-20"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">وبلاگ شاپ‌ویستا</h1> |
|
|
<p class="text-xl opacity-90">آخرین اخبار، مقالات و راهنماهای تکنولوژی</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="http://static.photos/technology/640x360/301" alt="featured post" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
مقاله ویژه |
|
|
</span> |
|
|
<h2 class="text-3xl font-bold mb-4 dark:text-white">راهنمای کامل خرید گوشی در سال 2024</h2> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-6">با بررسی کامل مشخصات، قیمت‌ها و برترین مدل‌های بازار، بهترین گوشی را برای خود انتخاب کنید...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<img src="http://static.photos/people/100x100/401" alt="author" class="w-12 h-12 rounded-full"> |
|
|
<div> |
|
|
<div class="font-semibold dark:text-white">علی رضایی</div> |
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">۱۵ اسفند ۱۴۰۲</div> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="text-purple-600 hover:text-purple-700 font-semibold">ادامه مطلب →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-wrap gap-3 justify-center"> |
|
|
<button class="px-6 py-2 bg-purple-600 text-white rounded-full">همه</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">موبایل</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">لپ‌تاپ</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">گیمینگ</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">لوازم جانبی</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">نقد و بررسی</button> |
|
|
<button class="px-6 py-2 bg-white dark:bg-gray-800 dark:text-white rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">مقایسه</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/302" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
لپ‌تاپ |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">بررسی لپ‌تاپ‌های گیمینگ 2024</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">بهترین لپ‌تاپ‌های گیمینگ با قیمت مناسب و عملکرد عالی را در این مقاله بررسی می‌کنیم...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/402" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">سارا محمدی</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۱۰ اسفند</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/303" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
لوازم جانبی |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">بهترین هدست‌های گیمینگ 2024</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">هدست‌هایی با بهترین کیفیت صدا و میکروفون برای تجربه بازی عالی را معرفی می‌کنیم...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/403" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">محمد حسینی</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۸ اسفند</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/304" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
مقایسه |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">iPhone 15 مقابل Galaxy S24</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">مقایسه کامل دو پرچمدار سال 2024 در طراحی، دوربین، عملکرد و قیمت...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/404" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">مریم اکبری</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۵ اسفند</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/305" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
نقد و بررسی |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">بررسی ساعت هوشمند Apple Watch Series 9</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">جدیدترین ساعت هوشمند اپل با ویژگی‌های جدید و پیشرفت‌های چشمگیر...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/405" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">احمد علیزاده</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۳ اسفند</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/306" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
راهنمای خرید |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">راهنمای خرید بهترین باتری پاوربانک</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">نکات مهم برای انتخاب پاوربانک مناسب با توجه به نیاز شما و بودجه...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/406" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">زهرا کیمیایی</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۱ اسفند</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
|
|
|
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow"> |
|
|
<img src="http://static.photos/technology/320x240/307" alt="post" class="w-full h-48 object-cover"> |
|
|
<div class="p-6"> |
|
|
<span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-semibold mb-4"> |
|
|
تکنولوژی |
|
|
</span> |
|
|
<h3 class="text-xl font-bold mb-3 dark:text-white">آینده هوش مصنوعی در موبایل</h3> |
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">چگونگی تأثیر هوش مصنوعی بر تجربه کاربری موبایل‌های آینده...</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<img src="http://static.photos/people/50x50/407" alt="author" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">رضا ولی‌زاده</span> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">۲۸ بهمن</span> |
|
|
</div> |
|
|
</div> |
|
|
</article> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="bg-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition-colors"> |
|
|
نمایش مطالب بیشتر |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-purple-600 to-pink-600"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold text-white mb-4">مشترک خبرنامه ما شوید</h2> |
|
|
<p class="text-white/90 mb-8">آخرین مقالات و اخبار تکنولوژی را مستقیماً در ایمیل خود دریافت کنید</p> |
|
|
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"> |
|
|
<input type="email" placeholder="ایمیل خود را وارد کنید" class="flex-1 px-6 py-3 rounded-full text-gray-800 focus:outline-none"> |
|
|
<button type="submit" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors"> |
|
|
عضویت |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<shop-footer></shop-footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const categoryButtons = document.querySelectorAll('section button'); |
|
|
categoryButtons.forEach(btn => { |
|
|
btn.addEventListener('click', (e) => { |
|
|
categoryButtons.forEach(b => b.classList.remove('bg-purple-600', 'text-white')); |
|
|
e.target.classList.add('bg-purple-600', 'text-white'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
