page home responsive & change component element & page blog item

components/blog/relatedContent/Item.js

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+
+function Item({ data }) {
+    return (
+        <li className="flex relative items-center justify-start gap-[8px] py-[20px]">
+            <Link href={`/blog/${data.id}`}>
+                <Image
+                    className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
+                    src={data.src}
+                    alt="article"
+                    height={88}
+                    width={97}
+                />
+            </Link>
+            <div className="flex flex-col gap-[24px] items-start justify-between">
+                <Link href={`/blog/${data.id}`}>
+                    <p
+                        className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
+                    >{data.title}</p>
+                </Link>
+                <p
+                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+                >تاریخ انتشار: {data.date_of_release}</p>
+            </div>
+            <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+        </li>
+    )
+}
+
+export default Item