update footer
This commit is contained in:
parent
fd033d889b
commit
31f084b8dd
|
|
@ -1,119 +1,66 @@
|
|||
// components/Footer.tsx
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-white text-[#666666] text-sm font-sans border-t border-gray-200">
|
||||
<div className="max-w-7xl mx-auto py-6">
|
||||
<div className="flex flex-wrap justify-center md:justify-start gap-2 md:gap-3 text-xs mb-8 text-black">
|
||||
{[
|
||||
"Kebijakan Privasi",
|
||||
"Tentang Kami",
|
||||
|
||||
"Kode Etik Jurnalistik",
|
||||
|
||||
"Pedoman Pemberitaan Media Siber",
|
||||
"Disclaimer",
|
||||
].map((item, idx, arr) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="flex items-center gap-2 whitespace-nowrap"
|
||||
>
|
||||
<a href="#" className="hover:underline">
|
||||
{item}
|
||||
</a>
|
||||
{idx !== arr.length - 1 && (
|
||||
<span className="text-gray-400">/</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
<footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
|
||||
<div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
|
||||
{/* Logo */}
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<Image
|
||||
src="/bhayangkara-logo.png"
|
||||
alt="Logo"
|
||||
width={230}
|
||||
height={230}
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr className="border-t border-gray-200 my-4" />
|
||||
{/* Subscribe Box */}
|
||||
<div className="flex justify-center md:justify-end">
|
||||
<div className=" p-8 w-full md:w-[420px]">
|
||||
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
|
||||
Subscribe us to get <br />
|
||||
the latest news!
|
||||
</h2>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||||
<p className="text-xs text-gray-500 mb-2 md:mb-0">
|
||||
© 2020 - © Copyright Bhayangkarakita Team All Rights Reserved .
|
||||
</p>
|
||||
<div className="flex space-x-4 text-[#A0A0A0]">
|
||||
<Link href="#">
|
||||
<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>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
<label className="block mt-6 mb-1 text-sm text-gray-600">
|
||||
Email address:
|
||||
</label>
|
||||
|
||||
// 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="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m-2 5.575v4.85c0 .462.5.75.9.52l4.2-2.425a.6.6 0 0 0 0-1.04l-4.2-2.424a.6.6 0 0 0-.9.52Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="#" className="text-[#A0A0A0]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
// fill-rule="evenodd"
|
||||
d="M17.802 12.298s1.617 1.597 2.017 2.336a.1.1 0 0 1 .018.035q.244.409.123.645c-.135.261-.592.392-.747.403h-2.858c-.199 0-.613-.052-1.117-.4c-.385-.269-.768-.712-1.139-1.145c-.554-.643-1.033-1.201-1.518-1.201a.6.6 0 0 0-.18.03c-.367.116-.833.639-.833 2.032c0 .436-.344.684-.585.684H9.674c-.446 0-2.768-.156-4.827-2.327C2.324 10.732.058 5.4.036 5.353c-.141-.345.155-.533.475-.533h2.886c.387 0 .513.234.601.444c.102.241.48 1.205 1.1 2.288c1.004 1.762 1.621 2.479 2.114 2.479a.53.53 0 0 0 .264-.07c.644-.354.524-2.654.494-3.128c0-.092-.001-1.027-.331-1.479c-.236-.324-.638-.45-.881-.496c.065-.094.203-.238.38-.323c.441-.22 1.238-.252 2.029-.252h.439c.858.012 1.08.067 1.392.146c.628.15.64.557.585 1.943c-.016.396-.033.842-.033 1.367c0 .112-.005.237-.005.364c-.019.711-.044 1.512.458 1.841a.4.4 0 0 0 .217.062c.174 0 .695 0 2.108-2.425c.62-1.071 1.1-2.334 1.133-2.429c.028-.053.112-.202.214-.262a.5.5 0 0 1 .236-.056h3.395c.37 0 .621.056.67.196c.082.227-.016.92-1.566 3.016c-.261.349-.49.651-.691.915c-1.405 1.844-1.405 1.937.083 3.337"
|
||||
// clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address"
|
||||
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
|
||||
/>
|
||||
|
||||
<button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
|
||||
SIGN UP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">Kode Etik Jurnalistik</a>
|
||||
<a href="#">Kebijakan Privasi</a>
|
||||
<a href="#">Disclaimer</a>
|
||||
<a href="#">Pedoman Media Siber</a>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-8 mt-8 text-gray-700">
|
||||
<Facebook className="w-5 h-5 cursor-pointer" />
|
||||
<Twitter className="w-5 h-5 cursor-pointer" />
|
||||
<Instagram className="w-5 h-5 cursor-pointer" />
|
||||
<Youtube className="w-5 h-5 cursor-pointer" />
|
||||
</div>
|
||||
|
||||
<p className="text-start text-gray-500 text-sm mt-8 pl-5">
|
||||
© 2025 BhayangkaraKita - All Rights Reserved.
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue