refactor home

src/pages/home/components/ServiceItem.tsx

@@ -1,19 +1,22 @@
-import { type FC } from 'react'
-import { type ProductType } from '@/pages/request/type/Types'
 import PresignedImage from '@/components/PresignedImage'
+import { type ProductType } from '@/pages/request/type/Types'
+import { type FC } from 'react'
 
 const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
     return (
-        <div>
-            <div className='size-20 rounded-full bg-gray-200 border-[3px] border-primary overflow-hidden'>
+        <div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2 md:w-auto'>
+            <div className='size-16 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200 md:size-20'>
                 {product.images?.[0] ? (
                     <PresignedImage
                         src={product.images[0]}
                         alt={product.title}
-                        className='w-full h-full object-cover'
+                        className='h-full w-full object-cover'
                     />
                 ) : null}
             </div>
+            <span className='line-clamp-2 w-full text-center text-xs font-light text-[#292D32]'>
+                {product.title}
+            </span>
         </div>
     )
 }