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,59 @@
+# راهنمای طراحی بنرهای Banners3
+
+## 📐 چیدمان
+دو بنر در سمت چپ (عمودی) + یک بنر بزرگ در سمت راست
+
+---
+
+## 🖥️ دسکتاپ
+
+### سایزها (با container padding 80px):
+- **بنر 1 (Order 1)** - بالا سمت چپ
+  - عرض: **متغیر** (نیمی از فضای باقیمانده)
+  - ارتفاع: **500px**
+  - نسبت عرض به ارتفاع: **2:1** (width:height)
+  - سایز پیشنهادی: **1000×500px**
+
+- **بنر 2 (Order 2)** - پایین سمت چپ
+  - عرض: **متغیر** (نیمی از فضای باقیمانده)
+  - ارتفاع: **500px**
+  - نسبت عرض به ارتفاع: **2:1** (width:height)
+  - سایز پیشنهادی: **1000×500px**
+
+- **بنر 3 (Order 3)** - سمت راست (بزرگ)
+  - عرض: **متغیر** (نیمی از فضای باقیمانده)
+  - ارتفاع: **1000px** (دو برابر ارتفاع بنرهای سمت چپ)
+  - نسبت عرض به ارتفاع: **1:1** (width:height)
+  - سایز پیشنهادی: **1000×1000px**
+
+### فاصله‌ها:
+- فاصله بین بخش چپ و راست: **16px**
+- فاصله بین دو بنر سمت چپ: **8px**
+
+---
+
+## 📱 موبایل
+
+همه بنرها به صورت عمودی و عرض کامل:
+
+- **بنر 1**: عرض کامل، ارتفاع **500px**
+- **بنر 2**: عرض کامل، ارتفاع **500px**
+- **بنر 3**: عرض کامل، ارتفاع **1000px**
+
+---
+
+## 💡 توصیه
+
+برای طراحی می‌توانید با این سایزها کار کنید:
+- **بنر 1 و 2**: `1000×500px` (نسبت 2:1)
+- **بنر 3**: `1000×1000px` (نسبت 1:1)
+
+سیستم به صورت خودکار عرض‌ها را متناسب با صفحه تنظیم می‌کند و با `object-cover` نسبت تصاویر حفظ می‌شود.
+
+---
+
+**نکات مهم**:
+- طراحی باید RTL (راست به چپ) باشد
+- تصاویر با `object-cover` نمایش داده می‌شوند (ممکن است قسمت‌هایی از تصویر کراپ شود)
+- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
+