feat: update for changing color palette
This commit is contained in:
Syifa
parent
1a31d8dd76
commit
d45732c935
Binary file not shown.
Binary file not shown.
|
|
@ -6,7 +6,7 @@ export default function Footer({ footerRef }) {
|
|||
<footer
|
||||
id="footer"
|
||||
ref={footerRef}
|
||||
className="bg-[#5C739B] text-white py-10 px-6">
|
||||
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">
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function Hero() {
|
|||
playsInline
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
>
|
||||
<source src="/bg-video.mp4" type="video/mp4" />
|
||||
<source src="/bg-video2.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div className="absolute inset-0 bg-black/50"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { NavLink, useLocation, useNavigate } from "react-router-dom";
|
|||
import { HashLink } from "react-router-hash-link";
|
||||
|
||||
export default function Navbar() {
|
||||
const [mobileMenu, setMobileMenu] = useState(false); // toggle mobile
|
||||
const [mobileMenu, setMobileMenu] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -31,7 +31,9 @@ export default function Navbar() {
|
|||
}
|
||||
}, [location]);
|
||||
|
||||
const linkClass = `block px-4 py-2 hover:text-yellow-400 transition-colors`;
|
||||
// Dasar class link
|
||||
const baseLink =
|
||||
"block px-4 py-2 transition-colors hover:text-[#00CAFF]";
|
||||
|
||||
// Klik About Us → scroll atau pindah halaman
|
||||
const handleAboutClick = (e) => {
|
||||
|
|
@ -52,7 +54,11 @@ export default function Navbar() {
|
|||
<nav className="max-w-7xl mx-auto flex items-center justify-between px-6 lg:px-12 py-4 relative">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<img src="/Finals_Icon.png" alt="logo" className="h-7 w-auto object-contain" />
|
||||
<img
|
||||
src="/Finals_Icon.png"
|
||||
alt="logo"
|
||||
className="h-7 w-auto object-contain"
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-bold transition-colors duration-300 ${
|
||||
scrolled ? "text-black" : "text-white"
|
||||
|
|
@ -69,29 +75,47 @@ export default function Navbar() {
|
|||
}`}
|
||||
>
|
||||
<li>
|
||||
<HashLink smooth to="/#" className={linkClass}>
|
||||
<HashLink
|
||||
smooth
|
||||
to="/#"
|
||||
className={`${baseLink} ${
|
||||
location.pathname === "/" && !location.hash
|
||||
? "text-[#00CAFF] font-semibold"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
Home
|
||||
</HashLink>
|
||||
</li>
|
||||
|
||||
{/* Portofolio link biasa */}
|
||||
<li>
|
||||
<NavLink to="/portofolio" className={linkClass}>
|
||||
<NavLink
|
||||
to="/portofolio"
|
||||
className={({ isActive }) =>
|
||||
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
|
||||
}
|
||||
>
|
||||
Portofolio
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NavLink
|
||||
to="/about"
|
||||
className={linkClass}
|
||||
onClick={handleAboutClick}
|
||||
className={({ isActive }) =>
|
||||
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
|
||||
}
|
||||
>
|
||||
About Us
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<HashLink smooth to="/#footer" className={linkClass}>
|
||||
<HashLink
|
||||
smooth
|
||||
to="/#footer"
|
||||
className={`${baseLink} ${
|
||||
location.hash === "#footer" ? "text-[#00CAFF] font-semibold" : ""
|
||||
}`}
|
||||
>
|
||||
Contact Us
|
||||
</HashLink>
|
||||
</li>
|
||||
|
|
@ -127,28 +151,36 @@ export default function Navbar() {
|
|||
smooth
|
||||
to="/#"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
className={linkClass}
|
||||
className={`${baseLink} ${
|
||||
location.pathname === "/" && !location.hash
|
||||
? "text-[#00CAFF] font-semibold"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
Home
|
||||
</HashLink>
|
||||
</li>
|
||||
|
||||
{/* Portofolio link biasa mobile */}
|
||||
<li>
|
||||
<NavLink
|
||||
to="/portofolio"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
className={linkClass}
|
||||
className={({ isActive }) =>
|
||||
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
|
||||
}
|
||||
>
|
||||
Portofolio
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NavLink
|
||||
to="/about"
|
||||
onClick={handleAboutClick}
|
||||
className={linkClass}
|
||||
onClick={(e) => {
|
||||
handleAboutClick(e);
|
||||
setMobileMenu(false);
|
||||
}}
|
||||
className={({ isActive }) =>
|
||||
`${baseLink} ${isActive ? "text-[#00CAFF] font-semibold" : ""}`
|
||||
}
|
||||
>
|
||||
About Us
|
||||
</NavLink>
|
||||
|
|
@ -158,7 +190,11 @@ export default function Navbar() {
|
|||
smooth
|
||||
to="/#footer"
|
||||
onClick={() => setMobileMenu(false)}
|
||||
className={linkClass}
|
||||
className={`${baseLink} ${
|
||||
location.hash === "#footer"
|
||||
? "text-[#00CAFF] font-semibold"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
Contact Us
|
||||
</HashLink>
|
||||
|
|
|
|||
|
|
@ -4,38 +4,41 @@ import { motion } from "framer-motion";
|
|||
export default function Produk() {
|
||||
const products = [
|
||||
{
|
||||
icon: <Wifi className="w-8 h-8 text-blue-600" />,
|
||||
icon: <Wifi className="w-8 h-8 text-[#145BB5]" />,
|
||||
title: "FNET LastMile Connection",
|
||||
desc: "Solusi bagi penyedia layanan internet untuk melayani pelanggan Last Mile tanpa harus membangun jaringan fiber optic sendiri.",
|
||||
gradient: "from-blue-500/20 to-blue-100/40"
|
||||
gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
|
||||
whiteBox: false
|
||||
},
|
||||
{
|
||||
icon: <Network className="w-8 h-8 text-yellow-500" />,
|
||||
icon: <Network className="w-8 h-8 text-[#00BFFF]" />,
|
||||
title: "FNET Metro Link",
|
||||
desc: "Layanan jaringan serat optik Point to Point dan Point to Multi Point dengan kapasitas tinggi dan infrastruktur handal.",
|
||||
gradient: "from-yellow-400/30 to-yellow-100/40"
|
||||
// tidak pakai gradient → putih polos
|
||||
gradient: "",
|
||||
whiteBox: true
|
||||
},
|
||||
{
|
||||
icon: <Cog className="w-8 h-8 text-blue-700" />,
|
||||
icon: <Cog className="w-8 h-8 text-[#145BB5]" />,
|
||||
title: "FNET EPC Solution",
|
||||
desc: "Menyediakan layanan Engineering, Procurement, Construction: Survey, Design, Deployment, Operation & Maintenance, FTIX.",
|
||||
gradient: "from-blue-300/40 to-blue-100/30"
|
||||
gradient: "from-[#00BFFF]/20 to-[#145BB5]/20",
|
||||
whiteBox: false
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="produk" className="relative py-20 overflow-hidden text-center">
|
||||
{/* Animated Background Gradient */}
|
||||
{/* Background animasi biru */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-blue-900 via-blue-700 to-blue-900 bg-[length:400%_400%]"
|
||||
className="absolute inset-0 bg-gradient-to-r from-[#145BB5] via-[#00BFFF] to-[#145BB5] bg-[length:400%_400%]"
|
||||
animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
></motion.div>
|
||||
{/* Overlay biar teks tetap jelas */}
|
||||
<div className="absolute inset-0 bg-white/95"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-color-rgb(20,91,181)">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#145BB5]">
|
||||
Produk
|
||||
</h2>
|
||||
<p className="text-gray-700 max-w-3xl mx-auto mb-12 px-4">
|
||||
|
|
@ -50,13 +53,15 @@ export default function Produk() {
|
|||
key={i}
|
||||
whileHover={{ y: -8, scale: 1.03 }}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
className={`bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-gray-100 hover:border-blue-300`}
|
||||
className="bg-white text-blue-900 rounded-2xl shadow-lg relative overflow-hidden p-8 border border-[#145BB5]/10 hover:border-[#00BFFF]/40"
|
||||
>
|
||||
{/* Gradient overlay per-card */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
|
||||
></div>
|
||||
{/* Icon Circle */}
|
||||
{/* gradient overlay hanya kalau whiteBox = false */}
|
||||
{!item.whiteBox && (
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-30`}
|
||||
></div>
|
||||
)}
|
||||
|
||||
<div className="relative z-10 w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center bg-white shadow-md">
|
||||
{item.icon}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export default function About() {
|
|||
|
||||
return (
|
||||
<div className="font-sans">
|
||||
{/* Navbar */}
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
|
|
@ -27,42 +26,38 @@ export default function About() {
|
|||
/>
|
||||
|
||||
{/* About Section */}
|
||||
<section className="py-20 bg-gray-50 min-h-screen">
|
||||
{/* Ganti warna bg jadi sama seperti halaman Produk */}
|
||||
<section className="py-20 bg-[#eaf2ff] min-h-screen">
|
||||
<div className="max-w-6xl mx-auto px-6 lg:px-20 space-y-16">
|
||||
{/* Card Deskripsi Perusahaan dengan Logo */}
|
||||
|
||||
{/* Card Deskripsi Perusahaan */}
|
||||
<motion.div
|
||||
className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
|
||||
className="bg-white rounded-3xl shadow-xl border border-gray-200 p-10 flex flex-col md:flex-row items-center gap-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{
|
||||
scale: 1.02,
|
||||
y: -3,
|
||||
boxShadow: "0 20px 30px rgba(0,0,0,0.08)",
|
||||
transition: { type: "spring", stiffness: 200, damping: 20 },
|
||||
}}
|
||||
whileHover={cardHover}
|
||||
>
|
||||
{/* Logo di kiri */}
|
||||
{/* Logo */}
|
||||
<div className="flex justify-center md:justify-start flex-shrink-0">
|
||||
<img
|
||||
src="/Finals_Profile.png"
|
||||
alt="Logo WTELL"
|
||||
className="w-44 md:w-56"
|
||||
/>
|
||||
<img src="/Finals_Profile.png" alt="Logo Fortiva" className="w-44 md:w-56" />
|
||||
</div>
|
||||
|
||||
{/* Deskripsi di kanan */}
|
||||
{/* Deskripsi */}
|
||||
<div className="text-center md:text-left">
|
||||
<h2 className="text-3xl font-bold text-color-rgb(20,91,181)">
|
||||
<h2 className="text-3xl font-bold text-blue-700">
|
||||
PT. Jaringan Citra Mandiri
|
||||
</h2>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
|
||||
Teknologi Telekomunikasi Berbasis Fiber Optic.
|
||||
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-color-rgb(20,91,181)">Fortiva Networking</span>{" "}
|
||||
Berdiri sejak tahun 2018,{" "}
|
||||
<span className="font-semibold text-blue-700">
|
||||
Fortiva Networking
|
||||
</span>{" "}
|
||||
berkomitmen menjadi Penyedia Layanan Teknologi Telekomunikasi
|
||||
Berbasis Fiber Optic yang Handal dan Profesional.
|
||||
</p>
|
||||
|
|
@ -71,7 +66,6 @@ export default function About() {
|
|||
|
||||
{/* Visi & Misi */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
{/* Visi */}
|
||||
<motion.section
|
||||
className="bg-white rounded-2xl p-8 cursor-pointer"
|
||||
whileHover={cardHover}
|
||||
|
|
@ -80,14 +74,15 @@ export default function About() {
|
|||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
|
||||
<h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
|
||||
VISI
|
||||
</h3>
|
||||
<p className="text-gray-700 text-center leading-relaxed">
|
||||
Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
|
||||
Menghubungkan Seluruh Wilayah di Indonesia.
|
||||
</p>
|
||||
</motion.section>
|
||||
|
||||
{/* Misi */}
|
||||
<motion.section
|
||||
className="bg-white rounded-2xl p-8 cursor-pointer"
|
||||
whileHover={cardHover}
|
||||
|
|
@ -96,7 +91,9 @@ export default function About() {
|
|||
transition={{ duration: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
|
||||
<h3 className="text-2xl font-bold text-center mb-6 text-blue-700">
|
||||
MISI
|
||||
</h3>
|
||||
<ul className="space-y-4 text-gray-700">
|
||||
<li className="flex items-start gap-2">
|
||||
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
|
||||
|
|
@ -119,7 +116,6 @@ export default function About() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ export default function Portfolio() {
|
|||
<section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
|
||||
<video
|
||||
className="absolute inset-0 w-full h-full object-cover"
|
||||
src="/port.mp4"
|
||||
src="/port2.mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
|
|
@ -231,7 +231,6 @@ export default function Portfolio() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Tambahkan Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -254,7 +253,8 @@ function PortfolioCard({ image, title, shortDesc, onClick }) {
|
|||
</div>
|
||||
|
||||
<div className="p-6 flex flex-col flex-grow">
|
||||
<h3 className="text-lg font-bold bg-gradient-to-r from-indigo-600 to-blue-500 bg-clip-text text-transparent">
|
||||
{/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */}
|
||||
<h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue