forked from amnannn/rekan_ai
fix revisi 12
This commit is contained in:
Yogamnan
@@ -1,13 +1,37 @@
|
||||
import { email, phone, customer } from "./asset";
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
const CustomerService = () => {
|
||||
const { ref: leftRef, inView: leftInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||
const { ref: rightRef, inView: rightInView } = useInView({ triggerOnce: false, threshold: 0.2 });
|
||||
|
||||
const fadeInLeft = {
|
||||
hidden: { opacity: 0, x: -100 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
const fadeInRight = {
|
||||
hidden: { opacity: 0, x: 100 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.8 } },
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[150px] 2xl:px-20 2xl:gap-20">
|
||||
<section className="main-container mt-[180px] mb-16 md:mt-20 flex flex-col md:flex-row items-center px-5 py-10 max-w-7xl mx-auto md:mb-[100px] 2xl:px-20 2xl:gap-20">
|
||||
{/* LEFT SECTION - Informasi */}
|
||||
<div className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 pl-10">
|
||||
<motion.div
|
||||
ref={leftRef}
|
||||
className="w-full md:w-[650px] 2xl:w-[750px] h-auto gap-[29px] text-left md:mt-0 md:ml-[-110px]"
|
||||
initial="hidden"
|
||||
animate={leftInView ? "visible" : "hidden"}
|
||||
variants={fadeInLeft}
|
||||
key="left-content"
|
||||
>
|
||||
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
Kami Siap Membantu Bisnis Anda
|
||||
Kami Siap Membantu Bisnis Anda <br />
|
||||
Lebih Maju!
|
||||
</h2>
|
||||
</div>
|
||||
@@ -50,16 +74,23 @@ const CustomerService = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* RIGHT SECTION - Gambar */}
|
||||
<div className=" flex justify-center md:justify-end items-center pr-10">
|
||||
<motion.div
|
||||
ref={rightRef}
|
||||
className="flex justify-center md:justify-end items-center md:mr-[-70px]"
|
||||
initial="hidden"
|
||||
animate={rightInView ? "visible" : "hidden"}
|
||||
variants={fadeInRight}
|
||||
key="right-content"
|
||||
>
|
||||
<img
|
||||
src={customer}
|
||||
alt="Customer Service"
|
||||
className="w-full h-auto md:w-auto md:h-auto"
|
||||
className="w-full h-auto md:w-auto md:h-auto"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { img10 } from "./asset"; // Pastikan img10 ada dan benar path-nya
|
||||
import ReCAPTCHA from "react-google-recaptcha"; // Pastikan penulisan benar (ReCAPTCHA)
|
||||
import useRecaptcha from './Recaptcha/useRecaptcha';
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { img10 } from "./asset"
|
||||
import ReCAPTCHA from "react-google-recaptcha"
|
||||
import useRecaptcha from "./Recaptcha/useRecaptcha"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import { useEffect } from "react"
|
||||
|
||||
const ContactForm = () => {
|
||||
const { capchaToken, handleRecaptcha } = useRecaptcha();
|
||||
|
||||
const location = useLocation();
|
||||
const { capchaToken, handleRecaptcha } = useRecaptcha()
|
||||
const location = useLocation()
|
||||
|
||||
useEffect(() => {
|
||||
if (location.hash) {
|
||||
const element = document.querySelector(location.hash);
|
||||
const element = document.querySelector(location.hash)
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
element.scrollIntoView({ behavior: "smooth" })
|
||||
}
|
||||
}
|
||||
}, [location]);
|
||||
}, [location])
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-screen 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]"
|
||||
id="form"
|
||||
style={{
|
||||
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1), rgba(91, 89, 232, 1)), url(${img10})`,
|
||||
@@ -29,115 +29,108 @@ const ContactForm = () => {
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col lg:flex-row items-start w-full 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
|
||||
{/* Bagian Kiri */}
|
||||
<div className="flex-1 p-5 mb-10 lg:mb-0 md:ml-28 2xl:mt-28 md:max-w-[40%]">
|
||||
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mt-16 mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||
<div className="container mx-auto flex flex-col lg:flex-row items-center justify-center gap-8 py-16 px-4 lg:px-8">
|
||||
{/* Left Section */}
|
||||
<div className="w-full md:mt-[-650px] md:ml-14 lg:w-[50%] space-y-6">
|
||||
<h2 className="text-2xl md:text-[32px] font-[550] leading-tight md:leading-[48px] tracking-[0.005em] 2xl:text-[36px] 2xl:leading-[52px]">
|
||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat mungkin
|
||||
</h2>
|
||||
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
|
||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||
<p className="text-base md:text-[18px] font-[400] leading-relaxed md:leading-[30px] tracking-[0.005em] 2xl:text-[20px] 2xl:leading-[34px]">
|
||||
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami hari ini, dan mari wujudkan masa depan
|
||||
bisnis Anda bersama Rekan AI!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bagian Form */}
|
||||
<div className="bg-white text-[#212121] mt-5 rounded-[25px] md:ml-24 md:mt-52 p-[40px] border-[8px] border-[#F086A4] md:w-[794px] 2xl:px-[60px] 2xl:py-[50px]">
|
||||
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||
Hubungi Tim Terbaik Kami
|
||||
</h3>
|
||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
|
||||
Silakan isi data diri Anda pada formulir di bawah ini
|
||||
</p>
|
||||
{/* Form Section */}
|
||||
<div className="w-full lg:w-7/12 xl:w-6/12">
|
||||
<div className="bg-white text-[#212121] rounded-[25px] p-6 md:p-[40px] border-[8px] border-[#F086A4] 2xl:px-[60px] 2xl:py-[50px] max-w-[794px] mx-auto">
|
||||
<h3 className="text-2xl md:text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
|
||||
Hubungi Tim Terbaik Kami
|
||||
</h3>
|
||||
<p className="mb-6 text-[#212121] 2xl:text-[18px]">Silakan isi data diri Anda pada formulir di bawah ini</p>
|
||||
|
||||
<form className="flex flex-col gap-4 px-2">
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Masukkan nomor telepon Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
pattern="[0-9]*"
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value.replace(/[^0-9]/g, "");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<input
|
||||
type="email"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||
<select
|
||||
required
|
||||
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
>
|
||||
<option value="">Pilih kebutuhan Anda</option>
|
||||
<option value="konsultasi">Konsultasi</option>
|
||||
<option value="pelatihan">Pelatihan</option>
|
||||
<option value="pengembangan">Pengembangan</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-6 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
<form className="flex flex-col gap-4">
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Masukkan nomor telepon Anda"
|
||||
required
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
pattern="[0-9]*"
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value.replace(/[^0-9]/g, "")
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Email*</label>
|
||||
<input
|
||||
type="email"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[#6B5CEA]">Nama Organisasi/Perusahaan</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||
<select
|
||||
required
|
||||
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
|
||||
>
|
||||
<option value="">Pilih kebutuhan Anda</option>
|
||||
<option value="konsultasi">Konsultasi</option>
|
||||
<option value="pelatihan">Pelatihan</option>
|
||||
<option value="pengembangan">Pengembangan</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
|
||||
<svg
|
||||
className="w-6 text-[#5B59E8]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ReCAPTCHA */}
|
||||
<div className="flex items-center gap-2">
|
||||
<ReCAPTCHA
|
||||
sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW"
|
||||
onChange={handleRecaptcha} // Mengganti render="explicit" dengan onChange yang lebih sederhana
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ReCAPTCHA sitekey="6LcIYNYqAAAAAJW_YJRWbBDBGt1gsKwsL9vK1SfW" onChange={handleRecaptcha} />
|
||||
</div>
|
||||
|
||||
<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} // Tombol dinonaktifkan jika reCAPTCHA belum dicentang
|
||||
>
|
||||
Kirim Pesan
|
||||
</button>
|
||||
</form>
|
||||
<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}
|
||||
>
|
||||
Kirim Pesan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactForm
|
||||
|
||||
export default ContactForm;
|
||||
|
||||
Reference in New Issue
Block a user