motayeb/page-about.php
Kazem Alghasi 8d1403d972 feat(theme): enhance WooCommerce templates and add new pages
Refactor WooCommerce product loop templates to support AJAX quick add-to-cart, wishlist functionality, and improved visual badges. Added new static pages for About and Contact.

- Refactor `content-product.php` to include quick actions and discount badges
- Update `archive-product.php` and `front-page.php` for improved product display
- Add `motayeb_get_rating_html` helper function in `functions.php`
- Add `page-about.php` and `page-contact.php`
- Fix product card width issues in `header.php`
- Implement dynamic banner option in `front-page.php`
2026-09-20 14:04:10 +03:30

95 lines
5.7 KiB
PHP

<?php
/**
* قالب صفحه درباره ما (About)
*
* @package Motayeb
*/
get_header();
?>
<!-- ===== BRAND STORY SECTION ===== -->
<section 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>
<div class="mt-2 mb-6">
<?php the_content(); ?>
</div>
<!-- بخش ویژگی‌ها (ثابت) -->
<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>
<!-- برچسب‌های گواهی (ثابت) -->
<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>
<?php
get_footer();