link

src/components/BlogItem.tsx

@@ -1,5 +1,6 @@
 import { Blog } from '@/app/blogs/types/BlogTypes'
 import Image from 'next/image'
+import Link from 'next/link'
 import { FC } from 'react'
 
 interface Props {
@@ -8,7 +9,7 @@ interface Props {
 
 const BlogItem: FC<Props> = ({ item }) => {
     return (
-        <div className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
+        <Link href={`/blogs/${item.id}`} className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
             <Image
                 src={item.imageUrl}
                 layout='fill'
@@ -25,10 +26,10 @@ const BlogItem: FC<Props> = ({ item }) => {
                     {item.title}
                 </h6>
 
-                <p className='mt-4 text-sm' dangerouslySetInnerHTML={{ __html: item.previewContent }}>
+                <p id='blog-preview-content' className='mt-4 text-sm text-white' dangerouslySetInnerHTML={{ __html: item.previewContent }}>
                 </p>
             </div>
-        </div>
+        </Link>
     )
 }
 

src/components/ServiceItem.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const ServiceItem: FC<Props> = (props) => {
     return (
-        <Link href={`/products/${props.item.id}`} className='flex-1 bg-white rounded-4xl xl:p-7 p-4'>
+        <Link href={`/products/${props.item.id}`} className='flex-1 bg-white rounded-4xl xl:p-7 p-4 flex flex-col'>
             <div className='flex justify-between'>
                 <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} />