banner 3 change

BANNERS3_DESIGN_SPECS.md

@@ -1,34 +1,38 @@
 # راهنمای طراحی بنرهای Banners3
 
 ## 📐 چیدمان
-دو بنر در سمت چپ (عمودی) + یک بنر بزرگ در سمت راست
+یک بنر بزرگ سمت چپ + دو بنر کوچک در سمت راست (عمودی)
+
+> **توجه:** این چیدمان برای RTL است - در کد، بنرهای کوچک اول می‌آیند (سمت راست) و بنر بزرگ بعد (سمت چپ).
 
 ---
 
 ## 🖥️ دسکتاپ
 
-### سایزها (با container padding 80px):
-- **بنر 1 (Order 1)** - بالا سمت چپ
-  - عرض: **متغیر** (نیمی از فضای باقیمانده)
-  - ارتفاع: **500px**
-  - نسبت عرض به ارتفاع: **2:1** (width:height)
-  - سایز پیشنهادی: **1000×500px**
+### نسبت عرض ستون‌ها:
+- **ستون بنرهای کوچک (سمت راست)**: **60%** عرض
+- **ستون بنر بزرگ (سمت چپ)**: **40%** عرض
 
-- **بنر 2 (Order 2)** - پایین سمت چپ
-  - عرض: **متغیر** (نیمی از فضای باقیمانده)
-  - ارتفاع: **500px**
-  - نسبت عرض به ارتفاع: **2:1** (width:height)
-  - سایز پیشنهادی: **1000×500px**
+### سایزها:
+- **بنر 1 (Order 1)** - بالا سمت راست
+  - نسبت عرض به ارتفاع: **3:1** (width:height)
+  - سایز پیشنهادی: **1200×400px**
 
-- **بنر 3 (Order 3)** - سمت راست (بزرگ)
-  - عرض: **متغیر** (نیمی از فضای باقیمانده)
-  - ارتفاع: **1000px** (دو برابر ارتفاع بنرهای سمت چپ)
-  - نسبت عرض به ارتفاع: **1:1** (width:height)
-  - سایز پیشنهادی: **1000×1000px**
+- **بنر 2 (Order 2)** - پایین سمت راست
+  - نسبت عرض به ارتفاع: **3:1** (width:height)
+  - سایز پیشنهادی: **1200×400px**
+
+- **بنر 3 (Order 3)** - سمت چپ (بزرگ)
+  - نسبت عرض به ارتفاع: **1:1** (مربع)
+  - سایز پیشنهادی: **800×800px**
 
 ### فاصله‌ها:
-- فاصله بین بخش چپ و راست: **16px**
-- فاصله بین دو بنر سمت چپ: **8px**
+- فاصله بین ستون‌ها: **16px**
+- فاصله بین دو بنر کوچک: **16px**
+
+### محاسبه ارتفاع:
+- ارتفاع بنر بزرگ (1:1) ≈ ارتفاع ۲ بنر کوچک (3:1) + gap
+- این باعث می‌شود ارتفاع‌ها تقریباً برابر باشند
 
 ---
 
@@ -36,17 +40,17 @@
 
 همه بنرها به صورت عمودی و عرض کامل:
 
-- **بنر 1**: عرض کامل، ارتفاع **500px**
-- **بنر 2**: عرض کامل، ارتفاع **500px**
-- **بنر 3**: عرض کامل، ارتفاع **1000px**
+- **بنر 1**: عرض کامل، نسبت 3:1
+- **بنر 2**: عرض کامل، نسبت 3:1
+- **بنر 3**: عرض کامل، نسبت 1:1
 
 ---
 
 ## 💡 توصیه
 
 برای طراحی می‌توانید با این سایزها کار کنید:
-- **بنر 1 و 2**: `1000×500px` (نسبت 2:1)
-- **بنر 3**: `1000×1000px` (نسبت 1:1)
+- **بنر 1 و 2**: `1200×400px` (نسبت 3:1)
+- **بنر 3**: `800×800px` (نسبت 1:1)
 
 سیستم به صورت خودکار عرض‌ها را متناسب با صفحه تنظیم می‌کند و با `object-cover` نسبت تصاویر حفظ می‌شود.
 
@@ -56,4 +60,5 @@
 - طراحی باید RTL (راست به چپ) باشد
 - تصاویر با `object-cover` نمایش داده می‌شوند (ممکن است قسمت‌هایی از تصویر کراپ شود)
 - بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
+- برای تست placeholder با `USE_PLACEHOLDER = true` در فایل Banners3.tsx فعال کنید