add handle search

src/components/beranda/Footer.jsx

@@ -15,141 +15,144 @@ function Footer() {
   const navigate = useNavigate();
   return (
     <footer className="bg-customGrey py-10 text-[#212121]">
-      {/* Kontainer utama footer */}
-      <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
-        {/* Kolom 1: Logo perusahaan */}
-        <div className="mb-5 sm:mb-0">
-          <img
-            src={component11} // Gambar logo perusahaan
-            alt="Logo"
-            className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
-          />
-        </div>
-
-        {/* Kolom 2: Deskripsi singkat perusahaan */}
-        <div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
-          <div className="flex mb-5">
-            <p>
-              <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
-              <br />
-              <span className="text-[#5B59E8] italic">
-                Reimagine Your Business with AI.
-              </span>
-            </p>
-          </div>
-
-          <div className="flex space-x-3">
-            {/* Tautan ke media sosial */}
-            <a href="#">
-              <img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
-            </a>
-            <a href="#">
-              <img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
-            </a>
-            <a href="#">
-              <img src={x} alt="Twitter" className="w-5 h-5" />{" "}
-            </a>
-          </div>
-        </div>
-
-        {/* Kolom 3: Produk perusahaan */}
-        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
-          <ul className="space-y-4 text-[18px]">
-            <li>Rekan Doku</li>
-            <li>Rekan Veri</li>
-            <li>Rekan HR</li>
-            <li>Rekan LLM</li>
-          </ul>
-        </div>
-
-        {/* Kolom 4: Solusi yang ditawarkan */}
-        <div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
-          <ul className="space-y-4 text-[18px]">
-            <li>
-              <button
-                onClick={() => {
-                  navigate("/SolusiPersonal");
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                }}
-                className="block w-full text-left"
-              >
-                Personal
-              </button>
-            </li>
-            <li>
-              <button
-                onClick={() => {
-                  navigate("/SolusiStartup");
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                }}
-                className="block w-full text-left">
-                Startup
-              </button>
-            </li>
-            <li>
-              <button
-                onClick={() => {
-                  navigate("/SolusiCorporate");
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                }}
-                className="block w-full text-left">
-                Corporate Business
-              </button>
-            </li>
-          </ul>
-        </div>
-
-
-        {/* Kolom 5: Informasi kontak */}
-        <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
-          <h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
-          <ul className="space-y-4 text-[18px]">
-          <li>
-              <button
-                onClick={() => {
-                  navigate("/Contact");
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                }}
-                className="block w-full text-left">
-                 Kontak Kami
-              </button>
-            </li>
-            <li>
-              <Link to={"/Contact#faq"}>
-              <button
-                className="block w-full text-left">
-                 F.A.Q
-              </button>
-              </Link>
-            </li>
-          </ul>
-        </div>
-
-        {/* Kolom 6: Partner perusahaan */}
-        <div className="mb-5 sm:mb-0 sm:pl-0">
-          <div className="mb-4">
+      <div className="container mx-auto">
+        {/* Kontainer utama footer */}
+        <div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
+          {/* Kolom 1: Logo perusahaan */}
+          <div className="mb-5 sm:mb-0 md:-ml-16">
             <img
-              src={nvidia}
-              alt="NVIDIA Inception Premier Member"
-              className="w-[221px] h-[83px]"
+              src={component11} // Gambar logo perusahaan
+              alt="Logo"
+              className="max-w-[200px] w-[50.3px] h-[40.24px] sm:mx-0"
             />
           </div>
-          <div className="flex gap-5">
-            <img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
-            <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
-            <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
+
+          {/* Kolom 2: Deskripsi singkat perusahaan */}
+          <div className="w-full sm:w-auto mb-5 sm:mb-0 md:pr-14 sm:pl-0">
+            <div className="flex mb-5">
+              <p>
+                <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
+                <br />
+                <span className="text-[#5B59E8] italic">
+                  Reimagine Your Business with AI.
+                </span>
+              </p>
+            </div>
+
+            <div className="flex space-x-3">
+              {/* Tautan ke media sosial */}
+              <a href="#">
+                <img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
+              </a>
+              <a href="#">
+                <img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
+              </a>
+              <a href="#">
+                <img src={x} alt="Twitter" className="w-5 h-5" />{" "}
+              </a>
+            </div>
           </div>
+
+          {/* Kolom 3: Produk perusahaan */}
+          <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+            <h4 className="text-base font-semibold mb-4">Produk Kami</h4>
+            <ul className="space-y-4 text-[18px]">
+              <li>Rekan Doku</li>
+              <li>Rekan Veri</li>
+              <li>Rekan HR</li>
+              <li>Rekan LLM</li>
+            </ul>
+          </div>
+
+          {/* Kolom 4: Solusi yang ditawarkan */}
+          <div className="flex-1 flex flex-col mb-5 sm:mb-0 sm:pl-0">
+            <h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
+            <ul className="space-y-4 text-[18px]">
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/SolusiPersonal");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left"
+                >
+                  Personal
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/SolusiStartup");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Startup
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/SolusiCorporate");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Corporate Business
+                </button>
+              </li>
+            </ul>
+          </div>
+
+
+          {/* Kolom 5: Informasi kontak */}
+          <div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
+            <h4 className="text-[18px] font-semibold mb-4">Hubungi Kami</h4>
+            <ul className="space-y-4 text-[18px]">
+              <li>
+                <button
+                  onClick={() => {
+                    navigate("/Contact");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }}
+                  className="block w-full text-left">
+                  Kontak Kami
+                </button>
+              </li>
+              <li>
+                <Link to={"/Contact#faq"}>
+                  <button
+                    className="block w-full text-left">
+                    F.A.Q
+                  </button>
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Kolom 6: Partner perusahaan */}
+          <div className="mb-5 sm:mb-0 sm:pl-0">
+            <div className="mb-4">
+              <img
+                src={nvidia}
+                alt="NVIDIA Inception Premier Member"
+                className="w-[221px] h-[83px]"
+              />
+            </div>
+            <div className="flex gap-5">
+              <img src={kmn} alt="Partner 1" className="w-[56px] h-[72px]" />
+              <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" />
+              <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" />
+            </div>
+          </div>
+        </div>
+
+        {/* Bagian hak cipta */}
+        <div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
+          <p>
+            © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
+          </p>
         </div>
       </div>
 
-      {/* Bagian hak cipta */}
-      <div className="text-left mt-[92.78px] md:ml-44 sm:mx-28 text-xs">
-        <p>
-          © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
-        </p>
-      </div>
     </footer>
   );
 }

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);
@@ -22,6 +44,7 @@ const Header = () => {
         setIsProdukOpen(false);
       }
     }
+    
 
     // Tambahkan event listener saat dropdown terbuka
     document.addEventListener("mousedown", handleClickOutside);
@@ -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-[1450px]">
                 <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-[1450px]">
                 <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 */}