banner 3 change

BANNERS3_DESIGN_SPECS.md

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

src/app/home/components/Banners3.tsx

@@ -6,6 +6,8 @@ import { FC, useMemo } from 'react'
 import { IBanner } from '@/types/landing.types'
 import { useGetLanding } from '@/app/home/hooks/useHomeData'
 
+const USE_PLACEHOLDER = false
+
 const Banners3: FC = () => {
 
     const { data } = useGetLanding()
@@ -22,6 +24,32 @@ const Banners3: FC = () => {
         }
     }, [data?.results?.banners])
 
+    const renderPlaceholder = () => (
+        <div className='flex lg:flex-row flex-col gap-4'>
+            {/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
+            <div className='flex flex-col gap-4 lg:w-[60%] w-full'>
+                <div
+                    className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1'
+                >
+                    <span className='text-white text-lg font-bold'>بنر 1</span>
+                </div>
+                <div
+                    className='bg-blue-400 rounded-lg flex items-center justify-center w-full flex-1'
+                >
+                    <span className='text-white text-lg font-bold'>بنر 2</span>
+                </div>
+            </div>
+            {/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
+            <div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
+                <div
+                    className='bg-purple-600 rounded-lg flex items-center justify-center w-full h-full'
+                >
+                    <span className='text-white text-lg font-bold'>بنر 3 - بزرگ</span>
+                </div>
+            </div>
+        </div>
+    )
+
     const renderLayout = (banners: IBanner[]) => {
         const firstBanner = banners.find((banner) => banner.order === 1)
         const secondBanner = banners.find((banner) => banner.order === 2)
@@ -31,37 +59,35 @@ const Banners3: FC = () => {
 
         return (
             <div className='flex lg:flex-row flex-col gap-4'>
-                <div className='flex flex-col gap-2 flex-1 min-w-0'>
+                {/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
-                    <div className='flex-1 min-h-0'>
+                <div className='flex flex-col gap-4 lg:w-[60%] w-full'>
-                        <Link href={firstBanner.linkUrl || '#'} className='block h-full'>
+                    <Link href={firstBanner.linkUrl || '#'} className='block flex-1'>
                         <Image
                             src={firstBanner.imageUrl}
-                                height={500}
+                            height={400}
                             width={1000}
-                                className='w-full h-full object-cover rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
                             alt={firstBanner.altText}
                         />
                     </Link>
-                    </div>
+                    <Link href={secondBanner.linkUrl || '#'} className='block flex-1'>
-                    <div className='flex-1 min-h-0'>
-                        <Link href={secondBanner.linkUrl || '#'} className='block h-full'>
                         <Image
                             src={secondBanner.imageUrl}
-                                height={500}
+                            height={400}
                             width={1000}
-                                className='w-full h-full object-cover rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
                             alt={secondBanner.altText}
                         />
                     </Link>
                 </div>
-                </div>
+                {/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
-                <div className='flex-1 min-w-0'>
+                <div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
                     <Link href={thirdBanner.linkUrl || '#'} className='block h-full'>
                         <Image
                             src={thirdBanner.imageUrl}
                             height={1000}
                             width={1000}
-                            className='w-full h-full object-cover rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
                             alt={thirdBanner.altText}
                         />
                     </Link>
@@ -70,6 +96,15 @@ const Banners3: FC = () => {
         )
     }
 
+    if (USE_PLACEHOLDER) {
+        return (
+            <>
+                <div className='hidden lg:block'>{renderPlaceholder()}</div>
+                <div className='lg:hidden'>{renderPlaceholder()}</div>
+            </>
+        )
+    }
+
     return (
         <>
             {desktopBanners.length > 0 && (