Spaces:
Running
Running
| <html lang="fa-IR" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>قالب ویو - View Template</title> | |
| <!-- Fonts: Estedad (Persian) and Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- FontAwesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Tailwind Config for Custom Colors --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'Tahoma', 'sans-serif'], | |
| }, | |
| colors: { | |
| view: { | |
| primary: '#5B51D8', | |
| 'primary-light': '#E9E9FD', | |
| secondary: '#E1306C', | |
| accent: '#221F47', | |
| bg: '#F8F9FD', | |
| card: '#FFFFFF' | |
| } | |
| }, | |
| boxShadow: { | |
| 'soft': '0 10px 40px -10px rgba(91, 81, 216, 0.15)', | |
| 'glow': '0 0 20px rgba(91, 81, 216, 0.3)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #5B51D8; | |
| border-radius: 4px; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .animate-float { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes fade-in-up { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in-up { | |
| animation: fade-in-up 0.6s ease-out forwards; | |
| } | |
| /* Gradient Text */ | |
| .text-gradient { | |
| background: linear-gradient(135deg, #5B51D8 0%, #E1306C 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| /* Custom Range Slider for Stories */ | |
| .story-progress { | |
| transition: width 0.1s linear; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-view-bg text-view-accent font-sans overflow-x-hidden"> | |
| <!-- Header --> | |
| <header class="fixed w-full top-0 z-50 glass shadow-sm transition-all duration-300" id="main-header"> | |
| <div class="container mx-auto px-4 h-20 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <a href="#" class="text-2xl font-bold text-view-primary flex items-center gap-2"> | |
| <div class="w-10 h-10 bg-view-primary rounded-xl flex items-center justify-center text-white"> | |
| <i class="fa-solid fa-play"></i> | |
| </div> | |
| <span>VIEW</span> | |
| </a> | |
| <!-- Desktop Nav --> | |
| <nav class="hidden lg:flex items-center gap-8 text-sm font-medium text-gray-600"> | |
| <a href="#" class="text-view-primary font-bold">صفحه اصلی</a> | |
| <a href="#" class="hover:text-view-primary transition">کلیپها</a> | |
| <a href="#" class="hover:text-view-primary transition">پستها</a> | |
| <a href="#" class="hover:text-view-primary transition">ریلزها</a> | |
| <a href="#" class="hover:text-view-primary transition">محصولات</a> | |
| <a href="#" class="hover:text-view-primary transition">مقالات</a> | |
| </nav> | |
| <!-- Actions --> | |
| <div class="flex items-center gap-4"> | |
| <button class="w-10 h-10 rounded-full bg-gray-100 hover:bg-view-primary hover:text-white transition flex items-center justify-center"> | |
| <i class="fa-solid fa-magnifying-glass"></i> | |
| </button> | |
| <button class="w-10 h-10 rounded-full bg-gray-100 hover:bg-view-primary hover:text-white transition flex items-center justify-center relative"> | |
| <i class="fa-solid fa-cart-shopping"></i> | |
| <span class="absolute -top-1 -right-1 w-4 h-4 bg-view-secondary text-white text-[10px] rounded-full flex items-center justify-center">2</span> | |
| </button> | |
| <button class="hidden md:flex items-center gap-2 bg-view-primary text-white px-5 py-2 rounded-full hover:bg-opacity-90 transition shadow-lg shadow-view-primary/30"> | |
| <i class="fa-regular fa-user"></i> | |
| <span>ورود</span> | |
| </button> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="lg:hidden text-2xl text-view-accent" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"> | |
| <i class="fa-solid fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden lg:hidden bg-white border-t p-4 absolute w-full shadow-xl"> | |
| <div class="flex flex-col gap-4 text-center"> | |
| <a href="#" class="text-view-primary font-bold py-2 border-b">صفحه اصلی</a> | |
| <a href="#" class="py-2 border-b">کلیپها</a> | |
| <a href="#" class="py-2 border-b">پستها</a> | |
| <a href="#" class="py-2 border-b">محصولات</a> | |
| <a href="#" class="py-2">مقالات</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-12 lg:pt-40 lg:pb-20 relative overflow-hidden"> | |
| <!-- Background Blobs --> | |
| <div class="absolute top-20 left-10 w-72 h-72 bg-view-primary/10 rounded-full blur-3xl -z-10"></div> | |
| <div class="absolute bottom-10 right-10 w-96 h-96 bg-view-secondary/10 rounded-full blur-3xl -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <!-- Text Content --> | |
| <div class="lg:w-1/2 text-center lg:text-right space-y-6 fade-in-up"> | |
| <div class="inline-flex items-center gap-2 bg-white px-4 py-1.5 rounded-full shadow-sm text-sm text-view-secondary font-medium border border-view-secondary/20"> | |
| <span class="w-2 h-2 rounded-full bg-view-secondary animate-pulse"></span> | |
| Science & Tech | |
| </div> | |
| <h1 class="text-4xl lg:text-6xl font-bold leading-tight text-view-accent"> | |
| اهــــورا نیــــازی | |
| </h1> | |
| <p class="text-lg text-gray-500 max-w-lg mx-auto lg:mx-0"> | |
| فعال حوزه فناوری (Technology). روشن باشید و آگاه. محتوای آموزشی و تکنولوژی برای نسل امروز. | |
| </p> | |
| <!-- Stats --> | |
| <div class="flex justify-center lg:justify-start gap-8 pt-4"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-view-primary counter" data-target="1528">0</div> | |
| <div class="text-xs text-gray-400">پست</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-view-primary counter" data-target="1.8" data-decimals="1">0</div> | |
| <div class="text-xs text-gray-400">میلیون دنبالکننده</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold text-view-primary counter" data-target="467">0</div> | |
| <div class="text-xs text-gray-400">دنبالشونده</div> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 justify-center lg:justify-start pt-4"> | |
| <button class="bg-view-primary text-white px-8 py-3 rounded-full shadow-glow hover:scale-105 transition flex items-center gap-2"> | |
| بزن بریم <i class="fa-solid fa-arrow-left"></i> | |
| </button> | |
| <button class="bg-white text-view-accent border border-gray-200 px-8 py-3 rounded-full hover:bg-gray-50 transition flex items-center gap-2"> | |
| <i class="fa-brands fa-instagram text-view-secondary"></i> اینستاگرام | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hero Image --> | |
| <div class="lg:w-1/2 relative fade-in-up" style="animation-delay: 0.2s;"> | |
| <div class="relative z-10 animate-float"> | |
| <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Profile" class="w-full max-w-md mx-auto rounded-3xl shadow-2xl mask-image-gradient"> | |
| <!-- Decorative Elements --> | |
| <div class="absolute -top-6 -right-6 bg-white p-4 rounded-2xl shadow-lg flex items-center gap-3 animate-bounce" style="animation-duration: 3s;"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600"> | |
| <i class="fa-solid fa-check"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs text-gray-400">وضعیت</div> | |
| <div class="font-bold text-sm">آنلاین</div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-lg flex items-center gap-3"> | |
| <div class="w-10 h-10 bg-view-primary/10 rounded-full flex items-center justify-center text-view-primary"> | |
| <i class="fa-solid fa-bolt"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs text-gray-400">امتیاز</div> | |
| <div class="font-bold text-sm">Top Creator</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Highlights / Stories --> | |
| <section class="py-10 border-b border-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center gap-4 mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-view-primary/10 flex items-center justify-center text-view-primary"> | |
| <i class="fa-solid fa-star"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">هایلایتها</h2> | |
| </div> | |
| <div class="flex gap-6 overflow-x-auto pb-4 scrollbar-hide" id="highlights-container"> | |
| <!-- Story Items (JS will populate, but putting static for immediate view) --> | |
| <button onclick="openStory(0)" class="flex flex-col items-center gap-2 min-w-[80px] group"> | |
| <div class="w-20 h-20 rounded-full p-1 border-2 border-view-secondary group-hover:border-view-primary transition relative overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?w=150&h=150&fit=crop" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="text-xs font-medium text-gray-600">سفر</span> | |
| </button> | |
| <button onclick="openStory(1)" class="flex flex-col items-center gap-2 min-w-[80px] group"> | |
| <div class="w-20 h-20 rounded-full p-1 border-2 border-view-secondary group-hover:border-view-primary transition relative overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=150&h=150&fit=crop" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="text-xs font-medium text-gray-600">تکنولوژی</span> | |
| </button> | |
| <button onclick="openStory(2)" class="flex flex-col items-center gap-2 min-w-[80px] group"> | |
| <div class="w-20 h-20 rounded-full p-1 border-2 border-view-secondary group-hover:border-view-primary transition relative overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=150&h=150&fit=crop" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="text-xs font-medium text-gray-600">درباره من</span> | |
| </button> | |
| <button onclick="openStory(3)" class="flex flex-col items-center gap-2 min-w-[80px] group"> | |
| <div class="w-20 h-20 rounded-full p-1 border-2 border-view-secondary group-hover:border-view-primary transition relative overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=150&h=150&fit=crop" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <span class="text-xs font-medium text-gray-600">کسب و کار</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-end mb-10"> | |
| <div> | |
| <span class="text-view-secondary font-bold text-sm tracking-wider">CATEGORY</span> | |
| <h2 class="text-3xl font-bold mt-2">دستهبندی</h2> | |
| </div> | |
| <a href="#" class="text-view-primary flex items-center gap-2 hover:gap-3 transition-all"> | |
| همه دستهبندیها <i class="fa-solid fa-arrow-left"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Category Card 1 --> | |
| <a href="#" class="group relative h-64 rounded-3xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=600&h=400&fit=crop" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6"> | |
| <span class="text-white/80 text-sm mb-1">74 پست</span> | |
| <h3 class="text-white text-xl font-bold flex items-center gap-2"> | |
| <span class="text-view-secondary">#</span> سفر | |
| </h3> | |
| </div> | |
| </a> | |
| <!-- Category Card 2 --> | |
| <a href="#" class="group relative h-64 rounded-3xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=400&fit=crop" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6"> | |
| <span class="text-white/80 text-sm mb-1">120 پست</span> | |
| <h3 class="text-white text-xl font-bold flex items-center gap-2"> | |
| <span class="text-view-secondary">#</span> فناوری | |
| </h3> | |
| </div> | |
| </a> | |
| <!-- Category Card 3 --> | |
| <a href="#" class="group relative h-64 rounded-3xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=600&h=400&fit=crop" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6"> | |
| <span class="text-white/80 text-sm mb-1">45 پست</span> | |
| <h3 class="text-white text-xl font-bold flex items-center gap-2"> | |
| <span class="text-view-secondary">#</span> آموزش | |
| </h3> | |
| </div> | |
| </a> | |
| <!-- Category Card 4 --> | |
| <a href="#" class="group relative h-64 rounded-3xl overflow-hidden shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600&h=400&fit=crop" class="w-full h-full object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6"> | |
| <span class="text-white/80 text-sm mb-1">32 پست</span> | |
| <h3 class="text-white text-xl font-bold flex items-center gap-2"> | |
| <span class="text-view-secondary">#</span> محصولات | |
| </h3> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reels Section --> | |
| <section class="py-16 bg-view-primary rounded-t-[3rem] text-white relative overflow-hidden"> | |
| <!-- Background decoration --> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none"> | |
| <div class="absolute top-10 left-10 w-40 h-40 bg-white rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-10 right-10 w-60 h-60 bg-view-secondary rounded-full blur-3xl"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-10"> | |
| <div class="text-center md:text-right mb-6 md:mb-0"> | |
| <span class="text-white/60 text-sm font-bold">Newest Reel's</span> | |
| <h2 class="text-3xl font-bold mt-1">جدیدترین ریلزها</h2> | |
| <p class="text-white/70 text-sm mt-2">جدیدترین ریلزهای عصر تکنولوژی و فناوری</p> | |
| </div> | |
| <a href="#" class="bg-white/10 backdrop-blur-md border border-white/20 px-6 py-2 rounded-full hover:bg-white hover:text-view-primary transition"> | |
| همه ریلزها | |
| </a> | |
| </div> | |
| <!-- Reels Slider --> | |
| <div class="relative group"> | |
| <div class="flex gap-6 overflow-x-auto pb-8 snap-x" id="reels-slider"> | |
| <!-- Reel Card 1 --> | |
| <div class="min-w-[280px] md:min-w-[320px] snap-center bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/10 hover:border-white/30 transition cursor-pointer"> | |
| <div class="relative h-48"> | |
| <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=400&h=300&fit=crop" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-3 right-3 bg-black/60 px-2 py-1 rounded text-xs flex items-center gap-1"> | |
| <i class="fa-regular fa-clock"></i> 01:45 | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition bg-black/30"> | |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-view-primary pl-1"> | |
| <i class="fa-solid fa-play"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">مهمترین نکتههای تیم ورک</h3> | |
| <p class="text-white/60 text-sm">چطور به بهترین روش با تیممون...</p> | |
| </div> | |
| </div> | |
| <!-- Reel Card 2 --> | |
| <div class="min-w-[280px] md:min-w-[320px] snap-center bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/10 hover:border-white/30 transition cursor-pointer"> | |
| <div class="relative h-48"> | |
| <img src="https://images.unsplash.com/photo-1531297461136-82lw9z2919a5?w=400&h=300&fit=crop" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-3 right-3 bg-black/60 px-2 py-1 rounded text-xs flex items-center gap-1"> | |
| <i class="fa-regular fa-clock"></i> 00:52 | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition bg-black/30"> | |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-view-primary pl-1"> | |
| <i class="fa-solid fa-play"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">معرفی گوشی جدید سامسونگ</h3> | |
| <p class="text-white/60 text-sm">بررسی کامل Galaxy S25...</p> | |
| </div> | |
| </div> | |
| <!-- Reel Card 3 --> | |
| <div class="min-w-[280px] md:min-w-[320px] snap-center bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden border border-white/10 hover:border-white/30 transition cursor-pointer"> | |
| <div class="relative h-48"> | |
| <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=400&h=300&fit=crop" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-3 right-3 bg-black/60 px-2 py-1 rounded text-xs flex items-center gap-1"> | |
| <i class="fa-regular fa-clock"></i> 02:10 | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition bg-black/30"> | |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center text-view-primary pl-1"> | |
| <i class="fa-solid fa-play"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">تکنولوژیهای آینده</h3> | |
| <p class="text-white/60 text-sm">هوش مصنوعی در سال 2026...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-10"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 rounded-full bg-view-primary/10 flex items-center justify-center text-view-primary"> | |
| <i class="fa-solid fa-bag-shopping"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold">محصولات</h2> | |
| </div> | |
| <a href="#" class="text-gray-500 hover:text-view-primary transition">مشاهده همه</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-2xl p-4 shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-48 bg-gray-50 rounded-xl mb-4 flex items-center justify-center overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=300&fit=crop" class="h-32 object-contain group-hover:scale-110 transition duration-300"> | |
| <button class="absolute top-3 left-3 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-gray-400 hover:text-view-secondary transition"> | |
| <i class="fa-regular fa-heart"></i> | |
| </button> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">هدفون بیسیم بیتس</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-view-primary font-bold">۱۹,۴۰۰,۰۰۰ تومان</span> | |
| <button class="w-10 h-10 rounded-full bg-view-primary/10 text-view-primary flex items-center justify-center hover:bg-view-primary hover:text-white transition"> | |
| <i class="fa-solid fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-2xl p-4 shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-48 bg-gray-50 rounded-xl mb-4 flex items-center justify-center overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1593642632823-8f78536788c6?w=300&h=300&fit=crop" class="h-32 object-contain group-hover:scale-110 transition duration-300"> | |
| <button class="absolute top-3 left-3 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-gray-400 hover:text-view-secondary transition"> | |
| <i class="fa-regular fa-heart"></i> | |
| </button> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">لپ تاپ Victus 15</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-view-primary font-bold">۱۰۱,۴۵۰,۰۰۰ تومان</span> | |
| <button class="w-10 h-10 rounded-full bg-view-primary/10 text-view-primary flex items-center justify-center hover:bg-view-primary hover:text-white transition"> | |
| <i class="fa-solid fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-2xl p-4 shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-48 bg-gray-50 rounded-xl mb-4 flex items-center justify-center overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300&h=300&fit=crop" class="h-32 object-contain group-hover:scale-110 transition duration-300"> | |
| <button class="absolute top-3 left-3 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-gray-400 hover:text-view-secondary transition"> | |
| <i class="fa-regular fa-heart"></i> | |
| </button> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">ساعت هوشمند اپل</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-view-primary font-bold">۲۵,۰۰۰,۰۰۰ تومان</span> | |
| <button class="w-10 h-10 rounded-full bg-view-primary/10 text-view-primary flex items-center justify-center hover:bg-view-primary hover:text-white transition"> | |
| <i class="fa-solid fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-2xl p-4 shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-48 bg-gray-50 rounded-xl mb-4 flex items-center justify-center overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=300&h=300&fit=crop" class="h-32 object-contain group-hover:scale-110 transition duration-300"> | |
| <button class="absolute top-3 left-3 w-8 h-8 bg-white rounded-full shadow flex items-center justify-center text-gray-400 hover:text-view-secondary transition"> | |
| <i class="fa-regular fa-heart"></i> | |
| </button> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">دوربین عکاسی Canon</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-view-primary font-bold">۴۵,۰۰۰,۰۰۰ تومان</span> | |
| <button class="w-10 h-10 rounded-full bg-view-primary/10 text-view-primary flex items-center justify-center hover:bg-view-primary hover:text-white transition"> | |
| <i class="fa-solid fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <span class="text-view-secondary font-bold text-sm">BLOG'S</span> | |
| <h2 class="text-3xl font-bold mt-2">مقالات</h2> | |
| <p class="text-gray-500 mt-2 max-w-2xl mx-auto">همراه شما هستیم با جدیدترین مقالات و مطالب جذاب در حوزههای علمی، خبری و آموزشی.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-56 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?w=600&h=400&fit=crop" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-view-primary"> | |
| آموزشی | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-4 text-xs text-gray-400 mb-3"> | |
| <span><i class="fa-regular fa-calendar ml-1"></i> ۲۲ مهر ۱۴۰۴</span> | |
| <span><i class="fa-regular fa-eye ml-1"></i> ۱۲۳ بازدید</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-view-primary transition">شروع سفرهای پاییزی از هفته آینده</h3> | |
| <p class="text-gray-500 text-sm mb-4 line-clamp-2">با تکامل دنیای دیجیتال امروز، ساخت وبسایتهای واکنشگرا از اهمیت بالایی برخوردار است...</p> | |
| <a href="#" class="inline-flex items-center text-view-primary font-bold text-sm hover:gap-2 transition-all"> | |
| ادامه مطلب <i class="fa-solid fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </article> | |
| <!-- Blog Post 2 --> | |
| <article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-56 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=600&h=400&fit=crop" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-view-secondary"> | |
| خبری | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-4 text-xs text-gray-400 mb-3"> | |
| <span><i class="fa-regular fa-calendar ml-1"></i> ۲۰ مهر ۱۴۰۴</span> | |
| <span><i class="fa-regular fa-eye ml-1"></i> ۸۹ بازدید</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-view-primary transition">آخرین بازمانده از یک نسل تکنولوژی</h3> | |
| <p class="text-gray-500 text-sm mb-4 line-clamp-2">بررسی تاریخچه گوشیهای موبایل و نحوه تکامل آنها در طول زمان...</p> | |
| <a href="#" class="inline-flex items-center text-view-primary font-bold text-sm hover:gap-2 transition-all"> | |
| ادامه مطلب <i class="fa-solid fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </article> | |
| <!-- Blog Post 3 --> | |
| <article class="bg-white rounded-2xl overflow-hidden shadow-soft hover:shadow-xl transition group"> | |
| <div class="relative h-56 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&h=400&fit=crop" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"> | |
| <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-view-primary"> | |
| تکنولوژی | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-4 text-xs text-gray-400 mb-3"> | |
| <span><i class="fa-regular fa-calendar ml-1"></i> ۱۸ مهر ۱۴۰۴</span> | |
| <span><i class="fa-regular fa-eye ml-1"></i> ۲۴۵ بازدید</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 group-hover:text-view-primary transition">هدفون گیمینگ JBL؛ بررسی تخصصی</h3> | |
| <p class="text-gray-500 text-sm mb-4 line-clamp-2">در این مقاله به بررسی دقیق کیفیت صدا و ergonomic بودن این هدفون میپردازیم...</p> | |
| <a href="#" class="inline-flex items-center text-view-primary font-bold text-sm hover:gap-2 transition-all"> | |
| ادامه مطلب <i class="fa-solid fa-arrow-left mr-2"></i> | |
| </a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing / Ads Plans --> | |
| <section class="py-20 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-1/2 h-full bg-view-primary/5 skew-x-12 translate-x-20 -z-10"></div> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="text-view-secondary font-bold text-sm">ADS PLAN</span> | |
| <h2 class="text-3xl font-bold mt-2">تعرفه تبلیغات</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Plan 1 --> | |
| <div class="bg-white rounded-3xl p-8 shadow-soft border border-gray-100 hover:border-view-primary/30 transition relative"> | |
| <h3 class="text-xl font-bold mb-4">پلن اقتصادی</h3> | |
| <div class="text-4xl font-bold text-view-primary mb-6">۵ <span class="text-base text-gray-400 font-normal">میلیون تومان</span></div> | |
| <ul class="space-y-4 mb-8 text-gray-600"> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> ۲ استوری</li> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> ۱ ریلز برای ۴۸ ساعت</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border-2 border-view-primary text-view-primary font-bold hover:bg-view-primary hover:text-white transition">خرید</button> | |
| </div> | |
| <!-- Plan 2 (Featured) --> | |
| <div class="bg-view-primary rounded-3xl p-8 shadow-glow text-white transform md:-translate-y-4 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-400 to-view-secondary"></div> | |
| <div class="absolute -top-6 -right-6 w-24 h-24 bg-white/10 rounded-full blur-xl"></div> | |
| <div class="inline-block bg-view-secondary text-white text-xs px-3 py-1 rounded-full mb-4">پیشنهادی</div> | |
| <h3 class="text-xl font-bold mb-4">پلن حرفهای</h3> | |
| <div class="text-4xl font-bold mb-6">۱۰ <span class="text-base text-white/60 font-normal">میلیون تومان</span></div> | |
| <ul class="space-y-4 mb-8 text-white/90"> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-white"></i> ۴ استوری</li> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-white"></i> ۱ ریلز برای یک هفته</li> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-white"></i> ۱ ریلز برای ۴۸ ساعت</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full bg-white text-view-primary font-bold hover:bg-gray-100 transition">خرید</button> | |
| </div> | |
| <!-- Plan 3 --> | |
| <div class="bg-white rounded-3xl p-8 shadow-soft border border-gray-100 hover:border-view-primary/30 transition"> | |
| <h3 class="text-xl font-bold mb-4">پلن پیشرفته</h3> | |
| <div class="text-4xl font-bold text-view-primary mb-6">۱۵ <span class="text-base text-gray-400 font-normal">میلیون تومان</span></div> | |
| <ul class="space-y-4 mb-8 text-gray-600"> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> ۱ استوری روزانه (۱ هفته)</li> | |
| <li class="flex items-center gap-2"><i class="fa-solid fa-check text-green-500"></i> ۱ پست یا ریلز دائمی</li> | |
| </ul> | |
| <button class="w-full py-3 rounded-full border-2 border-view-primary text-view-primary font-bold hover:bg-view-primary hover:text-white transition">خرید</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row gap-12 items-start"> | |
| <div class="lg:w-1/3"> | |
| <div class="sticky top-24"> | |
| <div class="w-16 h-16 rounded-2xl bg-view-primary/10 flex items-center justify-center text-view-primary text-2xl mb-6"> | |
| <i class="fa-regular fa-circle-question"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold mb-4">سوالات متداول</h2> | |
| <p class="text-gray-500 mb-6">برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم.</p> | |
| <a href="#" class="text-view-secondary font-bold hover:underline">ارتباط با پشتیبانی ></a> | |
| </div> | |
| </div> | |
| <div class="lg:w-2/3 w-full space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="border border-gray-200 rounded-2xl overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition text-right" onclick="toggleFaq(this)"> | |
| <span class="font-bold text-lg">چطور میتوانم از فروشگاه خرید کنم؟</span> | |
| <i class="fa-solid fa-chevron-down text-gray-400 transition-transform duration-300"></i> | |
| </button> | |
| <div class="hidden p-6 text-gray-600 leading-relaxed border-t border-gray-100 bg-white"> | |
| در بخش فوتر، قسمت محصولات رو انتخاب کنید. محصول مورد نظرتون رو به سبد خرید اضافه، و سفارش خودتون رو ثبت کنید. پرداخت به صورت آنلاین و امن انجام میشود. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="border border-gray-200 rounded-2xl overflow-hidden"> | |
| <button class="w-full flex justify-between items-center p-6 bg-gray-50 hover:bg-gray-100 transition text-right" onclick="toggleFaq(this)"> | |
| <span class="font-bold text-lg">ن |