penambahan fitur 3 huruf setelah (.) pada form email

src/App.jsx

@@ -5,17 +5,27 @@ 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>
       <Routes>
-        <Route path='/' element={<Home/>}/>
+        <Route path='/' element={<Home />} />
-        <Route path='/Contact' element={<Contact/>}/>
+        <Route path='/Contact' element={<Contact />} />
-        <Route path='/FormSection' element={<FormSection/>}/>
+        <Route path='/FormSection' element={<FormSection />} />
-        <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
+        <Route path='/SolusiPersonal' element={<SolusiPersonal />} />
-        <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
+        <Route path='/SolusiStartup' element={<SolusiStartup />} />
-        <Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
+        <Route path='/SolusiCorporate' element={<SolusiCorporate />} />
+        <Route path='/004' element={
+          <>
+            <Header />
+            <NotFound />
+            <WhatsAppButton/>
+          </>
+
+        } />
       </Routes>
     </Router>
 

src/components/NotFound/NotFound.jsx

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,4 @@
+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 left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
+              <div className="absolute md:left-[350px] 2xl: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("/SolusiPersonal");
+                        navigate("/004");
                         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("/SolusiStartup");
+                        navigate("/004");
                         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("/SolusiCorporate");
+                        navigate("/004");
                         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("/SolusiCorporate");
+                        navigate("/004");
                         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 left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px]">
+              <div className="absolute md:left-[235px] 2xl:left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1450px] ">
-                <div className="bg-customRed bg-opacity-80 rounded-xl p-8">
+                <div className="bg-customRed bg-opacity-80 rounded-xl p-8 md:h-[168px]">
                   <div className="flex justify-center gap-8">
                     {/* Personal */}
                     <button

src/components/beranda/Hero.jsx

