From e2af696b9a9790e0793ab38df947465d42f275b5 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Wed, 20 Mar 2024 11:46:14 -0500
Subject: [PATCH 1/4] Add AboutUs section

---
 src/app/page.tsx                       |  2 ++
 src/components/AboutUsBanner/index.tsx | 46 ++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/components/AboutUsBanner/index.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f5f4c3b..572acc4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Banner from '@/components/Banner'
 import Categories from '@/components/Categories'
+import { AboutUsBanner } from '@/components/AboutUsBanner'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -18,6 +19,7 @@ export default function Home() {
     <main>
       <Banner />
       <Categories />
+      <AboutUsBanner />
       <BrandsCarousel />
       <Blog />
       <Suspense fallback={<ReviewsSkeleton />}>
diff --git a/src/components/AboutUsBanner/index.tsx b/src/components/AboutUsBanner/index.tsx
new file mode 100644
index 0000000..0c3dff2
--- /dev/null
+++ b/src/components/AboutUsBanner/index.tsx
@@ -0,0 +1,46 @@
+import Image from "next/image";
+
+export const AboutUsBanner = () => {
+  return (
+    <section className="flex items-center justify-evenly w-full py-7 ms:py-12 gap-x-12 px-3 xs:px-8 md:px-4 lg:px-0 max-w-f-hd mx-auto">
+      <div className="md:w-1/4 lg:w-1/3 space-y-2 ms:space-y-6 h-min">
+        <div className="flex justify-between items-center gap-x-6">
+          <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold">Quienes somos</h2>
+          <Image
+          src={"/images/roundLogo.webp"}
+          alt="Logo ATC"
+          width={85}
+          height={85}
+          className="md:hidden"
+        />
+        </div>
+        <p className="text-sm xs:text-lg ms:text-xl md:text-base lg:text-2xl ml-4 ms:ml-10 md:ml-2 lg:ml-5">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aut
+          aperiam quasi, id perferendis error nesciunt architecto ipsa magni
+          alias eveniet consequatur totam illo fuga ad explicabo, aspernatur
+          vero doloribus. Incidunt cum exercitationem unde pariatur ipsa
+          consectetur non fugiat ipsum iusto enim culpa soluta quod, odio
+          debitis sit et molestias est praesentium dolorum rem ipsam obcaecati
+          veniam. Impedit, quia qui! Illum delectus repellendus eum hic
+          recusandae neque rem commodi dolores suscipit soluta, expedita libero,
+          voluptatem sunt qui quidem quaerat.
+        </p>
+      </div>
+      <div className="relative hidden md:block">
+        <Image
+          src={"/images/aboutUS00.webp"}
+          alt="Empleados"
+          width={650}
+          height={650}
+        />
+        <Image
+          src={"/images/roundLogo.webp"}
+          alt="Logo ATC"
+          width={180}
+          height={180}
+          className="absolute -left-20 -bottom-6"
+        />
+      </div>
+    </section>
+  );
+};

From 3284f026df90a1ccea60d9436e3343d62f5d089f Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Wed, 20 Mar 2024 14:25:35 -0500
Subject: [PATCH 2/4] Add onclick navigation functionality

---
 src/components/AboutUsBanner/index.tsx | 44 ++++++++++++++++----------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/AboutUsBanner/index.tsx b/src/components/AboutUsBanner/index.tsx
index 0c3dff2..67b6755 100644
--- a/src/components/AboutUsBanner/index.tsx
+++ b/src/components/AboutUsBanner/index.tsx
@@ -1,18 +1,23 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export const AboutUsBanner = () => {
   return (
     <section className="flex items-center justify-evenly w-full py-7 ms:py-12 gap-x-12 px-3 xs:px-8 md:px-4 lg:px-0 max-w-f-hd mx-auto">
       <div className="md:w-1/4 lg:w-1/3 space-y-2 ms:space-y-6 h-min">
         <div className="flex justify-between items-center gap-x-6">
-          <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold">Quienes somos</h2>
-          <Image
-          src={"/images/roundLogo.webp"}
-          alt="Logo ATC"
-          width={85}
-          height={85}
-          className="md:hidden"
-        />
+          <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold">
+            Quienes somos
+          </h2>
+          <Link href={"about"}>
+            <Image
+              src={"/images/roundLogo.webp"}
+              alt="Logo ATC"
+              width={85}
+              height={85}
+              className="md:hidden"
+            />
+          </Link>
         </div>
         <p className="text-sm xs:text-lg ms:text-xl md:text-base lg:text-2xl ml-4 ms:ml-10 md:ml-2 lg:ml-5">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil aut
@@ -23,7 +28,12 @@ export const AboutUsBanner = () => {
           debitis sit et molestias est praesentium dolorum rem ipsam obcaecati
           veniam. Impedit, quia qui! Illum delectus repellendus eum hic
           recusandae neque rem commodi dolores suscipit soluta, expedita libero,
-          voluptatem sunt qui quidem quaerat.
+          voluptatem sunt qui quidem quaerat.{" "}
+          <Link href={"about"}>
+            <span className="text-primary-lm font-bold hover:underline">
+              Leer más...
+            </span>
+          </Link>
         </p>
       </div>
       <div className="relative hidden md:block">
@@ -33,13 +43,15 @@ export const AboutUsBanner = () => {
           width={650}
           height={650}
         />
-        <Image
-          src={"/images/roundLogo.webp"}
-          alt="Logo ATC"
-          width={180}
-          height={180}
-          className="absolute -left-20 -bottom-6"
-        />
+        <Link href={"about"}>
+          <Image
+            src={"/images/roundLogo.webp"}
+            alt="Logo ATC"
+            width={180}
+            height={180}
+            className="absolute -left-20 -bottom-6"
+          />
+        </Link>
       </div>
     </section>
   );

From 4745b08d68ddc606796684c5203ce161adc199fa Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Wed, 20 Mar 2024 14:33:42 -0500
Subject: [PATCH 3/4] Add scale-up animation to company logo in hover status

---
 src/components/AboutUsBanner/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AboutUsBanner/index.tsx b/src/components/AboutUsBanner/index.tsx
index 67b6755..3c019c6 100644
--- a/src/components/AboutUsBanner/index.tsx
+++ b/src/components/AboutUsBanner/index.tsx
@@ -9,7 +9,7 @@ export const AboutUsBanner = () => {
           <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold">
             Quienes somos
           </h2>
-          <Link href={"about"}>
+          <Link href={"about"} className="hover:scale-125 transition">
             <Image
               src={"/images/roundLogo.webp"}
               alt="Logo ATC"
@@ -49,7 +49,7 @@ export const AboutUsBanner = () => {
             alt="Logo ATC"
             width={180}
             height={180}
-            className="absolute -left-20 -bottom-6"
+            className="absolute -left-20 -bottom-6 hover:scale-125 transition"
           />
         </Link>
       </div>

From 675a0dc85c0268a3f0994fe6cd0f12eb2cb897dc Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Thu, 21 Mar 2024 16:28:49 -0500
Subject: [PATCH 4/4] Add underline in hover status at the title

---
 src/components/AboutUsBanner/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/AboutUsBanner/index.tsx b/src/components/AboutUsBanner/index.tsx
index 3c019c6..6bcdb60 100644
--- a/src/components/AboutUsBanner/index.tsx
+++ b/src/components/AboutUsBanner/index.tsx
@@ -6,9 +6,11 @@ export const AboutUsBanner = () => {
     <section className="flex items-center justify-evenly w-full py-7 ms:py-12 gap-x-12 px-3 xs:px-8 md:px-4 lg:px-0 max-w-f-hd mx-auto">
       <div className="md:w-1/4 lg:w-1/3 space-y-2 ms:space-y-6 h-min">
         <div className="flex justify-between items-center gap-x-6">
-          <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold">
-            Quienes somos
-          </h2>
+          <Link href={"about"}>
+            <h2 className="text-2xl xs:text-4xl ms:text-5xl text-primary-lm font-bold hover:underline">
+              Quienes somos
+            </h2>
+          </Link>
           <Link href={"about"} className="hover:scale-125 transition">
             <Image
               src={"/images/roundLogo.webp"}