Contact Address CS

Contact Address
feat: update for changing color palette
2025-09-16 15:52:26 +07:00 · 2025-09-16 15:48:18 +07:00 · 2025-09-16 09:57:19 +07:00 · 2025-09-15 23:58:45 +07:00 · 2025-08-27 12:11:53 +07:00 · 2025-08-27 12:05:46 +07:00
22 changed files with 773 additions and 552 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/Finals_Icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>FortivaNet</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "walanja-landing",
+  "name": "FortivaNet-landing",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@ -14,7 +14,8 @@
    "lucide-react": "^0.541.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
-    "react-router-dom": "^7.8.2"
+    "react-router-dom": "^7.8.2",
+    "react-router-hash-link": "^2.4.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
--- a/public/Finals_Horizontal.png
+++ b/public/Finals_Horizontal.png
--- a/public/Finals_Icon.png
+++ b/public/Finals_Icon.png
--- a/public/Finals_Profile.png
+++ b/public/Finals_Profile.png
--- a/public/WTell.png
+++ b/public/WTell.png
--- a/public/WTell_logo.png
+++ b/public/WTell_logo.png
--- a/public/Wtell2.jpg
+++ b/public/Wtell2.jpg
--- a/public/Wtell2r.png
+++ b/public/Wtell2r.png
--- a/public/bg-video2.mp4
+++ b/public/bg-video2.mp4
--- a/public/port2.mp4
+++ b/public/port2.mp4
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,15 +1,31 @@
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
+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() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // tiap kali route berubah, scroll ke atas
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
 export default function App() {
  return (
    <Router>
+      <ScrollHandler /> 
+      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
-        <Route path="/portfolio" element={<Portfolio />} />
+        <Route path="/portofolio" element={<Portfolio />} />
      </Routes>
    </Router>
  );
--- a/src/components/Cakupan.jsx
+++ b/src/components/Cakupan.jsx
@ -1,28 +1,27 @@
 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>
+      {/* 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-extrabold text-blue-900 drop-shadow-md">
+          <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-700 max-w-2xl mx-auto leading-relaxed">
+          <p className="mt-3 text-gray-600 max-w-2xl mx-auto">
            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).
+            <span className="font-semibold">FortivaNet</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">
+        <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 }}
@ -31,36 +30,23 @@ export default function Cakupan() {
            <img
              src="/map-bandung.jpg"
              alt="Map Bandung"
-              className="w-full max-w-xl rounded-2xl shadow-xl border-4 border-blue-100"
+              className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100 object-cover"
            />
          </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">
+          <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-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 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>
-          </motion.div>
+          </div>
        </div>
      </div>
    </section>
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -0,0 +1,94 @@
+import { Phone, Mail, Earth, Link as LinkIcon } from "lucide-react";
+import { Link } from "react-router-dom"; // ini untuk routing
+
+export default function Footer({ footerRef }) {
+  return (
+    <footer 
+      id="footer" 
+      ref={footerRef}  
+      className="bg-[#2c415e] text-white py-10 px-6">
+        
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8">
+
+        {/* Logo + Deskripsi */}
+        <div className="md:col-span-4">
+          <img src="/Finals_Profile.png" alt="FortivaNet Logo" className="w-32 mb-4" />
+          <p className="text-sm leading-relaxed">
+            PT. Jaringan Citra Mandiri adalah Perusahaan Swasta yang bergerak di bidang Penyedia
+            Layanan Teknologi Telekomunikasi Berbasis fiber optik.
+          </p>
+        </div>
+
+        {/* Alamat */}
+        <div className="md:col-span-4">
+          <h3 className="font-bold text-lg mb-4 relative inline-block">
+            Alamat
+          </h3>
+          <p className="text-sm leading-relaxed">
+            Kantor Administrasi:
+            <br />
+           Jl. Paledang No. 236, Kec. Campaka, Kel. Andir Bandung 40184
+
+          </p>
+          <br />
+           <p className="text-sm leading-relaxed">
+            Kantor Teknis:
+            <br />
+            Parahyangan Business Park, The Suites Blok E5-E7
+            Jl. Soekarno Hatta No. 693, Bandung,
+            Jawa Barat 40286, Indonesia
+          </p>
+        </div>
+
+        {/* Explore */}
+        <div className="md:col-span-2">
+          <h3 className="font-bold text-lg mb-2 relative inline-block">
+            Explore
+          </h3>
+          <ul className="space-y-3 text-sm">
+            <li className="flex items-center gap-2">
+              <LinkIcon className="w-4 h-4" /> 
+              <Link to="/">Home</Link>
+            </li>
+            <li className="flex items-center gap-2">
+              <LinkIcon className="w-4 h-4" /> 
+              <Link to="/portofolio">Portofolio</Link>
+            </li>
+            <li className="flex items-center gap-2">
+              <LinkIcon className="w-4 h-4" /> 
+              <Link to="/about">About Us</Link>
+            </li>
+            <li className="flex items-center gap-2">
+              <LinkIcon className="w-4 h-4" /> 
+              <Link to="/#footer">Contact Us</Link>
+            </li>
+          </ul>
+        </div>
+
+        
+        {/* Kontak Kami */}
+        <div className="md:col-span-2">
+          <h3 className="font-bold text-lg mb-2 relative inline-block">
+            Kontak Kami
+          </h3>
+          <ul className="space-y-2 text-sm">
+            <li className="flex items-center gap-2">
+              <Phone className="w-4 h-4"/> 0821 2062 3712
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail className="w-4 h-4"/> cs@fortiva.net.id
+            </li>
+            <li className="flex items-center gap-2">
+              <Earth className="w-4 h-4"/> https://www.fortiva.net.id/
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      {/* Copyright */}
+      <div className="border-t border-gray-400 mt-8 pt-4 text-center text-sm">
+        © 2025 Fortiva Networking.
+      </div>
+    </footer>
+  );
+}
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@ -8,18 +8,17 @@ export default function Hero() {
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
      >
-        <source src="/bg-video.mp4" type="video/mp4" />
+        <source src="/bg-video2.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
+        <header className="text-4xl md:text-6xl font-bold leading-tight mt-2">
+          FORTIVA <br /> NETWORKING
+        </header>
+        <h1 className="mt-4 text-2xl md:text-3xl>">
+          Connected Everywhere
        </h1>
-        <p className="mt-4 text-lg">
-          Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
-        </p>
      </div>
    </section>
  );
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@ -1,19 +1,24 @@
 import { useState, useEffect } from "react";
