diff --git a/package-lock.json b/package-lock.json
index 5dc2754..8f717b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,11 @@
       "version": "0.0.0",
       "dependencies": {
         "framer-motion": "^12.4.3",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-google-recaptcha": "^3.1.0",
         "react-intersection-observer": "^9.15.1",
-        "react-router-dom": "^7.1.5"
+        "react-router-dom": "^7.1.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
@@ -4636,6 +4636,62 @@
         }
       }
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 7cecf80..6e6a469 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "framer-motion": "^12.4.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-intersection-observer": "^9.15.1",
-    "react-router-dom": "^7.1.5"
+    "react-router-dom": "^7.1.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
diff --git a/src/components/beranda/Banner.jsx b/src/components/beranda/Banner.jsx
index 608a469..f87256f 100644
--- a/src/components/beranda/Banner.jsx
+++ b/src/components/beranda/Banner.jsx
@@ -5,7 +5,7 @@ function Banner() {
   return (
     <div className="relative w-full overflow-hidden">
       <div
-        className="relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px]  bg-cover bg-center text-white text-center"
+        className="absolute top-0 left-0 w-full h-full"
         style={{
           backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
           backgroundSize: "cover",
@@ -13,7 +13,9 @@ function Banner() {
           backgroundRepeat: "no-repeat",
           backgroundBlendMode: "multiply",
         }}
-      >
+      ></div>
+
+      <div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
         {/* Gambar L1-L4 untuk mobile */}
         <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
           <img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
@@ -23,7 +25,7 @@ function Banner() {
         </div>
 
         {/* Teks dan tombol */}
-        <div className="px-4 mx-auto text-center w-full mt-8 md:mt-0 z-10">
+        <div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
           <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
             <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
               Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
@@ -48,7 +50,6 @@ function Banner() {
                 Coba Sekarang
               </button>
             </Link>
-
           </div>
         </div>
 
@@ -113,4 +114,3 @@ function Banner() {
 }
 
 export default Banner
-
diff --git a/src/components/beranda/Footer.jsx b/src/components/beranda/Footer.jsx
index dab4ae7..7649a93 100644
--- a/src/components/beranda/Footer.jsx
+++ b/src/components/beranda/Footer.jsx
@@ -27,7 +27,7 @@ function Footer() {
         </div>
 
         {/* Kolom 2: Deskripsi singkat perusahaan */}
-        <div className="w-full sm:w-auto mb-5 sm:mb-0 sm:pl-0">
+        <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>{" "}
@@ -145,7 +145,7 @@ function Footer() {
       </div>
 
       {/* Bagian hak cipta */}
-      <div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
+      <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>
diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx
index 2d5b2bb..c5fc0f4 100644
--- a/src/components/beranda/Hero.jsx
+++ b/src/components/beranda/Hero.jsx
@@ -30,13 +30,9 @@ function Hero() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
               Konsultasi Gratis
             </button>
-            <Link to={"/Contact#form"}>
-              <button
-                className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
-                Coba Sekarang
-              </button>
-            </Link>
-
+            <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
+              Coba Sekarang
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/beranda/Kenapa.jsx b/src/components/beranda/Kenapa.jsx
index ccb35c0..9514bbe 100644
--- a/src/components/beranda/Kenapa.jsx
+++ b/src/components/beranda/Kenapa.jsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom"
 
 function Kenapa() {
   return (
-    <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
+    <div className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
       <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
         {/* Decorative Circles */}
         <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
diff --git a/src/components/beranda/Mendukung.jsx b/src/components/beranda/Mendukung.jsx
index b0eee04..f66cee6 100644
--- a/src/components/beranda/Mendukung.jsx
+++ b/src/components/beranda/Mendukung.jsx
@@ -9,7 +9,7 @@ function Mendukung() {
   ];
 
   return (
-    <div className="flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
+    <div className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" id="solusi2">
       {/* Left Content */}
       <div className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1">
         <p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
diff --git a/src/components/contact/CustomerService.jsx b/src/components/contact/CustomerService.jsx
index 3492ac7..a9f307e 100644
--- a/src/components/contact/CustomerService.jsx
+++ b/src/components/contact/CustomerService.jsx
@@ -18,19 +18,20 @@ 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-[150px] 2xl:px-20 2xl:gap-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 
+            <motion.div
                 ref={leftRef}
-                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10"
+                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] 2xl:leading-[52px]">
-                        Kami Siap Membantu Bisnis Anda
+                        Kami Siap Membantu Bisnis Anda <br />
                         Lebih Maju!
                     </h2>
                 </div>
@@ -76,9 +77,9 @@ const CustomerService = () => {
             </motion.div>
 
             {/* RIGHT SECTION - Gambar */}
-            <motion.div 
+            <motion.div
                 ref={rightRef}
-                className="flex justify-center md:justify-end items-center pr-10"
+                className="flex justify-center md:justify-end items-center md:mr-[-70px]"
                 initial="hidden"
                 animate={rightInView ? "visible" : "hidden"}
                 variants={fadeInRight}
diff --git a/src/components/contact/FAQSection.jsx b/src/components/contact/FAQSection.jsx
index 6eb86a5..e60b1c4 100644
--- a/src/components/contact/FAQSection.jsx
+++ b/src/components/contact/FAQSection.jsx
@@ -1,9 +1,19 @@
 import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import { useInView } from "react-intersection-observer";
 
 const FAQ = () => {
   const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash) {
+      const element = document.querySelector(location.hash);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [location]);
+  // State untuk menyimpan indeks pertanyaan yang sedang dibuka
+  // Jika tidak ada pertanyaan yang terbuka, nilai adalah null
   const [openQuestion, setOpenQuestion] = useState(null);
 
   useEffect(() => {
@@ -31,7 +41,8 @@ const FAQ = () => {
   ];
 
   return (
-    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center" id="faq">
+    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center " id="faq">
+      {/* Judul halaman FAQ */}
       <div className="mt-[111px]">
         <h1 className="text-[32px] font-[505] leading-[48px] tracking-[0.005em] text-center mb-4">
           Frequently Asked Questions
diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/FormSection.jsx
index 010e8a5..6eee2f5 100644
--- a/src/components/contact/FormSection.jsx
+++ b/src/components/contact/FormSection.jsx
@@ -1,30 +1,26 @@
-import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
-import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
-import useRecaptcha from './Recaptcha/useRecaptcha';
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
-import { motion } from "framer-motion"; // Impor motion dari framer-motion
+
+import { img10 } from "./asset"
+import ReCAPTCHA from "react-google-recaptcha"
+import useRecaptcha from "./Recaptcha/useRecaptcha"
+import { useLocation } from "react-router-dom"
+import { useEffect } from "react"
 
 const ContactForm = () => {
-  const { capchaToken, handleRecaptcha } = useRecaptcha();
-
-  const location = useLocation();
+  const { capchaToken, handleRecaptcha } = useRecaptcha()
+  const location = useLocation()
 
   useEffect(() => {
     if (location.hash) {
-      const element = document.querySelector(location.hash);
+      const element = document.querySelector(location.hash)
       if (element) {
-        element.scrollIntoView({ behavior: "smooth" });
+        element.scrollIntoView({ behavior: "smooth" })
       }
     }
-  }, [location]);
+  }, [location])
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.8 }}
-      className="flex min-h-screen items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
+    <div
+      className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
       id="form"
       style={{
         background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
@@ -33,131 +29,108 @@ const ContactForm = () => {
         backgroundRepeat: "no-repeat",
       }}
     >
-      <div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
-        {/* Bagian Kiri */}
-        <motion.div
-          initial={{ x: -100, opacity: 0 }}
-          whileInView={{ x: 0, opacity: 1 }}
-          transition={{ duration: 0.8 }}
-          viewport={{ once: false }}
-          className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]"
-        >
-          <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
+      <div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
+        {/* Left Section */}
+        <div className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6">
+          <h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
             Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
           </h2>
-          <p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
-            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
+          <p className="text-base md:text-[18px]  font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
+            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
+            bisnis Anda bersama Rekan AI!
           </p>
         </motion.div>
 
-        {/* Bagian Form */}
-        <motion.div
-          initial={{ y: 100, opacity: 0 }}
-          whileInView={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.8 }}
-          viewport={{ once: false }}
-          className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]"
-        >
-          <h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
-            Hubungi Tim Terbaik Kami
-          </h3>
-          <p className="mb-6 text-[#212121] 2xl:text-[18px]">
-            Silakan isi data diri Anda pada formulir di bawah ini
-          </p>
+        {/* Form Section */}
+        <div className="w-full lg:w-7/12 xl:w-6/12">
+          <div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
+            <h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
+              Hubungi Tim Terbaik Kami
+            </h3>
+            <p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
 
-          <form className="flex flex-col gap-4 px-2">
-            <div>
-              <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
-              <input
-                type="text"
-                placeholder="Masukkan nama Anda"
-                required
-                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
-              />
-            </div>
-            <div>
-              <label className="text-[#6B5CEA]">Nomor Telepon*</label>
-              <input
-                type="tel"
-                placeholder="Masukkan nomor telepon Anda"
-                required
-                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
-                pattern="[0-9]*"
-                onInput={(e) => {
-                  e.target.value = e.target.value.replace(/[^0-9]/g, "");
-                }}
-              />
-            </div>
-            <div>
-              <label className="text-[#6B5CEA]">Email*</label>
-              <input
-                type="email"
-                placeholder="Masukkan email Anda"
-                required
-                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
-              />
-            </div>
-            <div>
-              <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
-              <input
-                type="text"
-                placeholder="Masukkan nama organisasi/perusahaan Anda"
-                className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
-              />
-            </div>
-            <div className="relative">
-              <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
-              <select
-                required
-                className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
-              >
-                <option value="">Pilih kebutuhan Anda</option>
-                <option value="konsultasi">Konsultasi</option>
-                <option value="pelatihan">Pelatihan</option>
-                <option value="pengembangan">Pengembangan</option>
-              </select>
-              <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
-                <svg
-                  className="w-8 mt-7 mr-1 text-[#5B59E8]"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M19 9l-7 7-7-7"
-                  />
-                </svg>
+            <form className="flex flex-col gap-4">
+              <div>
+                <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
+                <input
+                  type="text"
+                  placeholder="Masukkan nama Anda"
+                  required
+                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                />
+              </div>
+              <div>
+                <label className="text-[#6B5CEA]">Nomor Telepon*</label>
+                <input
+                  type="tel"
+                  placeholder="Masukkan nomor telepon Anda"
+                  required
+                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                  pattern="[0-9]*"
+                  onInput={(e) => {
+                    e.target.value = e.target.value.replace(/[^0-9]/g, "")
+                  }}
+                />
+              </div>
+              <div>
+                <label className="text-[#6B5CEA]">Email*</label>
+                <input
+                  type="email"
+                  placeholder="Masukkan email Anda"
+                  required
+                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                />
+              </div>
+              <div>
+                <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
+                <input
+                  type="text"
+                  placeholder="Masukkan nama organisasi/perusahaan Anda"
+                  className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                />
+              </div>
+              <div className="relative">
+                <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
+                <select
+                  required
+                  className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
+                >
+                  <option value="">Pilih kebutuhan Anda</option>
+                  <option value="konsultasi">Konsultasi</option>
+                  <option value="pelatihan">Pelatihan</option>
+                  <option value="pengembangan">Pengembangan</option>
+                </select>
+                <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
+                  <svg
+                    className="w-6 text-[#5B59E8]"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
               </div>
-            </div>
 
-            {/* ReCAPTCHA */}
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.8 }}
-            >
-              <ReCAPTCHA
-                sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
-                onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
-              />
-            </motion.div>
+              <div className="flex items-center gap-2">
+                <ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
+              </div>
 
-            <button
-              type="submit"
-              className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
-              disabled={!capchaToken} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang
-            >
-              Kirim Pesan
-            </button>
-          </form>
-        </motion.div>
+              <button
+                type="submit"
+                className="bg-[#5B59E0] hover:bg-indigo-700 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
+                disabled={!capchaToken}
+              >
+                Kirim Pesan
+              </button>
+            </form>
+          </div>
+        </div>
       </div>
-    </motion.div>
-  );
-};
+    </div>
+  )
+}
+
+export default ContactForm
 
-export default ContactForm;
diff --git a/src/components/solusi/HeadCorporate/HeadCorporate.jsx b/src/components/solusi/HeadCorporate/HeadCorporate.jsx
index fdcb9b5..b1a966b 100644
--- a/src/components/solusi/HeadCorporate/HeadCorporate.jsx
+++ b/src/components/solusi/HeadCorporate/HeadCorporate.jsx
@@ -44,11 +44,12 @@ export default function HeadCorporate() {
         <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <Link to="/Contact#form">
-            <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
-              Coba Sekarang
-            </button>
-          </Link>
+          <Link to={"/Contact#form"}>
+              <button
+                className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
+                Coba Sekarang
+              </button>
+            </Link>
         </div>
       </div>
     </div>
diff --git a/src/components/solusi/HeadPersonal/HeadPersonal.jsx b/src/components/solusi/HeadPersonal/HeadPersonal.jsx
index 76bced6..40f2a55 100644
--- a/src/components/solusi/HeadPersonal/HeadPersonal.jsx
+++ b/src/components/solusi/HeadPersonal/HeadPersonal.jsx
@@ -47,11 +47,12 @@ export default function HeadPersonal() {
             <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <Link to="/Contact#form">
-            <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
-              Coba Sekarang
-            </button>
-          </Link>
+            <Link to={"/Contact#form"}>
+              <button
+                className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
+                Coba Sekarang
+              </button>
+            </Link>
 
         </div>
       </div>
diff --git a/src/components/solusi/HeadStartup/HeadStartup.jsx b/src/components/solusi/HeadStartup/HeadStartup.jsx
index 91ca8f2..ec42ec6 100644
--- a/src/components/solusi/HeadStartup/HeadStartup.jsx
+++ b/src/components/solusi/HeadStartup/HeadStartup.jsx
@@ -45,10 +45,11 @@ export default function HeadPersonal() {
             Konsultasi Gratis
           </button>
           <Link to={"/Contact#form"}>
-          <button className="flex items-center justify-center px-6 py-3 rounded-[14px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
-          Coba Sekarang
-          </button>
-          </Link>
+              <button
+                className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
+                Coba Sekarang
+              </button>
+            </Link>
         </div>
       </div>
     </div>
diff --git a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx
index 22da617..131cdf6 100644
--- a/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx
+++ b/src/components/solusi/SolusiCorporate/SolusiCorporate.jsx
@@ -9,17 +9,17 @@ export default function BusinessSolution() {
   // Detect mobile screen size
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
+      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
     };
 
     window.addEventListener("resize", handleResize);
-    handleResize(); // Initialize state on component mount
+    handleResize(); // Inisialisasi state saat pertama kali mount
 
-    return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   return (
-    <div className="w-[90vw] mx-auto p-4 overflow-hidden">
+    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
       {/* Header */}
       <div className="text-center mb-8">
         <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
@@ -27,8 +27,8 @@ export default function BusinessSolution() {
       </div>
 
       {/* Navigation Buttons */}
-      <div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
-        <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
+      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
+        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -45,9 +45,9 @@ export default function BusinessSolution() {
 
       {/* Content Section */}
       {activeContent && (
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
+        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -56,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
 
diff --git a/src/components/solusi/SolusiPersonal/SolusiPersonal.jsx b/src/components/solusi/SolusiPersonal/SolusiPersonal.jsx
index 05fb444..ba6cda8 100644
--- a/src/components/solusi/SolusiPersonal/SolusiPersonal.jsx
+++ b/src/components/solusi/SolusiPersonal/SolusiPersonal.jsx
@@ -47,7 +47,7 @@ export default function BusinessSolution() {
       {activeContent && (
         <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className={`w-full sm:w-[300px] md:w-[500px] lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -56,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>
 
diff --git a/src/components/solusi/SolusiStartup/SolusiStartup.jsx b/src/components/solusi/SolusiStartup/SolusiStartup.jsx
index 22da617..131cdf6 100644
--- a/src/components/solusi/SolusiStartup/SolusiStartup.jsx
+++ b/src/components/solusi/SolusiStartup/SolusiStartup.jsx
@@ -9,17 +9,17 @@ export default function BusinessSolution() {
   // Detect mobile screen size
   useEffect(() => {
     const handleResize = () => {
-      setIsMobile(window.innerWidth < 768); // Set to true if screen width is less than 768px
+      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
     };
 
     window.addEventListener("resize", handleResize);
-    handleResize(); // Initialize state on component mount
+    handleResize(); // Inisialisasi state saat pertama kali mount
 
-    return () => window.removeEventListener("resize", handleResize); // Cleanup on unmount
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   return (
-    <div className="w-[90vw] mx-auto p-4 overflow-hidden">
+    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
       {/* Header */}
       <div className="text-center mb-8">
         <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
@@ -27,8 +27,8 @@ export default function BusinessSolution() {
       </div>
 
       {/* Navigation Buttons */}
-      <div className="relative w-full max-w-[1539px] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
-        <div className={`flex ${isMobile ? 'flex-wrap' : 'justify-center'} gap-4 text-[18px] md:text-[24px]`}>
+      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
+        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
           {data.tabs.map((button) => (
             <button
               key={button.key}
@@ -45,9 +45,9 @@ export default function BusinessSolution() {
 
       {/* Content Section */}
       {activeContent && (
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
+        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
           {/* Image Section */}
-          <div className={`w-full ${isMobile ? "sm:w-[300px]" : "sm:w-[400px]"} md:w-[500px] lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
+          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -56,7 +56,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 md:pl-7 max-w-full ">
             <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
             <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>