forked from amnannn/rekan_ai
		
	revisi
This commit is contained in:
		
							parent
							
								
									9cc4fb7713
								
							
						
					
					
						commit
						ad8403d166
					
				
							
								
								
									
										25
									
								
								src/componen/asset/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										25
									
								
								src/componen/asset/index.js
									
									
									
									
									
										Normal file
									
								
							| @ -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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user