membuat portfolio, home, about, dan footer

src/App.jsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
 import About from "./pages/About";
+import Portfolio from "./pages/Portfolio";
 
 export default function App() {
   return (
@@ -8,6 +9,7 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/portfolio" element={<Portfolio />} />
       </Routes>
     </Router>
   );

src/components/Cakupan.jsx

@@ -0,0 +1,68 @@
+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>
+  );
+}

src/components/Hero.jsx

@@ -0,0 +1,26 @@
+export default function Hero() {
+  return (
+    <section className="relative h-screen w-full overflow-hidden">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+      >
+        <source src="/bg-video.mp4" type="video/mp4" />
+      </video>
+      <div className="absolute inset-0 bg-black/50"></div>
+
+      <div className="relative z-10 flex flex-col justify-center h-full px-6 lg:px-20 text-white max-w-3xl">
+        <p className="text-lg">Mari menjadi bagian dari kami</p>
+        <h1 className="text-4xl md:text-6xl font-bold leading-tight mt-2">
+          WALANJA <br /> TELEKOMUNIKASI
+        </h1>
+        <p className="mt-4 text-lg">
+          Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
+        </p>
+      </div>
+    </section>
+  );
+}

src/components/Navbar.jsx

@@ -1,24 +1,46 @@
 import { useState, useEffect } from "react";
