commit
9f9c2ec14c
|
|
@ -12,7 +12,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",
|
||||
|
|
@ -2690,7 +2691,6 @@
|
|||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
|
|
@ -2820,6 +2820,18 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
|
|
@ -2990,7 +3002,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
@ -3327,6 +3338,17 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
@ -3379,6 +3401,12 @@
|
|||
"react": "^19.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.17.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
|
||||
|
|
@ -3427,6 +3455,19 @@
|
|||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-hash-link": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz",
|
||||
"integrity": "sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15",
|
||||
"react-router-dom": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
BIN
public/WTell.png
BIN
public/WTell.png
Binary file not shown.
|
Before Width: | Height: | Size: 917 KiB After Width: | Height: | Size: 660 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 917 KiB |
18
src/App.jsx
18
src/App.jsx
|
|
@ -1,10 +1,26 @@
|
|||
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";
|
||||
|
||||
|
||||
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 />} />
|
||||
|
|
|
|||
|
|
@ -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-[#5C739B] 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="/WTell.png" alt="Walanja 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="/portfolio">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@wtell.id
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Earth className="w-4 h-4"/> https://www.wtell.id/
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="border-t border-gray-400 mt-8 pt-4 text-center text-sm">
|
||||
© 2025 Walanja Telekomunikasi.
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +1,23 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ChevronDown, Menu, X } from "lucide-react";
|
||||
import { HashLink } from "react-router-hash-link";
|
||||
|
||||
export default function Navbar() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false); // dropdown portfolio
|
||||
const [mobileMenu, setMobileMenu] = useState(false); // toggle mobile
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
// Deteksi scroll
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 50) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const linkClass = `block px-4 py-2 hover:text-yellow-400 transition-colors`;
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed w-full top-0 z-20 transition-all duration-300 ${
|
||||
|
|
@ -34,30 +33,24 @@ export default function Navbar() {
|
|||
scrolled ? "text-black" : "text-white"
|
||||
}`}
|
||||
>
|
||||
WALANJA
|
||||
WTell
|
||||
</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>
|
||||
<Link
|
||||
to="/"
|
||||
className={`hover:text-yellow-400 ${
|
||||
!scrolled ? "border-b-2 border-yellow-400 pb-1" : ""
|
||||
}`}
|
||||
>
|
||||
<HashLink smooth to="/#" className="hover:text-yellow-400">
|
||||
Home
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
|
||||
{/* Dropdown Portofolio */}
|
||||
<li className="relative">
|
||||
<li className="relative group">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="hover:text-yellow-400 flex items-center gap-1"
|
||||
|
|
@ -74,56 +67,155 @@ export default function Navbar() {
|
|||
{isOpen && (
|
||||
<ul className="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg text-black">
|
||||
<li>
|
||||
<Link
|
||||
to="/sdm"
|
||||
className="block px-4 py-2 hover:bg-yellow-100"
|
||||
>
|
||||
<HashLink to="/sdm" className={linkClass}>
|
||||
SDM
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/alat-kerja"
|
||||
className="block px-4 py-2 hover:bg-yellow-100"
|
||||
>
|
||||
<HashLink to="/alat-kerja" className={linkClass}>
|
||||
Alat Kerja
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/produksi"
|
||||
className="block px-4 py-2 hover:bg-yellow-100"
|
||||
>
|
||||
<HashLink to="/produksi" className={linkClass}>
|
||||
Produksi
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to="/pengalaman"
|
||||
className="block px-4 py-2 hover:bg-yellow-100"
|
||||
>
|
||||
<HashLink to="/pengalaman" className={linkClass}>
|
||||
Pengalaman
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
|
||||
{/* About Us */}
|
||||
<li>
|
||||
<Link to="/about" className="hover:text-yellow-400">
|
||||
<HashLink to="/about" className="hover:text-yellow-400">
|
||||
About Us
|
||||
</Link>
|
||||
</HashLink>
|
||||
</li>
|
||||
|
||||
{/* Contact Us */}
|
||||
<li>
|
||||
<Link to="/contact" className="hover:text-yellow-400">
|
||||
<HashLink smooth to="/#footer" className="hover:text-yellow-400">
|
||||
Contact Us
|
||||
</Link>
|
||||
</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={linkClass}
|
||||
>
|
||||
Home
|
||||
</HashLink>
|
||||
</li>
|
||||
|
||||
{/* Dropdown Portofolio di Mobile */}
|
||||
<li>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-full flex justify-between items-center px-4 py-2 hover:bg-gray-100 rounded-lg"
|
||||
>
|
||||
Portofolio
|
||||
<ChevronDown
|
||||
size={18}
|
||||
className={`transition-transform ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<ul className="ml-4 mt-2 space-y-2 text-sm">
|
||||
<li>
|
||||
<HashLink
|
||||
to="/sdm"
|
||||
className="block px-4 py-2 hover:text-yellow-400 rounded"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
>
|
||||
SDM
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<HashLink
|
||||
to="/alat-kerja"
|
||||
className="block px-4 py-2 hover:text-yellow-400 rounded"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
>
|
||||
Alat Kerja
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<HashLink
|
||||
to="/produksi"
|
||||
className="block px-4 py-2 hover:text-yellow-400 rounded"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
>
|
||||
Produksi
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<HashLink
|
||||
to="/pengalaman"
|
||||
className="block px-4 py-2 hover:text-yellow-400 rounded"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
>
|
||||
Pengalaman
|
||||
</HashLink>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<HashLink
|
||||
to="/about"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
className={linkClass}
|
||||
>
|
||||
About Us
|
||||
</HashLink>
|
||||
</li>
|
||||
<li>
|
||||
<HashLink
|
||||
smooth
|
||||
to="/#footer"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
className={linkClass}
|
||||
>
|
||||
Contact Us
|
||||
</HashLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
"use client"; // kalau pakai Next.js, taruh di baris paling atas
|
||||
|
||||
import Navbar from "../components/Navbar";
|
||||
import Footer from "../components/Footer"; // <- tambahkan ini
|
||||
import { motion } from "framer-motion";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
|
||||
|
|
@ -12,58 +15,66 @@ export default function About() {
|
|||
<section className="py-20 bg-gray-50 min-h-screen">
|
||||
<div className="max-w-6xl mx-auto px-6 lg:px-20">
|
||||
{/* Logo & Deskripsi */}
|
||||
<motion.div
|
||||
<motion.section
|
||||
className="grid grid-cols-1 md:grid-cols-2 items-center gap-10"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<img
|
||||
src="/WTell.png"
|
||||
alt="Logo Walanja"
|
||||
className="mx-auto w-32 mb-6"
|
||||
/>
|
||||
<p className="text-gray-700 max-w-3xl mx-auto leading-relaxed">
|
||||
<span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
|
||||
adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
|
||||
Teknologi Telekomunikasi Berbasis Fiber Optic.
|
||||
</p>
|
||||
<p className="mt-4 text-gray-700 max-w-3xl mx-auto leading-relaxed">
|
||||
Berdiri sejak tahun 2018,{" "}
|
||||
<span className="font-semibold text-blue-700">WTELL</span>{" "}
|
||||
berkomitmen menjadi{" "}
|
||||
<span className="font-bold">
|
||||
Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
|
||||
yang Handal dan Profesional.
|
||||
</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
>
|
||||
{/* Logo di kiri */}
|
||||
<div className="flex justify-center md:justify-start">
|
||||
<img
|
||||
src="/WTell_logo.png"
|
||||
alt="Logo Walanja"
|
||||
className="w-45 md:w-45"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Deskripsi di kanan */}
|
||||
<div>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
<span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
|
||||
adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
|
||||
Teknologi Telekomunikasi Berbasis Fiber Optic.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Berdiri sejak tahun 2018,{" "}
|
||||
<span className="font-semibold text-blue-700">WTELL</span>{" "}
|
||||
berkomitmen menjadi{" "}
|
||||
<span className="font-bold">
|
||||
Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
|
||||
yang Handal dan Profesional.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</motion.section>
|
||||
{/* Visi & Misi */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
|
||||
{/* Visi */}
|
||||
<motion.div
|
||||
<motion.section
|
||||
className="bg-white shadow-lg rounded-2xl p-8"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white shadow-lg rounded-2xl p-8"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-center mb-6">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.div>
|
||||
</motion.section>
|
||||
|
||||
{/* Misi */}
|
||||
<motion.div
|
||||
<motion.section
|
||||
className="bg-white shadow-lg rounded-2xl p-8"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white shadow-lg rounded-2xl p-8"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
|
||||
<ul className="space-y-4 text-gray-700">
|
||||
|
|
@ -83,10 +94,13 @@ export default function About() {
|
|||
Fiber Optic.
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,20 @@
|
|||
import Navbar from "../components/Navbar";
|
||||
import Footer from "../components/Footer";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { MapPin, Wifi, Network, Cog } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Home() {
|
||||
const footerRef = useRef(null);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (location.hash === "#footer") {
|
||||
footerRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [location]);
|
||||
|
||||
return (
|
||||
<div className="font-sans">
|
||||
{/* Navbar */}
|
||||
|
|
@ -22,13 +34,12 @@ export default function Home() {
|
|||
<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">
|
||||
<header className="text-4xl md:text-6xl font-bold leading-tight mt-2">
|
||||
WALANJA <br /> TELEKOMUNIKASI
|
||||
</header>
|
||||
<h1 className="mt-4 text-2xl md:text-3xl">
|
||||
Always Connected
|
||||
</h1>
|
||||
<p className="mt-4 text-lg">
|
||||
Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -122,7 +133,7 @@ export default function Home() {
|
|||
{/* Title */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold flex items-center justify-center gap-2 text-blue-900">
|
||||
<MapPin className="w-8 h-8 text-blue-600" />
|
||||
|
||||
Cakupan Area
|
||||
</h2>
|
||||
<p className="mt-3 text-gray-600 max-w-2xl mx-auto">
|
||||
|
|
@ -134,35 +145,38 @@ export default function Home() {
|
|||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
|
||||
{/* Map with hover animation */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="flex-1 flex justify-center"
|
||||
>
|
||||
<img
|
||||
src="/map-bandung.jpg"
|
||||
alt="Map Bandung"
|
||||
className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100"
|
||||
/>
|
||||
</motion.div>
|
||||
<div className="max-w-6xl mx-auto flex flex-col md:flex-row items-stretch gap-12 px-6">
|
||||
{/* Map */}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="flex-1 flex justify-center"
|
||||
>
|
||||
<img
|
||||
src="/map-bandung.jpg"
|
||||
alt="Map Bandung"
|
||||
className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100 object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* List Area */}
|
||||
<div className="flex-1 bg-white/70 p-6 rounded-2xl shadow-lg">
|
||||
<h3 className="text-xl font-semibold mb-4 text-blue-600">
|
||||
Fokus Layanan
|
||||
</h3>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li>📍 Bandung Kota</li>
|
||||
<li>📍 Cimahi</li>
|
||||
<li>📍 Cileunyi</li>
|
||||
<li>📍 Ngamprah</li>
|
||||
<li>📍 Desa 3T sekitar Bandung</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* List Area */}
|
||||
<div className="flex-1 bg-white/70 p-12 rounded-2xl shadow-lg flex flex-col justify-center">
|
||||
<h2 className="text-2xl text-center font-semibold mb-6 text-blue-600">
|
||||
Fokus Layanan
|
||||
</h2>
|
||||
<ul className="space-y-3 text-gray-700">
|
||||
<li>📍 Bandung Kota</li>
|
||||
<li>📍 Cimahi</li>
|
||||
<li>📍 Cileunyi</li>
|
||||
<li>📍 Ngamprah</li>
|
||||
<li>📍 Desa 3T sekitar Bandung</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
<Footer footerRef={footerRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue