From 0c0369ab00651c10dfaff13a15eb27a8e4861767 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Sun, 3 Mar 2024 15:14:01 -0500
Subject: [PATCH 1/2] Add categories section with all items design required

---
 public/images/{ => categories}/audio.webp     | Bin
 public/images/{ => categories}/bombillos.webp | Bin
 .../images/{ => categories}/exploradoras.webp | Bin
 public/images/{ => categories}/exterior.webp  | Bin
 public/images/{ => categories}/farolas.webp   | Bin
 public/images/{ => categories}/interior.webp  | Bin
 public/images/{ => categories}/repuestos.webp | Bin
 public/images/{ => categories}/stops.webp     | Bin
 src/app/page.tsx                              |   2 +
 src/components/Categories/CategoryCard.tsx    |  19 ++++++++
 src/components/Categories/index.tsx           |  19 ++++++++
 src/utils/constants.ts                        |  42 ++++++++++++++++++
 12 files changed, 82 insertions(+)
 rename public/images/{ => categories}/audio.webp (100%)
 rename public/images/{ => categories}/bombillos.webp (100%)
 rename public/images/{ => categories}/exploradoras.webp (100%)
 rename public/images/{ => categories}/exterior.webp (100%)
 rename public/images/{ => categories}/farolas.webp (100%)
 rename public/images/{ => categories}/interior.webp (100%)
 rename public/images/{ => categories}/repuestos.webp (100%)
 rename public/images/{ => categories}/stops.webp (100%)
 create mode 100644 src/components/Categories/CategoryCard.tsx
 create mode 100644 src/components/Categories/index.tsx
 create mode 100644 src/utils/constants.ts

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 (
     <main>
       <Banner />
+      <Categories />
     </main>
   );
 }
diff --git a/src/components/Categories/CategoryCard.tsx b/src/components/Categories/CategoryCard.tsx
new file mode 100644
index 0000000..13f26a6
--- /dev/null
+++ b/src/components/Categories/CategoryCard.tsx
@@ -0,0 +1,19 @@
+import Image from "next/image";
+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">
+      <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>
+    </div>
+  );
+};
+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 (
+    <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;
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",
+  },
+];

From 961fcdcb0ced94fd334fabd9af34620c964e74e2 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Mon, 4 Mar 2024 19:03:54 -0500
Subject: [PATCH 2/2] Add functionality to open ATC e-shop page on click on
 category

---
 src/components/Categories/CategoryCard.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Categories/CategoryCard.tsx b/src/components/Categories/CategoryCard.tsx
index 13f26a6..344d80d 100644
--- a/src/components/Categories/CategoryCard.tsx
+++ b/src/components/Categories/CategoryCard.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import { FC } from "react";
 
 interface CategoryCardProps {
@@ -9,10 +10,11 @@ interface CategoryCardProps {
 const CategoryCard: FC<CategoryCardProps> = ({ image, name }) => {
   return (
     <div className="flex flex-col items-center justify-center gap-x-4 relative group">
-      <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 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>
   );
 };