ComproMIT/compro-mit
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add WhatsApp contact bubble and update footer with contact details

Browse Source
This commit is contained in:
fadilkun45 2026-09-03 12:24:12 +07:00
parent c055899f01
commit cba019baed
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/page.tsx
View File

@ -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>
);
}

11
src/components/WhatsAppBubble.tsx Normal file
View File

@ -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

12
src/components/footer.tsx
View File

@ -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">