blog card

src/app/home/components/BlogCard.tsx

@@ -1,11 +1,35 @@
+import { ArrowLeft } from 'iconsax-react'
+import Image from 'next/image'
 import { FC } from 'react'
 
 const BlogCard: FC = () => {
     return (
-        <div className='w-full h-[224px] rounded-lg overflow-hidden bg-blue-300 relative'>
-            <div className='absolute bottom-6 right-6 left-6 text-right text-white leading-6'>
-                بررسی
-                گوشی گیمینگ ایسوس
+        <div className='bg-white p-3 rounded-2xl shadow w-full '>
+            <Image
+                src='https://picsum.photos/200/300?grayscale'
+                width={357}
+                height={201}
+                alt=''
+                className='max-w-full max-h-[181px] object-cover rounded-2xl'
+            />
+
+            <div className='mt-3'>
+                <h6 className='text-primary text-sm'>تکنولوژی</h6>
+            </div>
+            <h4 className='mt-2'>
+                نسل جدید پردازنده اینتل
+            </h4>
+
+            <p className='mt-2 text-sm text-[#7F7F7F] font-light leading-6'>
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است....
+            </p>
+
+            <div className='mt-6 flex justify-between items-center'>
+                <div className='text-sm font-light text-[#7F7F7F]'>1401/7/21</div>
+                <div className='flex gap-1 items-center text-[#7F7F7F]'>
+                    <div className='text-sm font-light'>ادامه مطلب</div>
+                    <ArrowLeft size={16} color='#7F7F7F' />
+                </div>
             </div>
         </div>
     )

src/app/home/components/Blogs.tsx

@@ -4,13 +4,21 @@ import GridWrapper from '@/components/GridWrapper'
 
 const Blogs: FC = () => {
     return (
-        <GridWrapper desktop={5} mobile={1} gapDesktop={24} gapMobile={16}>
-            <BlogCard />
-            <BlogCard />
-            <BlogCard />
-            <BlogCard />
-            <BlogCard />
-        </GridWrapper>
+        <div>
+            <h4 className='text-[#012B4D] text-lg'>رسانه و مطالب  </h4>
+            <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
+                برای مشاهده ی آخرین مطالب رسانه و مطالب <span className='text-primary'>اینجا کلیک کنید</span>
+            </div>
+            <div className='mt-10'>
+                <GridWrapper desktop={5} mobile={1} gapDesktop={24} gapMobile={16} >
+                    <BlogCard />
+                    <BlogCard />
+                    <BlogCard />
+                    <BlogCard />
+                    <BlogCard />
+                </GridWrapper >
+            </div>
+        </div>
     )
 }
 

src/app/page.tsx

@@ -22,9 +22,6 @@ const Home: NextPage = () => {
           <Banners3
           />
         </div>
-        <div className='mt-16'>
-          <Blogs />
-        </div>
       </div>
 
       <div className='mt-24 bg-[#FAF8F6] p-20'>
@@ -35,10 +32,9 @@ const Home: NextPage = () => {
         <div className='mt-20'>
           <PopularProducts />
         </div>
-      </div>
-
-      <div className='mt-24'>
-
+        <div className='mt-24'>
+          <Blogs />
+        </div>
       </div>
     </div>
   )

src/components/GridWrapper.tsx

@@ -5,8 +5,8 @@ type GridWrapperProps = {
     children: React.ReactNode;
     desktop: number; // تعداد ستون‌ها در دسکتاپ
     mobile: number; // تعداد ستون‌ها در موبایل
-    gapDesktop?: number; // فاصله بین آیتم‌ها در دسکتاپ (بر اساس scale پیش‌فرض Tailwind)
-    gapMobile?: number; // فاصله بین آیتم‌ها در موبایل
+    gapDesktop?: number; // فاصله بین آیتم‌ها در دسکتاپ. اگر مقدار > 12 باشد به عنوان px تفسیر می‌شود (مثلاً 24 => 24px)
+    gapMobile?: number; // فاصله بین آیتم‌ها در موبایل. اگر مقدار > 12 باشد به عنوان px تفسیر می‌شود
     className?: string;
 };
 
@@ -56,7 +56,7 @@ const LG_GRID_COLS_CLASS: Record<number, string> = {
     12: "lg:grid-cols-12",
 };
 
-// Gap mapping (scale رایج Tailwind)
+// نگاشت Gap بر اساس scale رایج Tailwind: gap-N که هر N معادل 4px است (N * 4px)
 const GAP_CLASS: Record<number, string> = {
     0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5",
     6: "gap-6", 7: "gap-7", 8: "gap-8", 9: "gap-9", 10: "gap-10", 11: "gap-11",
@@ -92,13 +92,16 @@ function getMdGridColsClass(count: number): string {
 
 function getGapClass(value?: number): string | undefined {
     if (value === undefined) return undefined;
-    const safe = clampToRange(value, 0, 12);
+    // اگر کاربر مقدار را به صورت px فرستاده باشد (بزرگ‌تر از 12)، آن را به scale تبدیل می‌کنیم: N = round(px/4)
+    const interpretedAsScale = value > 12 ? Math.round(value / 4) : value;
+    const safe = clampToRange(interpretedAsScale, 0, 24);
     return GAP_CLASS[safe];
 }
 
 function getLgGapClass(value?: number): string | undefined {
     if (value === undefined) return undefined;
-    const safe = clampToRange(value, 0, 12);
+    const interpretedAsScale = value > 12 ? Math.round(value / 4) : value;
+    const safe = clampToRange(interpretedAsScale, 0, 24);
     return LG_GAP_CLASS[safe];
 }