landing api

src/components/BlogItem.tsx

@@ -1,27 +1,32 @@
+import { Blog } from '@/app/blogs/types/BlogTypes'
 import Image from 'next/image'
 import { FC } from 'react'
 
-const BlogItem: FC = () => {
+interface Props {
+    item: Blog
+}
+
+const BlogItem: FC<Props> = ({ item }) => {
     return (
         <div className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
             <Image
-                src='https://picsum.photos/seed/picsum/200/300'
+                src={item.imageUrl}
                 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'>
-                دسته بندی
+                {item.category?.title}
             </div>
 
             <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[180px]  rounded-b-3xl text-white p-6'>
                 <h6 className='font-bold text-sm'>
-                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                    {item.title}
                 </h6>
 
                 <p className='mt-4 text-sm'>
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
+                    {item.previewContent}
                 </p>
             </div>
         </div>

src/components/ServiceItem.tsx

@@ -1,26 +1,31 @@
+import { DanakSuggestService } from '@/app/home/types/HomeTypes'
 import { ArrowLeft } from 'iconsax-react'
+import Image from 'next/image'
 import { FC } from 'react'
 
 type Props = {
     isShort?: boolean
+    item: DanakSuggestService
 }
 
 const ServiceItem: FC<Props> = (props) => {
     return (
         <div className='flex-1 bg-white rounded-4xl xl:p-7 p-4'>
             <div className='flex justify-between'>
-                <div className='xl:size-[65px] size-[50px] rounded-2xl bg-orange-400'></div>
+                <div className='xl:size-[65px] size-[50px] rounded-2xl overflow-hidden'>
+                    <Image src={props.item.icon} className='size-full object-cover' alt={props.item.name} width={65} height={65} />
+                </div>
                 <div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
                     دسته بندی
                 </div>
             </div>
 
             <h3 className='mt-6 font-bold'>
-                دی منو
+                {props.item?.name}
             </h3>
 
             <div className='text-xs font-light mt-1 flex justify-between'>
-                <p>منو دیجیتال رستوران</p>
+                <p>{props.item.title}</p>
                 {
                     props.isShort &&
                     <div className='flex'>
@@ -35,7 +40,7 @@ const ServiceItem: FC<Props> = (props) => {
             {
                 !props.isShort &&
                 <p className='mt-6 text-sm leading-7'>
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
+                    {props.item.description}
                 </p>
             }