This commit is contained in:
Carls2320 2025-01-22 09:09:06 +07:00
parent 9cc4fb7713
commit ad8403d166
8 changed files with 87 additions and 62 deletions

View File

@ -1 +0,0 @@
# MyProject

View 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
}

View File

@ -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>

View File

@ -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>

View File

@ -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>
)} )}

View File

@ -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>

View File

@ -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;

View File

@ -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