-import { ChevronDown } from "lucide-react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
-import { Link } from "react-router-dom";
 
 export default function Navbar() {
-  const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  // Deteksi scroll
+  // Deteksi scroll untuk ubah background navbar
   useEffect(() => {
-    const handleScroll = () => {
+    const handleScroll = () => setScrolled(window.scrollY > 50);
-      if (window.scrollY > 50) {
-        setScrolled(true);
-      } else {
-        setScrolled(false);
-      }
-    };
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  // Scroll otomatis kalau ada hash (#sdm, dll)
+  useEffect(() => {
+    if (location.hash) {
+      const id = location.hash.replace("#", "");
+      const el = document.getElementById(id);
+      if (el) {
+        setTimeout(() => {
+          el.scrollIntoView({ behavior: "smooth" });
+        }, 100);
+      }
+    }
+  }, [location]);
+
+  const linkClass = ({ isActive }) =>
+    `relative pb-1 transition-colors duration-300 hover:text-yellow-400 ${
+      isActive ? "text-yellow-400 font-semibold" : ""
+    }`;
+
+  // Klik About Us → scroll atau pindah halaman
+  const handleAboutClick = (e) => {
+    if (location.pathname === "/about") {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } else {
+      navigate("/about");
+    }
+  };
+
   return (
     <header
       className={`fixed w-full top-0 z-20 transition-all duration-300 ${
@@ -28,13 +50,13 @@ export default function Navbar() {
       <nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
         {/* Logo */}
         <div className="flex items-center space-x-2">
-          <img src="/WTell.png" alt="logo" className="h-8" />
+          <img src="/WTell.png" alt="logo" className="h-12 w-auto object-contain" />
           <span
             className={`text-lg font-bold transition-colors duration-300 ${
               scrolled ? "text-black" : "text-white"
             }`}
           >
-            WALANJA
+            WALANJA TELEKOMUNIKASI
           </span>
         </div>
 
@@ -46,81 +68,34 @@ export default function Navbar() {
         >
           {/* Home */}
           <li>
-            <Link
+            <NavLink to="/" className={linkClass}>
-              to="/"
-              className={`hover:text-yellow-400 ${
-                !scrolled ? "border-b-2 border-yellow-400 pb-1" : ""
-              }`}
-            >
               Home
-            </Link>
+            </NavLink>
           </li>
 
-          {/* Dropdown Portofolio */}
+          {/* Portfolio (tanpa dropdown) */}
-          <li className="relative">
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="hover:text-yellow-400 flex items-center gap-1"
-            >
-              Portofolio
-              <ChevronDown
-                size={18}
-                className={`transition-transform duration-200 ${
-                  isOpen ? "rotate-180" : ""
-                }`}
-              />
-            </button>
-
-            {isOpen && (
-              <ul className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg text-black">
           <li>
-                  <Link
+            <NavLink to="/portfolio" className={linkClass}>
-                    to="/sdm"
+              Portfolio
-                    className="block px-4 py-2 hover:bg-yellow-100"
+            </NavLink>
-                  >
-                    SDM
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    to="/alat-kerja"
-                    className="block px-4 py-2 hover:bg-yellow-100"
-                  >
-                    Alat Kerja
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    to="/produksi"
-                    className="block px-4 py-2 hover:bg-yellow-100"
-                  >
-                    Produksi
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    to="/pengalaman"
-                    className="block px-4 py-2 hover:bg-yellow-100"
-                  >
-                    Pengalaman
-                  </Link>
-                </li>
-              </ul>
-            )}
           </li>
 
           {/* About Us */}
           <li>
-            <Link to="/about" className="hover:text-yellow-400">
+            <NavLink
+              to="/about"
+              className={linkClass}
+              onClick={handleAboutClick}
+            >
               About Us
-            </Link>
+            </NavLink>
           </li>
 
           {/* Contact Us */}
           <li>
-            <Link to="/contact" className="hover:text-yellow-400">
+            <NavLink to="/contact" className={linkClass}>
               Contact Us
-            </Link>
+            </NavLink>
           </li>
         </ul>
       </nav>

src/components/Produk.jsx

@@ -0,0 +1,73 @@
+import { Wifi, Network, Cog } from "lucide-react";
+import { motion } from "framer-motion";
+
+export default function Produk() {
+  const products = [
+    {
+      icon: <Wifi className="w-8 h-8 text-blue-600" />,
+      title: "WTELL LastMile Connection",
+      desc: "Solusi bagi penyedia layanan internet untuk melayani pelanggan Last Mile tanpa harus membangun jaringan fiber optic sendiri.",
+      gradient: "from-blue-500/20 to-blue-100/40"
+    },
+    {
+      icon: <Network className="w-8 h-8 text-yellow-500" />,
+      title: "WTELL Metro Link",
+      desc: "Layanan jaringan serat optik Point to Point dan Point to Multi Point dengan kapasitas tinggi dan infrastruktur handal.",
+      gradient: "from-yellow-400/30 to-yellow-100/40"
+    },
+    {
+      icon: <Cog className="w-8 h-8 text-blue-700" />,
+      title: "WTELL EPC Solution",
+      desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.",
+      gradient: "from-blue-300/40 to-blue-100/30"
+    }
+  ];
+
+  return (
+    <section id="produk" className="relative py-20 overflow-hidden text-center">
+      {/* Animated Background Gradient */}
+      <motion.div
+        className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 bg-[length:400%_400%]"
+        animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}
+        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+      ></motion.div>
+      {/* Overlay biar teks tetap jelas */}
+      <div className="absolute inset-0 bg-white/95"></div>
+
+      <div className="relative z-10">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-blue-900">
+          Produk
+        </h2>
+        <p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4">
+          Solusi layanan jaringan kabel serat optik Point to Point dan Point to
+          Multi Point dengan kapasitas tinggi, didukung infrastruktur yang
+          handal melalui jaringan kabel serat optik kami.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-6">
+          {products.map((item, i) => (
+            <motion.div
+              key={i}
+              whileHover={{ y: -8, scale: 1.03 }}
+              transition={{ duration: 0.4, ease: "easeOut" }}
+              className={`bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-gray-100 hover:border-blue-300`}
+            >
+              {/* Gradient overlay per-card */}
+              <div
+                className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
+              ></div>
+              {/* Icon Circle */}
+              <div className="relative z-10 w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center bg-white shadow-md">
+                {item.icon}
+              </div>
+              <h3 className="text-xl font-semibold mb-3 relative z-10">
+                {item.title}
+              </h3>
+              <p className="relative z-10 text-gray-700">{item.desc}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/About.jsx

@@ -1,88 +1,143 @@
 import Navbar from "../components/Navbar";
+import Hero from "../components/Hero";
 import { motion } from "framer-motion";
-import { CheckCircle } from "lucide-react";
+import { BadgeCheck } from "lucide-react";
+import { useState } from "react";
 
 export default function About() {
+  const [activeCard, setActiveCard] = useState(null);
+
   return (
     <div className="font-sans">
-      {/* Navbar */}
+      {/* Navbar + Hero */}
+      <div className="relative">
         <Navbar />
+        <Hero
+          title="Tentang Kami"
+          subtitle="Kenali lebih dekat siapa kami dan visi misi kami"
+          background="/bg-video.mp4"
+        />
+      </div>
 
       {/* About Section */}
-      <section className="py-20 bg-gray-50 min-h-screen">
+      <section className="relative py-20 bg-gradient-to-br from-blue-50 via-white to-yellow-50 min-h-screen overflow-hidden">
-        <div className="max-w-6xl mx-auto px-6 lg:px-20">
+        {/* Dekorasi background blur */}
+        <div className="absolute top-0 left-0 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-pulse"></div>
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-yellow-200 rounded-full mix-blend-multiply filter blur-3xl opacity-40 animate-pulse"></div>
+
+        <div className="relative max-w-6xl mx-auto px-6 lg:px-20">
           {/* Logo & Deskripsi */}
           <motion.div
             initial={{ opacity: 0, y: 40 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7 }}
             viewport={{ once: true }}
-            className="text-center"
+            className="bg-white/60 backdrop-blur-lg rounded-3xl shadow-2xl border border-white/20 p-10 relative z-10"
           >
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
+              {/* Logo di kiri */}
+              <div className="flex justify-center">
                 <img
                   src="/WTell.png"
                   alt="Logo Walanja"
-              className="mx-auto w-32 mb-6"
+                  className="w-64 md:w-80 drop-shadow-2xl hover:scale-105 transition-transform duration-500"
                 />
-            <p className="text-gray-700 max-w-3xl mx-auto leading-relaxed">
+              </div>
-              <span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
+
-              adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
+              {/* Deskripsi di kanan */}
-              Teknologi Telekomunikasi Berbasis Fiber Optic.
+              <div className="text-left">
+                <p className="text-gray-700 leading-relaxed text-lg">
+                  <span className="font-semibold text-blue-700 underline decoration-blue-400 decoration-2 underline-offset-4">
+                    PT. Jaringan Citra Mandiri
+                  </span>{" "}
+                  adalah Perusahaan Swasta yang bergerak di bidang Penyedia
+                  Layanan Teknologi Telekomunikasi Berbasis Fiber Optic.
                 </p>
-            <p className="mt-4 text-gray-700 max-w-3xl mx-auto leading-relaxed">
+                <p className="mt-4 leading-relaxed text-lg text-gray-900">
                   Berdiri sejak tahun 2018,{" "}
-              <span className="font-semibold text-blue-700">WTELL</span>{" "}
+                  <span className="font-bold text-black-700 drop-shadow-sm">
+                    WTELL
+                  </span>{" "}
                   berkomitmen menjadi{" "}
-              <span className="font-bold">
+                  <span className="font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
-                Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
+                    Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber
-                yang Handal dan Profesional.
+                    Optic yang Handal dan Profesional
                   </span>
+                  .
                 </p>
+              </div>
+            </div>
           </motion.div>
 
           {/* Visi & Misi */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16 relative z-10">
             {/* Visi */}
             <motion.div
+              whileHover={{ scale: 1.04 }}
               initial={{ opacity: 0, x: -50 }}
               whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.7 }}
+              transition={{ duration: 0.5 }}
               viewport={{ once: true }}
-              className="bg-white shadow-lg rounded-2xl p-8"
+              onClick={() => setActiveCard("visi")}
+              className={`relative rounded-3xl bg-white p-10 overflow-hidden flex flex-col items-center text-center cursor-pointer transition-all duration-200 ease-out hover:shadow-2xl hover:-translate-y-2 hover:rotate-[1deg] ${
+                activeCard === "visi"
+                  ? "border-4 border-blue-500 shadow-blue-300"
+                  : "border border-gray-200"
+              }`}
             >
-              <h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
+              <div className="relative flex flex-col items-center">
-              <p className="text-gray-700 text-center leading-relaxed">
+                <h3 className="text-3xl font-extrabold text-blue-700 tracking-wide drop-shadow-md border-b-4 border-blue-400 pb-1">
+                  VISI
+                </h3>
+                <p className="mt-6 leading-relaxed text-gray-800 text-lg max-w-md">
                   Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
                   Menghubungkan Seluruh Wilayah di Indonesia.
                 </p>
+              </div>
             </motion.div>
 
             {/* Misi */}
             <motion.div
+              whileHover={{ scale: 1.04 }}
               initial={{ opacity: 0, x: 50 }}
               whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.7 }}
+              transition={{ duration: 0.5 }}
               viewport={{ once: true }}
-              className="bg-white shadow-lg rounded-2xl p-8"
+              onClick={() => setActiveCard("misi")}
+              className={`relative rounded-3xl bg-white p-10 overflow-hidden flex flex-col items-center text-center cursor-pointer transition-all duration-200 ease-out hover:shadow-2xl hover:-translate-y-2 hover:rotate-[1deg] ${
+                activeCard === "misi"
+                  ? "border-4 border-blue-500 shadow-blue-300"
+                  : "border border-gray-200"
+              }`}
             >
-              <h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
+              <div className="relative flex flex-col items-center">
-              <ul className="space-y-4 text-gray-700">
+                <h3 className="text-3xl font-extrabold text-yellow-500 tracking-wide drop-shadow-md border-b-4 border-yellow-400 pb-1">
-                <li className="flex items-start gap-2">
+                  MISI
-                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
+                </h3>
+                <ul className="mt-6 space-y-4 text-gray-800 text-lg max-w-md text-left">
+                  <li className="flex items-start gap-3">
+                    <span className="bg-green-100 p-2 rounded-full">
+                      <BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
+                    </span>
                     Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang
                     Handal, Terpercaya dan Up To Date dengan Tenaga Profesional.
                   </li>
-                <li className="flex items-start gap-2">
+                  <li className="flex items-start gap-3">
-                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
+                    <span className="bg-green-100 p-2 rounded-full">
+                      <BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
+                    </span>
                     Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber
                     Optic di seluruh Indonesia.
                   </li>
-                <li className="flex items-start gap-2">
+                  <li className="flex items-start gap-3">
-                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
+                    <span className="bg-green-100 p-2 rounded-full">
+                      <BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
+                    </span>
                     Memberikan nilai tambah dan sinergi dalam industri jaringan
                     Fiber Optic.
                   </li>
                 </ul>
+              </div>
             </motion.div>
           </div>
         </div>

src/pages/Home.jsx

@@ -1,168 +1,69 @@
 import Navbar from "../components/Navbar";
-import { MapPin, Wifi, Network, Cog } from "lucide-react";
+import Hero from "../components/Hero";
+import Produk from "../components/Produk";
+import Cakupan from "../components/Cakupan";
 import { motion } from "framer-motion";
 
+const sectionVariant = {
+  hidden: { opacity: 0, y: 40 },
+  visible: (delay = 0) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.8,
+      delay,
+      ease: "easeOut",
+    },
+  }),
+};
+
 export default function Home() {
   return (
-    <div className="font-sans">
-      {/* Navbar */}
-      <Navbar />
-
-      {/* Hero Section */}
-      <section className="relative h-screen w-full overflow-hidden">
-        <video
-          autoPlay
-          loop
-          muted
-          playsInline
-          className="absolute inset-0 w-full h-full object-cover"
-        >
-          <source src="/bg-video.mp4" type="video/mp4" />
-        </video>
-        <div className="absolute inset-0 bg-black/50"></div>
-
-        <div className="relative z-10 flex flex-col justify-center h-full px-6 lg:px-20 text-white max-w-3xl">
-          <p className="text-lg">Mari menjadi bagian dari kami</p>
-          <h1 className="text-4xl md:text-6xl font-bold leading-tight mt-2">
-            WALANJA <br /> TELEKOMUNIKASI
-          </h1>
-          <p className="mt-4 text-lg">
-            Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
-          </p>
-        </div>
-      </section>
-
-      {/* Produk Section */}
-      <section
-        id="produk"
-        className="relative py-20 overflow-hidden text-center"
-      >
-        {/* Animated Background */}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 animate-gradient bg-[length:400%_400%]"></div>
-        <div className="absolute inset-0 bg-white/90"></div>
-
-        <div className="relative z-10">
-          <h2 className="text-3xl font-bold mb-3 text-blue-900">Produk</h2>
-          <p className="text-gray-700 max-w-3xl mx-auto mb-12">
-            Solusi layanan jaringan kabel serat optik Point to Point dan Point
-            to Multi Point dengan kapasitas tinggi, didukung infrastruktur yang
-            handal melalui jaringan kabel serat optik kami.
-          </p>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-6">
-            {/* Card 1 */}
     <motion.div
-              whileHover={{ scale: 1.05 }}
+      className="font-sans"
-              initial={{ opacity: 0, y: 40 }}
+      initial={{ opacity: 0 }}
-              whileInView={{ opacity: 1, y: 0 }}
+      animate={{ opacity: 1 }}
       transition={{ duration: 0.6 }}
-              viewport={{ once: true }}
-              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
     >
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/10 to-transparent"></div>
+      {/* Navbar muncul pertama */}
-              <Wifi className="w-12 h-12 mb-4 text-blue-600 mx-auto relative z-10" />
-              <h3 className="text-xl font-bold mb-3 relative z-10">
-                WTELL LastMile Connection
-              </h3>
-              <p className="relative z-10">
-                Solusi bagi penyedia layanan internet untuk melayani pelanggan
-                Last Mile tanpa harus membangun jaringan fiber optic sendiri.
-              </p>
-            </motion.div>
-
-            {/* Card 2 */}
       <motion.div
-              whileHover={{ scale: 1.05 }}
+        variants={sectionVariant}
-              initial={{ opacity: 0, y: 40 }}
+        initial="hidden"
-              whileInView={{ opacity: 1, y: 0 }}
+        animate="visible"
-              transition={{ duration: 0.7 }}
+        custom={0.1}
-              viewport={{ once: true }}
-              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
       >
-              <div className="absolute inset-0 bg-gradient-to-br from-yellow-200/40 to-transparent"></div>
+        <Navbar />
-              <Network className="w-12 h-12 mb-4 text-yellow-500 mx-auto relative z-10" />
-              <h3 className="text-xl font-bold mb-3 relative z-10">
-                WTELL Metro Link
-              </h3>
-              <p className="relative z-10">
-                Layanan jaringan serat optik Point to Point dan Point to Multi
-                Point dengan kapasitas tinggi dan infrastruktur handal.
-              </p>
       </motion.div>
 
-            {/* Card 3 */}
+      {/* Hero muncul kedua */}
-            <motion.div
+      <motion.section
-              whileHover={{ scale: 1.05 }}
+        variants={sectionVariant}
-              initial={{ opacity: 0, y: 40 }}
+        initial="hidden"
-              whileInView={{ opacity: 1, y: 0 }}
+        animate="visible"
-              transition={{ duration: 0.8 }}
+        custom={0.3}
-              viewport={{ once: true }}
-              className="bg-white text-blue-900 rounded-2xl shadow-xl p-6 relative overflow-hidden"
       >
-              <div className="absolute inset-0 bg-gradient-to-br from-blue-300/30 to-transparent"></div>
+        <Hero />
-              <Cog className="w-12 h-12 mb-4 text-blue-600 mx-auto relative z-10" />
+      </motion.section>
-              <h3 className="text-xl font-bold mb-3 relative z-10">
-                WTELL EPC Solution
-              </h3>
-              <p className="relative z-10">
-                Menyediakan layanan Engineering, Procurement, Construction:
-                Survey, Design, Deployment, Operation & Maintenance, FTIX.
-              </p>
-            </motion.div>
-          </div>
-        </div>
-      </section>
 
-      {/* Cakupan Area Section */}
+      {/* Produk muncul ketiga */}
-      <section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
+      <motion.section
-        {/* Animated Overlay */}
+        variants={sectionVariant}
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 via-white to-blue-50 animate-gradient bg-[length:300%_300%]"></div>
+        initial="hidden"
-
+        animate="visible"
-        <div className="relative z-10">
+        custom={0.6}
-          {/* Title */}
-          <div className="text-center mb-12">
-            <h2 className="text-3xl md:text-4xl font-bold flex items-center justify-center gap-2 text-blue-900">
-              <MapPin className="w-8 h-8 text-blue-600" />
-              Cakupan Area
-            </h2>
-            <p className="mt-3 text-gray-600 max-w-2xl mx-auto">
-              Saat ini jaringan dan layanan{" "}
-              <span className="font-semibold">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 with hover animation */}
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              className="flex-1 flex justify-center"
       >
-              <img
+        <Produk />
-                src="/map-bandung.jpg"
+      </motion.section>
-                alt="Map Bandung"
-                className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100"
-              />
-            </motion.div>
 
-            {/* List Area */}
+      {/* Cakupan muncul terakhir */}
-            <div className="flex-1 bg-white/70 p-6 rounded-2xl shadow-lg">
+      <motion.section
-              <h3 className="text-xl font-semibold mb-4 text-blue-600">
+        variants={sectionVariant}
-                Fokus Layanan
+        initial="hidden"
-              </h3>
+        animate="visible"
-              <ul className="space-y-3 text-gray-700">
+        custom={0.9}
-                <li>📍 Bandung Kota</li>
+      >
-                <li>📍 Cimahi</li>
+        <Cakupan />
-                <li>📍 Cileunyi</li>
+      </motion.section>
-                <li>📍 Ngamprah</li>
+    </motion.div>
-                <li>📍 Desa 3T sekitar Bandung</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
   );
 }

src/pages/Portfolio.jsx

@@ -0,0 +1,291 @@
+import Navbar from "../components/Navbar";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+export default function Portfolio() {
+  const [selectedPortfolio, setSelectedPortfolio] = useState(null);
+
+  const portfolioData = [
+    {
+      id: 1,
+      image: "/sdm2.jpg",
+      title: "Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP",
+      shortDesc:
+        "PT. Jaringan Citra Mandiri memiliki tenaga kerja bersertifikasi BNSP dan tenaga ahli berpengalaman.",
+      detail: (
+        <>
+          <h2 className="text-xl font-bold mb-2">
+            Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP Untuk Layanan Terbaik
+          </h2>
+          <p className="text-sm leading-relaxed mb-2">
+            PT. Jaringan Citra Mandiri memiliki tenaga kerja dengan kualifikasi tinggi dan telah
+            mendapatkan sertifikasi dari BNSP. Tenaga kerja kami memiliki pengetahuan, keterampilan,
+            dan pemahaman yang mendalam dalam berbagai bidang pekerjaan.
+          </p>
+          <p className="text-sm leading-relaxed">
+            Lebih dari 200 tenaga kerja siap mendukung semua layanan dengan standar terbaik,
+            termasuk tenaga ahli di dalamnya yang siap memaksimalkan layanan yang kami sediakan.
+          </p>
+        </>
+      ),
+    },
+    {
+      id: 2,
+      image: "/alat2.jpg",
+      title: "Peralatan Fiber Optik",
+      shortDesc:
+        "PT. Jaringan Citra Mandiri memiliki alat kerja yang lengkap dan tersertifikasi.",
+      detail: (
+        <>
+          <h2 className="text-xl font-bold mb-2">Peralatan Fiber Optik</h2>
+          <p className="text-sm leading-relaxed mb-2">
+            Kami menggunakan peralatan fiber optik seperti Fujikura, Yokogawa, dan Exfo untuk
+            memastikan hasil kerja berkualitas tinggi.
+          </p>
+          <p className="text-sm leading-relaxed">
+            Semua alat kerja sudah sesuai standar industri jaringan serat optik.
+          </p>
+        </>
+      ),
+      extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"], // tambahan
+    },
+    {
+      id: 3,
+      image: "/tiang.jpg",
+      title: "Produksi / Pabrikasi Tiang",
+      shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.",
+      detail: (
+        <div className="space-y-10">
+          {/* Bagian 1 */}
+          <div className="grid md:grid-cols-2 gap-6 items-center">
+            <img
+              src="/tiang1.jpg"
+              alt="Pabrikasi Berkualitas"
+              className="w-full h-56 object-cover rounded-lg border shadow"
+            />
+            <div>
+              <h3 className="font-semibold text-gray-800 mb-2">
+                Pabrikasi Berkualitas dengan Standar Industri Terbaik
+              </h3>
+              <p className="text-sm leading-relaxed">
+                Selain dari pekerjaan jaringan, PT. Jaringan Citra Mandiri mempunyai Pabrikasi Tiang Telco,
+                guna menunjang kebutuhan perusahaan maupun kebutuhan dari luar perusahaan.
+              </p>
+            </div>
+          </div>
+
+          {/* Bagian 2 */}
+          <div className="grid md:grid-cols-2 gap-6 items-center">
+            <div className="order-2 md:order-1">
+              <h3 className="font-semibold text-gray-800 mb-2">
+                Efisiensi Tinggi untuk Memenuhi Permintaan Pelanggan
+              </h3>
+              <p className="text-sm leading-relaxed">
+                Kami dapat memproduksi tiang sebanyak 50 batang per hari. Dengan peralatan dan fasilitas
+                yang mumpuni, tenaga kerja yang berkualitas serta sistem manajemen yang efisien, membuat
+                kami dapat memenuhi permintaan pelanggan dengan baik.
+              </p>
+            </div>
+            <img
+              src="/tiang2.jpg"
+              alt="Efisiensi Tinggi"
+              className="w-full h-56 object-cover rounded-lg border shadow order-1 md:order-2"
+            />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 4,
+      image: "/map1.jpg",
+      title: "Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota",
+      shortDesc:
+        "Pembangunan dan pemeliharaan jaringan serat optik skala besar di berbagai wilayah Jawa Barat.",
+      detail: (
+        <div className="space-y-4">
+          <h2 className="text-xl font-bold mb-2">
+            Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota
+          </h2>
+          <p className="text-sm leading-relaxed mb-2">
+            PT. Jaringan Citra Mandiri telah menyelesaikan berbagai proyek pembangunan 
+            dan pemeliharaan jaringan serat optik antar kota. 
+            Beberapa proyek utama mencakup wilayah strategis di Jawa Barat.
+          </p>
+
+          {/* Grid Lokasi */}
+          <div className="grid grid-cols-2 gap-4 mt-4">
+            <div>
+              <img src="/subang.jpg" alt="Subang" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Subang – 50 Km</p>
+            </div>
+
+            <div>
+              <img src="/pangandaran.jpg" alt="Pangandaran" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Pangandaran – 225 Km</p>
+            </div>
+
+            <div>
+              <img src="/bandungraya.jpg" alt="Bandung Raya" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Bandung Raya – 800 Km</p>
+            </div>
+
+            <div>
+              <img src="/garut.jpg" alt="Garut" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Garut – 1000 Km</p>
+            </div>
+
+            <div>
+              <img src="/ciamis.jpg" alt="Ciamis" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Ciamis – 100 Km</p>
+            </div>
+
+            <div>
+              <img src="/tasik.jpg" alt="Tasik" className="w-full h-36 object-cover rounded-lg border" />
+              <p className="text-xs mt-1 text-center font-semibold">Tasik – 100 Km</p>
+            </div>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="font-sans">
+      {/* Navbar */}
+      <Navbar />
+
+      {/* Header Section dengan background video */}
+<section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
+  {/* Video background */}
+  <video
+    className="absolute inset-0 w-full h-full object-cover"
+    src="/port.mp4"   // taruh video kamu di public/bg-portfolio.mp4
+    autoPlay
+    loop
+    muted
+    playsInline
+  />
+
+  {/* Overlay gelap biar teksnya jelas */}
+  <div className="absolute inset-0 bg-black/50"></div>
+
+  {/* Konten teks */}
+  <div className="relative z-10 px-4">
+    <h1 className="text-4xl font-bold mb-8">Portfolio Kami</h1>
+    <p className="text-lg opacity-90">
+      Lihat karya dan layanan terbaik yang sudah kami bangun
+    </p>
+  </div>
+</section>
+
+      {/* Portfolio Section */}
+      <section className="relative py-20 bg-gradient-to-br from-indigo-50 via-white to-pink-50 min-h-screen overflow-hidden">
+        <div className="relative max-w-6xl mx-auto px-6 lg:px-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
+            {portfolioData.map((item) => (
+              <PortfolioCard
+                key={item.id}
+                image={item.image}
+                title={item.title}
+                shortDesc={item.shortDesc}
+                onClick={() => setSelectedPortfolio(item)}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+            {/* Modal */}
+      {selectedPortfolio && (
+        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 50, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 50, scale: 0.95 }}
+            transition={{ duration: 0.4, ease: "easeOut" }}
+            className="relative bg-white/90 backdrop-blur-xl rounded-3xl max-w-5xl w-full h-[85vh] flex flex-col shadow-2xl overflow-hidden"
+          >
+            {/* Tombol Close */}
+            <button
+              onClick={() => setSelectedPortfolio(null)}
+              className="absolute top-4 right-4 z-50 bg-white/80 hover:bg-red-500 hover:text-white rounded-full shadow-md p-2 transition"
+            >
+              ✕
+            </button>
+
+            {/* Gambar Header */}
+            <div className="relative">
+              <img
+                src={selectedPortfolio.image}
+                alt={selectedPortfolio.title}
+                className="w-full h-72 object-cover rounded-t-3xl"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent rounded-t-3xl"></div>
+              <div className="absolute bottom-6 left-6">
+                <h2 className="text-2xl md:text-3xl font-bold text-white drop-shadow-lg">
+                  {selectedPortfolio.title}
+                </h2>
+              </div>
+            </div>
+
+            {/* Konten */}
+            <div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar">
+              {selectedPortfolio.detail}
+
+              {/* Extra Images */}
+              {selectedPortfolio.extraImages && (
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
+                  {selectedPortfolio.extraImages.map((img, idx) => (
+                    <motion.img
+                      key={idx}
+                      src={img}
+                      alt={`extra-${idx}`}
+                      whileHover={{ scale: 1.05 }}
+                      className="w-full h-40 object-cover rounded-xl border shadow-sm transition"
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* Komponen Card */
+function PortfolioCard({ image, title, shortDesc, onClick }) {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      viewport={{ once: true }}
+      className="rounded-2xl overflow-hidden bg-white/90 backdrop-blur-md shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col"
+    >
+      <div className="relative">
+        <img src={image} alt={title} className="w-full h-48 object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
+      </div>
+
+      <div className="p-6 flex flex-col flex-grow">
+        <h3 className="text-lg font-bold bg-gradient-to-r from-indigo-600 to-blue-500 bg-clip-text text-transparent">
+          {title}
+        </h3>
+
+        <p className="mt-2 text-gray-700 text-sm leading-relaxed flex-grow">
+          {shortDesc}
+        </p>
+
+        <button
+          onClick={onClick}
+          className="mt-4 inline-block text-blue-600 font-semibold hover:underline text-sm text-left"
+        >
+          Lihat Selengkapnya →
+        </button>
+      </div>
+    </motion.div>
+  );
+}