598 lines
36 KiB
PHP
598 lines
36 KiB
PHP
<?php
|
||
/**
|
||
* صفحه اصلی - مطابق با UI Kolli.html
|
||
*
|
||
* @package Motayeb
|
||
* @version 1.0.1
|
||
*
|
||
* تغییرات نسخه ۱.۰.۱:
|
||
* - guard کامل WooCommerce (بدون fatal error اگه غیرفعال باشه)
|
||
* - transient cache برای bestsellers و categories (بهبود سرعت)
|
||
* - fetchpriority="high" روی تصویر هیرو (بهبود LCP)
|
||
* - loading="lazy" روی تصاویر blog
|
||
* - width/height روی همه تصاویر (جلوگیری از CLS)
|
||
* - Schema.org structured data
|
||
* - aria-label روی sectionها
|
||
* - آیکون/رنگ دستهبندی از term meta قابل تنظیم
|
||
* - شمارش صحیح محصولات شامل زیردستهها
|
||
*/
|
||
|
||
get_header();
|
||
|
||
// تعیین آدرس فروشگاه — با guard ووکامرس
|
||
$shop_url = ( function_exists( 'wc_get_page_id' ) )
|
||
? get_permalink( wc_get_page_id( 'shop' ) )
|
||
: home_url( '/shop' );
|
||
?>
|
||
|
||
<!-- ===== HERO SECTION ===== -->
|
||
<section id="home" class="relative overflow-hidden honeycomb-bg leaf-pattern" aria-label="معرفی فروشگاه">
|
||
<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="<?php echo esc_url( $shop_url ); ?>" 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="<?php echo esc_url( home_url( '/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" role="list">
|
||
<div class="text-center" role="listitem">
|
||
<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" aria-hidden="true"></div>
|
||
<div class="text-center" role="listitem">
|
||
<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" aria-hidden="true"></div>
|
||
<div class="text-center" role="listitem">
|
||
<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">
|
||
<?php
|
||
$hero_image = get_option( 'motayeb_shop_banner', '' );
|
||
$hero_image = $hero_image ? $hero_image : 'https://picsum.photos/seed/organic-honey-jar/700/600.jpg';
|
||
?>
|
||
<img src="<?php echo esc_url( $hero_image ); ?>"
|
||
alt="محصولات ارگانیک مطیب"
|
||
width="700" height="600"
|
||
fetchpriority="high"
|
||
decoding="async"
|
||
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" aria-hidden="true"></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" aria-hidden="true">
|
||
<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" aria-label="دستهبندی محصولات">
|
||
<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
|
||
// استفاده از transient cache برای دستهبندیها
|
||
$categories_cache_key = 'motayeb_home_categories';
|
||
$categories = get_transient( $categories_cache_key );
|
||
if ( false === $categories ) {
|
||
$categories = get_terms( array(
|
||
'taxonomy' => 'product_cat',
|
||
'hide_empty' => false,
|
||
'parent' => 0,
|
||
'number' => 5,
|
||
'orderby' => 'name',
|
||
'order' => 'ASC',
|
||
) );
|
||
if ( ! is_wp_error( $categories ) ) {
|
||
set_transient( $categories_cache_key, $categories, DAY_IN_SECONDS );
|
||
}
|
||
}
|
||
|
||
// آیکون و رنگ پیشفرض — اگه از term meta خونده نشد
|
||
$default_icons = array( 'lucide:hexagon', 'lucide:droplets', 'lucide:flask-round', 'lucide:cup-soda', 'lucide:nut' );
|
||
$default_colors = array(
|
||
'bg-honey-50 dark:bg-honey-900/20 text-honey-400',
|
||
'bg-forest-50 dark:bg-forest-900/20 text-forest-500 dark:text-forest-300',
|
||
'bg-red-50 dark:bg-red-900/20 text-red-400',
|
||
'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-500',
|
||
'bg-amber-50 dark:bg-amber-900/20 text-amber-500',
|
||
);
|
||
$i = 0;
|
||
|
||
if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) :
|
||
foreach ( $categories as $category ) :
|
||
// شمارش محصولات شامل زیردستهها
|
||
$count = motayeb_count_category_products( $category->term_id );
|
||
|
||
// آیکون از term meta یا fallback
|
||
$icon = get_term_meta( $category->term_id, 'motayeb_icon', true );
|
||
if ( empty( $icon ) ) {
|
||
$icon = isset( $default_icons[ $i ] ) ? $default_icons[ $i ] : 'lucide:tag';
|
||
}
|
||
|
||
// رنگ از term meta یا fallback
|
||
$color = get_term_meta( $category->term_id, 'motayeb_color', true );
|
||
if ( empty( $color ) ) {
|
||
$color = isset( $default_colors[ $i ] ) ? $default_colors[ $i ] : 'bg-cream-50 dark:bg-dark-bg text-cream-500';
|
||
}
|
||
?>
|
||
<a href="<?php echo esc_url( get_term_link( $category ) ); ?>" 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 <?php echo esc_attr( $color ); ?> rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<iconify-icon icon="<?php echo esc_attr( $icon ); ?>" width="32"></iconify-icon>
|
||
</div>
|
||
<h3 class="font-bold text-sm mb-1"><?php echo esc_html( $category->name ); ?></h3>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo esc_html( motayeb_fa_count( $count ) ); ?> محصول</span>
|
||
</a>
|
||
<?php
|
||
$i++;
|
||
endforeach;
|
||
else :
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-5">هنوز دستهبندیای ایجاد نشده است.</p>';
|
||
endif;
|
||
?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== BESTSELLERS SECTION ===== -->
|
||
<section id="shop" class="py-16 md:py-24 bg-white dark:bg-dark-card" aria-label="پرفروشترین محصولات">
|
||
<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 esc_url( $shop_url ); ?>" 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
|
||
// استفاده از transient cache برای bestsellers
|
||
$bestsellers_cache_key = 'motayeb_home_bestsellers';
|
||
$bestsellers_ids = get_transient( $bestsellers_cache_key );
|
||
|
||
if ( false === $bestsellers_ids ) {
|
||
$bestsellers_query = new WP_Query( array(
|
||
'post_type' => 'product',
|
||
'post_status' => 'publish',
|
||
'posts_per_page' => 4,
|
||
'meta_key' => 'total_sales',
|
||
'orderby' => 'meta_value_num',
|
||
'order' => 'DESC',
|
||
'fields' => 'ids',
|
||
'meta_query' => array(
|
||
array(
|
||
'key' => '_stock_status',
|
||
'value' => 'instock',
|
||
'compare' => '=',
|
||
),
|
||
),
|
||
) );
|
||
$bestsellers_ids = $bestsellers_query->posts;
|
||
wp_reset_postdata();
|
||
if ( ! empty( $bestsellers_ids ) ) {
|
||
set_transient( $bestsellers_cache_key, $bestsellers_ids, HOUR_IN_SECONDS );
|
||
}
|
||
}
|
||
|
||
if ( ! empty( $bestsellers_ids ) ) :
|
||
$bestsellers = new WP_Query( array(
|
||
'post_type' => 'product',
|
||
'post__in' => $bestsellers_ids,
|
||
'orderby' => 'post__in',
|
||
'posts_per_page' => 4,
|
||
) );
|
||
if ( $bestsellers->have_posts() ) :
|
||
while ( $bestsellers->have_posts() ) : $bestsellers->the_post();
|
||
wc_get_template_part( 'content', 'product' );
|
||
endwhile;
|
||
wp_reset_postdata();
|
||
else :
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">محصولی برای نمایش وجود ندارد.</p>';
|
||
endif;
|
||
else :
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">محصولی برای نمایش وجود ندارد.</p>';
|
||
endif;
|
||
?>
|
||
</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" aria-label="داستان برند">
|
||
<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="مزرعه ارگانیک"
|
||
width="600" height="500"
|
||
loading="lazy"
|
||
decoding="async"
|
||
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>
|
||
|
||
<!-- ===== TESTIMONIALS SECTION ===== -->
|
||
<section class="py-16 md:py-24 bg-forest-500 dark:bg-forest-800 relative overflow-hidden" aria-label="نظرات مشتریان">
|
||
<div class="absolute inset-0 opacity-10 honeycomb-bg" aria-hidden="true"></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
|
||
// تلاش برای خواندن نظرات واقعی ووکامرس از دیتابیس
|
||
$real_testimonials = array();
|
||
if ( class_exists( 'WooCommerce' ) ) {
|
||
$args = array(
|
||
'status' => 'approve',
|
||
'post_status' => 'publish',
|
||
'post_type' => 'product',
|
||
'meta_query' => array(
|
||
array(
|
||
'key' => 'rating',
|
||
'value' => '5',
|
||
'compare' => '>=',
|
||
),
|
||
),
|
||
'number' => 3,
|
||
);
|
||
$comments = get_comments( $args );
|
||
foreach ( $comments as $comment ) {
|
||
$product = wc_get_product( $comment->comment_post_ID );
|
||
$real_testimonials[] = array(
|
||
'name' => $comment->comment_author,
|
||
'city' => get_comment_meta( $comment->comment_ID, 'city', true ) ?: 'ایران',
|
||
'text' => wp_strip_all_tags( $comment->comment_content ),
|
||
'stars' => intval( get_comment_meta( $comment->comment_ID, 'rating', true ) ) ?: 5,
|
||
);
|
||
}
|
||
}
|
||
|
||
// اگه نظرات واقعی نبود، از نمونهها استفاده کن
|
||
if ( empty( $real_testimonials ) ) {
|
||
$real_testimonials = array(
|
||
array(
|
||
'name' => 'زهرا کریمی',
|
||
'city' => 'تهران',
|
||
'text' => 'از وقتی عسل مطیب استفاده میکنیم، دیگه هیچ عسلی برامون قابل قبول نیست. طعم واقعی عسل رو با مطیب شناختیم.',
|
||
'stars' => 5,
|
||
),
|
||
array(
|
||
'name' => 'حسین نوری',
|
||
'city' => 'اصفهان',
|
||
'text' => 'ارده و شیرههای مطیب کیفیت استثنایی دارن. بستهبندی هم بسیار تمیز و بهداشتیه. برای صبحانه عالیه.',
|
||
'stars' => 5,
|
||
),
|
||
array(
|
||
'name' => 'فاطمه موسوی',
|
||
'city' => 'شیراز',
|
||
'text' => 'دمنوشهای گیاهی مطیب واقعاً طبیعین. برخلاف خیلی از برندها، عطر و طعم واقعی گیاهان رو حس میکنی.',
|
||
'stars' => 5,
|
||
),
|
||
);
|
||
}
|
||
|
||
foreach ( $real_testimonials as $t ) :
|
||
$initial = mb_substr( $t['name'], 0, 1 );
|
||
$stars = intval( $t['stars'] );
|
||
?>
|
||
<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" role="img" aria-label="<?php echo esc_attr( $stars ); ?> از ۵ ستاره">
|
||
<?php for ( $s = 0; $s < $stars; $s++ ) : ?>
|
||
<span aria-hidden="true">★</span>
|
||
<?php endfor; ?>
|
||
</div>
|
||
<p class="text-white/90 text-sm leading-relaxed mb-5">«<?php echo esc_html( $t['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( $initial ); ?></div>
|
||
<div>
|
||
<div class="font-bold text-sm text-white"><?php echo esc_html( $t['name'] ); ?></div>
|
||
<div class="text-xs text-white/60"><?php echo esc_html( $t['city'] ); ?></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== BLOG SECTION ===== -->
|
||
<section id="blog" class="py-16 md:py-24 bg-cream-100 dark:bg-dark-bg" aria-label="مجله سلامت">
|
||
<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="<?php echo esc_url( home_url( '/blog' ) ); ?>" 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">
|
||
<?php
|
||
$blog_posts = new WP_Query( array(
|
||
'post_type' => 'post',
|
||
'post_status' => 'publish',
|
||
'posts_per_page' => 3,
|
||
'orderby' => 'date',
|
||
'order' => 'DESC',
|
||
) );
|
||
|
||
if ( $blog_posts->have_posts() ) :
|
||
while ( $blog_posts->have_posts() ) :
|
||
$blog_posts->the_post();
|
||
$categories = get_the_category();
|
||
$cat_name = ! empty( $categories ) ? $categories[0]->name : 'سلامت';
|
||
$cat_color = 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300';
|
||
if ( $cat_name === 'دستور پخت' || $cat_name === 'غذا' ) {
|
||
$cat_color = 'bg-honey-50 dark:bg-honey-900/30 text-honey-400';
|
||
} elseif ( $cat_name === 'سبک زندگی' ) {
|
||
$cat_color = 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500';
|
||
}
|
||
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
|
||
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/600/400.jpg';
|
||
$img_w = $image ? $image[1] : 600;
|
||
$img_h = $image ? $image[2] : 400;
|
||
?>
|
||
<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="<?php echo esc_url( $img_src ); ?>"
|
||
width="<?php echo esc_attr( $img_w ); ?>"
|
||
height="<?php echo esc_attr( $img_h ); ?>"
|
||
loading="lazy"
|
||
decoding="async"
|
||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
alt="<?php the_title_attribute(); ?>">
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex items-center gap-2 mb-3">
|
||
<span class="px-2.5 py-0.5 <?php echo esc_attr( $cat_color ); ?> text-xs rounded-full font-medium"><?php echo esc_html( $cat_name ); ?></span>
|
||
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></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">
|
||
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
||
</h3>
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2"><?php echo wp_trim_words( get_the_excerpt(), 10, '...' ); ?></p>
|
||
</div>
|
||
</article>
|
||
<?php
|
||
endwhile;
|
||
wp_reset_postdata();
|
||
else :
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-3">هنوز مطلبی منتشر نشده است.</p>';
|
||
endif;
|
||
?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== NEWSLETTER SECTION ===== -->
|
||
<section class="py-16 md:py-20 bg-white dark:bg-dark-card" aria-label="عضویت در خبرنامه">
|
||
<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" aria-label="مزایای خرید">
|
||
<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>
|
||
|
||
<?php
|
||
// پاک کردن transient ها وقتی محصول/دستهبندی ذخیره میشه
|
||
// (این در functions.php اضافه میشه — اینجا فقط اشاره میکنیم)
|
||
|
||
// Schema.org structured data برای سازمان
|
||
$organization_schema = array(
|
||
'@context' => 'https://schema.org',
|
||
'@type' => 'Organization',
|
||
'name' => get_bloginfo( 'name' ),
|
||
'url' => home_url( '/' ),
|
||
'logo' => get_custom_logo() ? wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) : '',
|
||
'description' => get_bloginfo( 'description' ),
|
||
'address' => array(
|
||
'@type' => 'PostalAddress',
|
||
'addressCountry' => 'IR',
|
||
),
|
||
'contactPoint' => array(
|
||
'@type' => 'ContactPoint',
|
||
'telephone' => '+98-21-12345678',
|
||
'contactType' => 'customer service',
|
||
),
|
||
);
|
||
|
||
echo '<script type="application/ld+json">' . wp_json_encode( $organization_schema ) . '</script>';
|
||
|
||
// Schema برای وبسایت با قابلیت جستجو
|
||
$website_schema = array(
|
||
'@context' => 'https://schema.org',
|
||
'@type' => 'WebSite',
|
||
'name' => get_bloginfo( 'name' ),
|
||
'url' => home_url( '/' ),
|
||
'potentialAction' => array(
|
||
'@type' => 'SearchAction',
|
||
'target' => home_url( '/?s={search_term_string}' ),
|
||
'query-input' => 'required name=search_term_string',
|
||
),
|
||
);
|
||
|
||
echo '<script type="application/ld+json">' . wp_json_encode( $website_schema ) . '</script>';
|
||
|
||
get_footer();
|