69 lines
2.4 KiB
JavaScript
69 lines
2.4 KiB
JavaScript
import { motion } from "framer-motion";
|
|
import { MapPin } from "lucide-react";
|
|
|
|
export default function Cakupan() {
|
|
return (
|
|
<section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
|
|
{/* Animated Gradient Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-blue-100 animate-gradient bg-[length:300%_300%]"></div>
|
|
|
|
<div className="relative z-10">
|
|
{/* Title */}
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-extrabold text-blue-900 drop-shadow-md">
|
|
Cakupan Area
|
|
</h2>
|
|
<p className="mt-3 text-gray-700 max-w-2xl mx-auto leading-relaxed">
|
|
Saat ini jaringan dan layanan{" "}
|
|
<span className="font-semibold text-blue-600">WTELL</span> telah
|
|
berhasil menghadirkan internet di berbagai daerah di Kota Bandung
|
|
hingga Desa 3T (Tertinggal, Terdepan, Terluar).
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
|
|
{/* Map */}
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="flex-1 flex justify-center"
|
|
>
|
|
<img
|
|
src="/map-bandung.jpg"
|
|
alt="Map Bandung"
|
|
className="w-full max-w-xl rounded-2xl shadow-xl border-4 border-blue-100"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* List Area */}
|
|
<motion.div
|
|
whileHover={{ y: -5 }}
|
|
className="flex-1 bg-white/80 p-8 rounded-2xl shadow-xl backdrop-blur-md border border-blue-100"
|
|
>
|
|
<h3 className="text-xl font-bold mb-6 text-blue-700 border-b pb-3">
|
|
Fokus Layanan
|
|
</h3>
|
|
<ul className="space-y-4 text-gray-700">
|
|
{[
|
|
"Bandung Kota",
|
|
"Cimahi",
|
|
"Cileunyi",
|
|
"Ngamprah",
|
|
"Desa 3T sekitar Bandung",
|
|
].map((area, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex items-center gap-3 hover:bg-blue-50 p-3 rounded-lg transition"
|
|
>
|
|
<MapPin className="w-5 h-5 text-red-500" />
|
|
<span className="font-medium">{area}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|