medol
/
web-milenial-bersuara
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

This commit is contained in:
Anang Yusman 2025-11-21 17:30:15 +08:00
parent 4a4312cd01
commit f4ac274c5e
1 changed files with 46 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
components/landing-page/footer.tsx
View File

@ -1,173 +1,64 @@
"use client";
// components/Footer.tsx
import Image from "next/image";
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
import Link from "next/link";
import { CalendarDays } from "lucide-react";
const categories = [
"Destination",
"Food & Drink",
"News",
"Photo",
"Tak Berkategori",
"Travel Ideas",
"Video",
];
const tags = [
"AI",
"arus balik",
"arus mudik",
"Backpacker",
"Budi Zulkifli",
"drama Korea",
"Food",
"Indonesia",
"Jin BTS",
"jurnalis",
"Kakorlantas",
"konser",
"Korea Utara",
"Lebaran 2025",
"Media Hub",
"mudik",
"musik AI",
"Piala Usia U-17 2025",
"Polri",
"Resident Playbook",
"The Astronaut",
"Tips",
"Tol Cipali",
"Tol Japek",
"Trip Plan",
];
const recentNews = [
{
id: 1,
title:
"Jin BTS Jadi Special Guest Konser Coldplay di Korea, Bawakan Lagu My Universe dan The Astronaut",
date: "21 APRIL 2025",
image: "/coldplay.png",
},
{
id: 2,
title:
"Kehadiran Media Hub Polri Jadi Jawaban atas Kebutuhan Jurnalis Masa Kini",
date: "16 APRIL 2025",
image: "/mediahub-1.jpg",
},
];
export default function Footer() {
return (
<footer className="bg-[#293132] text-gray-300 text-sm">
<div className="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Logo & About */}
<div>
<h2 className="text-2xl font-bold">
<span className="text-white">travel</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 items-center justify-end">
<Link href="/" className="text-2xl font-bold">
<span className="text-gray-900">travel</span>
<span className="text-teal-400">news</span>
</Link>
</div>
{/* Subscribe Box */}
<div className="flex justify-end md:justify-end pl-5">
<div className=" w-full ml-5">
<h2 className="text-2xl font-semibold text-gray-800 leading-snug">
Subscribe us to get <br />
the latest news!
</h2>
<p className="mt-3 text-gray-400 leading-relaxed">
We bring you the best Premium WordPress Themes that perfect for
news, magazine, personal blog, etc.
</p>
<Link
href="#"
className="mt-3 inline-block text-teal-400 hover:underline"
>
Read more
</Link>
</div>
{/* Categories */}
<div>
<h3 className="text-white font-semibold mb-3">Categories</h3>
<ul className="space-y-2">
{categories.map((cat, i) => (
<li key={i}>
<Link href="#" className="hover:text-teal-400">
{cat}
</Link>
</li>
))}
</ul>
</div>
<label className="block mt-6 mb-1 text-sm text-gray-600">
Email address:
</label>
{/* Tags */}
<div>
<h3 className="text-white font-semibold mb-3">Tags</h3>
<div className="flex flex-wrap gap-2">
{tags.map((tag, i) => (
<span
key={i}
className="bg-gray-700 hover:bg-teal-500 hover:text-white text-gray-300 text-xs px-2 py-1 rounded cursor-pointer"
>
{tag}
</span>
))}
</div>
</div>
{/* Recent News */}
<div>
<h3 className="text-white font-semibold mb-3">Recent News</h3>
<ul className="space-y-4">
{recentNews.map((news) => (
<li key={news.id} className="flex gap-3">
<Image
src={news.image}
alt={news.title}
width={80}
height={60}
className="object-cover rounded"
<input
type="email"
placeholder="Your email address"
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
/>
<div>
<Link
href="#"
className="text-gray-200 font-medium hover:text-teal-400 text-sm leading-snug"
>
{news.title}
</Link>
<div className="flex items-center text-xs text-gray-400 gap-1 mt-1">
<CalendarDays size={12} />
{news.date}
<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>
</li>
))}
</ul>
</div>
</div>
{/* Bottom Bar */}
<div className="border-t bg-[#474044] border-gray-700 py-4 px-6 flex flex-col md:flex-row items-center justify-between text-xs text-gray-400">
<p>
© 2025 <span className="text-teal-400">JNews</span> - Premium
WordPress news & magazine theme by{" "}
<Link href="#" className="hover:underline">
Jegtheme
</Link>
.
<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 Milenial Bersuara - All Rights Reserved.
</p>
<div className="flex gap-4 mt-2 md:mt-0">
<Link href="#">
<i className="fab fa-facebook"></i>
</Link>
<Link href="#">
<i className="fab fa-twitter"></i>
</Link>
<Link href="#">
<i className="fab fa-google-plus-g"></i>
</Link>
<Link href="#">
<i className="fab fa-pinterest"></i>
</Link>
<Link href="#">
<i className="fab fa-rss"></i>
</Link>
</div>
</div>
</footer>
);
}