diff --git a/public/images/audio.webp b/public/images/categories/audio.webp
similarity index 100%
rename from public/images/audio.webp
rename to public/images/categories/audio.webp
diff --git a/public/images/bombillos.webp b/public/images/categories/bombillos.webp
similarity index 100%
rename from public/images/bombillos.webp
rename to public/images/categories/bombillos.webp
diff --git a/public/images/exploradoras.webp b/public/images/categories/exploradoras.webp
similarity index 100%
rename from public/images/exploradoras.webp
rename to public/images/categories/exploradoras.webp
diff --git a/public/images/exterior.webp b/public/images/categories/exterior.webp
similarity index 100%
rename from public/images/exterior.webp
rename to public/images/categories/exterior.webp
diff --git a/public/images/farolas.webp b/public/images/categories/farolas.webp
similarity index 100%
rename from public/images/farolas.webp
rename to public/images/categories/farolas.webp
diff --git a/public/images/interior.webp b/public/images/categories/interior.webp
similarity index 100%
rename from public/images/interior.webp
rename to public/images/categories/interior.webp
diff --git a/public/images/repuestos.webp b/public/images/categories/repuestos.webp
similarity index 100%
rename from public/images/repuestos.webp
rename to public/images/categories/repuestos.webp
diff --git a/public/images/stops.webp b/public/images/categories/stops.webp
similarity index 100%
rename from public/images/stops.webp
rename to public/images/categories/stops.webp
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6db74e..f7f5d2d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
import Banner from "@/components/Banner";
+import Categories from "@/components/Categories";
export default function Home() {
return (
+
);
}
diff --git a/src/components/Categories/CategoryCard.tsx b/src/components/Categories/CategoryCard.tsx
new file mode 100644
index 0000000..344d80d
--- /dev/null
+++ b/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 = ({ image, name }) => {
+ return (
+
+ );
+};
+export default CategoryCard;
diff --git a/src/components/Categories/index.tsx b/src/components/Categories/index.tsx
new file mode 100644
index 0000000..89d4e54
--- /dev/null
+++ b/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 (
+
+ {CATEGORIES.map((category) => (
+
+ ))}
+
+ );
+};
+export default Categories;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
new file mode 100644
index 0000000..3bcff67
--- /dev/null
+++ b/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",
+ },
+];