f408faac54
Initialize the base WordPress theme files, including core template hierarchy (index, page, single, archive, 404), WooCommerce template overrides, and essential asset directories.
319 lines
22 KiB
PHP
319 lines
22 KiB
PHP
<?php
|
||
/**
|
||
* Template Name: صفحه اصلی مطیب
|
||
*/
|
||
get_header();
|
||
?>
|
||
|
||
<main class="pt-16 md:pt-[104px]">
|
||
|
||
<!-- ===== HERO ===== -->
|
||
<section class="relative overflow-hidden honeycomb-bg">
|
||
<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">
|
||
<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 rounded-full animate-pulse"></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">
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$hero_title = get_field('hero_title');
|
||
if ($hero_title) {
|
||
echo wp_kses_post($hero_title);
|
||
} else { ?>
|
||
<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>
|
||
<?php }
|
||
} else { ?>
|
||
<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>
|
||
<?php } ?>
|
||
</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">
|
||
<?php echo function_exists('get_field') ? esc_html(get_field('hero_subtitle') ?: 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.') : 'از عسل کوهستان تا ارده سنتی، هر محصول مطیب سفری به دل طبیعت ایران است.'; ?>
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-start">
|
||
<a href="<?php echo get_permalink( wc_get_page_id( '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><?php echo esc_html(function_exists('get_field') ? (get_field('hero_btn_text') ?: 'مشاهده محصولات') : 'مشاهده محصولات'); ?></span>
|
||
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
|
||
</a>
|
||
<a href="#brand-story" 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>
|
||
|
||
<!-- Stats -->
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$stats = get_field('stats');
|
||
if (is_array($stats) && count($stats) > 0): ?>
|
||
<div class="flex items-center gap-6 mt-10 justify-center md:justify-start">
|
||
<?php foreach($stats as $i => $stat): ?>
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-forest-500 dark:text-forest-300"><?php echo esc_html($stat['number']); ?></div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($stat['label']); ?></div>
|
||
</div>
|
||
<?php if($i < count($stats)-1) echo '<div class="w-px h-10 bg-cream-200 dark:bg-dark-border"></div>'; ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif;
|
||
} ?>
|
||
</div>
|
||
|
||
<!-- Hero Image -->
|
||
<div class="relative">
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$hero_img = get_field('hero_image');
|
||
if (is_array($hero_img) && isset($hero_img['url'])): ?>
|
||
<div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-forest-500/10">
|
||
<img src="<?php echo esc_url($hero_img['url']); ?>" alt="<?php echo esc_attr($hero_img['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>
|
||
<?php else: ?>
|
||
<div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
|
||
<div class="text-center p-6">
|
||
<iconify-icon icon="lucide:image-plus" width="48" class="text-cream-400 dark:text-dark-muted mb-3"></iconify-icon>
|
||
<p class="text-sm text-cream-400 dark:text-dark-muted">لطفاً از تنظیمات صفحه، تصویر هیرو را آپلود کنید.</p>
|
||
</div>
|
||
</div>
|
||
<?php endif;
|
||
} else { ?>
|
||
<div class="relative rounded-3xl overflow-hidden shadow-2xl bg-cream-200 dark:bg-dark-card h-[350px] md:h-[500px] flex items-center justify-center">
|
||
<p class="text-sm text-cream-400">پلاگین ACF فعال نیست.</p>
|
||
</div>
|
||
<?php } ?>
|
||
|
||
<!-- Floating Card -->
|
||
<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 hidden md:block">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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 ===== -->
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$categories = get_field('home_categories');
|
||
if (is_array($categories) && count($categories) > 0): ?>
|
||
<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">
|
||
<?php foreach($categories as $cat):
|
||
$color_map = array('honey'=>'honey', 'forest'=>'forest', 'red'=>'red', 'emerald'=>'emerald', 'amber'=>'amber');
|
||
$c = $color_map[$cat['color']] ?? 'forest';
|
||
?>
|
||
<a href="<?php echo esc_url($cat['link']); ?>" 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-<?php echo $c; ?>-50 dark:bg-<?php echo $c; ?>-900/20 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="<?php echo esc_attr($cat['icon']); ?>" width="32" class="text-<?php echo $c; ?>-500 dark:text-<?php echo $c; ?>-300"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1"><?php echo esc_html($cat['title']); ?></h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($cat['count']); ?></span>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php endif;
|
||
} ?>
|
||
|
||
<!-- ===== BESTSELLERS ===== -->
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$bestseller_ids = get_field('bestseller_ids');
|
||
if (is_array($bestseller_ids) && count($bestseller_ids) > 0): ?>
|
||
<section 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="<?php echo get_permalink( wc_get_page_id( '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">
|
||
<?php foreach( $bestseller_ids as $product_id ):
|
||
$product = wc_get_product( $product_id );
|
||
if ( ! $product ) continue;
|
||
?>
|
||
<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">
|
||
<a href="<?php echo get_permalink($product_id); ?>" class="block relative overflow-hidden">
|
||
<img src="<?php echo wp_get_attachment_image_url( $product->get_image_id(), 'medium' ); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" class="product-img w-full h-48 md:h-56 object-cover">
|
||
<?php if( $product->is_on_sale() ): ?>
|
||
<div class="absolute top-3 right-3"><span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">تخفیف</span></div>
|
||
<?php endif; ?>
|
||
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
|
||
<a href="<?php echo esc_url($product->add_to_cart_url()); ?>" 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> افزودن
|
||
</a>
|
||
</div>
|
||
</a>
|
||
<div class="p-4">
|
||
<a href="<?php echo get_permalink($product_id); ?>" class="block font-bold text-sm line-clamp-2 mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php echo $product->get_name(); ?></a>
|
||
<div class="flex items-end gap-2">
|
||
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo $product->get_price_html(); ?></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php endif;
|
||
} ?>
|
||
|
||
<!-- ===== BRAND STORY ===== -->
|
||
<?php
|
||
if ( function_exists('get_field') && get_field('story_title') ): ?>
|
||
<section id="brand-story" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg relative overflow-hidden">
|
||
<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">
|
||
<?php $story_img = get_field('story_image'); if(is_array($story_img) && isset($story_img['url'])): ?>
|
||
<div class="rounded-3xl overflow-hidden shadow-xl">
|
||
<img src="<?php echo esc_url($story_img['url']); ?>" alt="<?php echo esc_attr($story_img['alt'] ?? ''); ?>" class="w-full h-[350px] md:h-[450px] object-cover">
|
||
</div>
|
||
<?php endif; ?>
|
||
</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"><?php echo esc_html(get_field('story_title')); ?></h2>
|
||
<p class="text-cream-500 dark:text-dark-muted leading-relaxed mb-6"><?php echo esc_html(get_field('story_text')); ?></p>
|
||
|
||
<?php $values = get_field('story_values'); if(is_array($values) && count($values) > 0): ?>
|
||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||
<?php foreach($values as $val): ?>
|
||
<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="<?php echo esc_attr($val['icon']); ?>" width="20" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<div class="font-bold text-sm mb-0.5"><?php echo esc_html($val['title']); ?></div>
|
||
<div class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html($val['desc']); ?></div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php $badges = get_field('certificates'); if(is_array($badges) && count($badges) > 0): ?>
|
||
<div class="flex items-center gap-3 flex-wrap">
|
||
<?php foreach($badges as $badge): ?>
|
||
<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><?php echo esc_html($badge['text']); ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?>
|
||
|
||
<!-- ===== TESTIMONIALS ===== -->
|
||
<?php
|
||
if ( function_exists('get_field') ) {
|
||
$testimonials = get_field('testimonials');
|
||
if (is_array($testimonials) && count($testimonials) > 0): ?>
|
||
<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">
|
||
<?php foreach($testimonials as $test): ?>
|
||
<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">«<?php echo esc_html($test['text']); ?>»</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"><?php echo esc_html($test['initials']); ?></div>
|
||
<div>
|
||
<div class="font-bold text-sm text-white"><?php echo esc_html($test['name']); ?></div>
|
||
<div class="text-xs text-white/60"><?php echo esc_html($test['city']); ?></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php endif;
|
||
} ?>
|
||
|
||
<!-- ===== NEWSLETTER ===== -->
|
||
<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"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_title') ?: 'از تخفیفها باخبر شوید') : 'از تخفیفها باخبر شوید'); ?></h2>
|
||
<p class="text-cream-500 dark:text-dark-muted mb-8"><?php echo esc_html(function_exists('get_field') ? (get_field('newsletter_text') ?: 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.') : 'با عضویت در خبرنامه، از جدیدترین محصولات مطلع شوید.'); ?></p>
|
||
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
|
||
<input type="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 transition placeholder:text-cream-400">
|
||
<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"><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"><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"><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"><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>
|
||
|
||
</main>
|
||
|
||
<?php get_footer(); ?>
|