Merge branch 'main' of https://git.allbestsistem.com/amnannn/rekan_ai into carls2

src/App.jsx

@@ -5,9 +5,7 @@ import FormSection from "./components/contact/FormSection"
 import SolusiPersonal from "./pages/SolusiPersonal"
 import SolusiStartup from "./pages/SolusiStartup"
 import SolusiCorporate from "./pages/SolusiCorporate"
-import NotFound from "./components/NotFound/NotFound"
+
-import Header from './components/beranda/Header';
-import WhatsAppButton from './components/beranda/WhatsAppButon';
 function App() {
   return (
     <Router>
@@ -18,14 +16,6 @@ function App() {
         <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
         <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
         <Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
-        <Route path='/004' element={
-          <>
-            <Header />
-            <NotFound />
-            <WhatsAppButton/>
-          </>
-
-        } />
       </Routes>
     </Router>
 

src/components/NotFound/NotFound.jsx

@@ -1,14 +0,0 @@
-import { logonf } from "./asset";
-
-
-const NotFound = () => {
-    return (
-        <div className="justify-center text-center items-center flex flex-col mt-32 gap-4">
-            <img src={logonf} alt="404" />
-            <h1 className="font-bold text-[1.5rem]">Halaman Dalam Proses Pengembangan</h1>
-            <p className="text-[1rem] font-medium w-[50rem]">Terima kasih atas kunjungan Anda! Halaman ini sedang dalam tahap pengembangan untuk memberikan pengalaman terbaik. Nantikan segera pembaruan dari kami! </p>
-        </div>
-    );
-};
-
-export default NotFound;

src/components/NotFound/asset/index.js

@@ -1,4 +0,0 @@
-import logonf from './Black Blue and Pink Modern Twibbon Instagram Post 1.png';
-
-
-export {  logonf,  }

src/components/beranda/Header.jsx

@@ -95,13 +95,13 @@ const Header = () => {
             </button>
 
             {isProdukOpen && (
-              <div className="absolute md:left-[350px] 2xl:left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
+              <div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
                 <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* HR */}
                     <button
                       onClick={() => {
-                        navigate("/004");
+                        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"
@@ -118,7 +118,7 @@ const Header = () => {
                     {/* DOKU */}
                     <button
                       onClick={() => {
-                        navigate("/004");
+                        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"
@@ -135,7 +135,7 @@ const Header = () => {
                     {/* LLM */}
                     <button
                       onClick={() => {
-                        navigate("/004");
+                        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"
@@ -149,7 +149,7 @@ const Header = () => {
                     {/* VERI */}
                     <button
                       onClick={() => {
-                        navigate("/004");
+                        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"
@@ -188,8 +188,8 @@ const Header = () => {
             </button>
 
             {isSolusiOpen && (
-              <div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
+              <div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
-                <div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
                     <button

src/components/beranda/Hero.jsx

@@ -34,7 +34,7 @@ function Hero() {
   }, []);
 
   return (
-    <div className="translate-y-24 md:translate-y-0 w-full overflow-hidden" id="Home">
+    <div className="w-full overflow-hidden" id="Home">
       <div className="container mx-auto px-4 lg:px-12">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
           {/* Left Section */}
@@ -42,7 +42,7 @@ function Hero() {
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
             transition={{ duration: 0.8 }}
-            className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
+            className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 lg:order-none"
           >
             <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
             <h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
@@ -72,12 +72,12 @@ function Hero() {
             className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
             id="button-section"
           >
-            <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] 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={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] w-[358px] h-[55px] md:w-[245px] md:h-[62px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity">
+              <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>

src/components/beranda/Kenapa.jsx

@@ -87,9 +87,8 @@ function Kenapa() {
           </ul>
 
           <div ref={buttonRef} className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full">
-          <Link to={""} className="w-full md:w-[245px]">
             <motion.button 
-              className="flex items-center justify-center w-full md:w-[245px] md:h-[62px] h-[50px]  border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5, delay: 0.8 }}
@@ -97,10 +96,9 @@ function Kenapa() {
               <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
               Konsultasi Gratis
             </motion.button>
-          </Link>
+            <Link to={"/Contact#form"}>
-            <Link to={"/Contact#form"} className="w-full md:w-[245px]">
               <motion.button
-                className="flex items-center justify-center w-full  h-[50px] md:w-[245px] md:h-[62px] 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"
                 initial={{ opacity: 0, scale: 0.8 }}
                 animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
                 transition={{ duration: 0.5, delay: 1 }}
@@ -109,7 +107,6 @@ function Kenapa() {
               </motion.button>
             </Link>
           </div>
-
         </motion.div>
       </motion.div>
     </div>

src/components/beranda/Mitra.jsx

@@ -78,9 +78,9 @@ function Mitra() {
     useEffect(() => {
         const interval = setInterval(() => {
             handleNext();
-        }, 8900); 
+        }, 8900); // Slider bergerak setiap 4 detik
 
-        return () => clearInterval(interval);
+        return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
     }, [currentIndex]);
 
     return (

src/components/contact/BottomCTA.jsx

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

src/components/contact/CustomerService.jsx

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

src/components/contact/FormSection.jsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { useLocation } from "react-router-dom"
 import ReCAPTCHA from "react-google-recaptcha"
 import { motion, useAnimation } from "framer-motion"
@@ -15,9 +15,6 @@ const ContactForm = () => {
   const [ref, inView] = useInView({
     threshold: 0.1, // Trigger when 10% of the element is in view
   })
-  const [email, setEmail] = useState("");
-  const [error, setError] = useState("");
-  const [isValid, setIsValid] = useState(false); // Untuk validasi tombol submit
 
   useEffect(() => {
     if (inView) {
@@ -46,32 +43,6 @@ const ContactForm = () => {
     visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
   }
 
-  const handleChange = (e) => {
-    const value = e.target.value;
-    setEmail(value);
-
-    // Regex untuk memastikan hanya 3 huruf setelah titik
-    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
-
-    if (!emailPattern.test(value) && value !== "") {
-      setError("Domain email harus memiliki 3 huruf setelah titik.");
-      setIsValid(false); // Tidak valid, tombol submit dinonaktifkan
-    } else {
-      setError("");
-      setIsValid(true); // Valid, tombol submit bisa digunakan
-    }
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (!isValid) {
-      alert("Silakan perbaiki email Anda sebelum mengirim formulir.");
-      return;
-    }
-    alert("Formulir berhasil dikirim!");
-    // Tambahkan logika pengiriman data di sini
-  };
-
   return (
     <div
       className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]"
@@ -138,13 +109,10 @@ const ContactForm = () => {
                 <label className="text-[#6B5CEA]">Email*</label>
                 <input
                   type="email"
-                  value={email}
-                  onChange={handleChange}
                   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"
                 />
-                {error && <p className="text-red-500 mt-1">{error}</p>}
               </div>
               <div>
                 <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
@@ -185,8 +153,8 @@ const ContactForm = () => {
 
               <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 ${!isValid ? "opacity-50 cursor-not-allowed" : ""}`}
+                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={!isValid || !capchaToken} // Tombol akan dinonaktifkan jika email tidak valid atau captcha belum diisi
+                disabled={!capchaToken}
               >
                 Kirim Pesan
               </button>

src/components/contact/asset/index.js

@@ -1,25 +1,43 @@
-import row from './arrow.png';
+import row from "./arrow.png";
-import component11 from './Component 11.png';
+import component11 from "./Component 11.png";
-import customer from './customer.png';
+import customer from "./customer.png";
-import email from './email.png';
+import email from "./email.png";
-import facebook from './facebook.png';
+import facebook from "./facebook.png";
-import frame from './Frame.png';
+import frame from "./Frame.png";
-import frame27 from './Frame27.png';
+import frame27 from "./Frame27.png";
-import img10 from './image 10.png';
+import img10 from "./image 10.png";
-import instagram from './instagram.png';
+import instagram from "./instagram.png";
-import kmn from './Dukcapil PNG Pic.png';
+import kmn from "./Dukcapil PNG Pic.png";
-import kominfo from './Kominfo PNG Pic.png';
+import kominfo from "./Kominfo PNG Pic.png";
-import Logo1 from './logo.png';
+import Logo1 from "./logo.png";
-import nvidia from './NVIDIA PNG Pic.png';
+import nvidia from "./NVIDIA PNG Pic.png";
-import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
+import ojk from "./OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
-import phone from './phone.png';
+import phone from "./phone.png";
-import search from './search.png';
+import search from "./search.png";
-import telephone from './telephone.png';
+import telephone from "./telephone.png";
-import wagreen from './whatsapp-color_svgrepo.com.png';
+import wagreen from "./whatsapp-color_svgrepo.com.png";
-import wabutton from './Whatsapp22.png';
+import wabutton from "./Whatsapp22.png";
-import x from './x.png';
+import x from "./x.png";
-
 
 export {
-    row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
+  row,
-}
+  component11,
+  customer,
+  email,
+  facebook,
+  frame,
+  frame27,
+  img10,
+  instagram,
+  kmn,
+  kominfo,
+  Logo1,
+  nvidia,
+  ojk,
+  phone,
+  search,
+  telephone,
+  wagreen,
+  wabutton,
+  x,
+};

src/components/solusi/HeadCorporate/HeadCorporate.jsx

@@ -65,13 +65,13 @@ export default function HeadCorporate() {
           animate={buttonInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8 }}
         >
-          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] 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" />
             Konsultasi Gratis
           </button>
           <Link to={"/Contact#form"}>
             <motion.button
-              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] 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] 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"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5 }}

src/components/solusi/HeadPersonal/HeadPersonal.jsx

@@ -67,13 +67,13 @@ export default function HeadPersonal() {
           animate={buttonInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8 }}
         >
-          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] 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" />
             Konsultasi Gratis
           </button>
           <Link to={"/Contact#form"}>
             <motion.button
-              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] 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] 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"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5 }}

src/components/solusi/HeadStartup/HeadStartup.jsx

@@ -65,13 +65,13 @@ export default function HeadPersonal() {
           animate={buttonInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8 }}
         >
-          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[62px] 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" />
             Konsultasi Gratis
           </button>
           <Link to={"/Contact#form"}>
             <motion.button
-              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[62px] 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] 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"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5 }}

src/components/solusi/MengapaCorporate/MengapaCorporate.jsx

@@ -66,7 +66,7 @@ function Kenapa() {
             <motion.button 
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -79,7 +79,7 @@ function Kenapa() {
               <motion.button 
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                className="w-full md:w-[245px] h-[50px] md:h-[62px] 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
               </motion.button>

src/components/solusi/MengapaStartup/MengapaStartup.jsx

@@ -66,7 +66,7 @@ function Kenapa() {
             <motion.button 
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -79,7 +79,7 @@ function Kenapa() {
               <motion.button 
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                className="w-full md:w-[245px] h-[50px] md:h-[62px] 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
               </motion.button>

src/components/solusi/MengapapPersonal/MengapapPersonal.jsx

@@ -69,7 +69,7 @@ function Kenapa() {
             <motion.button 
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
+              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -82,7 +82,7 @@ function Kenapa() {
               <motion.button 
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                className="w-full md:w-[245px] h-[50px] md:h-[62px] 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
               </motion.button>