revisi
This commit is contained in:
parent
9cc4fb7713
commit
ad8403d166
|
@ -0,0 +1,25 @@
|
||||||
|
import row from './arrow.png';
|
||||||
|
import component11 from './Component 11.png';
|
||||||
|
import customer from './customer.png';
|
||||||
|
import email from './email.png';
|
||||||
|
import facebook from './facebook.png';
|
||||||
|
import frame from './Frame.png';
|
||||||
|
import frame27 from './Frame27.png';
|
||||||
|
import img10 from './image 10.png';
|
||||||
|
import instagram from './instagram.png';
|
||||||
|
import kmn from './kementerian.png';
|
||||||
|
import kominfo from './kominfo.png';
|
||||||
|
import Logo1 from './logo.png';
|
||||||
|
import nvidia from './nvidia.png';
|
||||||
|
import ojk from './ojk.png';
|
||||||
|
import phone from './phone.png';
|
||||||
|
import search from './search.png';
|
||||||
|
import telephone from './telephone.png';
|
||||||
|
import wagreen from './whatsapp-color_svgrepo.com.png';
|
||||||
|
import wabutton from './Whatsapp22.png';
|
||||||
|
import x from './x.png';
|
||||||
|
|
||||||
|
|
||||||
|
export{
|
||||||
|
row,component11,customer,email,facebook,frame,frame27,img10,instagram,kmn,kominfo,Logo1,nvidia,ojk,phone,search,telephone,wagreen,wabutton,x
|
||||||
|
}
|
|
@ -5,16 +5,16 @@ const BottomCTA = () => {
|
||||||
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
<section className="w-full bg-white text-center py-10 mb-[113px]">
|
||||||
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
{/* Bagian ini untuk menampilkan teks yang memberi tahu pengguna bahwa mereka bisa menghubungi jika masih ada pertanyaan */}
|
||||||
<div className="flex flex-wrap justify-center gap-2">
|
<div className="flex flex-wrap justify-center gap-2">
|
||||||
<h3 className="text-[#212121] text-center text-[32px] font-semibold leading-[48px] tracking-[0.005em] text-left">
|
<h3 className="text-[#212121] text-center text-[32px] font-[600] leading-[48px] tracking-[0.005em]">
|
||||||
Masih punya pertanyaan seputar
|
Masih punya pertanyaan seputar
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<h3 className="text-lg sm:text-xl md:text-2xl text-[#212121] font-semibold mb-3">
|
<h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
|
||||||
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
{/* Menampilkan tag #Rekan AI dengan background warna dan teks putih */}
|
||||||
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-6 py-2 inline-block mr-[5px]">
|
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
|
||||||
#Rekan AI
|
#Rekan AI
|
||||||
</span>
|
</span>
|
||||||
?
|
<span className="font-semibold ml-1">?</span>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -26,14 +26,14 @@ const BottomCTA = () => {
|
||||||
{/* Bagian tombol CTA */}
|
{/* Bagian tombol CTA */}
|
||||||
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
|
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
|
||||||
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
{/* Tombol Konsultasi Gratis dengan ikon WhatsApp */}
|
||||||
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
<button className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
|
||||||
{/* Gambar WhatsApp di kiri tombol */}
|
{/* Gambar WhatsApp di kiri tombol */}
|
||||||
<img src={logowa} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
<img src={logowa} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
|
||||||
Konsultasi Gratis
|
Konsultasi Gratis
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Tombol Coba Sekarang dengan efek gradient */}
|
{/* Tombol Coba Sekarang dengan efek gradient */}
|
||||||
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
<button className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white text-[20px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
|
||||||
Coba Sekarang
|
Coba Sekarang
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,25 +1,31 @@
|
||||||
import email from "../asset/email.png"; // Import gambar icon untuk email
|
import email from "../asset/email.png"; // Import gambar icon untuk email,telepon,customer service
|
||||||
import customer from "../asset/customer.png"; // Import gambar ilustrasi customer service
|
import customer from "../asset/customer.png"; //
|
||||||
import phone from "../asset/phone.png"; // Import gambar icon untuk telepon
|
import phone from "../asset/phone.png"; //
|
||||||
|
|
||||||
const CustomerService = () => {
|
const CustomerService = () => {
|
||||||
return (
|
return (
|
||||||
<section className="mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-6xl mx-auto gap-10 mb-[114px]">
|
<section className="mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-6xl mx-auto gap-10 mb-[114px]">
|
||||||
{/* Container utama dengan styling responsif untuk menampung konten customer service */}
|
{/* Container utama dengan styling responsif untuk menampung konten customer service */}
|
||||||
|
|
||||||
<div className="md:max-w-xl text-center md:text-left ">
|
<div className="w-full md:w-[773px] h-auto gap-[29px] text-left">
|
||||||
{/* Div untuk teks utama dan informasi pendukung */}
|
{/* Div untuk teks utama dan informasi pendukung */}
|
||||||
|
|
||||||
<div className="mb-5">
|
<div className="mb-5">
|
||||||
<h2 className="text-[#212121] text-[32px] font-semibold leading-[48px] text-left decoration-solid">
|
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[600] text-lg leading-[36px] md:leading-[48px]">
|
||||||
{/* Heading utama dengan warna teks dan ukuran font yang diatur */}
|
Kami Siap Membantu Bisnis{" "}
|
||||||
Kami Siap Membantu Bisnis <br /> Anda Lebih Maju!
|
<span className="hidden lg:inline">
|
||||||
|
<br />
|
||||||
|
</span>{" "}
|
||||||
|
Anda Lebih Maju!
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-[#212121] leading-relaxed mb-6 text-left">
|
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
|
||||||
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
|
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
|
||||||
Butuh informasi lebih lanjut tentang produk atau solusi kami? <br />{" "}
|
Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
|
||||||
|
<span className="hidden lg:inline">
|
||||||
|
<br />
|
||||||
|
</span>{" "}
|
||||||
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
|
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
|
||||||
profesional.
|
profesional.
|
||||||
</p>
|
</p>
|
||||||
|
@ -69,7 +75,7 @@ const CustomerService = () => {
|
||||||
<img
|
<img
|
||||||
src={customer} // Menampilkan gambar customer service
|
src={customer} // Menampilkan gambar customer service
|
||||||
alt="Customer Service" // Teks alternatif untuk gambar customer service
|
alt="Customer Service" // Teks alternatif untuk gambar customer service
|
||||||
className="max-w-full h-auto" // Styling untuk memastikan gambar berskala dengan baik
|
className="w-full md:w-[400px] lg:w-[500px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -114,7 +114,7 @@ const FAQ = () => {
|
||||||
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
|
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
|
||||||
{/* Judul halaman FAQ */}
|
{/* Judul halaman FAQ */}
|
||||||
<div className="mt-[111px]">
|
<div className="mt-[111px]">
|
||||||
<h1 className="text-[32px] font-semibold leading-[48px] tracking-[0.005em] text-center mb-4">
|
<h1 className="text-[32px] font-[600] leading-[48px] tracking-[0.005em] text-center mb-4">
|
||||||
Frequently Asked Questions
|
Frequently Asked Questions
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
|
<h2 className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center mb-6">
|
||||||
|
@ -127,23 +127,23 @@ const FAQ = () => {
|
||||||
{faqData.map((item, index) => (
|
{faqData.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className="border border-[#5B59E8] rounded-lg overflow-hidden mb-[22px]"
|
className="text-[20px] border border-[#5B59E8] rounded-lg overflow-hidden mb-[22px]"
|
||||||
>
|
>
|
||||||
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
|
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
|
||||||
<div
|
<div
|
||||||
className={`flex justify-between items-center p-4 cursor-pointer bg-white border-b ${
|
className={`flex justify-between items-center p-4 cursor-pointer bg-white ml-4 ${
|
||||||
// Jika pertanyaan ini dibuka, beri highlight
|
// Jika pertanyaan ini dibuka, beri highlight
|
||||||
openQuestion === index ? "text-blue-500" : ""
|
openQuestion === index ? "text-blue-500" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
|
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
|
||||||
>
|
>
|
||||||
<span className="font-bold">{item.question}</span>
|
<span className="font-bold">{item.question}</span>
|
||||||
<span>{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
|
<span className="text-[39px] text-[#845FF1] mr-4">{openQuestion === index ? "–" : "+"}</span> {/* Tampilkan tanda buka atau tutup */}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
|
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
|
||||||
{openQuestion === index && (
|
{openQuestion === index && (
|
||||||
<div className="p-4 text-left bg-white text-sm">
|
<div className="p-4 text-[16px] text-left bg-white text-sm">
|
||||||
{item.answer}
|
{item.answer}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -10,7 +10,7 @@ import frame from "../asset/Component 11.png"; // Gambar logo utama perusahaan
|
||||||
|
|
||||||
function Footer() {
|
function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-[#D4DAE4] py-10 text-[#212121]">
|
<footer className="bg-customGrey py-10 text-[#212121]">
|
||||||
{/* Kontainer utama footer */}
|
{/* Kontainer utama footer */}
|
||||||
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
<div className="flex flex-col sm:flex-row sm:flex-wrap justify-between gap-5 mx-5 sm:mx-28 mt-20 text-sm">
|
||||||
{/* Kolom 1: Logo perusahaan */}
|
{/* Kolom 1: Logo perusahaan */}
|
||||||
|
@ -33,11 +33,11 @@ function Footer() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="mb-4">
|
<p className="mb-4 text-[18px]">
|
||||||
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
|
||||||
Banten 15413
|
Banten 15413
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-4">Lebih dekat dengan Kami</p>
|
<p className="mb-4 text-[18px]">Lebih dekat dengan Kami</p>
|
||||||
<div className="flex space-x-3">
|
<div className="flex space-x-3">
|
||||||
{/* Tautan ke media sosial */}
|
{/* Tautan ke media sosial */}
|
||||||
<a href="#">
|
<a href="#">
|
||||||
|
@ -55,7 +55,7 @@ function Footer() {
|
||||||
{/* Kolom 3: Produk perusahaan */}
|
{/* Kolom 3: Produk perusahaan */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Produk Kami</h4>
|
||||||
<ul className="space-y-4">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
<li>Rekan Doku</li> {/* Produk: Dokumen otomatis */}
|
||||||
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
<li>Rekan Veri</li> {/* Produk: Verifikasi data */}
|
||||||
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
|
||||||
|
@ -64,9 +64,9 @@ function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kolom 4: Solusi yang ditawarkan */}
|
{/* Kolom 4: Solusi yang ditawarkan */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0 md:mx-[10px] 2xl:mx-[-120px]">
|
||||||
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Solusi Kami</h4>
|
||||||
<ul className="space-y-4">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Personal</li> {/* Solusi untuk individu */}
|
<li>Personal</li> {/* Solusi untuk individu */}
|
||||||
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
|
||||||
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
|
||||||
|
@ -76,7 +76,7 @@ function Footer() {
|
||||||
{/* Kolom 5: Informasi kontak */}
|
{/* Kolom 5: Informasi kontak */}
|
||||||
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
|
||||||
<h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
|
<h4 className="text-base font-semibold mb-4">Hubungi Kami</h4>
|
||||||
<ul className="space-y-4">
|
<ul className="space-y-4 text-[18px]">
|
||||||
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
<li>Email: support@rekanai.com</li> {/* Email dukungan */}
|
||||||
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
<li>Phone: +68452098</li> {/* Nomor telepon */}
|
||||||
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
|
||||||
|
@ -101,7 +101,7 @@ function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian hak cipta */}
|
{/* Bagian hak cipta */}
|
||||||
<div className="text-left mt-40 mx-5 sm:mx-28 text-xs">
|
<div className="text-left mt-[92.78px] mx-5 sm:mx-28 text-xs">
|
||||||
<p>
|
<p>
|
||||||
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -3,39 +3,38 @@ import bgImage from "../asset/image 10.png";
|
||||||
const ContactForm = () => {
|
const ContactForm = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden"
|
className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden rounded-tl-[80px] rounded-tr-[80px]"
|
||||||
// Menentukan gaya background menggunakan gambar dengan gradien
|
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(to right, #dc016866, rgba(91, 89, 232, 1)), url(${bgImage})`,
|
background: `linear-gradient(45deg, #DC016866 5%, rgba(91, 89, 232, 1) 100%), url(${bgImage})`,
|
||||||
backgroundSize: "cover", // Memastikan background menutupi seluruh elemen
|
backgroundSize: "100% auto", // Memastikan gambar mengisi seluruh elemen
|
||||||
backgroundPosition: "center", // Menempatkan gambar di tengah
|
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">
|
<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 */}
|
{/* Bagian Kiri */}
|
||||||
<div className="flex-1 p-5 mb-10 lg:mb-auto mt-20">
|
<div className="flex-1 p-5 mb-10 lg:mb-auto mt-20">
|
||||||
{/* Judul utama */}
|
{/* Judul utama */}
|
||||||
<h2 className="text-[32px] font-[700] leading-[48px] tracking-[0.005em] text-left mb-[39px]">
|
<h2 className="text-[32px] font-[600] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px]">
|
||||||
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
Isi formulir di samping ini dan kami akan menghubungi Anda secepat
|
||||||
mungkin
|
mungkin
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* Deskripsi tambahan */}
|
{/* Deskripsi tambahan */}
|
||||||
<p className="text-[20px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6">
|
<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. <br />
|
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
|
||||||
Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda
|
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI!
|
||||||
bersama Rekan AI!
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bagian Form */}
|
{/* Bagian Form */}
|
||||||
<div className="flex-1 bg-white text-[#212121] rounded-2xl p-8 shadow-lg border-4 border-pink-300 mx-auto lg:mx-0 lg:ml-12 w-full max-w-lg mt-[79px] mb-[79px]">
|
<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 */}
|
{/* Judul form */}
|
||||||
<h3 className="text-xl font-bold mb-4 text-[#212121]">
|
<h3 className="text-xl font-bold mb-4 text-[#212121] 2xl:text-2xl">
|
||||||
Hubungi Tim Terbaik Kami
|
Hubungi Tim Terbaik Kami
|
||||||
</h3>
|
</h3>
|
||||||
{/* Deskripsi form */}
|
{/* Deskripsi form */}
|
||||||
<p className="mb-6 text-[#212121]">
|
<p className="mb-6 text-[#212121] 2xl:text-lg">
|
||||||
Silakan isi data diri Anda pada formulir di bawah ini
|
Silakan isi data diri Anda pada formulir di bawah ini
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
@ -43,61 +42,55 @@ const ContactForm = () => {
|
||||||
<form className="flex flex-col gap-4">
|
<form className="flex flex-col gap-4">
|
||||||
{/* Input Nama */}
|
{/* Input Nama */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA] font-bold">
|
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
|
||||||
Nama (Tanpa Gelar)*
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Masukkan nama Anda"
|
placeholder="Masukkan nama Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Input Nomor Telepon */}
|
{/* Input Nomor Telepon */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA] font-bold">
|
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
|
||||||
Nomor Telepon*
|
|
||||||
</label>
|
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
placeholder="Masukkan nomor telepon Anda"
|
placeholder="Masukkan nomor telepon Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Input Email */}
|
{/* Input Email */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA] font-bold">Email*</label>
|
<label className="text-[#6B5CEA]">Email*</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="Masukkan email Anda"
|
placeholder="Masukkan email Anda"
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Input Nama Organisasi */}
|
{/* Input Nama Organisasi */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA] font-bold">
|
<label className="text-[#6B5CEA] ">
|
||||||
Nama Organisasi/Perusahaan
|
Nama Organisasi/Perusahaan
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
placeholder="Masukkan nama organisasi/perusahaan Anda"
|
||||||
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-indigo-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dropdown Pilih Kebutuhan */}
|
{/* Dropdown Pilih Kebutuhan */}
|
||||||
<div>
|
<div>
|
||||||
<label className="text-[#6B5CEA] font-bold">
|
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
|
||||||
Pilih Kebutuhan
|
|
||||||
</label>
|
|
||||||
<select
|
<select
|
||||||
required
|
required
|
||||||
className="w-full mt-1 p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"
|
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="">Pilih kebutuhan Anda</option>
|
||||||
<option value="konsultasi">Konsultasi</option>
|
<option value="konsultasi">Konsultasi</option>
|
||||||
|
@ -119,7 +112,7 @@ const ContactForm = () => {
|
||||||
{/* Tombol Kirim */}
|
{/* Tombol Kirim */}
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all w-[173px] pr-6"
|
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
|
Kirim Pesan
|
||||||
</button>
|
</button>
|
||||||
|
@ -130,4 +123,4 @@ const ContactForm = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ContactForm;
|
export default ContactForm;
|
||||||
|
|
|
@ -10,7 +10,9 @@ export default {
|
||||||
theme: {
|
theme: {
|
||||||
// Bagian untuk memperluas (extend) tema Tailwind. Anda bisa menambahkan tema atau konfigurasi lain di sini.
|
// Bagian untuk memperluas (extend) tema Tailwind. Anda bisa menambahkan tema atau konfigurasi lain di sini.
|
||||||
extend: {
|
extend: {
|
||||||
// Misalnya, Anda bisa menambahkan warna kustom, font, spacing, dan lainnya di dalam bagian ini
|
colors: {
|
||||||
|
customGrey: 'rgba(212, 218, 228, 0.12)',
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// Daftar plugin yang akan digunakan oleh Tailwind
|
// Daftar plugin yang akan digunakan oleh Tailwind
|
||||||
|
|
Loading…
Reference in New Issue