77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
|
import Image from "next/image";
|
||
|
|
|
||
|
|
export default function MediaOptions() {
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
title: "Videotron",
|
||
|
|
desc: "Large-format advertising di lokasi strategis dengan traffic tinggi",
|
||
|
|
img: "/videotron.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Media Online",
|
||
|
|
desc: "Branding interior kereta api dengan jangkauan penumpang tinggi",
|
||
|
|
img: "/gemini.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Media Sosial",
|
||
|
|
desc: "Display digital untuk konten dinamis dan engaging di stasiun & mall",
|
||
|
|
img: "/ai.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Radio Polri",
|
||
|
|
desc: "Large-format advertising di lokasi strategis dengan traffic tinggi",
|
||
|
|
img: "/radio.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "TV Polri",
|
||
|
|
desc: "Branding interior kereta api dengan jangkauan penumpang tinggi",
|
||
|
|
img: "/tvpolri.png",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Majalah Digital",
|
||
|
|
desc: "Display digital untuk konten dinamis dan engaging di stasiun & mall",
|
||
|
|
img: "/majalah.png",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="container mx-auto py-12 px-4">
|
||
|
|
<div className="text-center mb-10">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-bold text-black">
|
||
|
|
Pilihan Media Iklan untuk Brand Anda
|
||
|
|
</h2>
|
||
|
|
<p className="text-gray-600 mt-2">
|
||
|
|
Maksimalkan visibilitas brand dengan media iklan strategis
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mx-16">
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition"
|
||
|
|
>
|
||
|
|
<div className="relative w-full h-48">
|
||
|
|
<Image
|
||
|
|
src={item.img}
|
||
|
|
alt={item.title}
|
||
|
|
fill
|
||
|
|
className="object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-4">
|
||
|
|
<h3 className="font-semibold text-lg text-black">{item.title}</h3>
|
||
|
|
<p className="text-sm text-gray-600 mt-2">{item.desc}</p>
|
||
|
|
|
||
|
|
<button className="mt-4 inline-flex items-center gap-2 text-blue-600 border border-blue-600 px-4 py-2 rounded-full text-sm hover:bg-blue-50">
|
||
|
|
Lihat Layanan →
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|