forked from amnannn/rekan_ai
453 lines
20 KiB
JavaScript
453 lines
20 KiB
JavaScript
import { useState, useRef, useEffect } from "react"
|
|
import { useNavigate } from "react-router-dom"
|
|
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
|
|
|
|
const Header = () => {
|
|
const navigate = useNavigate();
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
|
|
const [isProdukOpen, setIsProdukOpen] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("")
|
|
|
|
const handleSearch = (e) => {
|
|
setSearchQuery(e.target.value)
|
|
}
|
|
|
|
const handleSearchSubmit = (e) => {
|
|
e.preventDefault()
|
|
const query = searchQuery.toLowerCase()
|
|
|
|
// Solutions mapping
|
|
if (query.includes("solusi personal") || query.includes("personal")) {
|
|
navigate("/SolusiPersonal")
|
|
} else if (query.includes("solusi startup") || query.includes("startup")) {
|
|
navigate("/SolusiStartup")
|
|
} else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
|
|
navigate("/SolusiCorporate")
|
|
}
|
|
|
|
window.scrollTo({ top: 0, behavior: "smooth" })
|
|
setSearchQuery("") // Clear search after submission
|
|
}
|
|
|
|
// Referensi untuk mendeteksi klik di luar dropdown
|
|
const solusiRef = useRef(null);
|
|
const produkRef = useRef(null);
|
|
|
|
// Fungsi untuk menutup dropdown jika klik di luar elemen
|
|
useEffect(() => {
|
|
function handleClickOutside(event) {
|
|
if (solusiRef.current && !solusiRef.current.contains(event.target)) {
|
|
setIsSolusiOpen(false);
|
|
}
|
|
if (produkRef.current && !produkRef.current.contains(event.target)) {
|
|
setIsProdukOpen(false);
|
|
}
|
|
}
|
|
|
|
|
|
// Tambahkan event listener saat dropdown terbuka
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
|
|
<nav className="container mx-auto flex items-center justify-between h-20 px-5 lg:px-8 transition-all duration-300">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0 md:mr-5">
|
|
<img src={Logo1 || "/placeholder.svg"} alt="Logo" className="w-[150px] h-auto" />
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex items-center space-x-8">
|
|
<button
|
|
onClick={() => {
|
|
navigate("/")
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
|
>
|
|
Beranda
|
|
</button>
|
|
|
|
{/* Produk Dropdown */}
|
|
<div className="relative" ref={produkRef}>
|
|
<button
|
|
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
|
>
|
|
Produk
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
strokeWidth="0"
|
|
viewBox="0 0 448 512"
|
|
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isProdukOpen ? "rotate-180" : "rotate-0"}`}
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
{isProdukOpen && (
|
|
<div className="absolute md:left-[350px] 2xl:left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
|
|
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
|
|
<div className="flex justify-center gap-8">
|
|
{/* HR */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/004");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={ProdukHr} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-2">Rekan HR</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Manajemen absensi karyawan
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* DOKU */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/004");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={ProdukDoku} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Rekan Doku</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Kelola dokumen <br /> digital
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* LLM */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/004");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={ProdukLlm} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Rekan LLM</h3>
|
|
<p className="text-xs text-customBlack">Solusi analisis berbasis <br /> data</p>
|
|
</div>
|
|
</button>
|
|
{/* VERI */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/004");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={ProdukVeri} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Rekan Veri</h3>
|
|
<p className="text-xs text-customBlack">Verifikasi data secara <br /> akurat</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Solusi Dropdown - Desktop */}
|
|
<div className="relative" ref={solusiRef}>
|
|
<button
|
|
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
|
|
>
|
|
Solusi
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
strokeWidth="0"
|
|
viewBox="0 0 448 512"
|
|
className={`ml-1 text-sm text-[#112C6F] transition-transform duration-200 ${isSolusiOpen ? "rotate-180" : "rotate-0"}`}
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
{isSolusiOpen && (
|
|
<div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
|
|
<div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
|
|
<div className="flex justify-center gap-8">
|
|
{/* Personal */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/SolusiPersonal");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Personal</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Solusi efisien <br /> kebutuhan personal
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Startup */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/SolusiStartup");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Startup</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Dukungan penuh <br /> untuk bisnis Startup
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Corporate */}
|
|
<button
|
|
onClick={() => {
|
|
navigate("/SolusiCorporate");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
|
|
>
|
|
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base py-1">Corporate Business</h3>
|
|
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => {
|
|
navigate("/Contact");
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}}
|
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
|
>
|
|
Hubungi Kami
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search Bar */}
|
|
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
|
|
<form onSubmit={handleSearchSubmit} className="relative w-full">
|
|
<input
|
|
type="text"
|
|
placeholder="Pencarian..."
|
|
value={searchQuery}
|
|
onChange={handleSearch}
|
|
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
|
|
>
|
|
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Konsultasi Button */}
|
|
<button className="hidden lg:block bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md hover:bg-[#e6006e] transition whitespace-nowrap">
|
|
Konsultasi Gratis
|
|
</button>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} className="lg:hidden text-[#212121]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className="lg:hidden absolute top-full left-0 w-full bg-white shadow-md">
|
|
<div className="flex flex-col">
|
|
<button
|
|
onClick={() => navigate("/")}
|
|
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
|
>
|
|
Beranda
|
|
</button>
|
|
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsProdukOpen(!isProdukOpen)}
|
|
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
|
>
|
|
Produk
|
|
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
|
</button>
|
|
{isProdukOpen && (
|
|
<div className="bg-[#DC0168] px-5 py-4">
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => navigate("/SolusiPersonal")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={ProdukHr} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Rekan HR</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Manajemen absensi karyawan
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate("/SolusiStartup")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={ProdukDoku} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Rekan Doku</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Kelola dokumen digital
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate("/SolusiCorporate")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={ProdukLlm} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Rekan LLM</h3>
|
|
<p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate("/SolusiCorporate")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={ProdukVeri} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Rekan Veri</h3>
|
|
<p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
|
className="w-full px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50 flex items-center justify-between"
|
|
>
|
|
Solusi
|
|
<img src={row || "/placeholder.svg"} alt="arrow" className="ml-1" />
|
|
</button>
|
|
{isSolusiOpen && (
|
|
<div className="bg-[#DC0168] px-5 py-4">
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={() => navigate("/SolusiPersonal")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={IconPersonal || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Personal</h3>
|
|
<p className="text-xs text-customBlack">Solusi efisien kebutuhan personal</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate("/SolusiStartup")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={IconStartup || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Startup</h3>
|
|
<p className="text-xs text-customBlack">Dukungan penuh untuk bisnis Startup</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate("/SolusiCorporate")}
|
|
className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
|
|
>
|
|
<img src={IconCorporate || "/placeholder.svg"} alt="" className="w-12 h-12" />
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-base">Corporate Business</h3>
|
|
<p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => navigate("/Contact")}
|
|
className="px-5 py-4 text-left text-[#212121] text-base hover:bg-gray-50"
|
|
>
|
|
Hubungi Kami
|
|
</button>
|
|
|
|
<div className="p-5">
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Pencarian..."
|
|
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md"
|
|
/>
|
|
<button className="absolute right-4 top-1/2 -translate-y-1/2">
|
|
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-5 pt-0">
|
|
<button className="w-full bg-[#DC0168] px-6 py-3 text-white text-sm font-bold rounded-md">
|
|
Konsultasi Gratis
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default Header
|
|
|