# راهنمای طراحی بنرهای Banners3

## 📐 چیدمان
یک بنر بزرگ سمت چپ + دو بنر کوچک در سمت راست (عمودی)

> **توجه:** این چیدمان برای RTL است - در کد، بنرهای کوچک اول می‌آیند (سمت راست) و بنر بزرگ بعد (سمت چپ).

---

## 🖥️ دسکتاپ

### نسبت عرض ستون‌ها:
- **ستون بنرهای کوچک (سمت راست)**: **60%** عرض
- **ستون بنر بزرگ (سمت چپ)**: **40%** عرض

### سایزها:
- **بنر 1 (Order 1)** - بالا سمت راست
  - نسبت عرض به ارتفاع: **3:1** (width:height)
  - سایز پیشنهادی: **1200×400px**

- **بنر 2 (Order 2)** - پایین سمت راست
  - نسبت عرض به ارتفاع: **3:1** (width:height)
  - سایز پیشنهادی: **1200×400px**

- **بنر 3 (Order 3)** - سمت چپ (بزرگ)
  - نسبت عرض به ارتفاع: **1:1** (مربع)
  - سایز پیشنهادی: **800×800px**

### فاصله‌ها:
- فاصله بین ستون‌ها: **16px**
- فاصله بین دو بنر کوچک: **16px**

### محاسبه ارتفاع:
- ارتفاع بنر بزرگ (1:1) ≈ ارتفاع ۲ بنر کوچک (3:1) + gap
- این باعث می‌شود ارتفاع‌ها تقریباً برابر باشند

---

## 📱 موبایل

همه بنرها به صورت عمودی و عرض کامل:

- **بنر 1**: عرض کامل، نسبت 3:1
- **بنر 2**: عرض کامل، نسبت 3:1
- **بنر 3**: عرض کامل، نسبت 1:1

---

## 💡 توصیه

برای طراحی می‌توانید با این سایزها کار کنید:
- **بنر 1 و 2**: `1200×400px` (نسبت 3:1)
- **بنر 3**: `800×800px` (نسبت 1:1)

سیستم به صورت خودکار عرض‌ها را متناسب با صفحه تنظیم می‌کند و با `object-cover` نسبت تصاویر حفظ می‌شود.

---

**نکات مهم**:
- طراحی باید RTL (راست به چپ) باشد
- تصاویر با `object-cover` نمایش داده می‌شوند (ممکن است قسمت‌هایی از تصویر کراپ شود)
- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
- برای تست placeholder با `USE_PLACEHOLDER = true` در فایل Banners3.tsx فعال کنید