forked from amnannn/rekan_ai
293 lines
13 KiB
JavaScript
293 lines
13 KiB
JavaScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useNavigate } from "react-router-dom"
|
|
import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
|
|
|
|
const Header = () => {
|
|
const navigate = useNavigate()
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
const [isSolusiOpen, setIsSolusiOpen] = useState(false)
|
|
const [isProdukOpen, setIsProdukOpen] = useState(false)
|
|
|
|
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">
|
|
<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("/")}
|
|
className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
|
|
>
|
|
Beranda
|
|
</button>
|
|
|
|
{/* Produk Dropdown */}
|
|
<div className="relative">
|
|
<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 && (
|
|
<ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
|
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
|
<a href="#produk1" className="text-[#212121]">
|
|
Produk 1
|
|
</a>
|
|
</li>
|
|
<li className="px-5 py-2 hover:text-[#5a55ff]">
|
|
<a href="#produk2" className="text-[#212121]">
|
|
Produk 2
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
{/* Solusi Dropdown - Desktop */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsSolusiOpen(!isSolusiOpen)}
|
|
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 ${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 left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
|
|
<div className="bg-customRed rounded-xl p-8">
|
|
<div className="flex justify-center gap-8">
|
|
{/* Personal */}
|
|
<button
|
|
onClick={() => navigate("/SolusiPersonal")}
|
|
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">Personal</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Solusi efisien <br /> kebutuhan personal
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Startup */}
|
|
<button
|
|
onClick={() => navigate("/SolusiStartup")}
|
|
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">Startup</h3>
|
|
<p className="text-xs text-customBlack">
|
|
Dukungan penuh <br /> untuk bisnis Startup
|
|
</p>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Corporate */}
|
|
<button
|
|
onClick={() => navigate("/SolusiCorporate")}
|
|
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">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")}
|
|
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">
|
|
<div className="relative w-full">
|
|
<input
|
|
type="text"
|
|
placeholder="Pencarian..."
|
|
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 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>
|
|
</div>
|
|
</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">
|
|
<a href="#produk1" className="block p-4 bg-white rounded-lg">
|
|
Produk 1
|
|
</a>
|
|
<a href="#produk2" className="block p-4 bg-white rounded-lg">
|
|
Produk 2
|
|
</a>
|
|
</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
|
|
|