+import { 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 [mobileMenu, setMobileMenu] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();

  // Deteksi scroll untuk ubah background navbar
  useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 50);
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

-  // Scroll otomatis kalau ada hash (#sdm, dll)
+  // Scroll otomatis kalau ada hash (#footer, dll)
  useEffect(() => {
    if (location.hash) {
      const id = location.hash.replace("#", "");
@ -26,10 +31,9 @@ export default function Navbar() {
    }
  }, [location]);

-  const linkClass = ({ isActive }) =>
-    `relative pb-1 transition-colors duration-300 hover:text-yellow-400 ${
-      isActive ? "text-yellow-400 font-semibold" : ""
-    }`;
+  // Dasar class link
+  const baseLink =
+    "block px-4 py-2 transition-colors hover:text-[#00CAFF]";

  // Klik About Us → scroll atau pindah halaman
  const handleAboutClick = (e) => {
@ -50,55 +54,154 @@ 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="/Finals_Icon.png"
+            alt="logo"
+            className="h-7 w-auto object-contain"
+          />
          <span
            className={`text-lg font-bold transition-colors duration-300 ${
              scrolled ? "text-black" : "text-white"
            }`}
          >
-            WALANJA TELEKOMUNIKASI
+            FortivaNet
          </span>
        </div>

-        {/* Menu */}
+        {/* Menu Desktop */}
        <ul
-          className={`flex items-center space-x-8 font-medium transition-colors duration-300 ${
+          className={`hidden md:flex items-center space-x-8 font-medium transition-colors duration-300 ${
            scrolled ? "text-black" : "text-white"
          }`}
        >
-          {/* Home */}
          <li>
-            <NavLink to="/" className={linkClass}>
+            <HashLink
+              smooth
+              to="/#"
+              className={`${baseLink} ${
+                location.pathname === "/" && !location.hash
+                  ? "text-[#00CAFF] font-semibold"
+                  : ""
+              }`}
+            >
              Home
-            </NavLink>
+            </HashLink>
          </li>
-
-          {/* Portfolio (tanpa dropdown) */}
          <li>
-            <NavLink to="/portfolio" className={linkClass}>
-              Portfolio
+            <NavLink
+              to="/portofolio"
+              className={({ isActive }) =>
+                `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+              }
+            >
+              Portofolio
            </NavLink>
          </li>
-
-          {/* About Us */}
          <li>
            <NavLink
              to="/about"
-              className={linkClass}
              onClick={handleAboutClick}
+              className={({ isActive }) =>
+                `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+              }
            >
              About Us
            </NavLink>
          </li>
-
-          {/* Contact Us */}
          <li>
-            <NavLink to="/contact" className={linkClass}>
+            <HashLink
+              smooth
+              to="/#footer"
+              className={`${baseLink} ${
+                location.hash === "#footer" ? "text-[#00CAFF] font-semibold" : ""
+              }`}
+            >
              Contact Us
-            </NavLink>
+            </HashLink>
          </li>
        </ul>
+
+        {/* Hamburger Mobile */}
+        <button
+          onClick={() => setMobileMenu(!mobileMenu)}
+          className={`md:hidden text-2xl focus:outline-none transition-colors duration-300 ${
+            scrolled ? "text-black" : "text-white"
+          }`}
+        >
+          {mobileMenu ? <X /> : <Menu />}
+        </button>
      </nav>
+
+      {/* Menu Mobile */}
+      {mobileMenu && (
+        <div
+          className={`md:hidden fixed top-0 right-0 w-2/3 h-screen bg-white shadow-lg z-30 transform transition-transform duration-300 ${
+            mobileMenu ? "translate-x-0" : "translate-x-full"
+          }`}
+        >
+          <div className="flex justify-end p-4">
+            <button onClick={() => setMobileMenu(false)}>
+              <X size={28} />
+            </button>
+          </div>
+
+          <ul className="flex flex-col space-y-4 px-6 font-medium text-gray-800">
+            <li>
+              <HashLink
+                smooth
+                to="/#"
+                onClick={() => setMobileMenu(false)}
+                className={`${baseLink} ${
+                  location.pathname === "/" && !location.hash
+                    ? "text-[#00CAFF] font-semibold"
+                    : ""
+                }`}
+              >
+                Home
+              </HashLink>
+            </li>
+            <li>
+              <NavLink
+                to="/portofolio"
+                onClick={() => setMobileMenu(false)}
+                className={({ isActive }) =>
+                  `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+                }
+              >
+                Portofolio
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to="/about"
+                onClick={(e) => {
+                  handleAboutClick(e);
+                  setMobileMenu(false);
+                }}
+                className={({ isActive }) =>
+                  `${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
+                }
+              >
+                About Us
+              </NavLink>
+            </li>
+            <li>
+              <HashLink
+                smooth
+                to="/#footer"
+                onClick={() => setMobileMenu(false)}
+                className={`${baseLink} ${
+                  location.hash === "#footer"
+                    ? "text-[#00CAFF] font-semibold"
+                    : ""
+                }`}
+              >
+                Contact Us
+              </HashLink>
+            </li>
+          </ul>
+        </div>
+      )}
    </header>
  );
 }
--- a/src/components/Produk.jsx
+++ b/src/components/Produk.jsx
@ -4,38 +4,41 @@ 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",
+      icon: <Wifi className="w-8 h-8 text-[#145BB5]" />,
+      title: "FNET 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"
+      gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
+      whiteBox: false
    },
    {
-      icon: <Network className="w-8 h-8 text-yellow-500" />,
-      title: "WTELL Metro Link",
+      icon: <Network className="w-8 h-8 text-[#00BFFF]" />,
+      title: "FNET 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"
+      // tidak pakai gradient → putih polos
+      gradient: "",
+      whiteBox: true
    },
    {
-      icon: <Cog className="w-8 h-8 text-blue-700" />,
-      title: "WTELL EPC Solution",
+      icon: <Cog className="w-8 h-8 text-[#145BB5]" />,
+      title: "FNET EPC Solution",
      desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.",
-      gradient: "from-blue-300/40 to-blue-100/30"
+      gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
+      whiteBox: false
    }
  ];

  return (
    <section id="produk" className="relative py-20 overflow-hidden text-center">
-      {/* Animated Background Gradient */}
+      {/* Background animasi biru */}
      <motion.div
-        className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 bg-[length:400%_400%]"
+        className="absolute inset-0 bg-gradient-to-r from-[#145BB5] via-[#00BFFF] to-[#145BB5] 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">
+        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#145BB5]">
          Produk
        </h2>
        <p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4">
@ -50,13 +53,15 @@ export default function Produk() {
              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`}
+              className="bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-[#145BB5]/10 hover:border-[#00BFFF]/40"
            >
-              {/* Gradient overlay per-card */}
-              <div
-                className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
-              ></div>
-              {/* Icon Circle */}
+              {/* gradient overlay hanya kalau whiteBox = false */}
+              {!item.whiteBox && (
+                <div
+                  className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
+                ></div>
+              )}
+
              <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>
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@ -1,147 +1,122 @@
+"use client";
+
 import Navbar from "../components/Navbar";
 import Hero from "../components/Hero";
+import Footer from "../components/Footer";
 import { motion } from "framer-motion";
-import { BadgeCheck } from "lucide-react";
-import { useState } from "react";
+import { CheckCircle } from "lucide-react";

 export default function About() {
-  const [activeCard, setActiveCard] = useState(null);
+  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 + Hero */}
-      <div className="relative">
-        <Navbar />
-        <Hero
-          title="Tentang Kami"
-          subtitle="Kenali lebih dekat siapa kami dan visi misi kami"
-          background="/bg-video.mp4"
-        />
-      </div>
+      <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="relative py-20 bg-gradient-to-br from-blue-50 via-white to-yellow-50 min-h-screen overflow-hidden">
-        {/* 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>
+      {/* Ganti warna bg jadi sama seperti halaman Produk */}
+      <section className="py-20 bg-[#eaf2ff] min-h-screen">
+        <div className="max-w-6xl mx-auto px-6 lg:px-20 space-y-16">

-        <div className="relative max-w-6xl mx-auto px-6 lg:px-20">
-          {/* Logo & Deskripsi */}
+          {/* Card Deskripsi Perusahaan */}
          <motion.div
-            initial={{ opacity: 0, y: 40 }}
+            className="bg-white rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
+            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7 }}
            viewport={{ once: true }}
