penambahan fitur 3 huruf setelah (.) pada form email

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 */}
@@ -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

@@ -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">
+          <Link to={""} className="w-full md:w-[245px]">
             <motion.button
-              className="flex items-center justify-center w-full md:w-[350px] 2xl: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"
+              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,10 +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>
-            <Link to={"/Contact#form"} className="w-full md:w-[270px]">
+            <Link to={"/Contact#form"} className="w-full md:w-[245px]">
               <motion.button
-                className="flex items-center justify-center w-full  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 }}

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/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]"
@@ -109,10 +138,13 @@ 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>
@@ -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

@@ -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-[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,7 +79,7 @@ function Kenapa() {
               <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

@@ -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-[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,7 +79,7 @@ function Kenapa() {
               <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

@@ -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-[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"}
@@ -82,7 +82,7 @@ function Kenapa() {
               <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>