fix + add produk

src/components/beranda/Banner.jsx

@@ -1,10 +1,13 @@
 import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
+import { useNavigate } from "react-router-dom"
 
 function Banner() {
+  const navigate = useNavigate();
+
   return (
     <div className="relative w-full overflow-hidden">
       <div
-        className="relative flex flex-col items-center justify-center mt-20 w-full max-w-[1920px] mx-auto h-auto md:h-[692px] bg-cover bg-center text-white text-center"
+        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"
         style={{
           backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
           backgroundSize: "cover",
@@ -41,7 +44,10 @@ function Banner() {
               />
               Konsultasi Gratis
             </button>
-            <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">
+            <button
+              onClick={() => navigate("/FormSection")}
+
+              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>

src/components/beranda/Footer.jsx

@@ -1,78 +1,132 @@
-import { nvdia,kmn,kominfo,ojk,x,instagram,facebook,frame, } from "../../assets";
+import { useNavigate } from "react-router-dom"
 
+import {
+  nvidia,
+  kmn,
+  kominfo,
+  ojk,
+  facebook,
+  x,
+  instagram,
+  component11,
+} from "../contact/asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
 
 function Footer() {
+  const navigate = useNavigate();
   return (
-    <footer className="bg-customGrey h-[506px] py-10 text-[#212121]">
+    <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={frame} // Gambar logo perusahaan
+            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="flex-1 mb-5 sm:mb-0 sm:pl-0">
+        <div className="w-full sm:w-auto mb-5 sm:mb-0 sm:pl-0">
           <div className="flex mb-5">
             <p>
               <strong className="text-[25px] text-[#5B59E8]">Rekan AI</strong>{" "}
               <br />
-              <span className="text-[#5B59E8] italic font-bold">
+              <span className="text-[#5B59E8] italic">
                 Reimagine Your Business with AI.
               </span>
             </p>
           </div>
-          <p className="mb-10 text-[18px]">
-            Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
-            Banten 15413
-          </p>
+
           <p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
-          <div className="flex space-x-5">
+          <div className="flex space-x-3">
             {/* Tautan ke media sosial */}
             <a href="#">
-              <img src={instagram} alt="Instagram" className="w-5 h-5"  /> {/* Ikon Instagram */}
+              <img src={instagram} alt="Instagram" className="w-5 h-5" />{" "}
             </a>
             <a href="#">
-              <img src={facebook} alt="Facebook" className="w-5 h-5" /> {/* Ikon Facebook */}
+              <img src={facebook} alt="Facebook" className="w-5 h-5" />{" "}
             </a>
             <a href="#">
-              <img src={x} alt="Twitter" className="w-5 h-5" /> {/* Ikon Twitter (X) */}
+              <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 md:ml-16 sm:pl-0">
-          <h4 className="text-[18px] font-semibold mb-4">Produk Kami</h4>
+        <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> {/* Produk: Dokumen otomatis */}
-            <li>Rekan Veri</li> {/* Produk: Verifikasi data */}
-            <li>Rekan HR</li> {/* Produk: Manajemen SDM */}
-            <li>Rekan LLM</li> {/* Produk: Model bahasa besar */}
+            <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 mb-5 md:-mx-28 sm:mb-0 sm:pl-0">
-          <h4 className="text-[18px] font-semibold mb-4">Solusi Kami</h4>
+        <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>Personal</li> {/* Solusi untuk individu */}
-            <li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
-            <li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
+            <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>Email: support@rekanai.com</li> {/* Email dukungan */}
-            <li>Phone: +68452098</li> {/* Nomor telepon */}
-            <li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
+          <li>
+              <button
+                onClick={() => {
+                  navigate("/Contact");
+                  window.scrollTo({ top: 0, behavior: "smooth" });
+                }}
+                className="block w-full text-left">
+                 Kontak Kami
+              </button>
+            </li>
+            <li>
+              <button
+                onClick={() => {
+                  navigate("/FormSection");
+                  window.scrollTo({ top: 0, behavior: "smooth" });
+                }}
+                className="block w-full text-left">
+                 F.A.Q
+              </button>
+            </li>
           </ul>
         </div>
 
@@ -80,21 +134,21 @@ function Footer() {
         <div className="mb-5 sm:mb-0 sm:pl-0">
           <div className="mb-4">
             <img
-              src={nvdia} // Gambar logo partner NVIDIA
+              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]" /> {/* Gambar logo partner Kementerian */}
-            <img src={kominfo} alt="Partner 2" className="w-[63px] h-[62px]" /> {/* Gambar logo partner Kominfo */}
-            <img src={ojk} alt="Partner 3" className="w-[77px] h-[60px]" /> {/* Gambar logo partner OJK */}
+            <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-40 mx-5 sm:mx-28 text-xs">
+      <div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
         <p>
           © Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
         </p>
@@ -103,5 +157,4 @@ function Footer() {
   );
 }
 
-
-export default Footer;
+export default Footer;

src/components/beranda/Header.jsx

@@ -1,12 +1,34 @@
-import { useState } from "react"
+import { useState, useRef, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
-import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup } from "../../assets"
+import { Logo1, search, row, IconPersonal, IconCorporate, IconStartup, ProdukDoku, ProdukHr, ProdukLlm, ProdukVeri } from "../../assets"
 
 const Header = () => {
-  const navigate = useNavigate()
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const [isSolusiOpen, setIsSolusiOpen] = useState(false)
-  const [isProdukOpen, setIsProdukOpen] = useState(false)
+  const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSolusiOpen, setIsSolusiOpen] = useState(false);
+  const [isProdukOpen, setIsProdukOpen] = useState(false);
+
+  // Referensi untuk mendeteksi klik di luar dropdown
+  const solusiRef = useRef(null);
+  const produkRef = useRef(null);
+
+  // Fungsi untuk menutup dropdown jika klik di luar elemen
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (solusiRef.current && !solusiRef.current.contains(event.target)) {
+        setIsSolusiOpen(false);
+      }
+      if (produkRef.current && !produkRef.current.contains(event.target)) {
+        setIsProdukOpen(false);
+      }
+    }
+
+    // Tambahkan event listener saat dropdown terbuka
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
     <header className="fixed top-0 left-0 w-full z-50 font-montserrat bg-white shadow-md">
@@ -19,14 +41,17 @@ const Header = () => {
         {/* Desktop Navigation */}
         <div className="hidden lg:flex items-center space-x-8">
           <button
-            onClick={() => navigate("/")}
+            onClick={() => {
+              navigate("/")
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
             className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
           >
             Beranda
           </button>
 
           {/* Produk Dropdown */}
-          <div className="relative">
+          <div className="relative" ref={produkRef}>
             <button
               onClick={() => setIsProdukOpen(!isProdukOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
@@ -47,23 +72,79 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <ul className="absolute left-0 top-full mt-2 w-48 bg-white list-none py-2 shadow-lg rounded-md">
-                <li className="px-5 py-2 hover:text-[#5a55ff]">
-                  <a href="#produk1" className="text-[#212121]">
-                    Produk 1
-                  </a>
-                </li>
-                <li className="px-5 py-2 hover:text-[#5a55ff]">
-                  <a href="#produk2" className="text-[#212121]">
-                    Produk 2
-                  </a>
-                </li>
-              </ul>
+              <div className="absolute left-[525px] -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 */}
+                    <button
+                      onClick={() => {
+                        navigate("/SolusiPersonal");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={ProdukHr} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-2">Rekan HR</h3>
+                        <p className="text-xs text-customBlack">
+                          Manajemen absensi karyawan
+                        </p>
+                      </div>
+                    </button>
+
+                    {/* DOKU */}
+                    <button
+                      onClick={() => {
+                        navigate("/SolusiStartup");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <img src={ProdukDoku} alt="" className="w-16 h-16" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base py-1">Rekan Doku</h3>
+                        <p className="text-xs text-customBlack">
+                          Kelola dokumen digital
+                        </p>
+                      </div>
+                    </button>
+
+                    {/* LLM */}
+                    <button
+                      onClick={() => {
+                        navigate("/SolusiCorporate");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <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>
+                      </div>
+                    </button>
+                    {/* VERI */}
+                    <button
+                      onClick={() => {
+                        navigate("/SolusiCorporate");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
+                    >
+                      <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>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             )}
           </div>
 
           {/* Solusi Dropdown - Desktop */}
-          <div className="relative">
+          <div className="relative" ref={solusiRef}>
             <button
               onClick={() => setIsSolusiOpen(!isSolusiOpen)}
               className="text-[#212121] text-base transition-colors hover:text-[#5a55ff] flex items-center"
@@ -85,16 +166,19 @@ const Header = () => {
 
             {isSolusiOpen && (
               <div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
-                <div className="bg-customRed rounded-xl p-8">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
                     <button
-                      onClick={() => navigate("/SolusiPersonal")}
+                      onClick={() => {
+                        navigate("/SolusiPersonal");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                     >
                       <img src={IconPersonal || "/placeholder.svg"} alt="" className="w-16 h-16" />
                       <div className="text-left">
-                        <h3 className="font-medium text-base">Personal</h3>
+                        <h3 className="font-medium text-base py-1">Personal</h3>
                         <p className="text-xs text-customBlack">
                           Solusi efisien <br /> kebutuhan personal
                         </p>
@@ -103,12 +187,15 @@ const Header = () => {
 
                     {/* Startup */}
                     <button
-                      onClick={() => navigate("/SolusiStartup")}
+                      onClick={() => {
+                        navigate("/SolusiStartup");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                     >
                       <img src={IconStartup || "/placeholder.svg"} alt="" className="w-16 h-16" />
                       <div className="text-left">
-                        <h3 className="font-medium text-base">Startup</h3>
+                        <h3 className="font-medium text-base py-1">Startup</h3>
                         <p className="text-xs text-customBlack">
                           Dukungan penuh <br /> untuk bisnis Startup
                         </p>
@@ -117,12 +204,15 @@ const Header = () => {
 
                     {/* Corporate */}
                     <button
-                      onClick={() => navigate("/SolusiCorporate")}
+                      onClick={() => {
+                        navigate("/SolusiCorporate");
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
                       className="bg-white rounded-xl w-[282px] p-4 flex items-start gap-4 hover:bg-gray-100"
                     >
                       <img src={IconCorporate || "/placeholder.svg"} alt="" className="w-16 h-16" />
                       <div className="text-left">
-                        <h3 className="font-medium text-base">Corporate Business</h3>
+                        <h3 className="font-medium text-base py-1">Corporate Business</h3>
                         <p className="text-xs text-customBlack">Solusi strategis untuk bisnis skala besar</p>
                       </div>
                     </button>
@@ -133,7 +223,10 @@ const Header = () => {
           </div>
 
           <button
-            onClick={() => navigate("/Contact")}
+            onClick={() => {
+              navigate("/Contact");
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
             className="text-[#212121] text-base transition-colors hover:text-[#5a55ff]"
           >
             Hubungi Kami
@@ -194,12 +287,53 @@ const Header = () => {
                 {isProdukOpen && (
                   <div className="bg-[#DC0168] px-5 py-4">
                     <div className="space-y-3">
-                      <a href="#produk1" className="block p-4 bg-white rounded-lg">
-                        Produk 1
-                      </a>
-                      <a href="#produk2" className="block p-4 bg-white rounded-lg">
-                        Produk 2
-                      </a>
+                      <button
+                        onClick={() => navigate("/SolusiPersonal")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={ProdukHr} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Rekan HR</h3>
+                          <p className="text-xs text-customBlack">
+                            Manajemen absensi karyawan
+                          </p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiStartup")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                        <img src={ProdukDoku} alt="" className="w-12 h-12" />
+                        <div className="text-left">
+                          <h3 className="font-medium text-base">Rekan Doku</h3>
+                          <p className="text-xs text-customBlack">
+                            Kelola dokumen digital
+                          </p>
+                        </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiCorporate")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                      <img src={ProdukLlm} alt="" className="w-12 h-12" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base">Rekan LLM</h3>
+                        <p className="text-xs text-customBlack">Solusi analisis berbasis data</p>
+                      </div>
+                      </button>
+
+                      <button
+                        onClick={() => navigate("/SolusiCorporate")}
+                        className="w-full bg-white rounded-lg p-4 flex items-start gap-4"
+                      >
+                      <img src={ProdukVeri} alt="" className="w-12 h-12" />
+                      <div className="text-left">
+                        <h3 className="font-medium text-base">Rekan Veri</h3>
+                        <p className="text-xs text-customBlack">Verifikasi data secara akurat</p>
+                      </div>
+                      </button>
                     </div>
                   </div>
                 )}

src/components/beranda/Hero.jsx

@@ -1,6 +1,8 @@
 import { homeLogo, waIcon, homeImg } from '../../assets';
+import { useNavigate } from "react-router-dom"
 
 function Hero() {
+  const navigate = useNavigate();
   return (
     <div className="w-full overflow-hidden" id="Home">
       <div className="container mx-auto px-4 lg:px-12">
@@ -28,7 +30,9 @@ function Hero() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
               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">
+            <button
+            onClick={() => navigate("/FormSection")}
+            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>

src/components/beranda/Kenapa.jsx

@@ -1,6 +1,9 @@
-import {imgLeft,chek2,waIcon,circle1,circle2} from '../../assets'
+import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets'
+import { useNavigate } 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">
@@ -52,7 +55,9 @@ 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 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
+              onClick={() => navigate("/FormSection")}
+              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>
           </div>

src/components/beranda/MasaDepan.jsx

@@ -1,6 +1,11 @@
 import React from "react";
 import { waIcon } from "../../assets";
+import { useNavigate } 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">
@@ -24,14 +29,17 @@ function MasaDepan() {
       </div>
       {/* Button Section */}
       <div className="flex flex-col justify-center md:-mt-32 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 px-4 sm:px-0">
-    <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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
-        <img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
-        Konsultasi Gratis
-    </button>
-    <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>
-</div>
+        <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-medium text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
+          <img src={waIcon} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
+          Konsultasi Gratis
+        </button>
+        <button
+          onClick={() => navigate("/FormSection")}
+
+          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>
+      </div>
 
     </>
 

src/components/beranda/WhatsAppButon.jsx

@@ -2,7 +2,7 @@ import { waButton } from "../../assets";
 
 const WhatsAppButton = () => {
   return (
-    <div className="fixed bottom-2 right-2 md:right-16 flex justify-center items-center w-16 h-16 md:w-20 md:h-20 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
+    <div className="fixed bottom-2 right-2 md:right-5 flex justify-center items-center w-16 h-16 md:w-16 md:h-16 rounded-full z-50 cursor-pointer border-4 border-[#6950DA] bg-gradient-to-l from-[#FD66B9] to-[#A162F9] m-[10px]">
       <img
         className="w-10 h-10 md:w-auto md:h-auto"
         src={waButton}