change banner sizes
This commit is contained in:
hamid zarghami
@@ -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` نمایش داده میشوند (ممکن است قسمتهایی از تصویر کراپ شود)
|
||||
- بهتر است محتوای مهم در مرکز تصاویر قرار گیرد
|
||||
|
||||
@@ -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 بزرگ) طراحی کنید و بعد برای سایزهای کوچکتر مقیاس کنید. سیستم به صورت خودکار تصاویر را متناسب با سایز صفحه نمایش میدهد.
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user