-            className="bg-white/60 backdrop-blur-lg rounded-3xl shadow-2xl border border-white/20 p-10 relative z-10"
+            whileHover={cardHover}
          >
-            <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="w-64 md:w-80 drop-shadow-2xl hover:scale-105 transition-transform duration-500"
-                />
-              </div>
+            {/* Logo */}
+            <div className="flex justify-center md:justify-start flex-shrink-0">
+              <img src="/Finals_Profile.png" alt="Logo Fortiva" className="w-44 md:w-56" />
+            </div>

-              {/* Deskripsi di kanan */}
-              <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 leading-relaxed text-lg text-gray-900">
-                  Berdiri sejak tahun 2018,{" "}
-                  <span className="font-bold text-black-700 drop-shadow-sm">
-                    WTELL
-                  </span>{" "}
-                  berkomitmen menjadi{" "}
-                  <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 yang Handal dan Profesional
-                  </span>
-                  .
-                </p>
-              </div>
+            {/* Deskripsi */}
+            <div className="text-center md:text-left">
+              <h2 className="text-3xl font-bold text-blue-700">
+                PT. Jaringan Citra Mandiri
+              </h2>
+              <p className="text-gray-700 leading-relaxed mb-4">
+                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">
+                  Fortiva Networking
+                </span>{" "}
+                berkomitmen menjadi Penyedia Layanan Teknologi Telekomunikasi
+                Berbasis Fiber Optic yang Handal dan Profesional.
+              </p>
            </div>
          </motion.div>

          {/* Visi & Misi */}
