add produk

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-google-recaptcha": "^3.1.0",
         "react-router-dom": "^7.1.3"
       },
       "devDependencies": {
@@ -3182,6 +3183,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3996,7 +4006,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4483,7 +4492,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4534,6 +4542,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4547,11 +4568,23 @@
         "react": "^18.3.1"
       }
     },
+    "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-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-refresh": {

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-router-dom": "^7.1.3"
   },
   "devDependencies": {

src/components/beranda/Banner.jsx

@@ -1,9 +1,7 @@
 import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
-import { useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 function Banner() {
-  const navigate = useNavigate();
-
   return (
     <div className="relative w-full overflow-hidden">
       <div
@@ -44,12 +42,13 @@ function Banner() {
               />
               Konsultasi Gratis
             </button>
-            <button
+            <Link to={"/Contact#form"}>
-              onClick={() => navigate("/FormSection")}
+              <button
+                className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
+                Coba Sekarang
+              </button>
+            </Link>
 
-              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
-              Coba Sekarang
-            </button>
           </div>
         </div>
 

src/components/beranda/Footer.jsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom"
+import { useNavigate, Link } from "react-router-dom"
 
 import {
   nvidia,
@@ -38,7 +38,6 @@ function Footer() {
             </p>
           </div>
 
-          <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
           <div className="flex space-x-3">
             {/* Tautan ke media sosial */}
             <a href="#">
@@ -118,14 +117,12 @@ function Footer() {
               </button>
             </li>
             <li>
+              <Link to={"/Contact#faq"}>
               <button
-                onClick={() => {
-                  navigate("/FormSection");
-                  window.scrollTo({ top: 0, behavior: "smooth" });
-                }}
                 className="block w-full text-left">
                  F.A.Q
               </button>
+              </Link>
             </li>
           </ul>
         </div>

src/components/beranda/Header.jsx

@@ -72,7 +72,7 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <div className="absolute left-[525px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
+              <div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
                 <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* HR */}
@@ -104,7 +104,7 @@ const Header = () => {
                       <div className="text-left">
                         <h3 className="font-medium text-base py-1">Rekan Doku</h3>
                         <p className="text-xs text-customBlack">
-                          Kelola dokumen digital
+                          Kelola dokumen <br /> digital
                         </p>
                       </div>
                     </button>
@@ -120,7 +120,7 @@ const Header = () => {
                       <img src={ProdukLlm} alt="" className="w-16 h-16" />
                       <div className="text-left">
                         <h3 className="font-medium text-base py-1">Rekan LLM</h3>
-                        <p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
+                        <p className="text-xs text-customBlack">Solusi analisis berbasis <br /> data</p>
                       </div>
                     </button>
                     {/* VERI */}
@@ -134,7 +134,7 @@ const Header = () => {
                       <img src={ProdukVeri} alt="" className="w-16 h-16" />
                       <div className="text-left">
                         <h3 className="font-medium text-base py-1">Rekan Veri</h3>
-                        <p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
+                        <p className="text-xs text-customBlack">Verifikasi data secara <br /> akurat</p>
                       </div>
                     </button>
                   </div>

src/components/beranda/Hero.jsx

@@ -1,5 +1,5 @@
 import { homeLogo, waIcon, homeImg } from '../../assets';
-import { useNavigate } from "react-router-dom"
+import { useNavigate, Link } from "react-router-dom"
 
 function Hero() {
   const navigate = useNavigate();
@@ -30,11 +30,13 @@ function Hero() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
               Konsultasi Gratis
             </button>
-            <button
+            <Link to={"/Contact#form"}>
-            onClick={() => navigate("/FormSection")}
+              <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">
+                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
+                Coba Sekarang
-            </button>
+              </button>
+            </Link>
+
           </div>
         </div>
       </div>

src/components/beranda/Kenapa.jsx

@@ -1,9 +1,7 @@
 import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets'
-import { useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 function Kenapa() {
-  const navigate = useNavigate();
-
   return (
     <div className="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">
@@ -55,11 +53,12 @@ function Kenapa() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
               Konsultasi Gratis
             </button>
-            <button
+            <Link to={"/Contact#form"}>
-              onClick={() => navigate("/FormSection")}
+              <button
-              className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+                className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
-              Coba Sekarang
+                Coba Sekarang
-            </button>
+              </button>
+            </Link>
           </div>
         </div>
       </div>

src/components/beranda/MasaDepan.jsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { waIcon } from "../../assets";
-import { useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 
 function MasaDepan() {
-  const navigate = useNavigate();
-
   return (
     <>
       <div className="flex flex-col items-center justify-center text-center w-full h-[65vh] -mt-3">
@@ -33,12 +31,12 @@ function MasaDepan() {
           <img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
         </button>
-        <button
+        <Link to={"/Contact#form"}>
-          onClick={() => navigate("/FormSection")}
+          <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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
-          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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
+            Coba Sekarang
-          Coba Sekarang
+          </button>
-        </button>
+        </Link>
       </div>
 
     </>

src/components/contact/FAQSection.jsx

@@ -1,6 +1,17 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 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);
@@ -111,7 +122,7 @@ const FAQ = () => {
   ];
 
   return (
-    <div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
+    <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">

src/components/contact/FormSection.jsx

@@ -1,11 +1,29 @@
-import { img10 } from "./asset";
+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";
 
 const ContactForm = () => {
+  const { capchaToken, handleRecaptcha } = useRecaptcha();
+
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash) {
+      const element = document.querySelector(location.hash);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [location]);
+
   return (
     <div
       className="flex min-h-screen 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})`,
+        background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
         backgroundSize: "cover",
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
@@ -14,38 +32,24 @@ const ContactForm = () => {
       <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 */}
         <div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
-          {/* Judul utama */}
           <h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
-            Isi formulir di samping ini dan kami akan menghubungi Anda secepat
+            Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
-            mungkin
           </h2>
-
-          {/* Deskripsi tambahan */}
           <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
+            Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
-            hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
           </p>
         </div>
 
         {/* Bagian Form */}
-
+        <div 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]">
-        <div
-          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]"
-        >
-
-
-          {/* Judul form */}
           <h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
             Hubungi Tim Terbaik Kami
           </h3>
-          {/* Deskripsi form */}
           <p className="mb-6 text-[#212121] 2xl:text-[18px]">
             Silakan isi data diri Anda pada formulir di bawah ini
           </p>
 
-          {/* Formulir input */}
           <form className="flex flex-col gap-4 px-2">
-            {/* Input Nama */}
             <div>
               <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
               <input
@@ -55,8 +59,6 @@ const ContactForm = () => {
                 className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               />
             </div>
-
-            {/* Input Nomor Telepon */}
             <div>
               <label className="text-[#6B5CEA]">Nomor Telepon*</label>
               <input
@@ -70,8 +72,6 @@ const ContactForm = () => {
                 }}
               />
             </div>
-
-            {/* Input Email */}
             <div>
               <label className="text-[#6B5CEA]">Email*</label>
               <input
@@ -81,20 +81,14 @@ const ContactForm = () => {
                 className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
               />
             </div>
-
-            {/* Input Nama Organisasi */}
             <div>
-              <label className="text-[#6B5CEA]">
+              <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
-                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>
-
-            {/* Dropdown Pilih Kebutuhan */}
             <div className="relative">
               <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
               <select
@@ -106,7 +100,6 @@ const ContactForm = () => {
                 <option value="pelatihan">Pelatihan</option>
                 <option value="pengembangan">Pengembangan</option>
               </select>
-              {/* Tanda panah kustom */}
               <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
                 <svg
                   className="w-6 text-[#5B59E8]"
@@ -125,20 +118,18 @@ const ContactForm = () => {
               </div>
             </div>
 
-            {/* Checkbox Verifikasi */}
+            {/* ReCAPTCHA */}
             <div className="flex items-center gap-2">
-              <input
+              <ReCAPTCHA
-                type="checkbox"
+                sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
-                required
+                onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
-                className="focus:ring-2 focus:ring-indigo-500"
               />
-              <span className="text-[#212121]">Saya bukan robot</span>
             </div>
 
-            {/* Tombol Kirim */}
             <button
               type="submit"
-              className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
+              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>

src/components/contact/Recaptcha/useRecaptcha.js

@@ -0,0 +1,23 @@
+import { useState, useRef } from "react";
+
+const useRecaptcha = () => {
+  const [capchaToken, setCapchaToken] = useState(null); // Menyimpan token reCAPTCHA
+  const recaptchaRef = useRef(); // Menggunakan ref untuk reCAPTCHA jika perlu manipulasi lebih lanjut
+
+  // Fungsi untuk menangani perubahan token setelah reCAPTCHA berhasil
+  const handleRecaptcha = (token) => {
+    if (token) {
+      setCapchaToken(token); // Set token jika berhasil
+    } else {
+      setCapchaToken(null); // Reset token jika tidak ada token
+    }
+  };
+
+  return {
+    capchaToken, // Mengembalikan token
+    recaptchaRef, // Referensi reCAPTCHA
+    handleRecaptcha, // Fungsi untuk menangani perubahan token
+  };
+};
+
+export default useRecaptcha;

src/components/solusi/HeadCorporate/HeadCorporate.jsx

@@ -1,5 +1,5 @@
+import { Link } from "react-router-dom";
 import { component11, wagreen, hc } from "../asset";
-
 export default function HeadCorporate() {
   return (
     <div className="container  mx-auto px-4 lg:px-6">
@@ -44,9 +44,11 @@ export default function HeadCorporate() {
         <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <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">
+          <Link to="/Contact#form">
-          Coba Sekarang
+            <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">
-          </button>
+              Coba Sekarang
+            </button>
+          </Link>
         </div>
       </div>
     </div>

src/components/solusi/HeadPersonal/HeadPersonal.jsx

@@ -1,4 +1,5 @@
 import { component11, wagreen, start22 } from "../asset";
+import { Link } from "react-router-dom";
 
 export default function HeadPersonal() {
   return (
@@ -6,7 +7,7 @@ export default function HeadPersonal() {
       <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
         {/* Left Column */}
         <div className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none">
-        {/* Logo and Tagline */}
+          {/* Logo and Tagline */}
           <div className="flex items-center  lg:justify-start">
             <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
               <img src={component11} alt="Logo" width={53.52} height={43} />
@@ -42,13 +43,16 @@ export default function HeadPersonal() {
 
         {/* Buttons - Ensure they come last on mobile */}
         <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
-        <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
+          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
-        <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
+            <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
             Konsultasi Gratis
           </button>
-          <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">
+          <Link to="/Contact#form">
-          Coba Sekarang
+            <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">
-          </button>
+              Coba Sekarang
+            </button>
+          </Link>
+
         </div>
       </div>
     </div>

src/components/solusi/HeadStartup/HeadStartup.jsx

@@ -1,5 +1,5 @@
 import { component11, wagreen, hs } from "../asset";
-
+import { Link } from "react-router-dom";
 export default function HeadPersonal() {
   return (
     <div className="container  mx-auto px-4 lg:px-6">
@@ -44,9 +44,11 @@ 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>
         </div>
       </div>
     </div>

src/components/solusi/MengapaCorporate/MengapaCorporate.jsx

@@ -1,8 +1,8 @@
+import { Link } from "react-router-dom"
 import { chek2, wagreen, start33, start44, start55 } from "../asset"
-
 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">
         {/* Image Section */}
         <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
@@ -15,9 +15,9 @@ function Kenapa() {
 
         {/* Text Section */}
         <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
-          <h2 className="text-[32px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
+          <h2 className="text-[30px] font-semibold">Mengapa Rekan AI untuk Corporate Business?</h2>
-          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+          <p className="mt-4 text-sm md:leading-8 md:text-lg">
-          Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.
+            Rekan AI dirancang khusus untuk mendukung kebutuhan bisnis berskala besar dengan menghadirkan solusi yang dapat meningkatkan efisiensi, mempercepat proses, dan membantu pengambilan keputusan strategis. Dengan teknologi mutakhir yang fleksibel dan aman, Rekan AI menjadi mitra terpercaya dalam perjalanan transformasi digital perusahaan Anda.
           </p>
           <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%]  font-medium">
             <li className="flex items-center ">
@@ -41,9 +41,11 @@ function Kenapa() {
               />
               Konsultasi Gratis
             </button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+            <Link to={"/Contact#form"}>
-              Coba Sekarang
+              <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
-            </button>
+                Coba Sekarang
+              </button>
+            </Link>
           </div>
         </div>
       </div>

src/components/solusi/MengapaStartup/MengapaStartup.jsx

@@ -1,8 +1,8 @@
+import { Link } from "react-router-dom"
 import { chek2, wagreen, start44 } from "../asset"
-
 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">
                 {/* Image Section */}
                 <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
@@ -15,8 +15,8 @@ function Kenapa() {
 
                 {/* Text Section */}
                 <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
-                    <h2 className="text-[32px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
+                    <h2 className="text-[30px] font-semibold">Kenapa Memilih Rekan AI untuk Startup Anda?</h2>
-                    <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+                    <p className="mt-4 text-sm md:leading-8 md:text-xl">
                         Startup adalah tulang punggung perekonomian, dan Rekan AI hadir untuk memberdayakan pelaku usaha agar dapat bersaing di era digital. Dengan solusi berbasis AI, kami membantu usaha kecil dan menengah mencapai efisiensi yang lebih baik, memperluas jangkauan pasar, dan meningkatkan kepuasan pelanggan.
                     </p>
                     <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%]  font-medium">
@@ -43,9 +43,11 @@ function Kenapa() {
                             />
                             Konsultasi Gratis
                         </button>
+                        <Link to={"/Contact#form"}>
                         <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
                             Coba Sekarang
                         </button>
+                        </Link>
                     </div>
                 </div>
             </div>

src/components/solusi/MengapapPersonal/MengapapPersonal.jsx

@@ -1,8 +1,8 @@
 import { chek2, wagreen, start33 } from "../asset"
-
+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">
         {/* Image Section */}
         <div className="relative w-full md:w-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
@@ -15,8 +15,8 @@ function Kenapa() {
 
         {/* Text Section */}
         <div className="w-full md:w-3/5 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121] ">
-          <h2 className="text-[32px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
+          <h2 className="text-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
-          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
+          <p className="mt-4 md:text-lg  md:leading-8 text-sm">
             Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi individu yang ingin memanfaatkan kecerdasan
             buatan dalam kehidupan sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola data dengan
             aman, atau membuat keputusan yang lebih cerdas, Rekan AI adalah solusi tepat yang dirancang khusus untuk
@@ -46,9 +46,11 @@ function Kenapa() {
               />
               Konsultasi Gratis
             </button>
-            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
+            <Link to={"/Contact#form"}>
-              Coba Sekarang
+              <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
-            </button>
+                Coba Sekarang
+              </button>
+            </Link>
           </div>
         </div>
       </div>

src/components/solusi/SolusiCorporate/SolusiCorporate.jsx

@@ -34,7 +34,7 @@ export default function BusinessSolution() {
       {activeContent && (
         <div className="max-w-7xl 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-[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-[400px] md:w-[500px] md:-ml-20 lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +43,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 max-w-full md:max-w-[600px] md:ml-9">
             <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>
 

src/components/solusi/SolusiPersonal/SolusiPersonal.jsx

@@ -34,7 +34,7 @@ export default function BusinessSolution() {
       {activeContent && (
         <div className="max-w-7xl 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-[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-[400px] md:w-[500px] md:-ml-20 lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +43,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 max-w-full md:max-w-[600px] md:ml-9">
             <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>
 

src/components/solusi/SolusiStartup/SolusiStartup.jsx

@@ -34,7 +34,7 @@ export default function BusinessSolution() {
       {activeContent && (
         <div className="max-w-7xl 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-[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-[400px] md:w-[500px] md:-ml-20 lg:w-[618px] h-auto rounded-[14px] border border-gray-200 overflow-hidden shadow-lg">
             <img
               src={activeContent.image || "/placeholder.svg"}
               alt={activeContent.title}
@@ -43,7 +43,7 @@ export default function BusinessSolution() {
           </div>
 
           {/* Text Content */}
-          <div className="flex-1 max-w-full md:max-w-[600px]">
+          <div className="flex-1 max-w-full md:max-w-[600px] md:ml-9">
             <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>
 

src/components/solusi/TransformasiCorpo/TransformasiCorpo.jsx

@@ -1,5 +1,5 @@
+import { Link } from "react-router-dom";
 import { wagreen } from "../asset";
-
 function Transformasi() {
   return (
     <>
@@ -27,9 +27,11 @@ function Transformasi() {
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
         </button>
+        <Link to={"/Contact#form"}>
         <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
         </button>
+        </Link>
       </div>
     </>
 

src/components/solusi/TransformasiCorporate/TransformasiCorporate.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { wagreen } from "../asset";
-
+import { Link } from "react-router-dom";
 function MasaDepan() {
   return (
     <>
@@ -28,9 +28,11 @@ function MasaDepan() {
         <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
         Konsultasi Gratis
     </button>
+    <Link to={"/Contact#form"}>
     <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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
         Coba Sekarang
     </button>
+    </Link>
 </div>
 
     </>

src/components/solusi/TransformasiPersonal/TransformasiPersonal.jsx

@@ -1,5 +1,5 @@
 import { wagreen } from "../asset";
-
+import { Link } from "react-router-dom";
 function Transformasi() {
   return (
     <>
@@ -31,9 +31,11 @@ function Transformasi() {
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
         </button>
+        <Link to={"/Contact#form"}>
         <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
         </button>
+        </Link>
       </div>
     </>
 

src/components/solusi/TransformasiStart/TransformasiStart.jsx

@@ -1,5 +1,5 @@
+import { Link } from "react-router-dom";
 import { wagreen } from "../asset";
-
 function Transformasi() {
   return (
     <>
@@ -31,9 +31,11 @@ function Transformasi() {
           <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
         </button>
+        <Link to={"/Contact#form"}>
         <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
         </button>
+        </Link>
       </div>
     </>