adel
/
LandingPage-Fnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: adel:f7fcc1614d792d6935412ed8fc88a19d88faed71
Branches Tags
adel:main
..
compare: adel:e8d33cb0bd4902b0abdbfafff984e23455e89e1b
Branches Tags
adel:main

No commits in common. "f7fcc1614d792d6935412ed8fc88a19d88faed71" and "e8d33cb0bd4902b0abdbfafff984e23455e89e1b" have entirely different histories.
f7fcc1614d ... e8d33cb0bd

22 changed files with 554 additions and 775 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/Finals_Icon.png" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FortivaNet</title> <title>Vite + React</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

619
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "FortivaNet-landing", "name": "walanja-landing",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
@ -14,8 +14,7 @@
"lucide-react": "^0.541.0", "lucide-react": "^0.541.0",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^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": { "devDependencies": {
"@eslint/js": "^9.33.0", "@eslint/js": "^9.33.0",

BIN
public/Finals_Horizontal.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
public/Finals_Icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
public/Finals_Profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
public/WTell.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 660 KiB

After

Width:  |  Height:  |  Size: 917 KiB

BIN
public/WTell_logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 917 KiB

BIN
public/Wtell2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
public/Wtell2r.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
public/bg-video2.mp4
View File

Binary file not shown.

BIN
public/port2.mp4
View File

Binary file not shown.

20
src/App.jsx
View File

