skl/resources/js/components/Home/Footer.tsx

70 lines
3.0 KiB
TypeScript

import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import PopupModal from "@/components/Home/PopupModal";
const Footer = () => {
const [showPopup, setShowPopup] = useState(true);
useEffect(() => {
const hasSeenPopup = localStorage.getItem("hasSeenPopup");
if (hasSeenPopup) {
setShowPopup(false);
}
}, []);
const handleClosePopup = () => {
localStorage.setItem("hasSeenPopup", "true");
setShowPopup(false);
};
return (
<>
{showPopup && <PopupModal onClose={handleClosePopup} />}
<footer className="relative bg-green-800 bg-[url('/assets/wood.svg')] rounded-tr-3xl rounded-tl-3xl text-white pt-12 px-6 mt-16">
<div className="md:container max-w-7xl mx-auto text-center">
<h2 className="text-3xl font-bold">
Dapatkan Newsletter Terbaru Sekarang!
</h2>
<div className="mt-6 flex flex-col md:flex-row justify-center items-center gap-4">
<input
type="email"
placeholder="Masukkan Email"
className="px-4 py-2 rounded-lg text-black w-full md:w-1/3"
/>
<Button className="bg-white text-green-800 px-6 py-2 rounded-lg">
Ikuti Sekarang
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
<div className="mt-12 bg-[url('/assets/bg-footer-2.jpg')] bg-cover bg-center text-white p-2 md:p-6 pt-10 rounded-lg bottom-0 mx-auto max-w-5xl">
<img
src="/assets/dlh-logo.svg"
alt="Logo"
className="mx-auto mb-4 w-32 object-contain"
/>
<p className="font-bold">
Dinas Lingkungan Hidup Provinsi DKI Jakarta
</p>
<p className="text-sm">
Bidang Tata Lingkungan dan Kebersihan
</p>
<p className="text-sm mt-2">
Jalan Mandala V No.67, Cililitan, Kramat Jati,
RT.2/RW.3, Cililitan, Kota Jakarta Timur, Daerah
Khusus Ibukota Jakarta 13640
</p>
<p className="text-sm mt-2">
Telepon: (021) 8092744 | Fax: (021) 8091056
</p>
<p className="text-sm">Email: dinaslh@jakarta.go.id</p>
<p className="text-xs mt-6">© Copyright 2016</p>
</div>
</div>
</footer>
</>
);
};
export default Footer;