Footer, Mobile

This commit is contained in:
adelyaou 2025-08-26 14:42:55 +07:00
parent 620457e6fb
commit d5fad3c82d
8 changed files with 320 additions and 61 deletions

47
package-lock.json generated
View File

@ -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",

View File

@ -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",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 917 KiB

After

Width:  |  Height:  |  Size: 660 KiB

View File

@ -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 />} />

92
src/components/Footer.jsx Normal file
View File

@ -0,0 +1,92 @@
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-4 gap-8">
{/* Logo + Deskripsi */}
<div>
<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>
{/* Explore */}
<div>
<h3 className="font-bold text-lg mb-4 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>
{/* Newsletter */}
<div>
<h3 className="font-bold text-lg mb-4 relative inline-block">
Newsletter
</h3>
<p className="text-sm mb-3">
Subscribe untuk mendapatkan berita terbaru
</p>
<div className="flex flex-col sm:flex-row gap-2">
<input
type="email"
placeholder="Masukkan Email"
className="px-3 py-2 rounded-md border border-gray-300 text-black text-sm focus:outline-none"
/>
<button className="px-4 py-2 bg-gradient-to-r from-green-400 to-blue-400 text-white rounded-md text-sm hover:opacity-90">
Subscribe
</button>
</div>
</div>
{/* Kontak Kami */}
<div>
<h3 className="font-bold text-lg mb-4 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>
);
}

View File

@ -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>
);
}

View File

@ -1,4 +1,5 @@
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { motion } from "framer-motion";
import { CheckCircle } from "lucide-react";
@ -12,12 +13,11 @@ 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="text-center"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
viewport={{ once: true }}
className="text-center"
>
<img
src="/WTell.png"
@ -38,32 +38,31 @@ export default function About() {
yang Handal dan Profesional.
</span>
</p>
</motion.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"
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"
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 +82,13 @@ export default function About() {
Fiber Optic.
</li>
</ul>
</motion.div>
</motion.section>
</div>
</div>
</section>
{/* Footer */}
<Footer />
</div>
);
}

View File

@ -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 */}
@ -163,6 +175,9 @@ export default function Home() {
</div>
</div>
</section>
{/* Footer */}
<Footer footerRef={footerRef} />
</div>
);
}