blog collaboration in landing

src/components/BlogItem.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+import { FC } from 'react'
+
+const BlogItem: FC = () => {
+    return (
+        <div className='flex-1 h-[390px] rounded-4xl overflow-hidden relative'>
+            <Image
+                src='https://picsum.photos/seed/picsum/200/300'
+                layout='fill'
+                objectFit='cover'
+                alt='blog'
+            />
+
+            <div className='absolute top-6 left-6 bg-black text-white h-8 px-5 rounded-xl flex items-center text-sm'>
+                دسته بندی
+            </div>
+
+            <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[180px]  rounded-b-3xl text-white p-6'>
+                <h6>
+                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                </h6>
+
+                <p className='mt-4 text-sm'>
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default BlogItem

src/components/InfoBox.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 const InfoBox: FC<Props> = (props: Props) => {
     return (
-        <div className='flex-1 h-[185px] bg-gradient-to-r from-[#f9fafc] to-[#f1f3f8] rounded-4xl p-6 border-[3px] border-white '>
+        <div className='flex-1 min-h-[185px] bg-gradient-to-r from-[#f9fafc] to-[#f1f3f8] rounded-4xl p-6 border-[3px] border-white '>
             <div className='flex items-center gap-4'>
                 <div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
                     {props.icon}

src/components/SectionHeader.tsx

@@ -0,0 +1,26 @@
+import { ArrowLeft } from 'iconsax-react'
+import { FC } from 'react'
+
+type Props = {
+    title: string
+}
+
+const SectionHeader: FC<Props> = (props) => {
+    return (
+        <div className='flex justify-between items-center'>
+            <h2 className='text-2xl'>
+                {props.title}
+            </h2>
+
+            <div className='flex gap-1'>
+                <div className='text-sm'>مشاهده همه</div>
+                <ArrowLeft
+                    size={20}
+                    color='black'
+                />
+            </div>
+        </div>
+    )
+}
+
+export default SectionHeader