update
This commit is contained in:
parent
4a4312cd01
commit
f4ac274c5e
|
|
@ -1,173 +1,64 @@
|
||||||
"use client";
|
// components/Footer.tsx
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
|
||||||
import Link from "next/link";
|
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() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-[#293132] text-gray-300 text-sm">
|
<footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
|
||||||
<div className="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
|
<div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
|
||||||
{/* Logo & About */}
|
{/* Logo */}
|
||||||
<div>
|
<div className="flex items-center justify-end">
|
||||||
<h2 className="text-2xl font-bold">
|
<Link href="/" className="text-2xl font-bold">
|
||||||
<span className="text-white">travel</span>
|
<span className="text-gray-900">travel</span>
|
||||||
<span className="text-teal-400">news</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>
|
</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 */}
|
<label className="block mt-6 mb-1 text-sm text-gray-600">
|
||||||
<div>
|
Email address:
|
||||||
<h3 className="text-white font-semibold mb-3">Categories</h3>
|
</label>
|
||||||
<ul className="space-y-2">
|
|
||||||
{categories.map((cat, i) => (
|
|
||||||
<li key={i}>
|
|
||||||
<Link href="#" className="hover:text-teal-400">
|
|
||||||
{cat}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tags */}
|
<input
|
||||||
<div>
|
type="email"
|
||||||
<h3 className="text-white font-semibold mb-3">Tags</h3>
|
placeholder="Your email address"
|
||||||
<div className="flex flex-wrap gap-2">
|
className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
|
||||||
{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"
|
|
||||||
/>
|
/>
|
||||||
<div>
|
|
||||||
<Link
|
<button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
|
||||||
href="#"
|
SIGN UP
|
||||||
className="text-gray-200 font-medium hover:text-teal-400 text-sm leading-snug"
|
</button>
|
||||||
>
|
|
||||||
{news.title}
|
|
||||||
</Link>
|
|
||||||
<div className="flex items-center text-xs text-gray-400 gap-1 mt-1">
|
|
||||||
<CalendarDays size={12} />
|
|
||||||
{news.date}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Bar */}
|
<div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
|
||||||
<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">
|
<a href="#">About Us</a>
|
||||||
<p>
|
<a href="#">Contact</a>
|
||||||
© 2025 <span className="text-teal-400">JNews</span> - Premium
|
<a href="#">Kode Etik Jurnalistik</a>
|
||||||
WordPress news & magazine theme by{" "}
|
<a href="#">Kebijakan Privasi</a>
|
||||||
<Link href="#" className="hover:underline">
|
<a href="#">Disclaimer</a>
|
||||||
Jegtheme
|
<a href="#">Pedoman Media Siber</a>
|
||||||
</Link>
|
</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>
|
</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>
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue