feat: add product detail page with components and infinite scroll

- Add SingleProduct component for product detail page
- Implement product data hooks and services
- Add infinite scroll functionality for products list
- Update ProductCard component with new features
- Add product types and specifications
- Fix TypeScript errors in product page
- Update profile page layout
- Add global CSS improvements

src/components/ProductCard.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { IProduct } from '@/types/landing.types'
 import { NumberFormat } from '@/config/func'
 import { Heart } from 'iconsax-react'
@@ -5,6 +6,7 @@ import Image from 'next/image'
 import { FC, useState } from 'react'
 import { useAddWishlist, useRemoveWishlist } from '@/app/products/hooks/useProductsData'
 import { useSharedStore } from '@/share/store/sharedStore'
+import Link from 'next/link'
 
 type Props = {
     item?: IProduct
@@ -34,7 +36,7 @@ const ProductCard: FC<Props> = ({ item }) => {
     }
 
     if (item) return (
-        <div className='bg-white rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>
+        <Link href={`/product/${item._id}`} className='bg-white block rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>
             <div className='flex justify-center'>
                 <Image
                     src={item.imagesUrl.cover}
@@ -89,7 +91,7 @@ const ProductCard: FC<Props> = ({ item }) => {
             <div className='flex justify-end'>
                 <Heart onClick={handleWish} variant={isWished ? 'Bold' : 'Outline'} size={20} color='#000' />
             </div>
-        </div>
+        </Link>
     )
     return (
         <div className='bg-white rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>