137 lines
5.7 KiB
JavaScript
137 lines
5.7 KiB
JavaScript
|
|
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()
|
|
|
|
useEffect(() => {
|
|
if (location.hash) {
|
|
const element = document.querySelector(location.hash)
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
}
|
|
}, [location])
|
|
|
|
return (
|
|
<div
|
|
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})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}
|
|
>
|
|
<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-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>
|
|
</motion.div>
|
|
|
|
{/* 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">
|
|
<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 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}
|
|
>
|
|
Kirim Pesan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContactForm
|
|
|