@@ -34,7 +34,7 @@ function Hero() {
   }, []);
 
   return (
-    <div className="w-full overflow-hidden" id="Home">
+    <div className="translate-y-24 md:translate-y-0 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,8 +42,8 @@ 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-32 mt-10 text-center lg:text-left order-1 lg:order-none"
+            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"
-          >
+            >
             <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">
               Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
@@ -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-[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-[62px] 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-[55px] 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-[62px] 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

@@ -12,24 +12,24 @@ function Kenapa() {
 
   return (
     <div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <motion.div 
+      <motion.div
-        initial={{ opacity: 0, y: 50 }} 
+        initial={{ opacity: 0, y: 50 }}
-        animate={sectionInView ? { opacity: 1, y: 0 } : {}} 
+        animate={sectionInView ? { opacity: 1, y: 0 } : {}}
         transition={{ duration: 0.8 }}
         className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
       >
         {/* Decorative Circles */}
         <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
-          <motion.img 
+          <motion.img
-            src={circle1} alt="Circle 1" 
+            src={circle1} alt="Circle 1"
-            className="w-auto h-auto" 
+            className="w-auto h-auto"
             initial={{ opacity: 0, scale: 0.5 }}
             animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
             transition={{ duration: 0.6, delay: 0.3 }}
           />
-          <motion.img 
+          <motion.img
-            src={circle2} alt="Circle 2" 
+            src={circle2} alt="Circle 2"
-            className="w-auto h-auto" 
+            className="w-auto h-auto"
             initial={{ opacity: 0, scale: 0.5 }}
             animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
             transition={{ duration: 0.6, delay: 0.5 }}
@@ -37,7 +37,7 @@ function Kenapa() {
         </div>
 
         {/* Image Section */}
-        <motion.div 
+        <motion.div
           ref={textRef}
           className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
           initial={{ opacity: 0, x: -50 }}
@@ -49,10 +49,10 @@ function Kenapa() {
             alt="Woman with Tablet"
             className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
           />
-        </motion.div> 
+        </motion.div>
 
         {/* Text Section */}
-        <motion.div 
+        <motion.div
           ref={listRef}
           className="w-full md:w-[40%] p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left"
           initial={{ opacity: 0, x: 50 }}
@@ -73,8 +73,8 @@ function Kenapa() {
               "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
               "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
             ].map((text, index) => (
-              <motion.li 
+              <motion.li
-                key={index} 
+                key={index}
                 className="flex items-center"
                 initial={{ opacity: 0, x: -20 }}
                 animate={listInView ? { opacity: 1, x: 0 } : {}}
@@ -87,8 +87,9 @@ 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">
-            <motion.button 
+          <Link to={""} className="w-full md:w-[245px]">
-              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"
+            <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"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5, delay: 0.8 }}
@@ -96,9 +97,10 @@ 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 to={"/Contact#form"}>
+          </Link>
+            <Link to={"/Contact#form"} className="w-full md:w-[245px]">
               <motion.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="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"
                 initial={{ opacity: 0, scale: 0.8 }}
                 animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
                 transition={{ duration: 0.5, delay: 1 }}
@@ -107,6 +109,7 @@ 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); // Slider bergerak setiap 4 detik
+        }, 8900); 
 
-        return () => clearInterval(interval); // Membersihkan interval saat komponen unmount
+        return () => clearInterval(interval);
     }, [currentIndex]);
 
     return (

src/components/contact/CustomerService.jsx

@@ -22,7 +22,7 @@ const CustomerService = () => {
             {/* 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-[-90px]"
+                className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 lg: 2xl:ml-[-165px]"
                 initial="hidden"
                 animate={leftInView ? "visible" : "hidden"}
                 variants={fadeInLeft}

src/components/contact/FormSection.jsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { useLocation } from "react-router-dom"
 import ReCAPTCHA from "react-google-recaptcha"
 import { motion, useAnimation } from "framer-motion"
@@ -15,6 +15,9 @@ 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) {
@@ -43,6 +46,32 @@ 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]"
@@ -106,13 +135,16 @@ const ContactForm = () => {
                 />
               </div>
               <div>
-                <label className="text-[#6B5CEA]">Email*</label>
+              <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>
@@ -153,8 +185,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"
+                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" : ""}`}
-                disabled={!capchaToken}
+                disabled={!isValid || !capchaToken} // Tombol akan dinonaktifkan jika email tidak valid atau captcha belum diisi
               >
                 Kirim Pesan
               </button>

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-[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-[62px] 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-[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] 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"
               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-[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-[62px] 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-[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] 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"
               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-[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-[62px] 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-[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] 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"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
               transition={{ duration: 0.5 }}

src/components/solusi/MengapaCorporate/MengapaCorporate.jsx

@@ -57,16 +57,16 @@ function Kenapa() {
             ))}
           </ul>
 
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
             transition={{ duration: 0.8, delay: 0.5 }}
             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 mb-[112px]"
           >
-            <motion.button 
+            <motion.button
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              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"
+              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"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -76,10 +76,10 @@ function Kenapa() {
               Konsultasi Gratis
             </motion.button>
             <Link to={"/Contact#form"}>
-              <motion.button 
+              <motion.button
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                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-[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"
               >
                 Coba Sekarang
               </motion.button>

src/components/solusi/MengapaStartup/MengapaStartup.jsx

@@ -57,16 +57,16 @@ function Kenapa() {
             ))}
           </ul>
 
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
             transition={{ duration: 0.8, delay: 0.5 }}
             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 mb-[112px]"
           >
-            <motion.button 
+            <motion.button
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              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"
+              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"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -76,10 +76,10 @@ function Kenapa() {
               Konsultasi Gratis
             </motion.button>
             <Link to={"/Contact#form"}>
-              <motion.button 
+              <motion.button
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                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-[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"
               >
                 Coba Sekarang
               </motion.button>

src/components/solusi/MengapapPersonal/MengapapPersonal.jsx

@@ -9,14 +9,14 @@ function Kenapa() {
 
   return (
     <div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
-      <motion.div 
+      <motion.div
-        initial={{ opacity: 0, y: 50 }} 
+        initial={{ opacity: 0, y: 50 }}
-        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} 
+        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
         transition={{ duration: 0.8 }}
         className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
       >
         {/* Image Section */}
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, scale: 0.8 }}
           animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
           transition={{ duration: 1 }}
@@ -30,7 +30,7 @@ function Kenapa() {
         </motion.div>
 
         {/* Text Section */}
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, x: 50 }}
           animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
           transition={{ duration: 1, delay: 0.3 }}
@@ -47,29 +47,29 @@ function Kenapa() {
             {["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.",
               "Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.",
               "Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => (
-              <motion.li 
+                <motion.li
-                key={index}
+                  key={index}
-                initial={{ opacity: 0, x: -30 }}
+                  initial={{ opacity: 0, x: -30 }}
-                animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
+                  animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
-                transition={{ duration: 0.8, delay: index * 0.2 }}
+                  transition={{ duration: 0.8, delay: index * 0.2 }}
-                className="flex items-center"
+                  className="flex items-center"
-              >
+                >
-                <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+                  <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-                {text}
+                  {text}
-              </motion.li>
+                </motion.li>
-            ))}
+              ))}
           </ul>
 
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
             transition={{ duration: 0.8, delay: 0.5 }}
             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 mb-[112px]"
           >
-            <motion.button 
+            <motion.button
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              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"
+              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"
             >
               <img
                 src={wagreen || "/placeholder.svg"}
@@ -79,10 +79,10 @@ function Kenapa() {
               Konsultasi Gratis
             </motion.button>
             <Link to={"/Contact#form"}>
-              <motion.button 
+              <motion.button
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
-                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-[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"
               >
                 Coba Sekarang
               </motion.button>