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

## 📐 سایزهای دسکتاپ

### Breakpoint 1: Desktop کوچک (1024px - 1279px)
**Container با padding: 80px (40px هر طرف)**

- **بنر 1 (Order 4)** - بنر اصلی
  - عرض: **متغیر** (فضاهای باقیمانده را پر می‌کند)
  - ارتفاع: **340px**
  - نسبت تصویر: **1:2.94** (پیشنهاد: 1000×340px)

- **بنر 2 (Order 5)** - بنر کوچک بالا
  - عرض: **140px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:1.13** (پیشنهاد: 140×158px)

- **بنر 3 (Order 6)** - بنر کوچک پایین
  - عرض: **140px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:1.13** (پیشنهاد: 140×158px)

- **بنر 4 (Order 7)** - بنر بزرگ سمت راست
  - عرض: **280px**
  - ارتفاع: **400px**
  - نسبت تصویر: **1:1.43** (پیشنهاد: 280×400px)

---

### Breakpoint 2: Desktop متوسط (1280px - 1535px)
**Container با padding: 80px (40px هر طرف)**

- **بنر 1 (Order 4)** - بنر اصلی
  - عرض: **متغیر**
  - ارتفاع: **340px**
  - نسبت تصویر: **1:2.94** (پیشنهاد: 1200×340px)

- **بنر 2 (Order 5)** - بنر کوچک بالا
  - عرض: **180px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:0.88** (پیشنهاد: 180×158px)

- **بنر 3 (Order 6)** - بنر کوچک پایین
  - عرض: **180px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:0.88** (پیشنهاد: 180×158px)

- **بنر 4 (Order 7)** - بنر بزرگ سمت راست
  - عرض: **360px**
  - ارتفاع: **400px**
  - نسبت تصویر: **1:1.11** (پیشنهاد: 360×400px)

---

### Breakpoint 3: Desktop بزرگ (1536px+)
**Container با padding: 80px (40px هر طرف)**

- **بنر 1 (Order 4)** - بنر اصلی
  - عرض: **متغیر**
  - ارتفاع: **340px**
  - نسبت تصویر: **1:2.94** (پیشنهاد: 1400×340px)

- **بنر 2 (Order 5)** - بنر کوچک بالا
  - عرض: **220px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:0.72** (پیشنهاد: 220×158px)

- **بنر 3 (Order 6)** - بنر کوچک پایین
  - عرض: **220px**
  - ارتفاع: **158px**
  - نسبت تصویر: **1:0.72** (پیشنهاد: 220×158px)

- **بنر 4 (Order 7)** - بنر بزرگ سمت راست
  - عرض: **420px**
  - ارتفاع: **400px**
  - نسبت تصویر: **1:0.95** (پیشنهاد: 420×400px)

---

## 📱 سایزهای موبایل

در موبایل، چیدمان به صورت عمودی است (ستونی) و همه بنرها عرض کامل دارند:

- **بنر 1 (Order 4)** - بنر اصلی
  - عرض: **100%** (کل عرض صفحه منهای padding)
  - ارتفاع: **340px**
  - نسبت تصویر: **1:2.94**

- **بنر 2 (Order 5)** - بنر کوچک بالا
  - عرض: **100%**
  - ارتفاع: **158px**
  - نسبت تصویر: متناسب با عرض صفحه

- **بنر 3 (Order 6)** - بنر کوچک پایین
  - عرض: **100%**
  - ارتفاع: **158px**
  - نسبت تصویر: متناسب با عرض صفحه

- **بنر 4 (Order 7)** - بنر بزرگ سمت راست
  - عرض: **100%**
  - ارتفاع: **400px**
  - نسبت تصویر: متناسب با عرض صفحه

---

## 📏 جزئیات فنی

### فاصله‌ها (Gap)
- فاصله بین بنرها: **24px** (در همه breakpoint ها)

### زاویه گوشه‌ها (Border Radius)
- همه بنرها: **10px**

### فرمت فایل
- فرمت: **PNG یا JPG**
- کیفیت: **72 DPI** (برای وب)
- رزولوشن: طبق سایزهای ذکر شده

---

## 💡 توصیه‌های طراحی

### برای طراح:
1. **بنر اصلی (Order 4)**: این بنر فضای بیشتری دارد، می‌توانید متن و المان‌های بیشتری در آن قرار دهید
2. **بنرهای کوچک (Order 5 و 6)**: فضای محدودی دارند، طراحی ساده و مینیمال پیشنهاد می‌شود
3. **بنر بزرگ (Order 7)**: می‌توانید از این فضا برای نمایش محصولات یا تخفیفات ویژه استفاده کنید

### نکات مهم:
- ✅ طراحی باید برای نمایش در **RTL** (راست به چپ) بهینه باشد
- ✅ تمام متن‌ها و المان‌ها باید در سمت راست قرار گیرند
- ✅ از فونت‌های فارسی استفاده کنید (IRANSans)
- ✅ تصاویر باید با نسبت‌های ذکر شده طراحی شوند

---

## 🎯 سایزهای پیشنهادی برای طراحی

برای راحتی بیشتر، می‌توانید در فتوشاپ یا Figma با این سایزها کار کنید:

### Desktop کوچک (1024px)
- بنر 1: **1000×340px**
- بنر 2: **140×158px**
- بنر 3: **140×158px**
- بنر 4: **280×400px**

### Desktop متوسط (1280px)
- بنر 1: **1200×340px**
- بنر 2: **180×158px**
- بنر 3: **180×158px**
- بنر 4: **360×400px**

### Desktop بزرگ (1536px+)
- بنر 1: **1400×340px**
- بنر 2: **220×158px**
- بنر 3: **220×158px**
- بنر 4: **420×400px**

### Mobile
- همه بنرها: عرض **375px** (برای موبایل استاندارد)
  - بنر 1: **375×340px**
  - بنر 2: **375×158px**
  - بنر 3: **375×158px**
  - بنر 4: **375×400px**

---

**توجه**: برای دسکتاپ، می‌توانید با سایز بزرگ‌ترین breakpoint (Desktop بزرگ) طراحی کنید و بعد برای سایزهای کوچک‌تر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش می‌دهد.