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
489 lines
33 KiB
PHP
489 lines
33 KiB
PHP
<?php
|
||
/**
|
||
* صفحه اصلی - مطابق با UI Kolli.html
|
||
*
|
||
* @package Motayeb
|
||
*/
|
||
|
||
get_header();
|
||
?>
|
||
|
||
<!-- ===== 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="<?php echo esc_url( 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>مشاهده محصولات</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">
|
||
<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">
|
||
<?php
|
||
$categories = get_terms( array(
|
||
'taxonomy' => 'product_cat',
|
||
'hide_empty' => false,
|
||
'parent' => 0,
|
||
'number' => 5,
|
||
'orderby' => 'name',
|
||
'order' => 'ASC',
|
||
) );
|
||
|
||
$icons = array( 'lucide:hexagon', 'lucide:droplets', 'lucide:flask-round', 'lucide:cup-soda', 'lucide:nut' );
|
||
$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 = $category->count;
|
||
$icon = isset( $icons[ $i ] ) ? $icons[ $i ] : 'lucide:tag';
|
||
$color = isset( $colors[ $i ] ) ? $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( $count ); ?> محصول</span>
|
||
</a>
|
||
<?php
|
||
$i++;
|
||
}
|
||
} else {
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-5">هنوز دستهبندیای ایجاد نشده است.</p>';
|
||
}
|
||
?>
|
||
</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="<?php echo esc_url( 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
|
||
$bestsellers = new WP_Query( array(
|
||
'post_type' => 'product',
|
||
'posts_per_page' => 4,
|
||
'meta_key' => 'total_sales',
|
||
'orderby' => 'meta_value_num',
|
||
'order' => 'DESC',
|
||
'meta_query' => array(
|
||
array(
|
||
'key' => '_stock_status',
|
||
'value' => 'instock',
|
||
'compare' => '=',
|
||
),
|
||
),
|
||
) );
|
||
|
||
if ( $bestsellers->have_posts() ) :
|
||
while ( $bestsellers->have_posts() ) :
|
||
$bestsellers->the_post();
|
||
$product = wc_get_product( get_the_ID() );
|
||
if ( ! $product ) {
|
||
continue;
|
||
}
|
||
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
|
||
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/400/400.jpg';
|
||
$rating = $product->get_average_rating();
|
||
$review_count = $product->get_rating_count();
|
||
$price = $product->get_price();
|
||
$regular_price = $product->get_regular_price();
|
||
$is_on_sale = $product->is_on_sale();
|
||
$badge = '';
|
||
if ( $is_on_sale && $regular_price ) {
|
||
$discount = round( ( 1 - ( $price / $regular_price ) ) * 100 );
|
||
$badge = '<span class="px-2.5 py-1 bg-red-500 text-white text-[10px] rounded-full font-medium">' . $discount . '%</span>';
|
||
}
|
||
?>
|
||
<div class="product-card group bg-white dark:bg-dark-card rounded-2xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-xl transition-all relative">
|
||
<a href="<?php the_permalink(); ?>" class="block">
|
||
<div class="relative overflow-hidden">
|
||
<img src="<?php echo esc_url( $img_src ); ?>" alt="<?php the_title_attribute(); ?>" 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">
|
||
<?php if ( $product->is_featured() ) : ?>
|
||
<span class="px-2.5 py-1 bg-forest-500 text-white text-[10px] rounded-full font-medium">ارگانیک</span>
|
||
<?php endif; ?>
|
||
<?php echo wp_kses_post( $badge ); ?>
|
||
</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"><?php echo esc_html( $rating ? number_format( $rating, 1 ) : '۰' ); ?></span>
|
||
<span class="text-xs text-cream-400 dark:text-dark-muted">(<?php echo esc_html( $review_count ); ?>)</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"><?php the_title(); ?></h3>
|
||
<div class="flex items-end gap-2">
|
||
<span class="font-extrabold text-forest-500 dark:text-forest-300"><?php echo wp_kses_post( wc_price( $price ) ); ?></span>
|
||
<?php if ( $is_on_sale ) : ?>
|
||
<span class="line-through text-xs text-cream-400 dark:text-dark-muted mb-0.5"><?php echo wp_kses_post( wc_price( $regular_price ) ); ?></span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- Quick Actions -->
|
||
<div class="quick-actions absolute bottom-3 left-3 right-3 flex gap-2">
|
||
<button onclick="quickAddToCart(<?php echo esc_js( $product->get_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>
|
||
<?php
|
||
endwhile;
|
||
wp_reset_postdata();
|
||
else :
|
||
echo '<p class="text-center text-cream-500 dark:text-dark-muted col-span-4">' . esc_html__( 'هنوز محصولی وجود ندارد.', 'motayeb' ) . '</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">
|
||
<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>
|
||
|
||
<!-- ===== 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">
|
||
<?php
|
||
$testimonials = array(
|
||
array(
|
||
'name' => 'زهرا کریمی',
|
||
'city' => 'تهران',
|
||
'text' => 'از وقتی عسل مطیب استفاده میکنیم، دیگه هیچ عسلی برامون قابل قبول نیست. طعم واقعی عسل رو با مطیب شناختیم.',
|
||
'stars' => 5,
|
||
),
|
||
array(
|
||
'name' => 'حسین نوری',
|
||
'city' => 'اصفهان',
|
||
'text' => 'ارده و شیرههای مطیب کیفیت استثنایی دارن. بستهبندی هم بسیار تمیز و بهداشتیه. برای صبحانه عالیه.',
|
||
'stars' => 5,
|
||
),
|
||
array(
|
||
'name' => 'فاطمه موسوی',
|
||
'city' => 'شیراز',
|
||
'text' => 'دمنوشهای گیاهی مطیب واقعاً طبیعین. برخلاف خیلی از برندها، عطر و طعم واقعی گیاهان رو حس میکنی.',
|
||
'stars' => 5,
|
||
),
|
||
);
|
||
foreach ( $testimonials as $t ) :
|
||
$initial = mb_substr( $t['name'], 0, 1 );
|
||
?>
|
||
<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">
|
||
<?php for ( $i = 0; $i < $t['stars']; $i++ ) : ?>
|
||
★
|
||
<?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">
|
||
<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',
|
||
'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';
|
||
?>
|
||
<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 ); ?>" 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">
|
||
<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>
|
||
|
||
<?php
|
||
get_footer();
|