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='/Contact' element={<Contact/>}/>
-        <Route path='/FormSection' element={<FormSection/>}/>
-        <Route path='/SolusiPersonal' element={<SolusiPersonal/>}/>
-        <Route path='/SolusiStartup' element={<SolusiStartup/>}/>
-        <Route path='/SolusiCorporate' element={<SolusiCorporate/>}/>
+        <Route path='/' element={<Home />} />
+        <Route path='/Contact' element={<Contact />} />
+        <Route path='/FormSection' element={<FormSection />} />
+        <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

@@ -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="bg-customRed bg-opacity-80 rounded-xl p-8">
+              <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 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 
-        initial={{ opacity: 0, y: 50 }} 
-        animate={sectionInView ? { opacity: 1, y: 0 } : {}} 
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        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 
-            src={circle1} alt="Circle 1" 
-            className="w-auto h-auto" 
+          <motion.img
+            src={circle1} alt="Circle 1"
+            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 
-            src={circle2} alt="Circle 2" 
-            className="w-auto h-auto" 
+          <motion.img
+            src={circle2} alt="Circle 2"
+            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 
-                key={index} 
+              <motion.li
+                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 
-              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"
+          <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"
               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/BottomCTA.jsx

@@ -3,10 +3,10 @@ import { motion } from "framer-motion";
 
 const BottomCTA = () => {
   return (
-    <motion.section
-      initial={{ opacity: 0, y: 50 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 1.2, ease: "easeOut" }}
+    <motion.section 
+      initial={{ opacity: 0, y: 50 }} 
+      whileInView={{ opacity: 1, y: 0 }} 
+      transition={{ duration: 1.2, ease: "easeOut" }} 
       viewport={{ once: false, amount: 0.2 }}
       className="w-full bg-white text-center py-10 mb-[113px]"
     >
@@ -23,23 +23,21 @@ 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 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}
-            alt="WhatsApp Icon"
-            className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]"
-          />
+        <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]"
+        >
+          <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
           Konsultasi Gratis
         </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">
+        
+        <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"
+        >
           Coba Sekarang
         </motion.button>
       </div>

src/components/contact/CustomerService.jsx

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

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"
-                disabled={!capchaToken}
+                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={!isValid || !capchaToken} // Tombol akan dinonaktifkan jika email tidak valid atau captcha belum diisi
               >
                 Kirim Pesan
               </button>

src/components/contact/asset/index.js

@@ -1,43 +1,25 @@
-import row from "./arrow.png";
-import component11 from "./Component 11.png";
-import customer from "./customer.png";
-import email from "./email.png";
-import facebook from "./facebook.png";
-import frame from "./Frame.png";
-import frame27 from "./Frame27.png";
-import img10 from "./image 10.png";
-import instagram from "./instagram.png";
-import kmn from "./Dukcapil PNG Pic.png";
-import kominfo from "./Kominfo PNG Pic.png";
-import Logo1 from "./logo.png";
-import nvidia from "./NVIDIA PNG Pic.png";
-import ojk from "./OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp";
-import phone from "./phone.png";
-import search from "./search.png";
-import telephone from "./telephone.png";
-import wagreen from "./whatsapp-color_svgrepo.com.png";
-import wabutton from "./Whatsapp22.png";
-import x from "./x.png";
+import row from './arrow.png';
+import component11 from './Component 11.png';
+import customer from './customer.png';
+import email from './email.png';
+import facebook from './facebook.png';
+import frame from './Frame.png';
+import frame27 from './Frame27.png';
+import img10 from './image 10.png';
+import instagram from './instagram.png';
+import kmn from './Dukcapil PNG Pic.png';
+import kominfo from './Kominfo PNG Pic.png';
+import Logo1 from './logo.png';
+import nvidia from './NVIDIA PNG Pic.png';
+import ojk from './OJK-Rilis-Roadmap-Pasar-Modal-Indonesia-2023-2027.webp';
+import phone from './phone.png';
+import search from './search.png';
+import telephone from './telephone.png';
+import wagreen from './whatsapp-color_svgrepo.com.png';
+import wabutton from './Whatsapp22.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,
-};
+
+export{
+    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-[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 
-        initial={{ opacity: 0, y: 50 }} 
-        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }} 
+      <motion.div
+        initial={{ 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 
-                key={index}
-                initial={{ opacity: 0, x: -30 }}
-                animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
-                transition={{ duration: 0.8, delay: index * 0.2 }}
-                className="flex items-center"
-              >
-                <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
-                {text}
-              </motion.li>
-            ))}
+                <motion.li
+                  key={index}
+                  initial={{ opacity: 0, x: -30 }}
+                  animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
+                  transition={{ duration: 0.8, delay: index * 0.2 }}
+                  className="flex items-center"
+                >
+                  <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
+                  {text}
+                </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>