f408faac54
Initialize the base WordPress theme files, including core template hierarchy (index, page, single, archive, 404), WooCommerce template overrides, and essential asset directories.
1464 lines
112 KiB
HTML
1464 lines
112 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl" class="scroll-smooth">
|
||
<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>
|
||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
forest: { 50:'#e8f5ec', 100:'#c6e6cf', 200:'#9ed0ae', 300:'#6fb88a', 400:'#4a9a6b', 500:'#2D5F3F', 600:'#254d34', 700:'#1c3b28', 800:'#13291c', 900:'#0a1710' },
|
||
cream: { 50:'#FDFBF7', 100:'#F5F0E8', 200:'#EBE3D5', 300:'#DDD2BF', 400:'#C4B49A', 500:'#A99478' },
|
||
honey: { 50:'#FDF5ED', 100:'#F9E6D0', 200:'#F2CC9E', 300:'#E8AC6A', 400:'#D4A574', 500:'#C08B52', 600:'#A07040', 700:'#7D5630', 800:'#5A3D20', 900:'#3A2612' },
|
||
earth: { 50:'#F5EDE7', 100:'#E8D5C7', 200:'#D4B5A0', 300:'#BF9276', 400:'#8B5A3C', 500:'#734A30', 600:'#5C3B25', 700:'#452C1B', 800:'#2E1D12', 900:'#170E09' },
|
||
dark: { bg:'#1A1D23', card:'#22262E', border:'#2E333D', text:'#E8E6E3', muted:'#9CA3AF' }
|
||
},
|
||
fontFamily: {
|
||
vazir: ['Vazirmatn', 'sans-serif'],
|
||
inter: ['Inter', 'sans-serif'],
|
||
},
|
||
animation: {
|
||
'fade-in': 'fadeIn 0.6s ease-out forwards',
|
||
'slide-up': 'slideUp 0.6s ease-out forwards',
|
||
'slide-right': 'slideRight 0.5s ease-out forwards',
|
||
'float': 'float 3s ease-in-out infinite',
|
||
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
|
||
'shimmer': 'shimmer 2s linear infinite',
|
||
},
|
||
keyframes: {
|
||
fadeIn: { '0%': { opacity:'0' }, '100%': { opacity:'1' } },
|
||
slideUp: { '0%': { opacity:'0', transform:'translateY(30px)' }, '100%': { opacity:'1', transform:'translateY(0)' } },
|
||
slideRight: { '0%': { opacity:'0', transform:'translateX(-20px)' }, '100%': { opacity:'1', transform:'translateX(0)' } },
|
||
float: { '0%,100%': { transform:'translateY(0)' }, '50%': { transform:'translateY(-10px)' } },
|
||
pulseSoft: { '0%,100%': { opacity:'1' }, '50%': { opacity:'0.7' } },
|
||
shimmer: { '0%': { backgroundPosition:'-200% 0' }, '100%': { backgroundPosition:'200% 0' } },
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
* { font-family: 'Vazirmatn', sans-serif; }
|
||
.font-inter { font-family: 'Inter', sans-serif; }
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: #F5F0E8; }
|
||
::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
|
||
.dark ::-webkit-scrollbar-track { background: #1A1D23; }
|
||
.dark ::-webkit-scrollbar-thumb { background: #2D5F3F; }
|
||
.honeycomb-bg {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
|
||
}
|
||
.leaf-pattern::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C30 5 45 20 45 35C45 43.28 38.28 50 30 50C21.72 50 15 43.28 15 35C15 20 30 5 30 5Z' fill='none' stroke='%232D5F3F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
}
|
||
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
|
||
.product-card:hover .product-img { transform: scale(1.08); }
|
||
.product-card:hover .quick-actions { opacity:1; transform:translateY(0); }
|
||
.quick-actions { opacity:0; transform:translateY(10px); transition: all 0.3s ease; }
|
||
.product-img { transition: transform 0.5s ease; }
|
||
.tab-active { color: #2D5F3F; border-color: #2D5F3F; }
|
||
.dark .tab-active { color: #6fb88a; border-color: #6fb88a; }
|
||
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; background:#2D5F3F; border-radius:50%; cursor:pointer; border:2px solid #fff; }
|
||
.dark input[type="range"]::-webkit-slider-thumb { background:#6fb88a; border-color:#22262E; }
|
||
.search-overlay { backdrop-filter: blur(8px); }
|
||
.cart-badge { animation: pulseSoft 2s ease-in-out infinite; }
|
||
.nav-link::after { content:''; display:block; width:0; height:2px; background:#2D5F3F; transition:width 0.3s ease; }
|
||
.dark .nav-link::after { background:#6fb88a; }
|
||
.nav-link:hover::after { width:100%; }
|
||
.toast { animation: slideUp 0.4s ease-out forwards; }
|
||
@media (max-width: 767px) {
|
||
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
|
||
}
|
||
.zoom-lens { cursor: zoom-in; }
|
||
.gallery-thumb.active { border-color: #2D5F3F; }
|
||
.dark .gallery-thumb.active { border-color: #6fb88a; }
|
||
.filter-checkbox:checked { background-color: #2D5F3F; border-color: #2D5F3F; }
|
||
.dark .filter-checkbox:checked { background-color: #6fb88a; border-color: #6fb88a; }
|
||
.checkout-step.active { background: #2D5F3F; color: white; }
|
||
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
|
||
.checkout-step.done { background: #2D5F3F; color: white; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300">
|
||
|
||
<!-- Toast Container -->
|
||
<div id="toast-container" class="fixed top-24 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2"></div>
|
||
|
||
<!-- Search Overlay -->
|
||
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 search-overlay hidden" onclick="closeSearch()">
|
||
<div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
|
||
<div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
|
||
<iconify-icon icon="lucide:search" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<input id="search-input" type="text" placeholder="جستجو در محصولات..."
|
||
class="flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted"
|
||
oninput="handleSearch(this.value)">
|
||
<button onclick="closeSearch()" class="text-cream-400 hover:text-earth-400 dark:text-dark-muted">
|
||
<iconify-icon icon="lucide:x" width="22"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div id="search-results" class="pt-4 max-h-80 overflow-y-auto"></div>
|
||
<div id="search-suggestions" class="pt-4">
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted mb-3">جستجوهای پرطرفدار</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button onclick="document.getElementById('search-input').value='عسل';handleSearch('عسل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">عسل طبیعی</button>
|
||
<button onclick="document.getElementById('search-input').value='ارده';handleSearch('ارده')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">ارده سنتی</button>
|
||
<button onclick="document.getElementById('search-input').value='سرکه';handleSearch('سرکه')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">سرکه انگور</button>
|
||
<button onclick="document.getElementById('search-input').value='چای';handleSearch('چای')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">دمنوش گیاهی</button>
|
||
<button onclick="document.getElementById('search-input').value='آجیل';handleSearch('آجیل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">آجیل مخلوط</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cart Drawer -->
|
||
<div id="cart-drawer" class="fixed inset-0 z-[80] hidden">
|
||
<div class="absolute inset-0 bg-black/50" onclick="closeCart()"></div>
|
||
<div class="absolute top-0 left-0 bottom-0 w-full max-w-md bg-white dark:bg-dark-card shadow-2xl transform transition-transform duration-300" id="cart-panel">
|
||
<div class="flex flex-col h-full">
|
||
<div class="flex items-center justify-between p-5 border-b border-cream-200 dark:border-dark-border">
|
||
<h3 class="text-lg font-bold">سبد خرید (<span id="cart-drawer-count">0</span>)</h3>
|
||
<button onclick="closeCart()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
|
||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div id="cart-drawer-items" class="flex-1 overflow-y-auto p-5">
|
||
<div id="cart-empty" class="flex flex-col items-center justify-center h-full text-center">
|
||
<iconify-icon icon="lucide:shopping-bag" width="64" class="text-cream-400 dark:text-dark-muted mb-4"></iconify-icon>
|
||
<p class="text-cream-500 dark:text-dark-muted mb-4">سبد خرید شما خالی است</p>
|
||
<button onclick="closeCart()" class="px-6 py-2.5 bg-forest-500 text-white rounded-xl text-sm hover:bg-forest-600 transition">مشاهده محصولات</button>
|
||
</div>
|
||
<div id="cart-items-list" class="hidden space-y-4"></div>
|
||
</div>
|
||
<div id="cart-drawer-footer" class="hidden border-t border-cream-200 dark:border-dark-border p-5 space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-cream-500 dark:text-dark-muted">جمع کل</span>
|
||
<span id="cart-drawer-total" class="text-lg font-bold text-forest-500 dark:text-forest-300"></span>
|
||
</div>
|
||
<button onclick="goToCheckout()" class="w-full py-3.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition flex items-center justify-center gap-2">
|
||
<span>تکمیل خرید</span>
|
||
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
|
||
</button>
|
||
<button onclick="closeCart()" class="w-full py-2.5 text-sm text-cream-500 dark:text-dark-muted hover:text-earth-400 transition">ادامه خرید</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
|
||
<div class="absolute inset-0 bg-black/50" onclick="closeMobileMenu()"></div>
|
||
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto" id="mobile-menu-panel">
|
||
<div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-9 h-9 bg-forest-500 rounded-xl flex items-center justify-center">
|
||
<iconify-icon icon="lucide:leaf" width="18" class="text-white"></iconify-icon>
|
||
</div>
|
||
<span class="font-bold text-lg">مطیب</span>
|
||
</div>
|
||
<button onclick="closeMobileMenu()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition">
|
||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<nav class="p-4 space-y-1">
|
||
<a href="#home" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:home" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span class="font-medium">صفحه اصلی</span>
|
||
</a>
|
||
<a href="#shop" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:store" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span class="font-medium">فروشگاه</span>
|
||
</a>
|
||
<a href="#about" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:info" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span class="font-medium">درباره ما</span>
|
||
</a>
|
||
<a href="#blog" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:book-open" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span class="font-medium">مجله سلامت</span>
|
||
</a>
|
||
<a href="#contact" onclick="closeMobileMenu()" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:phone" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span class="font-medium">تماس با ما</span>
|
||
</a>
|
||
</nav>
|
||
<div class="p-4 border-t border-cream-200 dark:border-dark-border">
|
||
<div class="flex items-center justify-between px-4 py-2 mb-3">
|
||
<span class="text-sm text-cream-500 dark:text-dark-muted">حالت تاریک</span>
|
||
<button onclick="toggleDark()" class="w-12 h-6 bg-cream-200 dark:bg-forest-500 rounded-full relative transition">
|
||
<div class="w-5 h-5 bg-white dark:bg-dark-bg rounded-full absolute top-0.5 right-0.5 dark:right-auto dark:left-0.5 transition-all shadow"></div>
|
||
</button>
|
||
</div>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:user" width="20" class="text-honey-400"></iconify-icon>
|
||
<span class="font-medium">حساب کاربری</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:heart" width="20" class="text-red-400"></iconify-icon>
|
||
<span class="font-medium">علاقهمندیها</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== HEADER ===== -->
|
||
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream-100/80 dark:bg-dark-bg/80 backdrop-blur-xl border-b border-cream-200/50 dark:border-dark-border/50">
|
||
<!-- Top Bar -->
|
||
<div class="hidden md:block bg-forest-500 dark:bg-forest-700 text-white text-xs py-2">
|
||
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<span class="flex items-center gap-1"><iconify-icon icon="lucide:truck" width="14"></iconify-icon> ارسال رایگان بالای ۵۰۰ هزار تومان</span>
|
||
<span class="w-px h-3 bg-white/30"></span>
|
||
<span class="flex items-center gap-1"><iconify-icon icon="lucide:shield-check" width="14"></iconify-icon> ضمانت اصالت کالا</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<a href="tel:02112345678" class="flex items-center gap-1 hover:opacity-80 transition"><iconify-icon icon="lucide:phone" width="14"></iconify-icon> ۰۲۱-۱۲۳۴۵۶۷۸</a>
|
||
<span class="w-px h-3 bg-white/30"></span>
|
||
<button onclick="toggleLang()" class="font-inter text-xs hover:opacity-80 transition">English</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Main Nav -->
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="flex items-center justify-between h-16 md:h-20">
|
||
<!-- Mobile Menu Toggle -->
|
||
<button onclick="openMobileMenu()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition">
|
||
<iconify-icon icon="lucide:menu" width="22"></iconify-icon>
|
||
</button>
|
||
<!-- Logo -->
|
||
<a href="#home" class="flex items-center gap-2.5">
|
||
<div class="w-10 h-10 bg-forest-500 rounded-2xl flex items-center justify-center shadow-lg shadow-forest-500/20">
|
||
<iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<span class="font-extrabold text-xl text-forest-500 dark:text-forest-300 leading-none">مطیب</span>
|
||
<span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
|
||
</div>
|
||
</a>
|
||
<!-- Desktop Nav -->
|
||
<nav class="hidden md:flex items-center gap-8">
|
||
<a href="#home" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">صفحه اصلی</a>
|
||
<a href="#shop" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">فروشگاه</a>
|
||
<a href="#about" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">درباره ما</a>
|
||
<a href="#blog" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">مجله سلامت</a>
|
||
<a href="#contact" class="nav-link text-sm font-medium text-earth-400 dark:text-dark-text hover:text-forest-500 dark:hover:text-forest-300 transition">تماس</a>
|
||
</nav>
|
||
<!-- Actions -->
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="openSearch()" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
|
||
<iconify-icon icon="lucide:search" width="20"></iconify-icon>
|
||
</button>
|
||
<button onclick="toggleDark()" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
|
||
<iconify-icon icon="lucide:moon" width="20" class="dark:hidden"></iconify-icon>
|
||
<iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
|
||
</button>
|
||
<button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="علاقهمندی">
|
||
<iconify-icon icon="lucide:heart" width="20"></iconify-icon>
|
||
</button>
|
||
<button onclick="openCart()" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
|
||
<iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
|
||
<span id="cart-count" class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center hidden">0</span>
|
||
</button>
|
||
<button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
|
||
<iconify-icon icon="lucide:user" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== MAIN CONTENT ===== -->
|
||
<main class="pt-16 md:pt-[104px]">
|
||
|
||
<!-- ===== HERO SECTION ===== -->
|
||
<section id="home" class="relative overflow-hidden honeycomb-bg leaf-pattern">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16 md:py-28">
|
||
<div class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
|
||
<div class="text-center md:text-right animate-slide-up">
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-forest-50 dark:bg-forest-900/30 rounded-full mb-6">
|
||
<span class="w-2 h-2 bg-forest-500 dark:bg-forest-300 rounded-full animate-pulse-soft"></span>
|
||
<span class="text-xs font-medium text-forest-500 dark:text-forest-300">محصولات ۱۰۰٪ ارگانیک و طبیعی</span>
|
||
</div>
|
||
<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold leading-[1.1] mb-6">
|
||
<span class="text-earth-400 dark:text-dark-text">طعم</span>
|
||
<span class="text-forest-500 dark:text-forest-300"> واقعی</span>
|
||
<br>
|
||
<span class="text-honey-400">طبیعت</span>
|
||
</h1>
|
||
<p class="text-cream-500 dark:text-dark-muted text-base md:text-lg leading-relaxed mb-8 max-w-md mx-auto md:mx-0">
|
||
از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است. با طعمهای اصیل و سلامت واقعی آشنا شوید.
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
|
||
<a href="#shop" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-semibold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25">
|
||
<span>مشاهده محصولات</span>
|
||
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
|
||
</a>
|
||
<a href="#about" class="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-white/60 dark:bg-dark-card/60 border border-cream-200 dark:border-dark-border rounded-2xl font-semibold hover:bg-white dark:hover:bg-dark-card hover:-translate-y-0.5 transition-all backdrop-blur">
|
||
<span>داستان مطیب</span>
|
||
<iconify-icon icon="lucide:play-circle" width="18" class="text-honey-400"></iconify-icon>
|
||
</a>
|
||
</div>
|
||
<!-- Trust Stats -->
|
||
<div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۲۵۰</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">محصول ارگانیک</div>
|
||
</div>
|
||
<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">+۱۵K</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">مشتری راضی</div>
|
||
</div>
|
||
<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300">۳۱</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">استان تحت پوشش</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Hero Image -->
|
||
<div class="relative animate-fade-in">
|
||
<div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
|
||
<img src="https://picsum.photos/seed/organic-honey-jar/700/600.jpg" alt="محصولات ارگانیک مطیب" class="w-full h-[350px] md:h-[500px] object-cover">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-forest-500/30 to-transparent"></div>
|
||
</div>
|
||
<!-- Floating Card 1 -->
|
||
<div class="absolute -bottom-4 -right-4 md:bottom-8 md:-right-8 bg-white dark:bg-dark-card rounded-2xl p-4 shadow-xl animate-float">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center">
|
||
<iconify-icon icon="lucide:award" width="24" class="text-honey-400"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm">گواهی ارگانیک</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">تأیید شده توسط سازمان غذا</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Floating Card 2 -->
|
||
<div class="absolute -top-4 -left-4 md:top-8 md:-left-8 bg-white dark:bg-dark-card rounded-2xl p-3 shadow-xl animate-float" style="animation-delay:1s">
|
||
<div class="flex items-center gap-2">
|
||
<div class="flex -space-x-2 space-x-reverse">
|
||
<div class="w-8 h-8 rounded-full bg-forest-100 dark:bg-forest-800 flex items-center justify-center text-xs font-bold text-forest-500">م</div>
|
||
<div class="w-8 h-8 rounded-full bg-honey-100 dark:bg-honey-800 flex items-center justify-center text-xs font-bold text-honey-400">ع</div>
|
||
<div class="w-8 h-8 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-xs font-bold text-earth-400">ز</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex text-honey-400 text-xs">★★★★★</div>
|
||
<div class="text-[10px] text-cream-500 dark:text-dark-muted">+۴.۸ از ۵۰۰۰ نظر</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Wave Divider -->
|
||
<div class="absolute bottom-0 left-0 right-0">
|
||
<svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full">
|
||
<path d="M0 60V30C240 0 480 0 720 30C960 60 1200 60 1440 30V60H0Z" class="fill-cream-100 dark:fill-dark-bg"/>
|
||
</svg>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CATEGORIES SECTION ===== -->
|
||
<section class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="text-center mb-12">
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CATEGORIES</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-3">دستهبندی محصولات</h2>
|
||
<p class="text-cream-500 dark:text-dark-muted max-w-lg mx-auto">از عسلهای کوهستان تا دمنوشهای گیاهی، بهترینهای طبیعت را کشف کنید</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
||
<a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="lucide:hexagon" width="32" class="text-honey-400"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1">عسل طبیعی</h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۲۴ محصول</span>
|
||
</a>
|
||
<a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-forest-50 dark:bg-forest-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="lucide:droplets" width="32" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1">ارده و حلوا</h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۱۸ محصول</span>
|
||
</a>
|
||
<a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-red-50 dark:bg-red-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="lucide:flask-round" width="32" class="text-red-400"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1">سرکه و ترشی</h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۱۲ محصول</span>
|
||
</a>
|
||
<a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="lucide:cup-soda" width="32" class="text-emerald-500"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1">دمنوش گیاهی</h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۳۲ محصول</span>
|
||
</a>
|
||
<a href="#shop" class="group relative bg-white dark:bg-dark-card rounded-2xl p-6 text-center hover:-translate-y-1 transition-all shadow-sm hover:shadow-xl border border-cream-200/50 dark:border-dark-border/50 col-span-2 md:col-span-1">
|
||
<div class="w-16 h-16 mx-auto mb-4 bg-amber-50 dark:bg-amber-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="lucide:nut" width="32" class="text-amber-500"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1">خشکبار و آجیل</h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۴۵ محصول</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== BESTSELLERS SECTION ===== -->
|
||
<section id="shop" class="py-16 md:py-24 bg-white dark:bg-dark-card">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="flex items-end justify-between mb-10">
|
||
<div>
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BESTSELLERS</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">پرفروشترینها</h2>
|
||
</div>
|
||
<a href="#shop" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
|
||
<span>مشاهده همه</span>
|
||
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
|
||
</a>
|
||
</div>
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6" id="products-grid">
|
||
<!-- Products injected by JS -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== BRAND STORY SECTION ===== -->
|
||
<section id="about" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden leaf-pattern">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||
<div class="relative">
|
||
<div class="rounded-3xl overflow-hidden shadow-xl">
|
||
<img src="https://picsum.photos/seed/organic-farm-nature/600/500.jpg" alt="مزرعه ارگانیک" class="w-full h-[350px] md:h-[450px] object-cover">
|
||
</div>
|
||
<div class="absolute -bottom-6 -left-6 bg-white dark:bg-dark-card rounded-2xl p-5 shadow-xl max-w-[200px]">
|
||
<div class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">+۱۲</div>
|
||
<div class="text-sm text-earth-400 dark:text-dark-text font-medium">سال تجربه</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted mt-1">در تولید محصولات ارگانیک</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">OUR STORY</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 mb-6">داستان مطیب،<br>از طبیعت تا سفره شما</h2>
|
||
<p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6">
|
||
مطیب از سال ۱۳۹۰ با هدف عرضه محصولات ارگانیک و طبیعی ایرانی آغاز به کار کرد. ما مستقیماً از زنبورداران، کشاورزان و تولیدکنندگان سنتی سراسر ایران خرید میکنیم و با حفظ کیفیت اولیه، آنها را به سفره خانوادههای ایرانی میرسانیم.
|
||
</p>
|
||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<iconify-icon icon="lucide:sprout" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm mb-0.5">کشت ارگانیک</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">بدون سم و کود شیمیایی</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<iconify-icon icon="lucide:shield-check" width="20" class="text-honey-400"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm mb-0.5">تضمین اصالت</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">آزمایشگاهی و مستند</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<iconify-icon icon="lucide:recycle" width="20" class="text-emerald-500"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm mb-0.5">بستهبندی سبز</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">دوستدار محیط زیست</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
||
<iconify-icon icon="lucide:map-pin" width="20" class="text-blue-500"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm mb-0.5">تأمین محلی</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">حمایت از کشاورز ایرانی</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Certification Badges -->
|
||
<div class="flex items-center gap-3 flex-wrap">
|
||
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
|
||
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>گواهی ارگانیک ایران</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
|
||
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>استاندارد ملی بهداشت</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-dark-card rounded-xl border border-cream-200 dark:border-dark-border text-xs">
|
||
<iconify-icon icon="lucide:badge-check" width="16" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>نماد اعتماد الکترونیکی</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PRODUCT DETAIL SECTION (Demo) ===== -->
|
||
<section id="product-detail" class="py-16 md:py-24 bg-white dark:bg-dark-card">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="text-center mb-10">
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">PRODUCT DETAIL</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">نمونه صفحه محصول</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-8 md:gap-12">
|
||
<!-- Gallery -->
|
||
<div>
|
||
<div class="relative rounded-2xl overflow-hidden bg-cream-50 dark:bg-dark-bg mb-3">
|
||
<img id="main-product-img" src="https://picsum.photos/seed/honey-golden-jar/600/600.jpg" alt="عسل طبیعی کوهستان" class="w-full h-[350px] md:h-[450px] object-cover zoom-lens">
|
||
<div class="absolute top-3 right-3 flex flex-col gap-2">
|
||
<span class="px-3 py-1 bg-forest-500 text-white text-xs rounded-full font-medium">ارگانیک</span>
|
||
<span class="px-3 py-1 bg-red-500 text-white text-xs rounded-full font-medium">۲۰٪ تخفیف</span>
|
||
</div>
|
||
<button onclick="toggleWishlist(this)" class="absolute top-3 left-3 w-10 h-10 bg-white/80 dark:bg-dark-card/80 backdrop-blur rounded-full flex items-center justify-center hover:scale-110 transition">
|
||
<iconify-icon icon="lucide:heart" width="20" class="text-cream-500"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div class="flex gap-2 overflow-x-auto pb-1">
|
||
<button onclick="changeImage('honey-golden-jar', this)" class="gallery-thumb active w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
|
||
<img src="https://picsum.photos/seed/honey-golden-jar/200/200.jpg" class="w-full h-full object-cover">
|
||
</button>
|
||
<button onclick="changeImage('honey-drip-spoon', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
|
||
<img src="https://picsum.photos/seed/honey-drip-spoon/200/200.jpg" class="w-full h-full object-cover">
|
||
</button>
|
||
<button onclick="changeImage('honey-label-detail', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
|
||
<img src="https://picsum.photos/seed/honey-label-detail/200/200.jpg" class="w-full h-full object-cover">
|
||
</button>
|
||
<button onclick="changeImage('honey-breakfast-table', this)" class="gallery-thumb w-20 h-20 rounded-xl overflow-hidden border-2 border-transparent flex-shrink-0">
|
||
<img src="https://picsum.photos/seed/honey-breakfast-table/200/200.jpg" class="w-full h-full object-cover">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- Product Info -->
|
||
<div>
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">برند: مطیب</span>
|
||
<span class="w-1 h-1 bg-cream-400 rounded-full"></span>
|
||
<span class="flex items-center gap-0.5 text-honey-400 text-xs">★★★★★ <span class="text-cream-500 dark:text-dark-muted mr-1">(۱۲۸ نظر)</span></span>
|
||
</div>
|
||
<h1 class="text-2xl md:text-3xl font-extrabold mb-3">عسل طبیعی کوهستان مطیب</h1>
|
||
<p class="text-cream-500 dark:text-dark-muted text-sm leading-relaxed mb-5">عسل خالص و طبیعی جمعآوری شده از دامنههای زاگرس، بدون هیچگونه افزودنی و شکر. غنی از آنتیاکسیدان و مواد مغذی.</p>
|
||
|
||
<!-- Stock -->
|
||
<div class="flex items-center gap-2 mb-5">
|
||
<span class="w-2 h-2 bg-emerald-500 rounded-full"></span>
|
||
<span class="text-sm text-emerald-600 dark:text-emerald-400 font-medium">موجود در انبار</span>
|
||
</div>
|
||
|
||
<!-- Weight Selector -->
|
||
<div class="mb-5">
|
||
<label class="text-sm font-bold mb-3 block">وزن محصول:</label>
|
||
<div class="flex gap-2 flex-wrap">
|
||
<button onclick="selectWeight(this, 185000)" class="weight-btn px-5 py-2.5 border-2 border-cream-200 dark:border-dark-border rounded-xl text-sm font-medium hover:border-forest-500 dark:hover:border-forest-300 transition">۲۵۰ گرم</button>
|
||
<button onclick="selectWeight(this, 295000)" class="weight-btn px-5 py-2.5 border-2 border-forest-500 dark:border-forest-300 bg-forest-50 dark:bg-forest-900/30 rounded-xl text-sm font-medium text-forest-500 dark:text-forest-300 transition active">۵۰۰ گرم</button>
|
||
<button onclick="selectWeight(this, 495000)" class="weight-btn px-5 py-2.5 border-2 border-cream-200 dark:border-dark-border rounded-xl text-sm font-medium hover:border-forest-500 dark:hover:border-forest-300 transition">۱ کیلوگرم</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Price -->
|
||
<div class="flex items-end gap-3 mb-6">
|
||
<span id="product-price" class="text-3xl font-extrabold text-forest-500 dark:text-forest-300">۲۹۵,۰۰۰</span>
|
||
<span class="text-lg text-cream-500 dark:text-dark-muted">تومان</span>
|
||
<span class="line-through text-sm text-cream-400 dark:text-dark-muted">۳۶۹,۰۰۰</span>
|
||
</div>
|
||
|
||
<!-- Quantity -->
|
||
<div class="flex items-center gap-4 mb-6">
|
||
<label class="text-sm font-bold">تعداد:</label>
|
||
<div class="flex items-center border-2 border-cream-200 dark:border-dark-border rounded-xl overflow-hidden">
|
||
<button onclick="changeQty(-1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
|
||
<iconify-icon icon="lucide:minus" width="16"></iconify-icon>
|
||
</button>
|
||
<span id="product-qty" class="w-12 h-10 flex items-center justify-center font-bold text-sm border-x-2 border-cream-200 dark:border-dark-border">۱</span>
|
||
<button onclick="changeQty(1)" class="w-10 h-10 flex items-center justify-center hover:bg-cream-100 dark:hover:bg-dark-bg transition">
|
||
<iconify-icon icon="lucide:plus" width="16"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add to Cart -->
|
||
<div class="flex gap-3 mb-6">
|
||
<button onclick="addToCartDetail()" class="flex-1 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 hover:-translate-y-0.5 transition-all shadow-lg shadow-forest-500/25 flex items-center justify-center gap-2">
|
||
<iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
|
||
<span>افزودن به سبد خرید</span>
|
||
</button>
|
||
<button onclick="toggleWishlist(this)" class="w-14 h-14 border-2 border-cream-200 dark:border-dark-border rounded-2xl flex items-center justify-center hover:border-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
|
||
<iconify-icon icon="lucide:heart" width="22" class="text-cream-400"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Delivery Info -->
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 space-y-3">
|
||
<div class="flex items-center gap-3 text-sm">
|
||
<iconify-icon icon="lucide:truck" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>ارسال به تمامی نقاط کشور</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-sm">
|
||
<iconify-icon icon="lucide:rotate-ccw" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>ضمانت بازگشت ۷ روزه</span>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-sm">
|
||
<iconify-icon icon="lucide:shield-check" width="18" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<span>ضمانت اصالت و کیفیت</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product Tabs -->
|
||
<div class="mt-12 border-t border-cream-200 dark:border-dark-border pt-8">
|
||
<div class="flex gap-6 border-b border-cream-200 dark:border-dark-border mb-6 overflow-x-auto">
|
||
<button onclick="switchTab('desc', this)" class="tab-btn tab-active pb-3 text-sm font-bold border-b-2 border-transparent whitespace-nowrap transition">توضیحات</button>
|
||
<button onclick="switchTab('ingredients', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">ترکیبات</button>
|
||
<button onclick="switchTab('benefits', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">خواص سلامت</button>
|
||
<button onclick="switchTab('reviews', this)" class="tab-btn pb-3 text-sm font-bold border-b-2 border-transparent text-cream-500 dark:text-dark-muted whitespace-nowrap transition">نظرات (۱۲۸)</button>
|
||
</div>
|
||
<div id="tab-desc" class="tab-content">
|
||
<div class="max-w-3xl space-y-4 text-cream-500 dark:text-dark-muted leading-relaxed text-sm">
|
||
<p>عسل طبیعی کوهستان مطیب از گلهای وحشی دامنههای زاگرس مرکزی تولید شده و بدون هیچگونه فرآیند حرارتی یا افزودنی عرضه میشود. این عسل به روش سنتی و با رعایت اصول ارگانیک برداشت شده است.</p>
|
||
<p>رنگ طلایی این عسل نشاندهنده غنای آن از آنتیاکسیدانها و مواد معدنی است. طعم ملایم و مطبوع آن مناسب مصرف روزانه برای تمام اعضای خانواده است.</p>
|
||
</div>
|
||
</div>
|
||
<div id="tab-ingredients" class="tab-content hidden">
|
||
<div class="max-w-3xl">
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted mb-4">ترکیبات این محصول:</p>
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">قند طبیعی</span><div class="font-bold text-sm mt-1">۸۲ گرم</div></div>
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">آب</span><div class="font-bold text-sm mt-1">۱۷ گرم</div></div>
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">پروتئین</span><div class="font-bold text-sm mt-1">۰.۳ گرم</div></div>
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">آهن</span><div class="font-bold text-sm mt-1">۰.۴۲ mg</div></div>
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">پتاسیم</span><div class="font-bold text-sm mt-1">۵۲ mg</div></div>
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-xl p-3 text-center"><span class="text-xs text-cream-500 dark:text-dark-muted">ویتامین C</span><div class="font-bold text-sm mt-1">۰.۵ mg</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="tab-benefits" class="tab-content hidden">
|
||
<div class="max-w-3xl grid md:grid-cols-2 gap-4">
|
||
<div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:heart-pulse" width="20" class="text-red-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">تقویت سیستم ایمنی</div><p class="text-xs text-cream-500 dark:text-dark-muted">آنتیاکسیدانهای طبیعی عسل به تقویت سیستم دفاعی بدن کمک میکنند.</p></div></div>
|
||
<div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:flame" width="20" class="text-orange-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">منبع انرژی طبیعی</div><p class="text-xs text-cream-500 dark:text-dark-muted">قندهای طبیعی عسل انرژی پایدار و سالمی فراهم میکنند.</p></div></div>
|
||
<div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:stomach" width="20" class="text-green-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">بهبود گوارش</div><p class="text-xs text-cream-500 dark:text-dark-muted">عسل طبیعی به سلامت دستگاه گوارش و تنظیم معده کمک میکند.</p></div></div>
|
||
<div class="flex items-start gap-3 p-4 bg-cream-50 dark:bg-dark-bg rounded-xl"><iconify-icon icon="lucide:sparkles" width="20" class="text-purple-400 mt-0.5 flex-shrink-0"></iconify-icon><div><div class="font-bold text-sm mb-1">مراقبت پوست</div><p class="text-xs text-cream-500 dark:text-dark-muted">خواص ضدباکتریایی عسل برای مراقبت از پوست بسیار مفید است.</p></div></div>
|
||
</div>
|
||
</div>
|
||
<div id="tab-reviews" class="tab-content hidden">
|
||
<div class="max-w-3xl space-y-4">
|
||
<!-- Review 1 -->
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-5">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-forest-100 dark:bg-forest-800 rounded-full flex items-center justify-center font-bold text-sm text-forest-500">مر</div>
|
||
<div><div class="font-bold text-sm">مریم رحیمی</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۴۰۳/۰۸/۱۵</div></div>
|
||
</div>
|
||
<div class="flex text-honey-400 text-sm">★★★★★</div>
|
||
</div>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed">واقعاً عسل فوقالعادهای بود. طعم و بوی طبیعی داره و کاملاً با عسلهای معمولی فرق داره. حتماً دوباره سفارش میدم.</p>
|
||
</div>
|
||
<!-- Review 2 -->
|
||
<div class="bg-cream-50 dark:bg-dark-bg rounded-2xl p-5">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-honey-100 dark:bg-honey-800 rounded-full flex items-center justify-center font-bold text-sm text-honey-400">عم</div>
|
||
<div><div class="font-bold text-sm">علی محمدی</div><div class="text-xs text-cream-500 dark:text-dark-muted">۱۴۰۳/۰۸/۱۰</div></div>
|
||
</div>
|
||
<div class="flex text-honey-400 text-sm">★★★★<span class="text-cream-300 dark:text-dark-muted">★</span></div>
|
||
</div>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed">کیفیت خوبی داره ولی بستهبندی میتونه بهتر باشه. در مجموع راضی هستم.</p>
|
||
</div>
|
||
<button class="w-full py-3 border-2 border-dashed border-cream-200 dark:border-dark-border rounded-2xl text-sm font-medium text-cream-500 dark:text-dark-muted hover:border-forest-500 hover:text-forest-500 dark:hover:border-forest-300 dark:hover:text-forest-300 transition">ثبت نظر جدید</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Frequently Bought Together -->
|
||
<div class="mt-16">
|
||
<h3 class="text-xl font-bold mb-6">معمولاً با هم خریداری میشوند</h3>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
|
||
<img src="https://picsum.photos/seed/ardeh-sesame/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
|
||
<h4 class="font-bold text-sm line-clamp-2">ارده کنجد سنتی</h4>
|
||
<div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۱۸۵,۰۰۰ تومان</div>
|
||
</div>
|
||
<div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
|
||
<img src="https://picsum.photos/seed/herbal-tea-mint/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
|
||
<h4 class="font-bold text-sm line-clamp-2">دمنوش نعناع کوهی</h4>
|
||
<div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۸۹,۰۰۰ تومان</div>
|
||
</div>
|
||
<div class="product-card bg-cream-50 dark:bg-dark-bg rounded-2xl p-4 text-center group cursor-pointer border border-cream-200/50 dark:border-dark-border/50">
|
||
<img src="https://picsum.photos/seed/grape-vinegar-bottle/300/300.jpg" class="product-img w-full h-32 object-cover rounded-xl mb-3">
|
||
<h4 class="font-bold text-sm line-clamp-2">سرکه انگور طبیعی</h4>
|
||
<div class="text-forest-500 dark:text-forest-300 font-bold text-sm mt-2">۱۲۵,۰۰۰ تومان</div>
|
||
</div>
|
||
<div class="flex items-center justify-center">
|
||
<button class="px-6 py-3 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition">افزودن همه</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TESTIMONIALS SECTION ===== -->
|
||
<section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden">
|
||
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
|
||
<div class="text-center mb-12">
|
||
<span class="text-xs font-medium text-honey-300 tracking-wider font-inter">TESTIMONIALS</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2 text-white">نظرات مشتریان ما</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
|
||
<div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
|
||
<p class="text-white/90 text-sm leading-relaxed mb-5">«از وقتی عسل مطیب استفاده میکنیم، دیگه هیچ عسلی برامون قابل قبول نیست. طعم واقعی عسل رو با مطیب شناختیم.»</p>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">زک</div>
|
||
<div><div class="font-bold text-sm text-white">زهرا کریمی</div><div class="text-xs text-white/60">تهران</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
|
||
<div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
|
||
<p class="text-white/90 text-sm leading-relaxed mb-5">«ارده و شیرههای مطیب کیفیت استثنایی دارن. بستهبندی هم بسیار تمیز و بهداشتیه. برای صبحانه عالیه.»</p>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">حن</div>
|
||
<div><div class="font-bold text-sm text-white">حسین نوری</div><div class="text-xs text-white/60">اصفهان</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
|
||
<div class="flex text-honey-300 text-sm mb-4">★★★★★</div>
|
||
<p class="text-white/90 text-sm leading-relaxed mb-5">«دمنوشهای گیاهی مطیب واقعاً طبیعین. برخلاف خیلی از برندها، عطر و طعم واقعی گیاهان رو حس میکنی.»</p>
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm text-white">فم</div>
|
||
<div><div class="font-bold text-sm text-white">فاطمه موسوی</div><div class="text-xs text-white/60">شیراز</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== BLOG SECTION ===== -->
|
||
<section id="blog" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="flex items-end justify-between mb-10">
|
||
<div>
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">BLOG</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">مجله سلامت مطیب</h2>
|
||
</div>
|
||
<a href="#" class="hidden md:flex items-center gap-1 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
|
||
<span>همه مقالات</span>
|
||
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
|
||
</a>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/honey-health-benefits/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="px-2.5 py-0.5 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 text-xs rounded-full font-medium">سلامت</span>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۱۵ آذر ۱۴۰۳</span>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">۱۰ فایده شگفتانگیز عسل طبیعی برای سلامتی</h3>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">عسل طبیعی یکی از قدیمیترین و مفیدترین مواد غذایی است که خواص بینظیری دارد...</p>
|
||
</div>
|
||
</article>
|
||
<article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/sesame-ardeh-recipe/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="px-2.5 py-0.5 bg-honey-50 dark:bg-honey-900/30 text-honey-400 text-xs rounded-full font-medium">دستور پخت</span>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۱۰ آذر ۱۴۰۳</span>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">طرز تهیه حلوا ارده سنتی خانگی</h3>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">با ارده کنجد مطیب، حلوا اردهای درست کنید که طعم شیرینیفروشیها رو نداره...</p>
|
||
</div>
|
||
</article>
|
||
<article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
|
||
<div class="overflow-hidden h-48"><img src="https://picsum.photos/seed/organic-lifestyle-tips/600/400.jpg" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"></div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="px-2.5 py-0.5 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500 text-xs rounded-full font-medium">سبک زندگی</span>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted">۵ آذر ۱۴۰۳</span>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2">چگونه زندگی ارگانیک را شروع کنیم؟</h3>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2">گذار به سبک زندگی ارگانیک نیازی به تغییرات بزرگ ندارد. با این قدمهای ساده شروع کنید...</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== NEWSLETTER SECTION ===== -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-dark-card">
|
||
<div class="max-w-3xl mx-auto px-4 md:px-6 text-center">
|
||
<div class="w-16 h-16 mx-auto mb-6 bg-honey-50 dark:bg-honey-900/20 rounded-2xl flex items-center justify-center">
|
||
<iconify-icon icon="lucide:mail" width="32" class="text-honey-400"></iconify-icon>
|
||
</div>
|
||
<h2 class="text-2xl md:text-3xl font-extrabold mb-3">از تخفیفها باخبر شوید</h2>
|
||
<p class="text-cream-500 dark:text-dark-muted mb-8">با عضویت در خبرنامه، از جدیدترین محصولات و تخفیفهای ویژه مطلع شوید.</p>
|
||
<form onsubmit="handleNewsletter(event)" class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
|
||
<input type="email" id="newsletter-email" placeholder="ایمیل خود را وارد کنید..." required class="flex-1 px-5 py-3.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-2xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
<button type="submit" class="px-8 py-3.5 bg-forest-500 text-white rounded-2xl font-bold text-sm hover:bg-forest-600 transition whitespace-nowrap">عضویت در خبرنامه</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TRUST BADGES ===== -->
|
||
<section class="py-12 bg-cream-50 dark:bg-dark-bg border-y border-cream-200 dark:border-dark-border">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
|
||
<div class="flex flex-col items-center text-center gap-2">
|
||
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
|
||
<iconify-icon icon="lucide:truck" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div class="font-bold text-sm">ارسال سریع</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">به سراسر ایران</div>
|
||
</div>
|
||
<div class="flex flex-col items-center text-center gap-2">
|
||
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
|
||
<iconify-icon icon="lucide:shield-check" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div class="font-bold text-sm">ضمانت اصالت</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">۱۰۰٪ اصل و طبیعی</div>
|
||
</div>
|
||
<div class="flex flex-col items-center text-center gap-2">
|
||
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
|
||
<iconify-icon icon="lucide:credit-card" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div class="font-bold text-sm">پرداخت امن</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">درگاههای معتبر</div>
|
||
</div>
|
||
<div class="flex flex-col items-center text-center gap-2">
|
||
<div class="w-14 h-14 bg-white dark:bg-dark-card rounded-2xl flex items-center justify-center shadow-sm border border-cream-200/50 dark:border-dark-border/50">
|
||
<iconify-icon icon="lucide:rotate-ccw" width="26" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div class="font-bold text-sm">بازگشت آسان</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">۷ روز ضمانت</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CHECKOUT SECTION (Demo) ===== -->
|
||
<section id="checkout" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg">
|
||
<div class="max-w-5xl mx-auto px-4 md:px-6">
|
||
<div class="text-center mb-10">
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CHECKOUT</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">نمونه صفحه تسویه حساب</h2>
|
||
</div>
|
||
<!-- Progress -->
|
||
<div class="flex items-center justify-center gap-2 mb-10">
|
||
<div class="checkout-step active w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold">۱</div>
|
||
<div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
|
||
<div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۲</div>
|
||
<div class="w-12 h-0.5 bg-cream-200 dark:bg-dark-border"></div>
|
||
<div class="checkout-step w-10 h-10 rounded-full bg-cream-200 dark:bg-dark-border flex items-center justify-center text-sm font-bold text-cream-500 dark:text-dark-muted">۳</div>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="md:col-span-2 space-y-6">
|
||
<!-- Contact Info -->
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
|
||
<h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:user" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> اطلاعات خریدار</h3>
|
||
<div class="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">نام و نام خانوادگی *</label>
|
||
<input type="text" placeholder="مثلاً: علی محمدی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">شماره موبایل *</label>
|
||
<input type="tel" placeholder="۰۹۱۲۳۴۵۶۷۸۹" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">ایمیل</label>
|
||
<input type="email" placeholder="email@example.com" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">کد ملی</label>
|
||
<input type="text" placeholder="کد ملی ۱۰ رقمی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Address -->
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
|
||
<h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:map-pin" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> آدرس تحویل</h3>
|
||
<div class="grid md:grid-cols-2 gap-4 mb-4">
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">استان *</label>
|
||
<select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none">
|
||
<option>انتخاب استان...</option>
|
||
<option>تهران</option>
|
||
<option>اصفهان</option>
|
||
<option>فارس</option>
|
||
<option>خراسان رضوی</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">شهر *</label>
|
||
<select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none">
|
||
<option>انتخاب شهر...</option>
|
||
<option>تهران</option>
|
||
<option>اصفهان</option>
|
||
<option>شیراز</option>
|
||
<option>مشهد</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4">
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">آدرس کامل *</label>
|
||
<textarea rows="3" placeholder="خیابان، کوچه، پلاک، واحد..." class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted resize-none"></textarea>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">کد پستی *</label>
|
||
<input type="text" placeholder="کد پستی ۱۰ رقمی" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-medium mb-1.5 block text-cream-500 dark:text-dark-muted">تلفن ثابت</label>
|
||
<input type="tel" placeholder="۰۲۱-۱۲۳۴۵۶۷۸" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Payment -->
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50">
|
||
<h3 class="font-bold text-lg mb-5 flex items-center gap-2"><iconify-icon icon="lucide:credit-card" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon> روش پرداخت</h3>
|
||
<div class="space-y-3">
|
||
<label class="flex items-center gap-3 p-4 border-2 border-forest-500 dark:border-forest-300 bg-forest-50 dark:bg-forest-900/20 rounded-xl cursor-pointer">
|
||
<input type="radio" name="payment" checked class="w-4 h-4 text-forest-500">
|
||
<iconify-icon icon="lucide:wallet" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<div class="flex-1"><div class="font-bold text-sm">پرداخت آنلاین (زرینپال)</div><div class="text-xs text-cream-500 dark:text-dark-muted">پرداخت امن با تمامی کارتهای بانکی</div></div>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-4 border-2 border-cream-200 dark:border-dark-border rounded-xl cursor-pointer hover:border-forest-300 transition">
|
||
<input type="radio" name="payment" class="w-4 h-4 text-forest-500">
|
||
<iconify-icon icon="lucide:smartphone" width="20" class="text-cream-400"></iconify-icon>
|
||
<div class="flex-1"><div class="font-bold text-sm">پرداخت آنلاین (آیدیپی)</div><div class="text-xs text-cream-500 dark:text-dark-muted">درگاه پرداخت آیدیپی</div></div>
|
||
</label>
|
||
<label class="flex items-center gap-3 p-4 border-2 border-cream-200 dark:border-dark-border rounded-xl cursor-pointer hover:border-forest-300 transition">
|
||
<input type="radio" name="payment" class="w-4 h-4 text-forest-500">
|
||
<iconify-icon icon="lucide:banknote" width="20" class="text-cream-400"></iconify-icon>
|
||
<div class="flex-1"><div class="font-bold text-sm">پرداخت در محل</div><div class="text-xs text-cream-500 dark:text-dark-muted">فقط برای تهران و حومه</div></div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Order Summary -->
|
||
<div>
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl p-6 border border-cream-200/50 dark:border-dark-border/50 sticky top-32">
|
||
<h3 class="font-bold text-lg mb-5">خلاصه سفارش</h3>
|
||
<div id="checkout-items" class="space-y-3 mb-5 max-h-60 overflow-y-auto"></div>
|
||
<div class="border-t border-cream-200 dark:border-dark-border pt-4 space-y-2">
|
||
<div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">جمع کالاها</span><span id="checkout-subtotal">۰ تومان</span></div>
|
||
<div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">هزینه ارسال</span><span class="text-forest-500 dark:text-forest-300">رایگان</span></div>
|
||
<div class="flex justify-between text-sm"><span class="text-cream-500 dark:text-dark-muted">تخفیف</span><span class="text-red-500" id="checkout-discount">۰ تومان</span></div>
|
||
<div class="border-t border-cream-200 dark:border-dark-border pt-3 flex justify-between font-bold text-lg">
|
||
<span>مبلغ قابل پرداخت</span>
|
||
<span id="checkout-total" class="text-forest-500 dark:text-forest-300">۰ تومان</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-2 mt-5">
|
||
<input type="text" placeholder="کد تخفیف..." class="flex-1 px-3 py-2.5 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-xs outline-none focus:border-forest-500 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
<button class="px-4 py-2.5 bg-cream-200 dark:bg-dark-bg text-xs font-bold rounded-xl hover:bg-cream-300 dark:hover:bg-dark-border transition">اعمال</button>
|
||
</div>
|
||
<button onclick="showToast('سفارش شما با موفقیت ثبت شد! 🎉', 'success')" class="w-full mt-5 py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2">
|
||
<iconify-icon icon="lucide:lock" width="16"></iconify-icon>
|
||
<span>پرداخت امن</span>
|
||
</button>
|
||
<p class="text-[10px] text-cream-400 dark:text-dark-muted text-center mt-3">با ثبت سفارش، قوانین و مقررات مطیب را میپذیرید.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CONTACT SECTION ===== -->
|
||
<section id="contact" class="py-16 md:py-24 bg-white dark:bg-dark-card">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="text-center mb-12">
|
||
<span class="text-xs font-medium text-honey-400 tracking-wider font-inter">CONTACT</span>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold mt-2">تماس با ما</h2>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 gap-12">
|
||
<div>
|
||
<div class="space-y-6">
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-12 h-12 bg-forest-50 dark:bg-forest-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<iconify-icon icon="lucide:map-pin" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div><div class="font-bold mb-1">آدرس</div><p class="text-sm text-cream-500 dark:text-dark-muted">تهران، خیابان ولیعصر، بالاتر از میدان ونک، پلاک ۱۲۳</p></div>
|
||
</div>
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-12 h-12 bg-honey-50 dark:bg-honey-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<iconify-icon icon="lucide:phone" width="22" class="text-honey-400"></iconify-icon>
|
||
</div>
|
||
<div><div class="font-bold mb-1">تلفن</div><p class="text-sm text-cream-500 dark:text-dark-muted">۰۲۱-۱۲۳۴۵۶۷۸</p><p class="text-sm text-cream-500 dark:text-dark-muted">۰۹۱۲-۳۴۵-۶۷۸۹</p></div>
|
||
</div>
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-12 h-12 bg-blue-50 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<iconify-icon icon="lucide:mail" width="22" class="text-blue-500"></iconify-icon>
|
||
</div>
|
||
<div><div class="font-bold mb-1">ایمیل</div><p class="text-sm text-cream-500 dark:text-dark-muted font-inter" dir="ltr">info@motayeb.ir</p></div>
|
||
</div>
|
||
<div class="flex items-start gap-4">
|
||
<div class="w-12 h-12 bg-emerald-50 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||
<iconify-icon icon="lucide:clock" width="22" class="text-emerald-500"></iconify-icon>
|
||
</div>
|
||
<div><div class="font-bold mb-1">ساعت کاری</div><p class="text-sm text-cream-500 dark:text-dark-muted">شنبه تا پنجشنبه: ۹ صبح تا ۶ عصر</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 mt-8">
|
||
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:instagram" width="20"></iconify-icon></a>
|
||
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:send" width="20"></iconify-icon></a>
|
||
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:twitter" width="20"></iconify-icon></a>
|
||
<a href="#" class="w-10 h-10 bg-cream-100 dark:bg-dark-bg rounded-xl flex items-center justify-center hover:bg-forest-50 dark:hover:bg-forest-900/30 hover:text-forest-500 transition"><iconify-icon icon="lucide:youtube" width="20"></iconify-icon></a>
|
||
</div>
|
||
</div>
|
||
<form onsubmit="handleContact(event)" class="space-y-4">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<input type="text" placeholder="نام *" required class="px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
<input type="text" placeholder="نام خانوادگی *" required class="px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
</div>
|
||
<input type="email" placeholder="ایمیل *" required class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted font-inter" dir="ltr">
|
||
<input type="tel" placeholder="شماره تماس" class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted">
|
||
<select class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition appearance-none text-cream-500 dark:text-dark-muted">
|
||
<option>موضوع پیام...</option>
|
||
<option>سوال درباره محصولات</option>
|
||
<option>پیگیری سفارش</option>
|
||
<option>پیشنهاد همکاری</option>
|
||
<option>شکایات</option>
|
||
</select>
|
||
<textarea rows="4" placeholder="متن پیام..." required class="w-full px-4 py-3 bg-cream-50 dark:bg-dark-bg border border-cream-200 dark:border-dark-border rounded-xl text-sm outline-none focus:border-forest-500 dark:focus:border-forest-300 transition placeholder:text-cream-400 dark:placeholder:text-dark-muted resize-none"></textarea>
|
||
<button type="submit" class="w-full py-3.5 bg-forest-500 text-white rounded-2xl font-bold hover:bg-forest-600 transition flex items-center justify-center gap-2">
|
||
<iconify-icon icon="lucide:send" width="18"></iconify-icon>
|
||
<span>ارسال پیام</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ===== FOOTER ===== -->
|
||
<footer class="bg-forest-500 dark:bg-forest-800 text-white">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-16">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||
<!-- Brand -->
|
||
<div class="col-span-2 md:col-span-1">
|
||
<div class="flex items-center gap-2.5 mb-5">
|
||
<div class="w-10 h-10 bg-white/10 rounded-2xl flex items-center justify-center">
|
||
<iconify-icon icon="lucide:leaf" width="20" class="text-honey-300"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<span class="font-extrabold text-xl">مطیب</span>
|
||
<span class="block text-[9px] text-white/50 font-inter tracking-widest">MOTAYEB</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-white/70 text-sm leading-relaxed mb-5">ارائهدهنده محصولات ارگانیک و طبیعی ایرانی با ضمانت اصالت و کیفیت.</p>
|
||
<div class="flex gap-3">
|
||
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:instagram" width="18"></iconify-icon></a>
|
||
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:send" width="18"></iconify-icon></a>
|
||
<a href="#" class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center hover:bg-white/20 transition"><iconify-icon icon="lucide:twitter" width="18"></iconify-icon></a>
|
||
</div>
|
||
</div>
|
||
<!-- Quick Links -->
|
||
<div>
|
||
<h4 class="font-bold mb-5">دسترسی سریع</h4>
|
||
<ul class="space-y-3 text-sm text-white/70">
|
||
<li><a href="#home" class="hover:text-honey-300 transition">صفحه اصلی</a></li>
|
||
<li><a href="#shop" class="hover:text-honey-300 transition">فروشگاه</a></li>
|
||
<li><a href="#about" class="hover:text-honey-300 transition">درباره ما</a></li>
|
||
<li><a href="#blog" class="hover:text-honey-300 transition">مجله سلامت</a></li>
|
||
<li><a href="#contact" class="hover:text-honey-300 transition">تماس با ما</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Categories -->
|
||
<div>
|
||
<h4 class="font-bold mb-5">دستهبندیها</h4>
|
||
<ul class="space-y-3 text-sm text-white/70">
|
||
<li><a href="#" class="hover:text-honey-300 transition">عسل طبیعی</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">ارده و حلوا</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">سرکه و ترشی</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">دمنوش گیاهی</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">خشکبار و آجیل</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Customer Service -->
|
||
<div>
|
||
<h4 class="font-bold mb-5">خدمات مشتریان</h4>
|
||
<ul class="space-y-3 text-sm text-white/70">
|
||
<li><a href="#" class="hover:text-honey-300 transition">سوالات متداول</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">شرایط بازگشت</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">نحوه ارسال</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">حریم خصوصی</a></li>
|
||
<li><a href="#" class="hover:text-honey-300 transition">قوانین و مقررات</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Bottom Bar -->
|
||
<div class="border-t border-white/10">
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<p class="text-xs text-white/50">© ۱۴۰۳ مطیب. تمامی حقوق محفوظ است.</p>
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:shield-check" width="14" class="text-honey-300"></iconify-icon> نماد اعتماد</div>
|
||
<div class="flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-lg text-xs"><iconify-icon icon="lucide:badge-check" width="14" class="text-honey-300"></iconify-icon> ساماندهی</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ===== MOBILE BOTTOM NAV ===== -->
|
||
<nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border-t border-cream-200 dark:border-dark-border bottom-nav">
|
||
<div class="flex items-center justify-around py-2">
|
||
<a href="#home" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-forest-500 dark:text-forest-300">
|
||
<iconify-icon icon="lucide:home" width="22"></iconify-icon>
|
||
<span class="text-[10px] font-medium">خانه</span>
|
||
</a>
|
||
<a href="#shop" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
|
||
<iconify-icon icon="lucide:grid-3x3" width="22"></iconify-icon>
|
||
<span class="text-[10px] font-medium">دستهبندی</span>
|
||
</a>
|
||
<button onclick="openCart()" class="relative flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
|
||
<iconify-icon icon="lucide:shopping-bag" width="22"></iconify-icon>
|
||
<span class="text-[10px] font-medium">سبد خرید</span>
|
||
<span id="mobile-cart-count" class="absolute -top-0.5 right-1 w-4 h-4 bg-honey-400 text-white text-[9px] font-bold rounded-full flex items-center justify-center hidden">0</span>
|
||
</button>
|
||
<button onclick="openMobileMenu()" class="flex flex-col items-center gap-0.5 px-3 py-1.5 text-cream-500 dark:text-dark-muted">
|
||
<iconify-icon icon="lucide:user" width="22"></iconify-icon>
|
||
<span class="text-[10px] font-medium">حساب من</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Spacer for mobile nav -->
|
||
<div class="md:hidden h-16"></div>
|
||
|
||
<script>
|
||
// ===== DATA =====
|
||
const products = [
|
||
{ id:1, name:'عسل طبیعی کوهستان', price:295000, oldPrice:369000, img:'honey-mountain-jar', category:'عسل', badge:'ارگانیک', discount:true, rating:4.9, reviews:128 },
|
||
{ id:2, name:'ارده کنجد سنتی', price:185000, oldPrice:null, img:'sesame-paste-tahini', category:'ارده', badge:null, discount:false, rating:4.8, reviews:89 },
|
||
{ id:3, name:'سرکه انگور طبیعی', price:125000, oldPrice:155000, img:'grape-vinegar-glass', category:'سرکه', badge:'طبیعی', discount:true, rating:4.7, reviews:56 },
|
||
{ id:4, name:'دمنوش بابونه و اسطوخودوس', price:89000, oldPrice:null, img:'chamomile-lavender-tea', category:'دمنوش', badge:'ویژه', discount:false, rating:4.9, reviews:203 },
|
||
{ id:5, name:'آجیل مخلوط لوکس', price:385000, oldPrice:450000, img:'mixed-nuts-luxury', category:'آجیل', badge:'پرفروش', discount:true, rating:4.8, reviews:167 },
|
||
{ id:6, name:'عسل آویشن و گون', price:345000, oldPrice:null, img:'thyme-honey-jar', category:'عسل', badge:'ارگانیک', discount:false, rating:4.9, reviews:94 },
|
||
{ id:7, name:'شیره خرما طبیعی', price:95000, oldPrice:120000, img:'date-syrup-bottle', category:'شیره', badge:null, discount:true, rating:4.6, reviews:45 },
|
||
{ id:8, name:'روغن زیتون فرابکر', price:275000, oldPrice:null, img:'olive-oil-bottle-premium', category:'روغن', badge:'فرابکر', discount:false, rating:4.8, reviews:112 },
|
||
];
|
||
|
||
let cart = [];
|
||
let selectedWeightPrice = 295000;
|
||
|
||
// ===== RENDER PRODUCTS =====
|
||
function renderProducts() {
|
||
const grid = document.getElementById('products-grid');
|
||
grid.innerHTML = products.map(p => `
|
||
<div class="product-card group bg-cream-50 dark:bg-dark-bg rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all">
|
||
<div class="relative overflow-hidden">
|
||
<img src="https://picsum.photos/seed/${p.img}/400/400.jpg" alt="${p.name}" class="product-img w-full h-48 md:h-56 object-cover">
|
||
<div class="absolute top-3 right-3 flex flex-col gap-1.5">
|
||
${p.badge ? `<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">${p.badge}</span>` : ''}
|
||
${p.discount ? `<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">${Math.round((1-p.price/p.oldPrice)*100)}٪</span>` : ''}
|
||
</div>
|
||
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
|
||
<button onclick="quickAddToCart(${p.id})" class="flex-1 py-2.5 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl text-xs font-bold hover:bg-forest-500 hover:text-white transition flex items-center justify-center gap-1">
|
||
<iconify-icon icon="lucide:shopping-bag" width="14"></iconify-icon> افزودن
|
||
</button>
|
||
<button onclick="toggleWishlist(this)" class="w-10 h-10 bg-white/90 dark:bg-dark-card/90 backdrop-blur rounded-xl flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition">
|
||
<iconify-icon icon="lucide:heart" width="16"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="flex items-center gap-1 mb-2">
|
||
<span class="text-honey-400 text-xs">★</span>
|
||
<span class="text-xs font-medium">${p.rating}</span>
|
||
<span class="text-xs text-cream-400 dark:text-dark-muted">(${p.reviews})</span>
|
||
</div>
|
||
<h3 class="font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">${p.name}</h3>
|
||
<div class="flex items-end gap-2">
|
||
<span class="font-extrabold text-forest-500 dark:text-forest-300">${formatPrice(p.price)}</span>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted mb-0.5">تومان</span>
|
||
${p.oldPrice ? `<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5">${formatPrice(p.oldPrice)}</span>` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function formatPrice(n) {
|
||
return n.toLocaleString('fa-IR');
|
||
}
|
||
|
||
// ===== CART FUNCTIONS =====
|
||
function quickAddToCart(id) {
|
||
const p = products.find(x => x.id === id);
|
||
if (!p) return;
|
||
const existing = cart.find(x => x.id === id);
|
||
if (existing) { existing.qty++; }
|
||
else { cart.push({ ...p, qty: 1 }); }
|
||
updateCartUI();
|
||
showToast(`${p.name} به سبد خرید اضافه شد`, 'success');
|
||
}
|
||
|
||
function addToCartDetail() {
|
||
const qty = parseInt(document.getElementById('product-qty').textContent);
|
||
const existing = cart.find(x => x.id === 1);
|
||
if (existing) { existing.qty += qty; }
|
||
else { cart.push({ id:1, name:'عسل طبیعی کوهستان', price:selectedWeightPrice, img:'honey-golden-jar', qty }); }
|
||
updateCartUI();
|
||
showToast('عسل طبیعی کوهستان به سبد خرید اضافه شد', 'success');
|
||
}
|
||
|
||
function removeFromCart(id) {
|
||
cart = cart.filter(x => x.id !== id);
|
||
updateCartUI();
|
||
}
|
||
|
||
function updateCartQty(id, delta) {
|
||
const item = cart.find(x => x.id === id);
|
||
if (!item) return;
|
||
item.qty += delta;
|
||
if (item.qty <= 0) { removeFromCart(id); return; }
|
||
updateCartUI();
|
||
}
|
||
|
||
function updateCartUI() {
|
||
const count = cart.reduce((s, i) => s + i.qty, 0);
|
||
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
|
||
|
||
// Badge
|
||
['cart-count', 'mobile-cart-count'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (count > 0) { el.textContent = count; el.classList.remove('hidden'); }
|
||
else { el.classList.add('hidden'); }
|
||
});
|
||
|
||
// Drawer count
|
||
document.getElementById('cart-drawer-count').textContent = count;
|
||
|
||
// Drawer items
|
||
const listEl = document.getElementById('cart-items-list');
|
||
const emptyEl = document.getElementById('cart-empty');
|
||
const footerEl = document.getElementById('cart-drawer-footer');
|
||
|
||
if (cart.length === 0) {
|
||
listEl.classList.add('hidden');
|
||
emptyEl.classList.remove('hidden');
|
||
footerEl.classList.add('hidden');
|
||
} else {
|
||
listEl.classList.remove('hidden');
|
||
emptyEl.classList.add('hidden');
|
||
footerEl.classList.remove('hidden');
|
||
document.getElementById('cart-drawer-total').textContent = formatPrice(total) + ' تومان';
|
||
|
||
listEl.innerHTML = cart.map(i => `
|
||
<div class="flex gap-3 bg-cream-50 dark:bg-dark-bg rounded-xl p-3">
|
||
<img src="https://picsum.photos/seed/${i.img}/100/100.jpg" class="w-16 h-16 rounded-lg object-cover flex-shrink-0">
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="font-bold text-sm line-clamp-1">${i.name}</h4>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted mt-0.5">${formatPrice(i.price)} تومان</div>
|
||
<div class="flex items-center justify-between mt-2">
|
||
<div class="flex items-center border border-cream-200 dark:border-dark-border rounded-lg overflow-hidden">
|
||
<button onclick="updateCartQty(${i.id},-1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:minus" width="12"></iconify-icon></button>
|
||
<span class="w-8 h-7 flex items-center justify-center text-xs font-bold border-x border-cream-200 dark:border-dark-border">${i.qty}</span>
|
||
<button onclick="updateCartQty(${i.id},1)" class="w-7 h-7 flex items-center justify-center hover:bg-cream-200 dark:hover:bg-dark-card transition text-xs"><iconify-icon icon="lucide:plus" width="12"></iconify-icon></button>
|
||
</div>
|
||
<button onclick="removeFromCart(${i.id})" class="text-red-400 hover:text-red-500 transition"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
// Checkout
|
||
const checkoutItems = document.getElementById('checkout-items');
|
||
if (checkoutItems) {
|
||
if (cart.length === 0) {
|
||
checkoutItems.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-4">سبد خرید خالی است</p>';
|
||
} else {
|
||
checkoutItems.innerHTML = cart.map(i => `
|
||
<div class="flex items-center gap-3">
|
||
<img src="https://picsum.photos/seed/${i.img}/60/60.jpg" class="w-12 h-12 rounded-lg object-cover">
|
||
<div class="flex-1 min-w-0">
|
||
<div class="text-sm font-medium line-clamp-1">${i.name}</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">${i.qty} عدد</div>
|
||
</div>
|
||
<div class="text-sm font-bold whitespace-nowrap">${formatPrice(i.price * i.qty)}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
document.getElementById('checkout-subtotal').textContent = formatPrice(total) + ' تومان';
|
||
document.getElementById('checkout-total').textContent = formatPrice(total) + ' تومان';
|
||
}
|
||
}
|
||
|
||
// ===== UI TOGGLES =====
|
||
function openSearch() {
|
||
document.getElementById('search-overlay').classList.remove('hidden');
|
||
setTimeout(() => document.getElementById('search-input').focus(), 100);
|
||
}
|
||
function closeSearch() {
|
||
document.getElementById('search-overlay').classList.add('hidden');
|
||
document.getElementById('search-input').value = '';
|
||
document.getElementById('search-results').innerHTML = '';
|
||
document.getElementById('search-suggestions').classList.remove('hidden');
|
||
}
|
||
function openCart() { document.getElementById('cart-drawer').classList.remove('hidden'); }
|
||
function closeCart() { document.getElementById('cart-drawer').classList.add('hidden'); }
|
||
function openMobileMenu() { document.getElementById('mobile-menu').classList.remove('hidden'); }
|
||
function closeMobileMenu() { document.getElementById('mobile-menu').classList.add('hidden'); }
|
||
|
||
// ===== DARK MODE =====
|
||
function toggleDark() { document.documentElement.classList.toggle('dark'); }
|
||
|
||
// ===== SEARCH =====
|
||
function handleSearch(val) {
|
||
const results = document.getElementById('search-results');
|
||
const suggestions = document.getElementById('search-suggestions');
|
||
if (val.length < 2) { results.innerHTML = ''; suggestions.classList.remove('hidden'); return; }
|
||
suggestions.classList.add('hidden');
|
||
const filtered = products.filter(p => p.name.includes(val) || p.category.includes(val));
|
||
if (filtered.length === 0) {
|
||
results.innerHTML = '<p class="text-sm text-cream-500 dark:text-dark-muted text-center py-6">محصولی یافت نشد</p>';
|
||
} else {
|
||
results.innerHTML = filtered.map(p => `
|
||
<button onclick="closeSearch()" class="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-cream-50 dark:hover:bg-dark-bg transition text-right">
|
||
<img src="https://picsum.photos/seed/${p.img}/60/60.jpg" class="w-12 h-12 rounded-lg object-cover">
|
||
<div class="flex-1">
|
||
<div class="font-bold text-sm">${p.name}</div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted">${p.category}</div>
|
||
</div>
|
||
<div class="text-sm font-bold text-forest-500 dark:text-forest-300">${formatPrice(p.price)}</div>
|
||
</button>
|
||
`).join('');
|
||
}
|
||
}
|
||
|
||
// ===== PRODUCT DETAIL =====
|
||
function changeImage(seed, btn) {
|
||
document.getElementById('main-product-img').src = `https://picsum.photos/seed/${seed}/600/600.jpg`;
|
||
document.querySelectorAll('.gallery-thumb').forEach(t => t.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
}
|
||
|
||
function selectWeight(btn, price) {
|
||
document.querySelectorAll('.weight-btn').forEach(b => {
|
||
b.classList.remove('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
|
||
b.classList.add('border-cream-200', 'dark:border-dark-border');
|
||
});
|
||
btn.classList.add('active', 'border-forest-500', 'dark:border-forest-300', 'bg-forest-50', 'dark:bg-forest-900/30', 'text-forest-500', 'dark:text-forest-300');
|
||
btn.classList.remove('border-cream-200', 'dark:border-dark-border');
|
||
selectedWeightPrice = price;
|
||
document.getElementById('product-price').textContent = formatPrice(price);
|
||
}
|
||
|
||
function changeQty(delta) {
|
||
const el = document.getElementById('product-qty');
|
||
let val = parseInt(el.textContent) + delta;
|
||
if (val < 1) val = 1;
|
||
if (val > 10) val = 10;
|
||
el.textContent = val;
|
||
}
|
||
|
||
function switchTab(tabId, btn) {
|
||
document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
|
||
document.querySelectorAll('.tab-btn').forEach(b => { b.classList.remove('tab-active'); b.classList.add('text-cream-500', 'dark:text-dark-muted'); });
|
||
document.getElementById('tab-' + tabId).classList.remove('hidden');
|
||
btn.classList.add('tab-active');
|
||
btn.classList.remove('text-cream-500', 'dark:text-dark-muted');
|
||
}
|
||
|
||
// ===== WISHLIST =====
|
||
function toggleWishlist(btn) {
|
||
const icon = btn.querySelector('iconify-icon');
|
||
if (icon.getAttribute('icon') === 'lucide:heart') {
|
||
icon.setAttribute('icon', 'lucide:heart');
|
||
icon.style.color = '#ef4444';
|
||
icon.style.fill = '#ef4444';
|
||
showToast('به علاقهمندیها اضافه شد', 'info');
|
||
} else {
|
||
icon.style.color = '';
|
||
icon.style.fill = '';
|
||
showToast('از علاقهمندیها حذف شد', 'info');
|
||
}
|
||
}
|
||
|
||
// ===== TOAST =====
|
||
function showToast(msg, type = 'info') {
|
||
const container = document.getElementById('toast-container');
|
||
const colors = { success: 'bg-forest-500', info: 'bg-earth-400', error: 'bg-red-500' };
|
||
const icons = { success: 'lucide:check-circle', info: 'lucide:info', error: 'lucide:alert-circle' };
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast flex items-center gap-3 px-5 py-3 ${colors[type]} text-white rounded-2xl shadow-xl text-sm font-medium`;
|
||
toast.innerHTML = `<iconify-icon icon="${icons[type]}" width="20"></iconify-icon><span>${msg}</span>`;
|
||
container.appendChild(toast);
|
||
setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(() => toast.remove(), 300); }, 3000);
|
||
}
|
||
|
||
// ===== FORMS =====
|
||
function handleNewsletter(e) {
|
||
e.preventDefault();
|
||
const email = document.getElementById('newsletter-email').value;
|
||
showToast(`${email} با موفقیت ثبت شد!`, 'success');
|
||
document.getElementById('newsletter-email').value = '';
|
||
}
|
||
|
||
function handleContact(e) {
|
||
e.preventDefault();
|
||
showToast('پیام شما با موفقیت ارسال شد. به زودی پاسخ میدهیم.', 'success');
|
||
e.target.reset();
|
||
}
|
||
|
||
function goToCheckout() {
|
||
closeCart();
|
||
document.getElementById('checkout').scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
|
||
function toggleLang() {
|
||
showToast('نسخه انگلیسی به زودی اضافه میشود', 'info');
|
||
}
|
||
|
||
// ===== HEADER SCROLL =====
|
||
let lastScroll = 0;
|
||
window.addEventListener('scroll', () => {
|
||
const header = document.getElementById('header');
|
||
const scroll = window.scrollY;
|
||
if (scroll > 100) {
|
||
header.classList.add('shadow-lg');
|
||
} else {
|
||
header.classList.remove('shadow-lg');
|
||
}
|
||
lastScroll = scroll;
|
||
});
|
||
|
||
// ===== KEYBOARD =====
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') { closeSearch(); closeCart(); closeMobileMenu(); }
|
||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openSearch(); }
|
||
});
|
||
|
||
// ===== INIT =====
|
||
renderProducts();
|
||
updateCartUI();
|
||
</script>
|
||
</body>
|
||
</html> |