@ -1,31 +1,15 @@
import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useEffect } from "react";
import Navbar from "./components/Navbar";
import Home from "./pages/Home"; import Home from "./pages/Home";
import About from "./pages/About"; import About from "./pages/About";
import Portfolio from "./pages/Portfolio"; 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() { export default function App() {
return ( return (
<Router> <Router>
<ScrollHandler />
<Navbar />
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> <Route path="/about" element={<About />} />
<Route path="/portofolio" element={<Portfolio />} /> <Route path="/portfolio" element={<Portfolio />} />
</Routes> </Routes>
</Router> </Router>
); );

50
src/components/Cakupan.jsx
View File

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

94
src/components/Footer.jsx
View File

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

13
src/components/Hero.jsx
View File

@ -8,17 +8,18 @@ export default function Hero() {
playsInline playsInline
className="absolute inset-0 w-full h-full object-cover" className="absolute inset-0 w-full h-full object-cover"
> >
<source src="/bg-video2.mp4" type="video/mp4" /> <source src="/bg-video.mp4" type="video/mp4" />
</video> </video>
<div className="absolute inset-0 bg-black/50"></div> <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"> <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"> <p className="text-lg">Mari menjadi bagian dari kami</p>
FORTIVA <br /> NETWORKING <h1 className="text-4xl md:text-6xl font-bold leading-tight mt-2">
</header> WALANJA <br /> TELEKOMUNIKASI
<h1 className="mt-4 text-2xl md:text-3xl>">
Connected Everywhere
</h1> </h1>
<p className="mt-4 text-lg">
Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
</p>
</div> </div>
</section> </section>
); );

155
src/components/Navbar.jsx
View File

@ -1,24 +1,19 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react";
import { NavLink, useLocation, useNavigate } from "react-router-dom"; import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { HashLink } from "react-router-hash-link";
export default function Navbar() { export default function Navbar() {
const [mobileMenu, setMobileMenu] = useState(false);
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
// Deteksi scroll untuk ubah background navbar // Deteksi scroll untuk ubah background navbar
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => setScrolled(window.scrollY > 50);
setScrolled(window.scrollY > 50);
};
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
// Scroll otomatis kalau ada hash (#footer, dll) // Scroll otomatis kalau ada hash (#sdm, dll)
useEffect(() => { useEffect(() => {
if (location.hash) { if (location.hash) {
const id = location.hash.replace("#", ""); const id = location.hash.replace("#", "");
@ -31,9 +26,10 @@ export default function Navbar() {
} }
}, [location]); }, [location]);
// Dasar class link const linkClass = ({ isActive }) =>
const baseLink = `relative pb-1 transition-colors duration-300 hover:text-yellow-400 ${
"block px-4 py-2 transition-colors hover:text-[#00CAFF]"; isActive ? "text-yellow-400 font-semibold" : ""
}`;
// Klik About Us → scroll atau pindah halaman // Klik About Us → scroll atau pindah halaman
const handleAboutClick = (e) => { const handleAboutClick = (e) => {
@ -54,154 +50,55 @@ export default function Navbar() {
<nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative"> <nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
{/* Logo */} {/* Logo */}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<img <img src="/WTell.png" alt="logo" className="h-12 w-auto object-contain" />
src="/Finals_Icon.png"
alt="logo"
className="h-7 w-auto object-contain"
/>
<span <span
className={`text-lg font-bold transition-colors duration-300 ${ className={`text-lg font-bold transition-colors duration-300 ${
scrolled ? "text-black" : "text-white" scrolled ? "text-black" : "text-white"
}`} }`}
> >
FortivaNet WALANJA TELEKOMUNIKASI
</span> </span>
</div> </div>
{/* Menu Desktop */} {/* Menu */}
<ul <ul
className={`hidden md:flex items-center space-x-8 font-medium transition-colors duration-300 ${ className={`flex items-center space-x-8 font-medium transition-colors duration-300 ${
scrolled ? "text-black" : "text-white" scrolled ? "text-black" : "text-white"
}`} }`}
> >
{/* Home */}
<li> <li>
<HashLink <NavLink to="/" className={linkClass}>
smooth
to="/#"
className={`${baseLink} ${
location.pathname === "/" && !location.hash
? "text-[#00CAFF] font-semibold"
: ""
}`}
>
Home Home
</HashLink>
</li>
<li>
<NavLink
to="/portofolio"
className={({ isActive }) =>
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
}
>
Portofolio
</NavLink> </NavLink>
</li> </li>
{/* Portfolio (tanpa dropdown) */}
<li>
<NavLink to="/portfolio" className={linkClass}>
Portfolio
</NavLink>
</li>
{/* About Us */}
<li> <li>
<NavLink <NavLink
to="/about" to="/about"
className={linkClass}
onClick={handleAboutClick} onClick={handleAboutClick}
className={({ isActive }) =>
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
}
> >
About Us About Us
</NavLink> </NavLink>
</li> </li>
{/* Contact Us */}
<li> <li>
<HashLink <NavLink to="/contact" className={linkClass}>
smooth
to="/#footer"
className={`${baseLink} ${
location.hash === "#footer" ? "text-[#00CAFF] font-semibold" : ""
}`}
>
Contact Us Contact Us
</HashLink> </NavLink>
</li> </li>
</ul> </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> </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> </header>
); );
} }

37
src/components/Produk.jsx
View File

@ -4,41 +4,38 @@ import { motion } from "framer-motion";
export default function Produk() { export default function Produk() {
const products = [ const products = [
{ {
icon: <Wifi className="w-8 h-8 text-[#145BB5]" />, icon: <Wifi className="w-8 h-8 text-blue-600" />,
title: "FNET LastMile Connection", title: "WTELL LastMile Connection",
desc: "Solusi bagi penyedia layanan internet untuk melayani pelanggan Last Mile tanpa harus membangun jaringan fiber optic sendiri.", desc: "Solusi bagi penyedia layanan internet untuk melayani pelanggan Last Mile tanpa harus membangun jaringan fiber optic sendiri.",
gradient: "from-[#00BFFF]/20 to-[#145BB5]/20", gradient: "from-blue-500/20 to-blue-100/40"
whiteBox: false
}, },
{ {
icon: <Network className="w-8 h-8 text-[#00BFFF]" />, icon: <Network className="w-8 h-8 text-yellow-500" />,
title: "FNET Metro Link", title: "WTELL Metro Link",
desc: "Layanan jaringan serat optik Point to Point dan Point to Multi Point dengan kapasitas tinggi dan infrastruktur handal.", desc: "Layanan jaringan serat optik Point to Point dan Point to Multi Point dengan kapasitas tinggi dan infrastruktur handal.",
// tidak pakai gradient → putih polos gradient: "from-yellow-400/30 to-yellow-100/40"
gradient: "",
whiteBox: true
}, },
{ {
icon: <Cog className="w-8 h-8 text-[#145BB5]" />, icon: <Cog className="w-8 h-8 text-blue-700" />,
title: "FNET EPC Solution", title: "WTELL EPC Solution",
desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.", desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.",
gradient: "from-[#00BFFF]/20 to-[#145BB5]/20", gradient: "from-blue-300/40 to-blue-100/30"
whiteBox: false
} }
]; ];
return ( return (
<section id="produk" className="relative py-20 overflow-hidden text-center"> <section id="produk" className="relative py-20 overflow-hidden text-center">
{/* Background animasi biru */} {/* Animated Background Gradient */}
<motion.div <motion.div
className="absolute inset-0 bg-gradient-to-r from-[#145BB5] via-[#00BFFF] to-[#145BB5] bg-[length:400%_400%]" 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%"] }} animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
></motion.div> ></motion.div>
{/* Overlay biar teks tetap jelas */}
<div className="absolute inset-0 bg-white/95"></div> <div className="absolute inset-0 bg-white/95"></div>
<div className="relative z-10"> <div className="relative z-10">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#145BB5]"> <h2 className="text-3xl md:text-4xl font-bold mb-4 text-blue-900">
Produk Produk
</h2> </h2>
<p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4"> <p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4">
@ -53,15 +50,13 @@ export default function Produk() {
key={i} key={i}
whileHover={{ y: -8, scale: 1.03 }} whileHover={{ y: -8, scale: 1.03 }}
transition={{ duration: 0.4, ease: "easeOut" }} transition={{ duration: 0.4, ease: "easeOut" }}
className="bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-[#145BB5]/10 hover:border-[#00BFFF]/40" 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 hanya kalau whiteBox = false */} {/* Gradient overlay per-card */}
{!item.whiteBox && (
<div <div
className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`} className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
></div> ></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"> <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} {item.icon}
</div> </div>

141
src/pages/About.jsx
View File

@ -1,122 +1,147 @@
"use client";
import Navbar from "../components/Navbar"; import Navbar from "../components/Navbar";
import Hero from "../components/Hero"; import Hero from "../components/Hero";
import Footer from "../components/Footer";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { CheckCircle } from "lucide-react"; import { BadgeCheck } from "lucide-react";
import { useState } from "react";
export default function About() { export default function About() {
const cardHover = { const [activeCard, setActiveCard] = useState(null);
scale: 1.03,
y: -4,
boxShadow: "0 15px 25px rgba(0,0,0,0.1)",
transition: { type: "spring", stiffness: 200, damping: 20 },
};
return ( return (
<div className="font-sans"> <div className="font-sans">
{/* Navbar + Hero */}
<div className="relative">
<Navbar /> <Navbar />
{/* Hero Section */}
<Hero <Hero
title="Tentang Kami" title="Tentang Kami"
subtitle="Kenali lebih dekat siapa kami dan visi misi kami" subtitle="Kenali lebih dekat siapa kami dan visi misi kami"
background="/bg-video.mp4" background="/bg-video.mp4"
/> />
</div>
{/* About Section */} {/* About Section */}
{/* Ganti warna bg jadi sama seperti halaman Produk */} <section className="relative py-20 bg-gradient-to-br from-blue-50 via-white to-yellow-50 min-h-screen overflow-hidden">
<section className="py-20 bg-[#eaf2ff] min-h-screen"> {/* Dekorasi background blur */}
<div className="max-w-6xl mx-auto px-6 lg:px-20 space-y-16"> <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>
{/* Card Deskripsi Perusahaan */} <div className="relative max-w-6xl mx-auto px-6 lg:px-20">
{/* Logo & Deskripsi */}
<motion.div <motion.div
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: 40 }}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }} transition={{ duration: 0.7 }}
viewport={{ once: true }} viewport={{ once: true }}
whileHover={cardHover} className="bg-white/60 backdrop-blur-lg rounded-3xl shadow-2xl border border-white/20 p-10 relative z-10"
> >
{/* Logo */} <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div className="flex justify-center md:justify-start flex-shrink-0"> {/* Logo di kiri */}
<img src="/Finals_Profile.png" alt="Logo Fortiva" className="w-44 md:w-56" /> <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> </div>
{/* Deskripsi */} {/* Deskripsi di kanan */}
<div className="text-center md:text-left"> <div className="text-left">
<h2 className="text-3xl font-bold text-blue-700"> <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 PT. Jaringan Citra Mandiri
</h2> </span>{" "}
<p className="text-gray-700 leading-relaxed mb-4"> adalah Perusahaan Swasta yang bergerak di bidang Penyedia
Adalah Perusahaan Swasta yang bergerak di bidang Penyedia
Layanan Teknologi Telekomunikasi Berbasis Fiber Optic. Layanan Teknologi Telekomunikasi Berbasis Fiber Optic.
</p> </p>
<p className="text-gray-700 leading-relaxed"> <p className="mt-4 leading-relaxed text-lg text-gray-900">
Berdiri sejak tahun 2018,{" "} Berdiri sejak tahun 2018,{" "}
<span className="font-semibold text-blue-700"> <span className="font-bold text-black-700 drop-shadow-sm">
Fortiva Networking WTELL
</span>{" "} </span>{" "}
berkomitmen menjadi Penyedia Layanan Teknologi Telekomunikasi berkomitmen menjadi{" "}
Berbasis Fiber Optic yang Handal dan Profesional. <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> </p>
</div> </div>
</div>
</motion.div> </motion.div>
{/* Visi & Misi */} {/* 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 relative z-10">
<motion.section {/* Visi */}
className="bg-white rounded-2xl p-8 cursor-pointer" <motion.div
whileHover={cardHover} whileHover={{ scale: 1.04 }}
initial={{ opacity: 0, x: -30 }} initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.7 }} transition={{ duration: 0.5 }}
viewport={{ once: true }} 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"
}`}
> >
<h3 className="text-2xl font-bold text-center mb-6 text-blue-700"> <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 VISI
</h3> </h3>
<p className="text-gray-700 text-center leading-relaxed"> <p className="mt-6 leading-relaxed text-gray-800 text-lg max-w-md">
Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
Menghubungkan Seluruh Wilayah di Indonesia. Menghubungkan Seluruh Wilayah di Indonesia.
</p> </p>
</motion.section> </div>
</motion.div>
<motion.section {/* Misi */}
className="bg-white rounded-2xl p-8 cursor-pointer" <motion.div
whileHover={cardHover} whileHover={{ scale: 1.04 }}
initial={{ opacity: 0, x: 30 }} initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.7 }} transition={{ duration: 0.5 }}
viewport={{ once: true }} 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"
}`}
> >
<h3 className="text-2xl font-bold text-center mb-6 text-blue-700"> <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 MISI
</h3> </h3>
<ul className="space-y-4 text-gray-700"> <ul className="mt-6 space-y-4 text-gray-800 text-lg max-w-md text-left">
<li className="flex items-start gap-2"> <li className="flex items-start gap-3">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" /> <span className="bg-green-100 p-2 rounded-full">
<BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
</span>
Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang
Handal, Terpercaya dan Up To Date dengan Tenaga Profesional. Handal, Terpercaya dan Up To Date dengan Tenaga Profesional.
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-3">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" /> <span className="bg-green-100 p-2 rounded-full">
<BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
</span>
Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber
Optic di seluruh Indonesia. Optic di seluruh Indonesia.
</li> </li>
<li className="flex items-start gap-2"> <li className="flex items-start gap-3">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" /> <span className="bg-green-100 p-2 rounded-full">
<BadgeCheck className="text-green-600 w-6 h-6 shrink-0" />
</span>
Memberikan nilai tambah dan sinergi dalam industri jaringan Memberikan nilai tambah dan sinergi dalam industri jaringan
Fiber Optic. Fiber Optic.
</li> </li>
</ul> </ul>
</motion.section> </div>
</motion.div>
</div> </div>
</div> </div>
</section> </section>
<Footer />
</div> </div>
); );
} }

52
src/pages/Home.jsx
View File

@ -2,11 +2,7 @@ import Navbar from "../components/Navbar";
import Hero from "../components/Hero"; import Hero from "../components/Hero";
import Produk from "../components/Produk"; import Produk from "../components/Produk";
import Cakupan from "../components/Cakupan"; 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 { motion } from "framer-motion";
import { MapPin, Wifi, Network, Cog } from "lucide-react";
const sectionVariant = { const sectionVariant = {
hidden: { opacity: 0, y: 40 }, hidden: { opacity: 0, y: 40 },
@ -22,52 +18,52 @@ const sectionVariant = {
}; };
export default function Home() { export default function Home() {
const footerRef = useRef(null);
const location = useLocation();
useEffect(() => {
if (location.hash === "#footer") {
footerRef.current?.scrollIntoView({ behavior: "smooth" });
}
}, [location]);
return ( return (
<div className="font-sans"> <motion.div
{/* Navbar */} className="font-sans"
<Navbar /> initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
{/* Hero Section */} transition={{ duration: 0.6 }}
<motion.section >
{/* Navbar muncul pertama */}
<motion.div
variants={sectionVariant} variants={sectionVariant}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
custom={0.1} custom={0.1}
> >
<Hero /> <Navbar />
</motion.section> </motion.div>
{/* Produk Section */} {/* Hero muncul kedua */}
<motion.section <motion.section
variants={sectionVariant} variants={sectionVariant}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
custom={0.3} custom={0.3}
> >
<Produk /> <Hero />
</motion.section> </motion.section>
{/* Cakupan Section */} {/* Produk muncul ketiga */}
<motion.section <motion.section
variants={sectionVariant} variants={sectionVariant}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
custom={0.6} custom={0.6}
> >
<Cakupan /> <Produk />
</motion.section> </motion.section>
{/* Footer */} {/* Cakupan muncul terakhir */}
<Footer ref={footerRef} /> <motion.section
</div> variants={sectionVariant}
initial="hidden"
animate="visible"
custom={0.9}
>
<Cakupan />
</motion.section>
</motion.div>
); );
} }

33
src/pages/Portfolio.jsx
View File

@ -1,5 +1,4 @@
import Navbar from "../components/Navbar"; import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useState } from "react"; import { useState } from "react";
@ -48,7 +47,7 @@ export default function Portfolio() {
</p> </p>
</> </>
), ),
extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"], extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"], // tambahan
}, },
{ {
id: 3, id: 3,
@ -57,6 +56,7 @@ export default function Portfolio() {
shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.", shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.",
detail: ( detail: (
<div className="space-y-10"> <div className="space-y-10">
{/* Bagian 1 */}
<div className="grid md:grid-cols-2 gap-6 items-center"> <div className="grid md:grid-cols-2 gap-6 items-center">
<img <img
src="/tiang1.jpg" src="/tiang1.jpg"
@ -74,6 +74,7 @@ export default function Portfolio() {
</div> </div>
</div> </div>
{/* Bagian 2 */}
<div className="grid md:grid-cols-2 gap-6 items-center"> <div className="grid md:grid-cols-2 gap-6 items-center">
<div className="order-2 md:order-1"> <div className="order-2 md:order-1">
<h3 className="font-semibold text-gray-800 mb-2"> <h3 className="font-semibold text-gray-800 mb-2">
@ -111,27 +112,33 @@ export default function Portfolio() {
Beberapa proyek utama mencakup wilayah strategis di Jawa Barat. Beberapa proyek utama mencakup wilayah strategis di Jawa Barat.
</p> </p>
{/* Grid Lokasi */}
<div className="grid grid-cols-2 gap-4 mt-4"> <div className="grid grid-cols-2 gap-4 mt-4">
<div> <div>
<img src="/subang.jpg" alt="Subang" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Subang – 50 Km</p>
</div> </div>
<div> <div>
<img src="/pangandaran.jpg" alt="Pangandaran" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Pangandaran – 225 Km</p>
</div> </div>
<div> <div>
<img src="/bandungraya.jpg" alt="Bandung Raya" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Bandung Raya – 800 Km</p>
</div> </div>
<div> <div>
<img src="/garut.jpg" alt="Garut" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Garut – 1000 Km</p>
</div> </div>
<div> <div>
<img src="/ciamis.jpg" alt="Ciamis" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Ciamis – 100 Km</p>
</div> </div>
<div> <div>
<img src="/tasik.jpg" alt="Tasik" className="w-full h-36 object-cover rounded-lg border" /> <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> <p className="text-xs mt-1 text-center font-semibold">Tasik – 100 Km</p>
@ -144,26 +151,34 @@ export default function Portfolio() {
return ( return (
<div className="font-sans"> <div className="font-sans">
{/* Navbar */}
<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"> <section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
{/* Video background */}
<video <video
className="absolute inset-0 w-full h-full object-cover" className="absolute inset-0 w-full h-full object-cover"
src="/port2.mp4" src="/port.mp4" // taruh video kamu di public/bg-portfolio.mp4
autoPlay autoPlay
loop loop
muted muted
playsInline playsInline
/> />
{/* Overlay gelap biar teksnya jelas */}
<div className="absolute inset-0 bg-black/50"></div> <div className="absolute inset-0 bg-black/50"></div>
{/* Konten teks */}
<div className="relative z-10 px-4"> <div className="relative z-10 px-4">
<h1 className="text-4xl font-bold mb-8">Portofolio Kami</h1> <h1 className="text-4xl font-bold mb-8">Portfolio Kami</h1>
<p className="text-lg opacity-90"> <p className="text-lg opacity-90">
Lihat karya dan layanan terbaik yang sudah kami bangun Lihat karya dan layanan terbaik yang sudah kami bangun
</p> </p>
</div> </div>
</section> </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"> <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="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"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
@ -180,6 +195,7 @@ export default function Portfolio() {
</div> </div>
</section> </section>
{/* Modal */}
{selectedPortfolio && ( {selectedPortfolio && (
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4"> <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
<motion.div <motion.div
@ -189,6 +205,7 @@ export default function Portfolio() {
transition={{ duration: 0.4, ease: "easeOut" }} 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" 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 <button
onClick={() => setSelectedPortfolio(null)} 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" 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"
@ -196,6 +213,7 @@ export default function Portfolio() {
✕ ✕
</button> </button>
{/* Gambar Header */}
<div className="relative"> <div className="relative">
<img <img
src={selectedPortfolio.image} src={selectedPortfolio.image}
@ -210,9 +228,11 @@ export default function Portfolio() {
</div> </div>
</div> </div>
{/* Konten */}
<div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar"> <div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar">
{selectedPortfolio.detail} {selectedPortfolio.detail}
{/* Extra Images */}
{selectedPortfolio.extraImages && ( {selectedPortfolio.extraImages && (
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6"> <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
{selectedPortfolio.extraImages.map((img, idx) => ( {selectedPortfolio.extraImages.map((img, idx) => (
@ -230,8 +250,6 @@ export default function Portfolio() {
</motion.div> </motion.div>
</div> </div>
)} )}
<Footer />
</div> </div>
); );
} }
@ -253,8 +271,7 @@ function PortfolioCard({ image, title, shortDesc, onClick }) {
</div> </div>
<div className="p-6 flex flex-col flex-grow"> <div className="p-6 flex flex-col flex-grow">
{/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */} <h3 className="text-lg font-bold bg-gradient-to-r from-indigo-600 to-blue-500 bg-clip-text text-transparent">
<h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
{title} {title}
</h3> </h3>