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 (
<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>

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

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

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

@ -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 (

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

@ -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>

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

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

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

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

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

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

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

@ -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>

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

@ -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>

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

@ -47,17 +47,17 @@ 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
@ -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>