From 991507a5dc11a1cd10708276d2308e3f12cdeb51 Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Tue, 2 Apr 2024 17:02:01 -0500
Subject: [PATCH 1/2] Add WhatsApp button

---
 src/app/page.tsx                        |  2 ++
 src/components/WhatsAppButton/index.tsx | 12 ++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/components/WhatsAppButton/index.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 080c0cd..e16bf0a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,6 +13,7 @@ import BrandsCarousel from "@/components/BrandsCarousel";
 import { Reviews } from "@/components/Reviews";
 import { PaymentMethods } from '@/components/PaymentMethods'
 import { ReviewsSkeleton } from "@/components/Reviews/ReviewsSkeleton";
+import { WhatsAppButton } from '@/components/WhatsAppButton'
 import { Suspense } from "react";
 
 export default function Home() {
@@ -27,6 +28,7 @@ export default function Home() {
         <Reviews />
       </Suspense>
       <PaymentMethods />
+      <WhatsAppButton />
     </main>
   )
 }
diff --git a/src/components/WhatsAppButton/index.tsx b/src/components/WhatsAppButton/index.tsx
new file mode 100644
index 0000000..291f266
--- /dev/null
+++ b/src/components/WhatsAppButton/index.tsx
@@ -0,0 +1,12 @@
+import Link from "next/link";
+import { MdOutlineWhatsapp } from "react-icons/md";
+
+export const WhatsAppButton = () => {
+  return (
+    <div className="w-20 h-20 rounded-full bg-[#25D366] fixed z-10 bottom-10 right-10 ms:flex items-center justify-center hidden cursor-pointer">
+      <Link href={'#'} className="text-white">
+        <MdOutlineWhatsapp size={55} />
+      </Link>
+    </div>
+  );
+};

From 32d179930a82655a5239487e3d4ba6824411512e Mon Sep 17 00:00:00 2001
From: Telkens <stivenmg77@gmail.com>
Date: Tue, 2 Apr 2024 17:18:08 -0500
Subject: [PATCH 2/2] Add a scale-up transition

---
 src/components/WhatsAppButton/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WhatsAppButton/index.tsx b/src/components/WhatsAppButton/index.tsx
index 291f266..d1af1a8 100644
--- a/src/components/WhatsAppButton/index.tsx
+++ b/src/components/WhatsAppButton/index.tsx
@@ -3,7 +3,7 @@ import { MdOutlineWhatsapp } from "react-icons/md";
 
 export const WhatsAppButton = () => {
   return (
-    <div className="w-20 h-20 rounded-full bg-[#25D366] fixed z-10 bottom-10 right-10 ms:flex items-center justify-center hidden cursor-pointer">
+    <div className="w-20 h-20 rounded-full bg-[#25D366] fixed z-10 bottom-10 right-10 ms:flex items-center justify-center hidden cursor-pointer hover:scale-125 transition-all">
       <Link href={'#'} className="text-white">
         <MdOutlineWhatsapp size={55} />
       </Link>