-          <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 }}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <motion.section
+              className="bg-white rounded-2xl p-8 cursor-pointer"
+              whileHover={cardHover}
+              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5 }}
+              transition={{ duration: 0.7 }}
              viewport={{ once: true }}
-              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"
-              }`}
            >
-              <div className="relative flex flex-col items-center">
-                <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>
+              <h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
+                VISI
+              </h3>
+              <p className="text-gray-700 text-center leading-relaxed">
+                Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
+                Menghubungkan Seluruh Wilayah di Indonesia.
+              </p>
+            </motion.section>

-            {/* Misi */}
-            <motion.div
-              whileHover={{ scale: 1.04 }}
-              initial={{ opacity: 0, x: 50 }}
+            <motion.section
+              className="bg-white rounded-2xl p-8 cursor-pointer"
+              whileHover={cardHover}
+              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.5 }}
+              transition={{ duration: 0.7 }}
              viewport={{ once: true }}
-              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"
-              }`}
            >
-              <div className="relative flex flex-col items-center">
-                <h3 className="text-3xl font-extrabold text-yellow-500 tracking-wide drop-shadow-md border-b-4 border-yellow-400 pb-1">
-                  MISI
-                </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-3">
-                    <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-3">
-                    <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>
+              <h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
+                MISI
+              </h3>
+              <ul className="space-y-4 text-gray-700">
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
+                  Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang
+                  Handal, Terpercaya dan Up To Date dengan Tenaga Profesional.
+                </li>
+                <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.
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
+                  Memberikan nilai tambah dan sinergi dalam industri jaringan
+                  Fiber Optic.
+                </li>
+              </ul>
+            </motion.section>
          </div>
        </div>
      </section>
