danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

banner 3 change

Browse Source
This commit is contained in:
hamid zarghami
2025-12-04 12:54:24 +03:30
parent cf5f6ff2a0
commit 7226d0417a
2 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
BANNERS3_DESIGN_SPECS.md
+29 -24
View File
@@ -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 فعال کنید
src/app/home/components/Banners3.tsx
+48 -13
View File
@@ -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'>
<div className='flex-1 min-h-0'>
<Link href={firstBanner.linkUrl || '#'} className='block h-full'>
{/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
<div className='flex flex-col gap-4 lg:w-[60%] w-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>
<div className='flex-1 min-h-0'>
<Link href={secondBanner.linkUrl || '#'} className='block h-full'>
<Link href={secondBanner.linkUrl || '#'} className='block flex-1'>
<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>
<div className='flex-1 min-w-0'>
{/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
<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 && (