banners

src/app/home/components/Banners4.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 Banners4: FC = () => {
     const { data } = useGetLanding()
 
@@ -21,6 +23,34 @@ const Banners4: FC = () => {
         }
     }, [data?.results?.banners])
 
+    const renderPlaceholder = () => (
+        <div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
+            {/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
+            <div className='lg:w-[34%] w-full lg:h-full h-[200px]'>
+                <div className='bg-pink-300 rounded-lg flex items-center justify-center w-full h-full'>
+                    <span className='text-white text-lg font-bold'>بنر 1 (Order 4) - بزرگ راست</span>
+                </div>
+            </div>
+
+            {/* دو بنر کوچک عمودی - 12% عرض */}
+            <div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
+                <div className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
+                    <span className='text-white text-sm font-bold'>بنر 2 (Order 5)</span>
+                </div>
+                <div className='bg-green-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
+                    <span className='text-white text-sm font-bold'>بنر 3 (Order 6)</span>
+                </div>
+            </div>
+
+            {/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
+            <div className='lg:w-[54%] w-full lg:h-full h-[200px]'>
+                <div className='bg-teal-300 rounded-lg flex items-center justify-center w-full h-full'>
+                    <span className='text-white text-lg font-bold'>بنر 4 (Order 7) - عریض چپ</span>
+                </div>
+            </div>
+        </div>
+    )
+
     const renderLayout = (banners: IBanner[]) => {
         const firstBanner = banners.find((banner) => banner.order === 4)
         const secondBanner = banners.find((banner) => banner.order === 5)
@@ -37,51 +67,50 @@ const Banners4: FC = () => {
         }
 
         return (
-            <div className='flex lg:flex-row flex-col gap-6'>
+            <div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
-                <div className='flex-1 rounded-[10px] min-w-0'>
+                {/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
-                    <Link href={firstBanner.linkUrl || '#'} className='block'>
+                <div className='lg:w-[34%] w-full lg:h-full'>
+                    <Link href={firstBanner.linkUrl || '#'} className='block h-full'>
                         <Image
                             src={firstBanner.imageUrl}
                             height={340}
-                            width={1000}
+                            width={340}
-                            className='w-full h-auto rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
                             alt={firstBanner.altText}
                         />
                     </Link>
                 </div>
 
-                <div className='lg:w-[140px] xl:w-[180px] 2xl:w-[220px] w-full flex flex-col gap-6 shrink-0'>
+                {/* دو بنر کوچک عمودی - 12% عرض */}
-                    <div className='w-full rounded-[10px]'>
+                <div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
-                        <Link href={secondBanner.linkUrl || '#'} className='block'>
+                    <Link href={secondBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
-                            <Image
+                        <Image
-                                src={secondBanner.imageUrl}
+                            src={secondBanner.imageUrl}
-                                height={158}
+                            height={160}
-                                width={158}
+                            width={160}
-                                className='w-full h-auto rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
-                                alt={secondBanner.altText}
+                            alt={secondBanner.altText}
-                            />
+                        />
-                        </Link>
+                    </Link>
-                    </div>
+                    <Link href={thirdBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
-                    <div className='w-full rounded-[10px]'>
+                        <Image
-                        <Link href={thirdBanner.linkUrl || '#'} className='block'>
+                            src={thirdBanner.imageUrl}
-                            <Image
+                            height={160}
-                                src={thirdBanner.imageUrl}
+                            width={160}
-                                height={158}
+                            className='w-full h-full rounded-lg object-cover'
-                                width={158}
+                            alt={thirdBanner.altText}
-                                className='w-full h-auto rounded-lg'
+                        />
-                                alt={thirdBanner.altText}
+                    </Link>
-                            />
-                        </Link>
-                    </div>
                 </div>
 
-                <div className='lg:w-[280px] xl:w-[360px] 2xl:w-[420px] w-full rounded-lg shrink-0'>
+                {/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
-                    <Link href={fourthBanner.linkUrl || '#'} className='block'>
+                <div className='lg:w-[54%] w-full lg:h-full'>
+                    <Link href={fourthBanner.linkUrl || '#'} className='block h-full'>
                         <Image
                             src={fourthBanner.imageUrl}
-                            height={400}
+                            height={340}
-                            width={400}
+                            width={800}
-                            className='w-full h-auto rounded-lg'
+                            className='w-full h-full rounded-lg object-cover'
                             alt={fourthBanner.altText}
                         />
                     </Link>
@@ -90,6 +119,15 @@ const Banners4: FC = () => {
         )
     }
 
+    if (USE_PLACEHOLDER) {
+        return (
+            <>
+                <div className='hidden lg:block'>{renderPlaceholder()}</div>
+                <div className='lg:hidden'>{renderPlaceholder()}</div>
+            </>
+        )
+    }
+
     return (
         <>
             {desktopBanners.length > 0 && (