src/App.jsx

@@ -3,7 +3,6 @@ import { useEffect } from "react";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
 import About from "./pages/About";
-import Portfolio from "./pages/Portfolio";
 
 
 function ScrollHandler() {
@@ -25,7 +24,6 @@ export default function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
-        <Route path="/portofolio" element={<Portfolio />} />
       </Routes>
     </Router>
   );

src/components/Cakupan.jsx

@@ -1,54 +0,0 @@
-import { motion } from "framer-motion";
-
-export default function Cakupan() {
-  return (
-    <section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
-      {/* Animated Overlay */}
-      <div className="absolute inset-0 bg-gradient-to-r from-blue-50 via-white to-blue-50 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-bold flex items-center justify-center gap-2 text-blue-900">
-            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-stretch 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-md rounded-2xl shadow-xl border-4 border-blue-100 object-cover"
-            />
-          </motion.div>
-
-          {/* List Area */}
-          <div className="flex-1 bg-white/70 p-12 rounded-2xl shadow-lg flex flex-col justify-center">
-            <h3 className="text-2xl text-center font-semibold mb-6 text-blue-600">
-              Fokus Layanan
-            </h3>
-            <ul className="space-y-3 text-gray-700">
-              <li>📍 Bandung Kota</li>
-              <li>📍 Cimahi</li>
-              <li>📍 Cileunyi</li>
-              <li>📍 Ngamprah</li>
-              <li>📍 Desa 3T sekitar Bandung</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

src/components/Footer.jsx

@@ -52,7 +52,7 @@ export default function Footer({ footerRef }) {
             </li>
             <li className="flex items-center gap-2">
               <LinkIcon className="w-4 h-4" /> 
-              <Link to="/portofolio">Portofolio</Link>
+              <Link to="/portfolio">Portofolio</Link>
             </li>
             <li className="flex items-center gap-2">
               <LinkIcon className="w-4 h-4" /> 

src/components/Hero.jsx

@@ -1,26 +0,0 @@
-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,15 +1,13 @@
 import { useState, useEffect } from "react";
-import { Menu, X } from "lucide-react";
+import { ChevronDown, Menu, X } from "lucide-react";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
 
 export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(false); // dropdown portfolio
   const [mobileMenu, setMobileMenu] = useState(false); // toggle mobile
   const [scrolled, setScrolled] = useState(false);
-  const location = useLocation();
-  const navigate = useNavigate();
 
-  // Deteksi scroll untuk ubah background navbar
+  // Deteksi scroll
   useEffect(() => {
     const handleScroll = () => {
       setScrolled(window.scrollY > 50);
@@ -18,31 +16,8 @@ export default function Navbar() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  // Scroll otomatis kalau ada hash (#footer, 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 = `block px-4 py-2 hover:text-yellow-400 transition-colors`;
 
-  // 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 ${
@@ -52,13 +27,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-12 w-auto object-contain" />
+          <img src="/WTell.png" alt="logo" className="h-8" />
           <span
             className={`text-lg font-bold transition-colors duration-300 ${
               scrolled ? "text-black" : "text-white"
             }`}
           >
-            WTELL
+            WTell
           </span>
         </div>
 
@@ -69,29 +44,59 @@ export default function Navbar() {
           }`}
         >
           <li>
-            <HashLink smooth to="/#" className={linkClass}>
+            <HashLink smooth to="/#" className="hover:text-yellow-400">
               Home
             </HashLink>
           </li>
 
-          {/* Portofolio link biasa */}
+          {/* Dropdown Portofolio */}
-          <li>
+          <li className="relative group">
-            <NavLink to="/portofolio" className={linkClass}>
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="hover:text-yellow-400 flex items-center gap-1"
+            >
               Portofolio
-            </NavLink>
+              <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>
+                  <HashLink to="/sdm" className={linkClass}>
+                    SDM
+                  </HashLink>
+                </li>
+                <li>
+                  <HashLink to="/alat-kerja" className={linkClass}>
+                    Alat Kerja
+                  </HashLink>
+                </li>
+                <li>
+                  <HashLink to="/produksi" className={linkClass}>
+                    Produksi
+                  </HashLink>
+                </li>
+                <li>
+                  <HashLink to="/pengalaman" className={linkClass}>
+                    Pengalaman
+                  </HashLink>
+                </li>
+              </ul>
+            )}
           </li>
 
           <li>
-            <NavLink
+            <HashLink to="/about" className="hover:text-yellow-400">
-              to="/about"
-              className={linkClass}
-              onClick={handleAboutClick}
-            >
               About Us
-            </NavLink>
+            </HashLink>
           </li>
           <li>
-            <HashLink smooth to="/#footer" className={linkClass}>
+            <HashLink smooth to="/#footer" className="hover:text-yellow-400">
               Contact Us
             </HashLink>
           </li>
@@ -133,25 +138,70 @@ export default function Navbar() {
               </HashLink>
             </li>
 
-            {/* Portofolio link biasa mobile */}
+            {/* Dropdown Portofolio di Mobile */}
             <li>
-              <NavLink
+              <button
-                to="/portofolio"
+                onClick={() => setIsOpen(!isOpen)}
-                onClick={() => setMobileMenu(false)}
+                className="w-full flex justify-between items-center px-4 py-2 hover:bg-gray-100 rounded-lg"
-                className={linkClass}
               >
                 Portofolio
-              </NavLink>
+                <ChevronDown
+                  size={18}
+                  className={`transition-transform ${
+                    isOpen ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
+              {isOpen && (
+                <ul className="ml-4 mt-2 space-y-2 text-sm">
+                  <li>
+                    <HashLink
+                      to="/sdm"
+                      className="block px-4 py-2 hover:text-yellow-400 rounded"
+                      onClick={() => setMobileMenu(false)}
+                    >
+                      SDM
+                    </HashLink>
+                  </li>
+                  <li>
+                    <HashLink
+                      to="/alat-kerja"
+                      className="block px-4 py-2 hover:text-yellow-400 rounded"
+                      onClick={() => setMobileMenu(false)}
+                    >
+                      Alat Kerja
+                    </HashLink>
+                  </li>
+                  <li>
+                    <HashLink
+                      to="/produksi"
+                      className="block px-4 py-2 hover:text-yellow-400 rounded"
+                      onClick={() => setMobileMenu(false)}
+                    >
+                      Produksi
+                    </HashLink>
+                  </li>
+                  <li>
+                    <HashLink
+                      to="/pengalaman"
+                      className="block px-4 py-2 hover:text-yellow-400 rounded"
+                      onClick={() => setMobileMenu(false)}
+                    >
+                      Pengalaman
+                    </HashLink>
+                  </li>
+                </ul>
+              )}
             </li>
 
             <li>
-              <NavLink
+              <HashLink
                 to="/about"
-                onClick={handleAboutClick}
+                onClick={() => setMobileMenu(false)}
                 className={linkClass}
               >
                 About Us
-              </NavLink>
+              </HashLink>
             </li>
             <li>
               <HashLink

src/components/Produk.jsx

@@ -1,73 +0,0 @@
-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,81 +1,61 @@
-"use client";
+"use client"; // kalau pakai Next.js, taruh di baris paling atas
 
 import Navbar from "../components/Navbar";
-import Hero from "../components/Hero";
+import Footer from "../components/Footer"; // <- tambahkan ini
-import Footer from "../components/Footer";
 import { motion } from "framer-motion";
 import { CheckCircle } from "lucide-react";
 
 export default function About() {
-  const cardHover = {
-    scale: 1.03,
-    y: -4,
-    boxShadow: "0 15px 25px rgba(0,0,0,0.1)",
-    transition: { type: "spring", stiffness: 200, damping: 20 },
-  };
-
   return (
     <div className="font-sans">
       {/* Navbar */}
       <Navbar />
 
-      {/* Hero Section */}
-      <Hero
-        title="Tentang Kami"
-        subtitle="Kenali lebih dekat siapa kami dan visi misi kami"
-        background="/bg-video.mp4"
-      />
-
       {/* About Section */}
       <section className="py-20 bg-gray-50 min-h-screen">
-        <div className="max-w-6xl mx-auto px-6 lg:px-20 space-y-16">
+        <div className="max-w-6xl mx-auto px-6 lg:px-20">
-          {/* Card Deskripsi Perusahaan dengan Logo */}
+          {/* Logo & Deskripsi */}
-          <motion.div
+          <motion.section
-            className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
+            className="grid grid-cols-1 md:grid-cols-2 items-center gap-10"
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 40 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7 }}
             viewport={{ once: true }}
-            whileHover={{
+            >
-              scale: 1.02,
-              y: -3,
-              boxShadow: "0 20px 30px rgba(0,0,0,0.08)",
-              transition: { type: "spring", stiffness: 200, damping: 20 },
-            }}
-          >
             {/* Logo di kiri */}
-            <div className="flex justify-center md:justify-start flex-shrink-0">
+            <div className="flex justify-center md:justify-start">
               <img
                 src="/WTell_logo.png"
-                alt="Logo WTELL"
+                alt="Logo Walanja"
-                className="w-44 md:w-56"
+                className="w-45 md:w-45"
               />
             </div>
 
             {/* Deskripsi di kanan */}
-            <div className="text-center md:text-left">
+            <div>
-              <h2 className="text-3xl font-bold text-blue-700 mb-4">
-                PT. Jaringan Citra Mandiri
-              </h2>
               <p className="text-gray-700 leading-relaxed mb-4">
-                Adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
+                <span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
+                adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
                 Teknologi Telekomunikasi Berbasis Fiber Optic.
               </p>
               <p className="text-gray-700 leading-relaxed">
-                Berdiri sejak tahun 2018, <span className="font-semibold text-blue-700">WTELL</span>{" "}
+                Berdiri sejak tahun 2018,{" "}
-                berkomitmen menjadi Penyedia Layanan Teknologi Telekomunikasi
+                <span className="font-semibold text-blue-700">WTELL</span>{" "}
-                Berbasis Fiber Optic yang Handal dan Profesional.
+                berkomitmen menjadi{" "}
+                <span className="font-bold">
+                  Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
+                  yang Handal dan Profesional.
+                </span>
               </p>
             </div>
-          </motion.div>
+          </motion.section>
-
           {/* Visi & Misi */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
             {/* Visi */}
             <motion.section
-              className="bg-white rounded-2xl p-8 cursor-pointer"
+              className="bg-white shadow-lg rounded-2xl p-8"
-              whileHover={cardHover}
+              whileHover={{ scale: 1.05 }}
-              initial={{ opacity: 0, x: -30 }}
+              initial={{ opacity: 0, x: -50 }}
               whileInView={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.7 }}
               viewport={{ once: true }}
@@ -89,9 +69,9 @@ export default function About() {
 
             {/* Misi */}
             <motion.section
-              className="bg-white rounded-2xl p-8 cursor-pointer"
+              className="bg-white shadow-lg rounded-2xl p-8"
-              whileHover={cardHover}
+              whileHover={{ scale: 1.05 }}
-              initial={{ opacity: 0, x: 30 }}
+              initial={{ opacity: 0, x: 50 }}
               whileInView={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.7 }}
               viewport={{ once: true }}
@@ -106,7 +86,7 @@ export default function About() {
                 <li className="flex items-start gap-2">
                   <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
                   Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber
-                  Optic di seluruh Indonesia.
+                  Optic diseluruh Indonesia.
                 </li>
                 <li className="flex items-start gap-2">
                   <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />

src/pages/Home.jsx

@@ -1,25 +1,9 @@
 import Navbar from "../components/Navbar";
-import Hero from "../components/Hero";
-import Produk from "../components/Produk";
-import Cakupan from "../components/Cakupan";
 import Footer from "../components/Footer";
 import { useEffect, useRef } from "react";
 import { useLocation } from "react-router-dom";
-import { motion } from "framer-motion";
 import { MapPin, Wifi, Network, Cog } from "lucide-react";
-
+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() {
   const footerRef = useRef(null);
@@ -37,37 +21,162 @@ export default function Home() {
       <Navbar />
 
       {/* Hero Section */}
-      <motion.section
+      <section className="relative h-screen w-full overflow-hidden">
-        variants={sectionVariant}
+        <video
-        initial="hidden"
+          autoPlay
-        animate="visible"
+          loop
-        custom={0.1}
+          muted
-      >
+          playsInline
-        <Hero />
+          className="absolute inset-0 w-full h-full object-cover"
-      </motion.section>
+        >
+          <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">
+          <header className="text-4xl md:text-6xl font-bold leading-tight mt-2">
+            WALANJA <br /> TELEKOMUNIKASI
+          </header>
+          <h1 className="mt-4 text-2xl md:text-3xl">
+            Always Connected
+          </h1>
+        </div>
+      </section>
 
       {/* Produk Section */}
-      <motion.section
+      <section
-        variants={sectionVariant}
+        id="produk"
-        initial="hidden"
+        className="relative py-20 overflow-hidden text-center"
-        animate="visible"
-        custom={0.3}
       >
-        <Produk />
+        {/* Animated Background */}
-      </motion.section>
+        <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>
 
-      {/* Cakupan Section */}
+        <div className="relative z-10">
-      <motion.section
+          <h2 className="text-3xl font-bold mb-3 text-blue-900">Produk</h2>
-        variants={sectionVariant}
+          <p className="text-gray-700 max-w-3xl mx-auto mb-12">
-        initial="hidden"
+            Solusi layanan jaringan kabel serat optik Point to Point dan Point
-        animate="visible"
+            to Multi Point dengan kapasitas tinggi, didukung infrastruktur yang
-        custom={0.6}
+            handal melalui jaringan kabel serat optik kami.
-      >
+          </p>
-        <Cakupan />
-      </motion.section>
 
-      {/* Footer */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-6">
-      <Footer ref={footerRef} />
+            {/* Card 1 */}
-    </div>
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              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>
+              <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 }}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.7 }}
+              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>
+              <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 */}
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+              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>
+              <Cog 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 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 */}
+      <section id="cakupan" className="relative py-20 bg-gray-50 overflow-hidden">
+        {/* Animated Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-50 via-white to-blue-50 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-bold flex items-center justify-center gap-2 text-blue-900">
+             
+              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-stretch 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-md rounded-2xl shadow-xl border-4 border-blue-100 object-cover"
+            />
+          </motion.div>
+
+          {/* List Area */}
+          <div className="flex-1 bg-white/70 p-12 rounded-2xl shadow-lg flex flex-col justify-center">
+            <h2 className="text-2xl text-center font-semibold mb-6 text-blue-600">
+              Fokus Layanan
+            </h2>
+            <ul className="space-y-3 text-gray-700">
+              <li>📍 Bandung Kota</li>
+              <li>📍 Cimahi</li>
+              <li>📍 Cileunyi</li>
+              <li>📍 Ngamprah</li>
+              <li>📍 Desa 3T sekitar Bandung</li>
+            </ul>
+          </div>
+        </div>
+
+        </div>
+      </section>
+            {/* Footer */}
+            <Footer footerRef={footerRef} />
+          </div>
   );
 }

src/pages/Portfolio.jsx

@@ -1,274 +0,0 @@
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-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"],
-    },
-    {
-      id: 3,
-      image: "/tiang.jpg",
-      title: "Produksi / Pabrikasi Tiang",
-      shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.",
-      detail: (
-        <div className="space-y-10">
-          <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>
-
-          <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>
-
-          <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 />
-
-      <section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
-        <video
-          className="absolute inset-0 w-full h-full object-cover"
-          src="/port.mp4"
-          autoPlay
-          loop
-          muted
-          playsInline
-        />
-        <div className="absolute inset-0 bg-black/50"></div>
-        <div className="relative z-10 px-4">
-          <h1 className="text-4xl font-bold mb-8">Portofolio Kami</h1>
-          <p className="text-lg opacity-90">
-            Lihat karya dan layanan terbaik yang sudah kami bangun
-          </p>
-        </div>
-      </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>
-
-      {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"
-          >
-            <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>
-
-            <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>
-
-            <div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar">
-              {selectedPortfolio.detail}
-
-              {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>
-      )}
-
-      {/* Tambahkan Footer */}
-      <Footer />
-    </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>
-  );
-}