allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests 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 (

38
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]"
@ -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"
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>

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

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