compro-mit/src/components/footer.tsx
2026-06-22 20:04:18 +07:00

42 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
import Image from "next/image";
export default function Footer() {
return (
<div id="kontak" className="bg-primary-800 w-full relative">
<div className="flex flex-col gap-4 px-4 py-6 z-10 text-white md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
<div className="flex flex-col gap-4 md:justify-between">
<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>
<div className="w-full pt-4 border-t border-primary-600 text-lg">Mulia Informasi Teknologi @2026. All Right Reserved</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 md:gap-6">
<div className="flex flex-col gap-2 md:gap-6">
<p className="text-[32px] md:text-[40px] font-semibold">Lets Collaborate</p>
<p className="md:text-lg">Lets build something that works and grows.</p>
</div>
<a className="primary-button pl-3" href="mailto:product@muliainformasi.co.id">
Contact Us
<div className="p-2 bg-secondary-400">
<ArrowUpRightIcon className="size-5 text-white" />
</div>
</a>
</div>
<p className="text-center z-10 pt-4 border-t border-primary-600 flex w-full md:hidden">Mulia Informasi Teknologi @2026. All Right Reserved</p>
</div>
</div>
<Image src={Corner1} className="w-20 absolute z-0 top-0 right-0" alt="corner-1" />
<Image src={Corner2} className="w-20 absolute z-0 bottom-0 left-0" alt="corner-1" />
</div>
);
}