add handle search

src/components/beranda/Footer.jsx

@@ -15,10 +15,11 @@ function Footer() {
   const navigate = useNavigate();
   return (
     <footer className="bg-customGrey py-10 text-[#212121]">
+      <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">
+          <div className="mb-5 sm:mb-0 md:-ml-16">
             <img
               src={component11} // Gambar logo perusahaan
               alt="Logo"
@@ -150,6 +151,8 @@ function Footer() {
             © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
           </p>
         </div>
+      </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);
@@ -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-[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 */}

src/components/contact/BottomCTA.jsx

@@ -23,23 +23,21 @@ const BottomCTA = () => {
       </div>
 
       <p className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto">
-        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk
+        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
-        menghubungi kami melalui formulir
-        <br />
         kontak atau email. Kami dengan senang hati akan membantu!
       </p>
 
       <div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
-        <motion.button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+        <motion.button
-          <img
+          className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
-            src={wagreen}
+        >
-            alt="WhatsApp Icon"
+          <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
-            className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
-          />
           Konsultasi Gratis
         </motion.button>
         
-        <motion.button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+        <motion.button
+          className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
+        >
           Coba Sekarang
         </motion.button>
       </div>

src/components/contact/CustomerService.jsx

@@ -1,5 +1,6 @@
 import { email, phone, customer } from "./asset";
 import { motion } from "framer-motion";
+import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
 const CustomerService = () => {
@@ -17,23 +18,24 @@ const CustomerService = () => {
     };
 
     return (
-        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] md:gap-12 xl:gap-20 2xl:px-20">
+        <section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
             {/* LEFT SECTION - Informasi */}
             <motion.div
                 ref={leftRef}
-                className="w-full md:w-[55%] h-auto text-left"
+                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
                 initial="hidden"
                 animate={leftInView ? "visible" : "hidden"}
                 variants={fadeInLeft}
                 key="left-content"
             >
+
                 <div className="mb-5">
-                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px]">
+                    <h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
                         Kami Siap Membantu Bisnis Anda <br />
                         Lebih Maju!
                     </h2>
                 </div>
-                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
+                <p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[20px] md:max-w-[90%]">
                     Butuh informasi lebih lanjut tentang produk atau solusi kami? Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan profesional.
                 </p>
                 <div className="flex flex-col gap-6">
@@ -46,7 +48,7 @@ const CustomerService = () => {
                         <div className="text-left">
                             <p className="text-sm text-[#212121] md:text-[18px]">
                                 Kirim pertanyaan Anda ke{" "}
-                                <strong className="text-[#5B59E8]">
+                                <strong className="text-[#5B59E8] md:text-[18px]">
                                     support@rekanai.com
                                 </strong>{" "}
                                 dan tim kami akan segera merespons.
@@ -77,7 +79,7 @@ const CustomerService = () => {
             {/* RIGHT SECTION - Gambar */}
             <motion.div
                 ref={rightRef}
-                className="w-full md:w-[45%] flex justify-center items-center"
+                className="flex justify-center md:justify-end items-center md:mr-[-70px]"
                 initial="hidden"
                 animate={rightInView ? "visible" : "hidden"}
                 variants={fadeInRight}
@@ -86,7 +88,7 @@ const CustomerService = () => {
                 <img
                     src={customer}
                     alt="Customer Service"
-                    className="w-[80%] md:w-full max-w-[450px] h-auto"
+                    className="w-full h-auto md:w-auto md:h-auto"
                 />
             </motion.div>
         </section>