From 4bc59072b6a2ab2deb958d55c1144cc165288fd8 Mon Sep 17 00:00:00 2001
From: Yogamnan <amnannajid3@gmail.com>
Date: Mon, 3 Mar 2025 14:21:00 +0700
Subject: [PATCH] penambahan fitur 3 huruf setelah (.) pada form email

---
 src/components/beranda/Hero.jsx               |  6 +--
 src/components/beranda/Kenapa.jsx             |  9 ++--
 src/components/beranda/Mitra.jsx              |  4 +-
 src/components/contact/FormSection.jsx        | 40 ++++++++++++++++--
 .../solusi/HeadCorporate/HeadCorporate.jsx    |  4 +-
 .../solusi/HeadPersonal/HeadPersonal.jsx      |  4 +-
 .../solusi/HeadStartup/HeadStartup.jsx        |  4 +-
 .../MengapaCorporate/MengapaCorporate.jsx     | 10 ++---
 .../solusi/MengapaStartup/MengapaStartup.jsx  | 10 ++---
 .../MengapapPersonal/MengapapPersonal.jsx     | 42 +++++++++----------
 10 files changed, 83 insertions(+), 50 deletions(-)

diff --git a/src/components/beranda/Hero.jsx b/src/components/beranda/Hero.jsx
index cc91419..99de30e 100644
--- a/src/components/beranda/Hero.jsx
+++ b/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>
diff --git a/src/components/beranda/Kenapa.jsx b/src/components/beranda/Kenapa.jsx
index 715d6f3..2e221e8 100644
--- a/src/components/beranda/Kenapa.jsx
+++ b/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 to={"/Contact#form"} className="w-full md:w-[270px]">
+          </Link>
+            <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 }}
diff --git a/src/components/beranda/Mitra.jsx b/src/components/beranda/Mitra.jsx
index 11bf7b2..031db06 100644
--- a/src/components/beranda/Mitra.jsx
+++ b/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 (
diff --git a/src/components/contact/FormSection.jsx b/src/components/contact/FormSection.jsx
index 3a854fb..ffb051a 100644
--- a/src/components/contact/FormSection.jsx
+++ b/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>
diff --git a/src/components/solusi/HeadCorporate/HeadCorporate.jsx b/src/components/solusi/HeadCorporate/HeadCorporate.jsx
index bd6dc7b..f609177 100644
--- a/src/components/solusi/HeadCorporate/HeadCorporate.jsx
+++ b/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 }}
diff --git a/src/components/solusi/HeadPersonal/HeadPersonal.jsx b/src/components/solusi/HeadPersonal/HeadPersonal.jsx
index 21f2bb9..c99f44f 100644
--- a/src/components/solusi/HeadPersonal/HeadPersonal.jsx
+++ b/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 }}
diff --git a/src/components/solusi/HeadStartup/HeadStartup.jsx b/src/components/solusi/HeadStartup/HeadStartup.jsx
index f5bc80f..b7e39de 100644
--- a/src/components/solusi/HeadStartup/HeadStartup.jsx
+++ b/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 }}
diff --git a/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx b/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx
index 7d33fbc..af4c617 100644
--- a/src/components/solusi/MengapaCorporate/MengapaCorporate.jsx
+++ b/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>
diff --git a/src/components/solusi/MengapaStartup/MengapaStartup.jsx b/src/components/solusi/MengapaStartup/MengapaStartup.jsx
index 0ef8eb2..6e74b40 100644
--- a/src/components/solusi/MengapaStartup/MengapaStartup.jsx
+++ b/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>
diff --git a/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx b/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx
index 50ad79f..7cbe0cb 100644
--- a/src/components/solusi/MengapapPersonal/MengapapPersonal.jsx
+++ b/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>