diff --git a/public/SDM.jpg b/public/SDM.jpg new file mode 100644 index 0000000..161ed78 Binary files /dev/null and b/public/SDM.jpg differ diff --git a/public/about.jpg b/public/about.jpg new file mode 100644 index 0000000..0a6e486 Binary files /dev/null and b/public/about.jpg differ diff --git a/public/alat-kerja.jpg b/public/alat-kerja.jpg new file mode 100644 index 0000000..b4fa609 Binary files /dev/null and b/public/alat-kerja.jpg differ diff --git a/public/alat2.jpg b/public/alat2.jpg new file mode 100644 index 0000000..880f350 Binary files /dev/null and b/public/alat2.jpg differ diff --git a/public/bandungraya.jpg b/public/bandungraya.jpg new file mode 100644 index 0000000..f2d5d07 Binary files /dev/null and b/public/bandungraya.jpg differ diff --git a/public/ciamis.jpg b/public/ciamis.jpg new file mode 100644 index 0000000..f2240ea Binary files /dev/null and b/public/ciamis.jpg differ diff --git a/public/exfo.jpg b/public/exfo.jpg new file mode 100644 index 0000000..210dc09 Binary files /dev/null and b/public/exfo.jpg differ diff --git a/public/fujikura.jpg b/public/fujikura.jpg new file mode 100644 index 0000000..ee2d40a Binary files /dev/null and b/public/fujikura.jpg differ diff --git a/public/garut.jpg b/public/garut.jpg new file mode 100644 index 0000000..c564911 Binary files /dev/null and b/public/garut.jpg differ diff --git a/public/map1.jpg b/public/map1.jpg new file mode 100644 index 0000000..48f99db Binary files /dev/null and b/public/map1.jpg differ diff --git a/public/pangandaran.jpg b/public/pangandaran.jpg new file mode 100644 index 0000000..ac3ca3b Binary files /dev/null and b/public/pangandaran.jpg differ diff --git a/public/port.mp4 b/public/port.mp4 new file mode 100644 index 0000000..ab2c5b5 Binary files /dev/null and b/public/port.mp4 differ diff --git a/public/sdm2.jpg b/public/sdm2.jpg new file mode 100644 index 0000000..a318079 Binary files /dev/null and b/public/sdm2.jpg differ diff --git a/public/subang.jpg b/public/subang.jpg new file mode 100644 index 0000000..5e41cb4 Binary files /dev/null and b/public/subang.jpg differ diff --git a/public/tasik.jpg b/public/tasik.jpg new file mode 100644 index 0000000..f1348dd Binary files /dev/null and b/public/tasik.jpg differ diff --git a/public/tiang.jpg b/public/tiang.jpg new file mode 100644 index 0000000..67c6d25 Binary files /dev/null and b/public/tiang.jpg differ diff --git a/public/tiang1.jpg b/public/tiang1.jpg new file mode 100644 index 0000000..16afe6e Binary files /dev/null and b/public/tiang1.jpg differ diff --git a/public/tiang2.jpg b/public/tiang2.jpg new file mode 100644 index 0000000..0844487 Binary files /dev/null and b/public/tiang2.jpg differ diff --git a/public/yokogwa.jpg b/public/yokogwa.jpg new file mode 100644 index 0000000..8a3c592 Binary files /dev/null and b/public/yokogwa.jpg differ diff --git a/src/App.jsx b/src/App.jsx index fe85c61..63012ce 100644 --- a/src/App.jsx +++ b/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() { } /> } /> + } /> ); diff --git a/src/components/Cakupan.jsx b/src/components/Cakupan.jsx new file mode 100644 index 0000000..8441a55 --- /dev/null +++ b/src/components/Cakupan.jsx @@ -0,0 +1,68 @@ +import { motion } from "framer-motion"; +import { MapPin } from "lucide-react"; + +export default function Cakupan() { + return ( +
+ {/* Animated Gradient Background */} +
+ +
+ {/* Title */} +
+

+ Cakupan Area +

+

+ Saat ini jaringan dan layanan{" "} + WTELL telah + berhasil menghadirkan internet di berbagai daerah di Kota Bandung + hingga Desa 3T (Tertinggal, Terdepan, Terluar). +

+
+ + {/* Content */} +
+ {/* Map */} + + Map Bandung + + + {/* List Area */} + +

+ Fokus Layanan +

+
    + {[ + "Bandung Kota", + "Cimahi", + "Cileunyi", + "Ngamprah", + "Desa 3T sekitar Bandung", + ].map((area, index) => ( +
  • + + {area} +
    • + ))} +
+ +
+
+
+ ); +} diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx new file mode 100644 index 0000000..4b28cac --- /dev/null +++ b/src/components/Hero.jsx @@ -0,0 +1,26 @@ +export default function Hero() { + return ( +
+ +
+ +
+

Mari menjadi bagian dari kami

+

+ WALANJA
TELEKOMUNIKASI +

+

+ Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045 +

+
+
+ ); +} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 99641ce..d487e3c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,24 +1,46 @@ import { useState, useEffect } from "react"; -import { ChevronDown } from "lucide-react"; -import { Link } from "react-router-dom"; +import { NavLink, useLocation, useNavigate } 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 = () => { - if (window.scrollY > 50) { - setScrolled(true); - } else { - setScrolled(false); - } - }; + const handleScroll = () => setScrolled(window.scrollY > 50); 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 (
{/* Logo */}
- logo + logo - WALANJA + WALANJA TELEKOMUNIKASI
@@ -46,81 +68,34 @@ export default function Navbar() { > {/* Home */}
  • - + Home - +
    • - {/* Dropdown Portofolio */} -
  • - - - {isOpen && ( - - )} + {/* Portfolio (tanpa dropdown) */} +
  • + + Portfolio +
    • {/* About Us */}
  • - + About Us - +
    • {/* Contact Us */}
  • - + Contact Us - +
    • diff --git a/src/components/Produk.jsx b/src/components/Produk.jsx new file mode 100644 index 0000000..13a5016 --- /dev/null +++ b/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: , + 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: , + 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: , + 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 ( +
    + {/* Animated Background Gradient */} + + {/* Overlay biar teks tetap jelas */} +
    + +
    +

    + Produk +

    +

    + 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. +

    + +
    + {products.map((item, i) => ( + + {/* Gradient overlay per-card */} +
    + {/* Icon Circle */} +
    + {item.icon} +
    +

    + {item.title} +

    +

    {item.desc}

    +     + ))} +
    +
    +
    + ); +} diff --git a/src/pages/About.jsx b/src/pages/About.jsx index 5525392..59037a4 100644 --- a/src/pages/About.jsx +++ b/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 (
    - {/* Navbar */} - + {/* Navbar + Hero */} +
    + + +
    {/* About Section */} -
    -
    +
    + {/* Dekorasi background blur */} +
    +
    + +
    {/* Logo & Deskripsi */} - Logo Walanja -

    - PT. Jaringan Citra Mandiri{" "} - adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan - Teknologi Telekomunikasi Berbasis Fiber Optic. -

    -

    - Berdiri sejak tahun 2018,{" "} - WTELL{" "} - berkomitmen menjadi{" "} - - Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic - yang Handal dan Profesional. - -

    +
    + {/* Logo di kiri */} +
    + Logo Walanja +
    + + {/* Deskripsi di kanan */} +
    +

    + + PT. Jaringan Citra Mandiri + {" "} + adalah Perusahaan Swasta yang bergerak di bidang Penyedia + Layanan Teknologi Telekomunikasi Berbasis Fiber Optic. +

    +

    + Berdiri sejak tahun 2018,{" "} + + WTELL + {" "} + berkomitmen menjadi{" "} + + Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber + Optic yang Handal dan Profesional + + . +

    +
    +
    {/* Visi & Misi */} -
    +
    {/* Visi */} 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" + }`} > -

    VISI

    -

    - Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang - Menghubungkan Seluruh Wilayah di Indonesia. -

    +
    +

    + VISI +

    +

    + Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang + Menghubungkan Seluruh Wilayah di Indonesia. +

    +
    {/* Misi */} 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" + }`} > -

    MISI

    -
      -
    • - - Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang - Handal, Terpercaya dan Up To Date dengan Tenaga Profesional. -
      • -
    • - - Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber - Optic diseluruh Indonesia. -
      • -
    • - - Memberikan nilai tambah dan sinergi dalam industri jaringan - Fiber Optic. -
      • -
    +
    +

    + MISI +

    +
      +
    • + + + + Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang + Handal, Terpercaya dan Up To Date dengan Tenaga Profesional. +
      • +
    • + + + + Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber + Optic di seluruh Indonesia. +
      • +
    • + + + + Memberikan nilai tambah dan sinergi dalam industri jaringan + Fiber Optic. +
      • +
    +
    diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 7b745f7..73d3658 100644 --- a/src/pages/Home.jsx +++ b/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 ( -
    - {/* Navbar */} - - - {/* Hero Section */} -
    - -
    - -
    -

    Mari menjadi bagian dari kami

    -

    - WALANJA
    TELEKOMUNIKASI -

    -

    - Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045 -

    -
    -
    - - {/* Produk Section */} -
    + {/* Navbar muncul pertama */} + - {/* Animated Background */} -
    -
    + +     -
    -

    Produk

    -

    - 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. -

    + {/* Hero muncul kedua */} + + + -
    - {/* Card 1 */} - -
    - -

    - WTELL LastMile Connection -

    -

    - Solusi bagi penyedia layanan internet untuk melayani pelanggan - Last Mile tanpa harus membangun jaringan fiber optic sendiri. -

    -     + {/* Produk muncul ketiga */} + + + - {/* Card 2 */} - -
    - -

    - WTELL Metro Link -

    -

    - Layanan jaringan serat optik Point to Point dan Point to Multi - Point dengan kapasitas tinggi dan infrastruktur handal. -

    -     - - {/* Card 3 */} - -
    - -

    - WTELL EPC Solution -

    -

    - Menyediakan layanan Engineering, Procurement, Construction: - Survey, Design, Deployment, Operation & Maintenance, FTIX. -

    -     -
    -
    -
    - - {/* Cakupan Area Section */} -
    - {/* Animated Overlay */} -
    - -
    - {/* Title */} -
    -

    - - Cakupan Area -

    -

    - Saat ini jaringan dan layanan{" "} - WTELL telah berhasil - menghadirkan internet di berbagai daerah di Kota Bandung hingga - Desa 3T (Tertinggal, Terdepan, Terluar). -

    -
    - - {/* Content */} -
    - {/* Map with hover animation */} - - Map Bandung - - - {/* List Area */} -
    -

    - Fokus Layanan -

    -
      -
    • 📍 Bandung Kota
      • -
    • 📍 Cimahi
      • -
    • 📍 Cileunyi
      • -
    • 📍 Ngamprah
      • -
    • 📍 Desa 3T sekitar Bandung
      • -
    -
    -
    -
    -
    -
    + {/* Cakupan muncul terakhir */} + + + + ); -} +} \ No newline at end of file diff --git a/src/pages/Portfolio.jsx b/src/pages/Portfolio.jsx new file mode 100644 index 0000000..d478c72 --- /dev/null +++ b/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: ( + <> +

    + Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP Untuk Layanan Terbaik +

    +

    + 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. +

    +

    + Lebih dari 200 tenaga kerja siap mendukung semua layanan dengan standar terbaik, + termasuk tenaga ahli di dalamnya yang siap memaksimalkan layanan yang kami sediakan. +

    + + ), + }, + { + id: 2, + image: "/alat2.jpg", + title: "Peralatan Fiber Optik", + shortDesc: + "PT. Jaringan Citra Mandiri memiliki alat kerja yang lengkap dan tersertifikasi.", + detail: ( + <> +

    Peralatan Fiber Optik

    +

    + Kami menggunakan peralatan fiber optik seperti Fujikura, Yokogawa, dan Exfo untuk + memastikan hasil kerja berkualitas tinggi. +

    +

    + Semua alat kerja sudah sesuai standar industri jaringan serat optik. +

    + + ), + 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: ( +
    + {/* Bagian 1 */} +
    + Pabrikasi Berkualitas +
    +

    + Pabrikasi Berkualitas dengan Standar Industri Terbaik +

    +

    + Selain dari pekerjaan jaringan, PT. Jaringan Citra Mandiri mempunyai Pabrikasi Tiang Telco, + guna menunjang kebutuhan perusahaan maupun kebutuhan dari luar perusahaan. +

    +
    +
    + + {/* Bagian 2 */} +
    +
    +

    + Efisiensi Tinggi untuk Memenuhi Permintaan Pelanggan +

    +

    + 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. +

    +
    + Efisiensi Tinggi +
    +
    + ), + }, + { + 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: ( +
    +

    + Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota +

    +

    + 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. +

    + + {/* Grid Lokasi */} +
    +
    + Subang +

    Subang – 50 Km

    +
    + +
    + Pangandaran +

    Pangandaran – 225 Km

    +
    + +
    + Bandung Raya +

    Bandung Raya – 800 Km

    +
    + +
    + Garut +

    Garut – 1000 Km

    +
    + +
    + Ciamis +

    Ciamis – 100 Km

    +
    + +
    + Tasik +

    Tasik – 100 Km

    +
    +
    +
    + ), + }, + ]; + + return ( +
    + {/* Navbar */} + + + {/* Header Section dengan background video */} +
    + {/* Video background */} +
    + + {/* Portfolio Section */} +
    +
    +
    + {portfolioData.map((item) => ( + setSelectedPortfolio(item)} + /> + ))} +
    +
    +
    + + {/* Modal */} + {selectedPortfolio && ( +
    + + {/* Tombol Close */} + + + {/* Gambar Header */} +
    + {selectedPortfolio.title} +
    +
    +

    + {selectedPortfolio.title} +

    +
    +
    + + {/* Konten */} +
    + {selectedPortfolio.detail} + + {/* Extra Images */} + {selectedPortfolio.extraImages && ( +
    + {selectedPortfolio.extraImages.map((img, idx) => ( + + ))} +
    + )} +
    +     +
    + )} +
    + ); +} + +/* Komponen Card */ +function PortfolioCard({ image, title, shortDesc, onClick }) { + return ( + +
    + {title} +
    +
    + +
    +

    + {title} +

    + +

    + {shortDesc} +

    + + +
    +     + ); +}