+
+      <Footer />
    </div>
  );
 }
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -2,7 +2,11 @@ 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";

 const sectionVariant = {
  hidden: { opacity: 0, y: 40 },
@ -18,52 +22,52 @@ const sectionVariant = {
 };

 export default function Home() {
+  const footerRef = useRef(null);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash === "#footer") {
+      footerRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [location]);
+
  return (
-    <motion.div
-      className="font-sans"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.6 }}
-    >
-      {/* Navbar muncul pertama */}
-      <motion.div
+    <div className="font-sans">
+      {/* Navbar */}
+      <Navbar />
+
+      {/* Hero Section */}
+      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.1}
      >
-        <Navbar />
-      </motion.div>
+        <Hero />
+      </motion.section>

-      {/* Hero muncul kedua */}
+      {/* Produk Section */}
      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.3}
      >
-        <Hero />
+        <Produk />
      </motion.section>

-      {/* Produk muncul ketiga */}
+      {/* Cakupan Section */}
      <motion.section
        variants={sectionVariant}
        initial="hidden"
        animate="visible"
        custom={0.6}
-      >
-        <Produk />
-      </motion.section>
-
-      {/* Cakupan muncul terakhir */}
-      <motion.section
-        variants={sectionVariant}
-        initial="hidden"
-        animate="visible"
-        custom={0.9}
      >
        <Cakupan />
      </motion.section>
-    </motion.div>
+
+      {/* Footer */}
+      <Footer ref={footerRef} />
+    </div>
  );
 }
--- a/src/pages/Portfolio.jsx
+++ b/src/pages/Portfolio.jsx
@ -1,4 +1,5 @@
 import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
 import { motion } from "framer-motion";
 import { useState } from "react";

@ -47,7 +48,7 @@ export default function Portfolio() {
          </p>
        </>
      ),
-      extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"], // tambahan
+      extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"],
    },
    {
      id: 3,
@ -56,7 +57,6 @@ export default function Portfolio() {
      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"
@ -74,7 +74,6 @@ export default function Portfolio() {
            </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">
@ -112,33 +111,27 @@ export default function Portfolio() {
            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>
@ -151,34 +144,26 @@ export default function Portfolio() {

  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
-  />
+      <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="/port2.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>

-  {/* 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">
@ -195,7 +180,6 @@ export default function Portfolio() {
        </div>
      </section>

-            {/* Modal */}
      {selectedPortfolio && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
          <motion.div
@ -205,7 +189,6 @@ export default function Portfolio() {
            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"
@ -213,7 +196,6 @@ export default function Portfolio() {
              ✕
            </button>

-            {/* Gambar Header */}
            <div className="relative">
              <img
                src={selectedPortfolio.image}
@ -228,11 +210,9 @@ export default function Portfolio() {
              </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) => (
@ -250,6 +230,8 @@ export default function Portfolio() {
          </motion.div>
        </div>
      )}
+
+      <Footer />
    </div>
  );
 }
@ -271,7 +253,8 @@ function PortfolioCard({ image, title, shortDesc, onClick }) {
      </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">
+        {/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */}
+        <h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
          {title}
        </h3>
Author	SHA1	Message	Date
adelyaou	f7fcc1614d	Contact Address CS	2025-09-16 15:52:26 +07:00
adelyaou	cb7659f291	Contact Address	2025-09-16 15:48:18 +07:00
Syifa	d45732c935	feat: update for changing color palette	2025-09-16 09:57:19 +07:00
adelyaou	1a31d8dd76	Fortiva Landing Page	2025-09-15 23:58:45 +07:00
Syifa	ee7540a820	Revisi 3 Title WTell	2025-08-27 12:11:53 +07:00
Syifa	27a91c1840	Revisi 2 Title WTell	2025-08-27 12:05:46 +07:00
Syifa	92705cb78b	Revisi Title WTell	2025-08-27 11:46:28 +07:00
Syifa	2b1586d919	Revisi Navbar	2025-08-27 08:27:32 +07:00
Syifa	4406dad9f8	Revisi Hero	2025-08-27 08:24:35 +07:00
Syifa	3d4709493b	Walanja landing-page revisi	2025-08-26 22:10:17 +07:00
syifa	9f9c2ec14c	Merge pull request 'adel' (#1 ) from adel into main Reviewed-on: internship/landingpage-wtell#1	2025-08-26 14:03:49 +00:00
adelyaou	1309840e6f	Revisi about, footer, hero	2025-08-26 20:12:42 +07:00
adelyaou	d5fad3c82d	Footer, Mobile	2025-08-26 14:42:55 +07:00