change banner sizes

2025-12-04 11:47:31 +03:30
parent 5b132b3387
commit cf5f6ff2a0
4 changed files with 240 additions and 13 deletions
@@ -0,0 +1,168 @@
+# راهنمای طراحی بنرهای 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 بزرگ) طراحی کنید و بعد برای سایزهای کوچک‌تر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش می‌دهد.
+