From cba019baed01a56407554824f2993ecccb11df45 Mon Sep 17 00:00:00 2001
From: fadilkun45 <indocrafter76@gmail.com>
Date: Thu, 3 Sep 2026 12:24:12 +0700
Subject: [PATCH] feat: add WhatsApp contact bubble and update footer with
 contact details

---
 src/app/page.tsx                  |  3 +++
 src/components/WhatsAppBubble.tsx | 11 +++++++++++
 src/components/footer.tsx         | 12 +++++++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WhatsAppBubble.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cfcb75a..d654717 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,6 +13,7 @@ import Corner2 from "@/image/portofolio/corner-why-us-2.svg";
 import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
 import Image from "next/image";
 import ClientImage from "../components/home/client-image";
+import WhatsAppBubble from "@src/components/WhatsAppBubble";
 
 export default function Home() {
   const ourService = [
@@ -187,6 +188,8 @@ export default function Home() {
         <Image src={Corner1} alt="corner-1" className="w-20 md:w-30 absolute top-0 right-0 z-0" />
         <Image src={Corner2} alt="corner-2" className="w-20 md:w-30 absolute bottom-0 left-0 z-0" />
       </div>
+
+      <WhatsAppBubble />
     </div>
   );
 }
diff --git a/src/components/WhatsAppBubble.tsx b/src/components/WhatsAppBubble.tsx
new file mode 100644
index 0000000..84bc031
--- /dev/null
+++ b/src/components/WhatsAppBubble.tsx
@@ -0,0 +1,11 @@
+import { WhatsappLogoIcon } from '@phosphor-icons/react/ssr'
+
+const WhatsAppBubble = () => {
+  return (
+    <a href="https://wa.me/02129755506" target="_blank" rel="noopener noreferrer" className=' z-40 bottom-4 bg-[#25D366]  cursor-pointer w-14 h-14 rounded-full flex items-center justify-center right-4 fixed'>
+        <WhatsappLogoIcon className='size-8 text-white' />
+    </a>
+  )
+}
+
+export default WhatsAppBubble
\ No newline at end of file
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 8ab81e0..d18716c 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,6 +1,8 @@
+"use client";
 import Corner1 from "@/image/footer/corner-footer-1.svg";
 import Corner2 from "@/image/footer/corner-footer-2.svg";
 import LogoWhite from "@/image/logo-white.png";
+import { EnvelopeIcon, PhoneIcon } from "@phosphor-icons/react";
 import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
 import Image from "next/image";
 
@@ -12,8 +14,16 @@ export default function Footer() {
           <div className="flex flex-col gap-3">
             <Image src={LogoWhite} className="h-7.5 w-fit" alt="logo-white" />
             <p className="text-sm md:text-lg">The Kensington Office Tower Lantai 2 Ruang B2, Jl. Boulevard Raya No. 1, Kelapa Gading Timur, Kelapa Gading, Jakarta Utara 14240</p>
+            <div className="flex items-center gap-2 text-white">
+              <PhoneIcon className="size-5" />
+              <p className=" text-sm lg:text-lg">02129755506</p>
+            </div>
+            <div className="flex items-center gap-2 text-white">
+              <EnvelopeIcon className="size-5" />
+              <p className="text-sm lg:text-lg">connect@muliainformasi.co.id</p>
+            </div>
           </div>
-          <div className="w-full pt-4 border-t border-primary-600 text-lg">Mulia Informasi Teknologi @2026. All Right Reserved</div>
+          <div className="w-full pt-4 border-t border-primary-600 hidden lg:flex text-lg">Mulia Informasi Teknologi @2026. All Right Reserved</div>
         </div>
 
         <div className="flex flex-col gap-4">