forked from amnannn/rekan_ai
127 lines
4.9 KiB
JavaScript
127 lines
4.9 KiB
JavaScript
import { img10 } from "../asset";
|
|
|
|
const ContactForm = () => {
|
|
return (
|
|
<div
|
|
className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden rounded-tl-[80px] rounded-tr-[80px]"
|
|
style={{
|
|
background: `linear-gradient(45deg, #DC016866 5%, rgba(91, 89, 232, 1) 100%), url(${img10})`,
|
|
backgroundSize: "100% auto", // Memastikan gambar mengisi seluruh elemen
|
|
backgroundPosition: "center", // Menempatkan gambar di tengah
|
|
backgroundRepeat: "no-repeat", // Menghindari gambar terulang
|
|
}}
|
|
>
|
|
<div className="flex flex-col lg:flex-row items-start w-full max-w-6xl mt-[-40px] 2xl:max-w-7xl 2xl:px-20">
|
|
{/* Bagian Kiri */}
|
|
<div className="flex-1 p-5 mb-10 lg:mb-auto mt-20">
|
|
{/* Judul utama */}
|
|
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px]">
|
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
|
mungkin
|
|
</h2>
|
|
|
|
{/* Deskripsi tambahan */}
|
|
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px]">
|
|
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="flex-1 bg-white text-[#212121] rounded-2xl p-8 shadow-lg border-[8px] border-pink-300 mx-auto lg:mx-0 lg:ml-12 w-full max-w-lg mt-[79px] mb-[79px] 2xl:max-w-xl 2xl:px-12">
|
|
{/* Judul form */}
|
|
<h3 className="text-xl font-bold mb-4 text-[#212121] 2xl:text-2xl">
|
|
Hubungi Tim Terbaik Kami
|
|
</h3>
|
|
{/* Deskripsi form */}
|
|
<p className="mb-6 text-[#212121] 2xl:text-lg">
|
|
Silakan isi data diri Anda pada formulir di bawah ini
|
|
</p>
|
|
|
|
{/* Formulir input */}
|
|
<form className="flex flex-col gap-4">
|
|
{/* Input Nama */}
|
|
<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-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Input Nomor Telepon */}
|
|
<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-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Input Email */}
|
|
<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-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Input Nama Organisasi */}
|
|
<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-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Dropdown Pilih Kebutuhan */}
|
|
<div>
|
|
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
|
<select
|
|
required
|
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="">Pilih kebutuhan Anda</option>
|
|
<option value="konsultasi">Konsultasi</option>
|
|
<option value="pelatihan">Pelatihan</option>
|
|
<option value="pengembangan">Pengembangan</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Checkbox Verifikasi */}
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
required
|
|
className="focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
<span className="text-[#212121]">Saya bukan robot</span>
|
|
</div>
|
|
|
|
{/* Tombol Kirim */}
|
|
<button
|
|
type="submit"
|
|
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] pr-6"
|
|
>
|
|
Kirim Pesan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm;
|