diff --git a/BANNERS3_DESIGN_SPECS.md b/BANNERS3_DESIGN_SPECS.md
new file mode 100644
index 0000000..ad312da
--- /dev/null
+++ b/BANNERS3_DESIGN_SPECS.md
@@ -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` نمایش داده می‌شوند (ممکن است قسمت‌هایی از تصویر کراپ شود)
+- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
+
diff --git a/BANNERS4_DESIGN_SPECS.md b/BANNERS4_DESIGN_SPECS.md
new file mode 100644
index 0000000..1e5325e
--- /dev/null
+++ b/BANNERS4_DESIGN_SPECS.md
@@ -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 بزرگ) طراحی کنید و بعد برای سایزهای کوچک‌تر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش می‌دهد.
+
diff --git a/src/app/home/components/Banners3.tsx b/src/app/home/components/Banners3.tsx
index 552216d..ec3787f 100644
--- a/src/app/home/components/Banners3.tsx
+++ b/src/app/home/components/Banners3.tsx
@@ -31,37 +31,37 @@ const Banners3: FC = () => {
 
         return (
             <div className='flex lg:flex-row flex-col gap-4'>
-                <div className='flex flex-col gap-2 h-full flex-1'>
-                    <div className='flex-1 h-full'>
-                        <Link href={firstBanner.linkUrl || '#'}>
+                <div className='flex flex-col gap-2 flex-1 min-w-0'>
+                    <div className='flex-1 min-h-0'>
+                        <Link href={firstBanner.linkUrl || '#'} className='block h-full'>
                             <Image
                                 src={firstBanner.imageUrl}
                                 height={500}
                                 width={1000}
-                                className='flex-1 rounded-lg'
+                                className='w-full h-full object-cover rounded-lg'
                                 alt={firstBanner.altText}
                             />
                         </Link>
                     </div>
-                    <div className='flex-1 h-full'>
-                        <Link href={secondBanner.linkUrl || '#'}>
+                    <div className='flex-1 min-h-0'>
+                        <Link href={secondBanner.linkUrl || '#'} className='block h-full'>
                             <Image
                                 src={secondBanner.imageUrl}
                                 height={500}
                                 width={1000}
-                                className='flex-1 rounded-lg'
+                                className='w-full h-full object-cover rounded-lg'
                                 alt={secondBanner.altText}
                             />
                         </Link>
                     </div>
                 </div>
-                <div className='flex-1 h-full'>
-                    <Link href={thirdBanner.linkUrl || '#'}>
+                <div className='flex-1 min-w-0'>
+                    <Link href={thirdBanner.linkUrl || '#'} className='block h-full'>
                         <Image
                             src={thirdBanner.imageUrl}
                             height={1000}
                             width={1000}
-                            className='flex-1 rounded-lg h-full object-cover'
+                            className='w-full h-full object-cover rounded-lg'
                             alt={thirdBanner.altText}
                         />
                     </Link>
diff --git a/src/app/home/components/Banners4.tsx b/src/app/home/components/Banners4.tsx
index 7c8fb0c..db4841d 100644
--- a/src/app/home/components/Banners4.tsx
+++ b/src/app/home/components/Banners4.tsx
@@ -38,7 +38,7 @@ const Banners4: FC = () => {
 
         return (
             <div className='flex lg:flex-row flex-col gap-6'>
-                <div className='flex-1 rounded-[10px]'>
+                <div className='flex-1 rounded-[10px] min-w-0'>
                     <Link href={firstBanner.linkUrl || '#'} className='block'>
                         <Image
                             src={firstBanner.imageUrl}
@@ -50,7 +50,7 @@ const Banners4: FC = () => {
                     </Link>
                 </div>
 
-                <div className='lg:w-[12%] w-full flex flex-col gap-6'>
+                <div className='lg:w-[140px] xl:w-[180px] 2xl:w-[220px] w-full flex flex-col gap-6 shrink-0'>
                     <div className='w-full rounded-[10px]'>
                         <Link href={secondBanner.linkUrl || '#'} className='block'>
                             <Image
@@ -75,7 +75,7 @@ const Banners4: FC = () => {
                     </div>
                 </div>
 
-                <div className='lg:w-[30%] w-full rounded-lg'>
+                <div className='lg:w-[280px] xl:w-[360px] 2xl:w-[420px] w-full rounded-lg shrink-0'>
                     <Link href={fourthBanner.linkUrl || '#'} className='block'>
                         <Image
                             src={fourthBanner.imageUrl}