2025-09-16 08:29:07 +00:00
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { Instagram, ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
|
import Image from "next/image";
|
|
|
|
|
import { useRef } from "react";
|
|
|
|
|
|
2025-10-09 16:43:53 +00:00
|
|
|
// const logos = [
|
|
|
|
|
// { src: "/mabes.png", href: "/in/public/publication/kl" },
|
|
|
|
|
// { src: "/saw.png", href: "/" },
|
|
|
|
|
// { src: "/mpr.png", href: "/" },
|
|
|
|
|
// { src: "/dpr.png", href: "/" },
|
|
|
|
|
// { src: "/ma.png", href: "/" },
|
|
|
|
|
// { src: "/badan.png", href: "/" },
|
|
|
|
|
// { src: "/kpk.png", href: "/" },
|
|
|
|
|
// { src: "/pln.png", href: "/" },
|
|
|
|
|
// ];
|
|
|
|
|
|
2025-09-16 08:29:07 +00:00
|
|
|
const logos = [
|
2025-10-09 16:43:53 +00:00
|
|
|
{ src: "/mabes.png", slug: "mabes" },
|
|
|
|
|
{ src: "/saw.png", slug: "kejaksaan-agung" },
|
|
|
|
|
{ src: "/mpr.png", slug: "mpr-ri" },
|
|
|
|
|
{ src: "/dpr.png", slug: "dpr-ri" },
|
|
|
|
|
{ src: "/ma.png", slug: "mahkamah-agung" },
|
|
|
|
|
{ src: "/badan.png", slug: "kemenkeu" },
|
|
|
|
|
{ src: "/kpk.png", slug: "kpk" },
|
|
|
|
|
{ src: "/pln.png", slug: "pupr" },
|
2025-09-16 08:29:07 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
export default function Footer() {
|
|
|
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
|
|
const scroll = (direction: "left" | "right") => {
|
|
|
|
|
if (scrollRef.current) {
|
|
|
|
|
scrollRef.current.scrollBy({
|
|
|
|
|
left: direction === "left" ? -200 : 200,
|
|
|
|
|
behavior: "smooth",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<footer className="border-t bg-white text-center">
|
|
|
|
|
<div className="max-w-[1350px] mx-auto">
|
|
|
|
|
<div className="py-6">
|
|
|
|
|
<h2 className="text-2xl font-semibold mb-4 px-4 md:px-0">
|
|
|
|
|
Publikasi
|
|
|
|
|
</h2>
|
|
|
|
|
<div className="relative flex items-center justify-center">
|
|
|
|
|
{/* Left Scroll Button */}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => scroll("left")}
|
|
|
|
|
className="absolute left-2 z-10 bg-white p-1 md:p-2 shadow rounded-full hidden md:inline-flex"
|
|
|
|
|
>
|
|
|
|
|
<ChevronLeft className="w-4 h-4 md:w-5 md:h-5" />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{/* Scrollable Container */}
|
|
|
|
|
<div
|
|
|
|
|
ref={scrollRef}
|
|
|
|
|
className="flex gap-6 md:gap-14 overflow-x-auto no-scrollbar px-4 md:px-12"
|
|
|
|
|
>
|
|
|
|
|
{logos.map((logo, idx) => (
|
|
|
|
|
<a
|
|
|
|
|
key={idx}
|
2025-10-09 16:43:53 +00:00
|
|
|
href={`/in/tenant/${logo.slug}`}
|
2025-09-16 08:29:07 +00:00
|
|
|
target="_blank"
|
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
|
>
|
|
|
|
|
<Image
|
|
|
|
|
src={logo.src}
|
|
|
|
|
alt={`logo-${idx}`}
|
|
|
|
|
width={60}
|
|
|
|
|
height={60}
|
|
|
|
|
className="md:w-[80px] md:h-[80px] flex-shrink-0 object-contain hover:opacity-80 transition"
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Right Scroll Button */}
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => scroll("right")}
|
|
|
|
|
className="absolute right-2 z-10 bg-white p-1 md:p-2 shadow rounded-full hidden md:inline-flex"
|
|
|
|
|
>
|
|
|
|
|
<ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="border-t my-6 w-full max-w-6xl mx-auto" />
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4 px-4 pb-6 max-w-6xl mx-auto text-sm text-gray-600">
|
|
|
|
|
<div className="flex items-center gap-2">
|
|
|
|
|
<span>ver 1.0.0 @2025 - Layanan NetIDHUB disediakan</span>
|
|
|
|
|
<Image
|
|
|
|
|
src="/qudo.png"
|
|
|
|
|
alt="qudoco"
|
|
|
|
|
width={80}
|
|
|
|
|
height={80}
|
|
|
|
|
className="object-contain"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Social Media */}
|
|
|
|
|
<div className="flex gap-3 text-gray-800">
|
|
|
|
|
<Instagram className="hover:text-black" />
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="24"
|
|
|
|
|
height="24"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="24"
|
|
|
|
|
height="24"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<g fill="none">
|
|
|
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M4.594 4.984a1 1 0 0 1 .941.429C7.011 7.572 8.783 8.47 10.75 8.674c.096-.841.323-1.672.75-2.404c.626-1.074 1.644-1.864 3.098-2.156c2.01-.404 3.54.324 4.427 1.215l1.792-.335a1 1 0 0 1 1.053 1.478l-1.72 3.022c.157 4.361-1.055 7.405-3.639 9.502c-1.37 1.112-3.332 1.743-5.485 1.938c-2.17.196-4.623-.041-7.061-.753a1 1 0 0 1 .007-1.922c1.226-.349 2.16-.65 3.003-1.177c-1.199-.636-2.082-1.468-2.707-2.416c-.868-1.318-1.19-2.788-1.254-4.113S3.141 8 3.343 7.115c.115-.505.249-1.011.434-1.495a1 1 0 0 1 .818-.636Z"
|
|
|
|
|
/>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="24"
|
|
|
|
|
height="24"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
// fill-rule="evenodd"
|
|
|
|
|
d="M9.935 14.628v-5.62l5.403 2.82zM21.8 8.035s-.195-1.379-.795-1.986c-.76-.796-1.613-.8-2.004-.847C16.203 5 12.004 5 12.004 5h-.008s-4.198 0-6.997.202c-.391.047-1.243.05-2.004.847c-.6.607-.795 1.986-.795 1.986S2 9.653 2 11.272v1.517c0 1.618.2 3.237.2 3.237s.195 1.378.795 1.985c.76.797 1.76.771 2.205.855c1.6.153 6.8.2 6.8.2s4.203-.006 7.001-.208c.391-.047 1.244-.05 2.004-.847c.6-.607.795-1.985.795-1.985s.2-1.619.2-3.237v-1.517c0-1.619-.2-3.237-.2-3.237"
|
|
|
|
|
/>
|
|
|
|
|
</svg>
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
width="24"
|
|
|
|
|
height="24"
|
|
|
|
|
viewBox="0 0 24 24"
|
|
|
|
|
>
|
|
|
|
|
<g
|
|
|
|
|
fill="none"
|
|
|
|
|
// fill-rule="evenodd"
|
|
|
|
|
>
|
|
|
|
|
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
|
|
|
|
<path
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M14 2a2 2 0 0 1 2 2a3.004 3.004 0 0 0 2.398 2.94a2 2 0 0 1-.796 3.92A7 7 0 0 1 16 10.325V16a6 6 0 1 1-7.499-5.81a2 2 0 0 1 .998 3.873A2.002 2.002 0 0 0 10 18a2 2 0 0 0 2-2V4a2 2 0 0 1 2-2"
|
|
|
|
|
/>
|
|
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
);
|
|
|
|
|
}
|
