14 categories

src/app/page.tsx

@@ -1,9 +1,11 @@
 import Banner from "@/components/Banner";
+import Categories from "@/components/Categories";
 
 export default function Home() {
   return (
     <main>
       <Banner />
+      <Categories />
     </main>
   );
 }

src/components/Categories/CategoryCard.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+import Link from "next/link";
+import { FC } from "react";
+
+interface CategoryCardProps {
+  image: string;
+  name: string;
+}
+
+const CategoryCard: FC<CategoryCardProps> = ({ image, name }) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-x-4 relative group">
+      <Link href={"https://actualizatucarro.mercadoshops.com.co/"}>
+        <Image src={image} width={150} height={150} alt={name} />
+        <span className="font-bold text-sm md:text-lg">{name}</span>
+        <div className="absolute h-1 bg-primary-lm bottom-[-5px] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-in-out w-full rounded"></div>
+      </Link>
+    </div>
+  );
+};
+export default CategoryCard;

src/components/Categories/index.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import CategoryCard from "./CategoryCard";
+
+import { CATEGORIES } from "@/utils/constants";
+
+const Categories: FC = () => {
+  return (
+    <section className="grid grid-cols-4 ms:grid-cols-8 px-2 py-6 max-w-f-hd mx-auto place-items-center gap-y-3">
+      {CATEGORIES.map((category) => (
+        <CategoryCard
+          image={category.image}
+          name={category.name}
+          key={category.name}
+        />
+      ))}
+    </section>
+  );
+};
+export default Categories;

src/utils/constants.ts

@@ -0,0 +1,42 @@
+export const CATEGORIES = [
+  {
+    id: "74ee7f33-36c0-4446-8eb2-a18c64c2fab3",
+    image: "/images/categories/audio.webp",
+    name: "Audio",
+  },
+  {
+    id: "c75457bc-23c3-46e9-acde-73bf6ff126b4",
+    image: "/images/categories/bombillos.webp",
+    name: "Bombillos",
+  },
+  {
+    id: "6afe0153-7240-4cfc-bda6-09e08dc01031",
+    image: "/images/categories/exploradoras.webp",
+    name: "Exploradoras",
+  },
+  {
+    id: "a0842546-e4bb-4a7a-bee0-0a81512885e3",
+    image: "/images/categories/exterior.webp",
+    name: "Exterior",
+  },
+  {
+    id: "07b25b9c-fafc-4fa4-8621-3a1d7c0488c5",
+    image: "/images/categories/farolas.webp",
+    name: "Farolas",
+  },
+  {
+    id: "ee3c96c4-03d9-40c9-81c0-d94b97aa7178",
+    image: "/images/categories/interior.webp",
+    name: "Interior",
+  },
+  {
+    id: "509af101-457a-4a8d-877d-efcc5d9f6250",
+    image: "/images/categories/repuestos.webp",
+    name: "Repuestos",
+  },
+  {
+    id: "b826f6be-d561-4a2f-b4ca-4f50d8837c06",
+    image: "/images/categories/stops.webp",
+    name: "Stops",
+  },
+];