amnannn/rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan fitur 3 huruf setelah (.) pada form email

Browse Source
This commit is contained in:
Yogamnan 2025-03-03 14:21:00 +07:00
parent e8e44e4d5d
commit 4bc59072b6
10 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/beranda/Hero.jsx
View File

@ -34,7 +34,7 @@ function Hero() {
}, []); }, []);
return ( 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="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"> <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 */} {/* 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" className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
id="button-section" 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" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<Link to={"/Contact#form"}> <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 Coba Sekarang
</button> </button>
</Link> </Link>

9
src/components/beranda/Kenapa.jsx
View File

@ -87,8 +87,9 @@ function Kenapa() {
</ul> </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"> <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 <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 0.8 }} 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]" /> <img src={waIcon} alt="WhatsApp Icon" className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]" />
Konsultasi Gratis Konsultasi Gratis
</motion.button> </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 <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5, delay: 1 }} transition={{ duration: 0.5, delay: 1 }}

4
src/components/beranda/Mitra.jsx
View File

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

40
src/components/contact/FormSection.jsx
View File

@ -1,6 +1,6 @@
"use client" "use client"
import { useEffect } from "react" import { useEffect, useState } from "react"
import { useLocation } from "react-router-dom" import { useLocation } from "react-router-dom"
import ReCAPTCHA from "react-google-recaptcha" import ReCAPTCHA from "react-google-recaptcha"
import { motion, useAnimation } from "framer-motion" import { motion, useAnimation } from "framer-motion"
@ -15,6 +15,9 @@ const ContactForm = () => {
const [ref, inView] = useInView({ const [ref, inView] = useInView({
threshold: 0.1, // Trigger when 10% of the element is in view 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(() => { useEffect(() => {
if (inView) { if (inView) {
@ -43,6 +46,32 @@ const ContactForm = () => {
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }, 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 ( return (
<div <div
className="relative flex min-h-screen w-full items-center justify-center p-5 text-white rounded-tl-[80px] rounded-tr-[80px]" 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>
<div> <div>
<label className="text-[#6B5CEA]">Email*</label> <label className="text-[#6B5CEA]">Email*</label>
<input <input
type="email" type="email"
value={email}
onChange={handleChange}
placeholder="Masukkan email Anda" placeholder="Masukkan email Anda"
required required
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5" 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>
<div> <div>
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label> <label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
@ -153,8 +185,8 @@ const ContactForm = () => {
<button <button
type="submit" 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 Kirim Pesan
</button> </button>

4
src/components/solusi/HeadCorporate/HeadCorporate.jsx
View File

@ -65,13 +65,13 @@ export default function HeadCorporate() {
animate={buttonInView ? { opacity: 1, y: 0 } : {}} animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }} 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" /> <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<Link to={"/Contact#form"}> <Link to={"/Contact#form"}>
<motion.button <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}

4
src/components/solusi/HeadPersonal/HeadPersonal.jsx
View File

@ -67,13 +67,13 @@ export default function HeadPersonal() {
animate={buttonInView ? { opacity: 1, y: 0 } : {}} animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }} 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" /> <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<Link to={"/Contact#form"}> <Link to={"/Contact#form"}>
<motion.button <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}

4
src/components/solusi/HeadStartup/HeadStartup.jsx
View File

@ -65,13 +65,13 @@ export default function HeadPersonal() {
animate={buttonInView ? { opacity: 1, y: 0 } : {}} animate={buttonInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }} 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" /> <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
Konsultasi Gratis Konsultasi Gratis
</button> </button>
<Link to={"/Contact#form"}> <Link to={"/Contact#form"}>
<motion.button <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 }} initial={{ opacity: 0, scale: 0.8 }}
animate={buttonInView ? { opacity: 1, scale: 1 } : {}} animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}

10
src/components/solusi/MengapaCorporate/MengapaCorporate.jsx
View File

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

10
src/components/solusi/MengapaStartup/MengapaStartup.jsx
View File

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

42
src/components/solusi/MengapapPersonal/MengapapPersonal.jsx
View File

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