feat update categories

src/app/page.tsx

@@ -1,26 +1,21 @@
 import MainCarousel from '~/components/carousels/mainCarousel';
-import { brands } from '~/mockData/mockBrands';
 import { TopSellers } from '~/components/containerCards/containerCards';
 import { createIconsTypes } from '~/utils/createIcons';
 import { ContainerPage } from './container_page';
-// import CategoryCategory from '~/components/containerCards/containerCardsCategoty';
-// import { category } from '~/mockData/mockCategory';
-import BrandCategory from '~/components/containerCards/containerCardsBrands';
+import Categories from '~/components/containerCards/containerCardsCategory';
 import PaymentMethodsList from '~/components/paymentMethod/paymentMethodsList';
 import ReviewsContainer from '~/components/containerCards/containerCardsReviews';
 import reviews from '~/mockData/mockReviwes';
 import Banner from '~/components/Banner';
 import BrandCarrousel from '~/components/carousels/brandCarrousel';
-import Form from '~/components/form/Form';
 
 export default function Home() {
   createIconsTypes();
   return (
     <ContainerPage header={<MainCarousel />}>
-      {/* <CategoryCategory category={category} /> */}
+      <Categories />
       <TopSellers />
       <BrandCarrousel />
-      <BrandCategory brand={brands} />
       <Banner />
       <ReviewsContainer reviwes={reviews} />
       <PaymentMethodsList />

src/components/cards/categoryCard.tsx

@@ -1,29 +1,22 @@
-import React, { FC } from "react";
-import Image from "next/image";
+import Image from 'next/image';
+import { CategoryProps } from '~/types/products';
 
-interface CardPropsCategory {
-  name: string;
-  imageSrc: string;
-}
-
-const CardCategory: FC<CardPropsCategory> = ({ name, imageSrc }) => {
+const CardCategory: React.FC<CategoryProps> = ({ name, image }) => {
   return (
     <div className="flex w-[10rem] h-[200px] flex-col items-center overflow-hidden m-8">
       <div className="w-full h-[78%] relative">
         <Image
-          src={imageSrc}
+          src={image[0]}
           alt="Imagen de Categoria"
           layout="fill"
           objectFit="cover"
         />
       </div>
-        <div>
-          <h3 className="font-bold text-2xl w-[100%] h-[22%] mt-2">
-            {name}
-          </h3>
-        </div>
+      <div>
+        <h3 className="font-bold text-2xl w-[100%] h-[22%] mt-2">{name}</h3>
+      </div>
     </div>
   );
 };
 
-export default CardCategory;
+export default CardCategory;