c06ab0b8a2
Implement a complete overhaul of the theme templates to match the Kolli UI design, including enhanced WooCommerce support, dark mode functionality, and improved responsive layouts. - Redesign core templates: front-page, archive, single, and product pages - Implement dynamic WooCommerce templates for shop, single product, and checkout - Add comprehensive asset structure including fonts, images, and custom CSS/JS - Integrate Tailwind CSS via CDN with custom configuration for brand colors - Add dark mode support with local storage persistence - Refactor functions.php for better theme setup and script enqueuing - Implement custom product meta fields for ingredients and health benefits - Add responsive design improvements and custom animations
421 lines
26 KiB
PHP
421 lines
26 KiB
PHP
<?php
|
||
/**
|
||
* هدر سایت - مطابق با UI Kolli.html
|
||
*
|
||
* @package Motayeb
|
||
*/
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html <?php language_attributes(); ?> class="scroll-smooth">
|
||
<head>
|
||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<?php wp_head(); ?>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- Iconify -->
|
||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||
<!-- Fonts -->
|
||
<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',
|
||
},
|
||
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' } },
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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; }
|
||
.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; }
|
||
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
|
||
.checkout-step.active { background: #2D5F3F; color: white; }
|
||
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
|
||
.gallery-thumb.active { border-color: #2D5F3F; }
|
||
.dark .gallery-thumb.active { border-color: #6fb88a; }
|
||
|
||
<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; }
|
||
.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; }
|
||
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
|
||
.checkout-step.active { background: #2D5F3F; color: white; }
|
||
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
|
||
.gallery-thumb.active { border-color: #2D5F3F; }
|
||
.dark .gallery-thumb.active { border-color: #6fb88a; }
|
||
|
||
/* ===== استایلدهی ستارههای ووکامرس با FontAwesome ===== */
|
||
.comment-form-rating p.stars {
|
||
direction: rtl;
|
||
margin: 10px 0;
|
||
display: inline-block;
|
||
}
|
||
.comment-form-rating p.stars a {
|
||
font-size: 0 !important;
|
||
display: inline-block;
|
||
width: 1.8rem;
|
||
height: 1.8rem;
|
||
position: relative;
|
||
text-decoration: none;
|
||
margin-left: 5px;
|
||
}
|
||
.comment-form-rating p.stars a::before {
|
||
font-family: 'Font Awesome 6 Free';
|
||
font-weight: 400;
|
||
content: "\f005";
|
||
font-size: 1.8rem;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
color: #ccc;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.comment-form-rating p.stars a:hover::before,
|
||
.comment-form-rating p.stars a.active::before,
|
||
.comment-form-rating p.stars a.selected::before {
|
||
font-weight: 900;
|
||
color: #2D5F3F;
|
||
}
|
||
|
||
/* ============================================================ */
|
||
/* نادیده گرفتن کامل استایلهای ووکامرس با اولویت فوقالعاده بالا */
|
||
/* ============================================================ */
|
||
|
||
.woocommerce form .form-row .input-text,
|
||
.woocommerce form .form-row textarea,
|
||
.woocommerce form .form-row select,
|
||
.select2-container .select2-selection--single,
|
||
#add_payment_method #payment ul.payment_methods li,
|
||
.woocommerce-checkout #payment ul.payment_methods li {
|
||
background-color: #FDFBF7 !important; /* کرم ۵۰ */
|
||
border: 1px solid #EBE3D5 !important; /* کرم ۲۰۰ */
|
||
border-radius: 12px !important;
|
||
color: #734A30 !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
transition: 0.3s ease !important;
|
||
}
|
||
|
||
.woocommerce form .form-row .input-text:focus,
|
||
.woocommerce form .form-row textarea:focus,
|
||
.woocommerce form .form-row select:focus,
|
||
.select2-container .select2-selection--single:focus {
|
||
border-color: #2D5F3F !important;
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
/* دارک مود */
|
||
.dark .woocommerce form .form-row .input-text,
|
||
.dark .woocommerce form .form-row textarea,
|
||
.dark .woocommerce form .form-row select,
|
||
.dark .select2-container .select2-selection--single,
|
||
.dark #add_payment_method #payment ul.payment_methods li,
|
||
.dark .woocommerce-checkout #payment ul.payment_methods li {
|
||
background-color: #1A1D23 !important;
|
||
border-color: #2E333D !important;
|
||
color: #E8E6E3 !important;
|
||
}
|
||
|
||
.dark .woocommerce form .form-row .input-text:focus,
|
||
.dark .woocommerce form .form-row textarea:focus,
|
||
.dark .woocommerce form .form-row select:focus,
|
||
.dark .select2-container .select2-selection--single:focus {
|
||
border-color: #6fb88a !important;
|
||
}
|
||
|
||
/* برچسبها */
|
||
.woocommerce form .form-row label {
|
||
display: block !important;
|
||
font-weight: 700 !important;
|
||
font-size: 14px !important;
|
||
margin-bottom: 8px !important;
|
||
color: #734A30 !important;
|
||
}
|
||
|
||
/* رادیو باتنهای درگاه پرداخت */
|
||
#add_payment_method #payment ul.payment_methods li input[type="radio"],
|
||
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
|
||
accent-color: #2D5F3F !important;
|
||
}
|
||
|
||
/* جدول خلاصه سفارش */
|
||
.woocommerce-checkout-review-order table.shop_table th,
|
||
.woocommerce-checkout-review-order table.shop_table td {
|
||
border-color: #EBE3D5 !important;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body <?php body_class( 'bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300' ); ?>>
|
||
<?php wp_body_open(); ?>
|
||
|
||
<!-- ===== 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">
|
||
<?php
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'menu_class' => 'space-y-1',
|
||
'container' => false,
|
||
'fallback_cb' => false,
|
||
'depth' => 1,
|
||
'walker' => new Motayeb_Mobile_Walker(),
|
||
) );
|
||
?>
|
||
</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="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" 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="<?php echo esc_url( home_url( '/' ) ); ?>" 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">
|
||
<?php
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'menu_class' => 'flex items-center gap-8',
|
||
'container' => false,
|
||
'fallback_cb' => false,
|
||
'depth' => 1,
|
||
'walker' => new Motayeb_Desktop_Walker(),
|
||
) );
|
||
?>
|
||
</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>
|
||
<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" 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>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== MAIN CONTENT ===== -->
|
||
<main class="pt-16 md:pt-[104px]">
|