page home responsive & change component element & page blog item

components/blog/relatedContent/index.js

@@ -0,0 +1,24 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import UnderlineLG from '@/components/icons/UnderlineLG'
+import React from 'react'
+import Item from './Item'
+
+function RelatedContent({ data }) {
+  return (
+    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+        <UnderlineLG />
+      </AnimationTextHead>
+      <ul className='flex w-fit flex-col justify-start items-start'>
+        {data.map(item => (
+          <Item
+            data={item}
+            key={item.id}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default RelatedContent