add handle search

src/components/beranda/Header.jsx

@@ -7,6 +7,28 @@ const Header = () => {
   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);
@@ -23,6 +45,7 @@ const Header = () => {
       }
     }
     
+
     // Tambahkan event listener saat dropdown terbuka
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
@@ -72,7 +95,7 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
                 <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* HR */}
@@ -165,7 +188,7 @@ const Header = () => {
             </button>
 
             {isSolusiOpen && (
-              <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
                 <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
@@ -235,16 +258,21 @@ const Header = () => {
 
         {/* Search Bar */}
         <div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
-          <div className="relative w-full">
+          <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 className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#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>
-          </div>
+          </form>
         </div>
 
         {/* Konsultasi Button */}