allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

revisi

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -1 +0,0 @@
# MyProject

25
src/componen/asset/index.js Normal file
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
}

12
src/componen/bottom/BottomCTA.jsx
View File

@ -5,16 +5,16 @@ const BottomCTA = () => {
<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 */}
<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
</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 */}
<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
</span>
?
<span className="font-semibold ml-1">?</span>
</h3>
</div>
@ -26,14 +26,14 @@ const BottomCTA = () => {
{/* Bagian tombol CTA */}
<div className="flex justify-center flex-col lg:flex-row mt-8 lg:mt-16 gap-6">
{/* 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 */}
<img src={logowa} alt="WhatsApp Icon" className="mr-2 h-[1.2rem] w-auto" />
Konsultasi Gratis
</button>
{/* 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
</button>
</div>

26
src/componen/customer/CustomerService.jsx
View File

@ -1,25 +1,31 @@
import email from "../asset/email.png"; // Import gambar icon untuk email
import customer from "../asset/customer.png"; // Import gambar ilustrasi customer service
import phone from "../asset/phone.png"; // Import gambar icon untuk telepon
import email from "../asset/email.png"; // Import gambar icon untuk email,telepon,customer service
import customer from "../asset/customer.png"; //
import phone from "../asset/phone.png"; //
const CustomerService = () => {
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]">
{/* 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 className="mb-5">
<h2 className="text-[#212121] text-[32px] font-semibold leading-[48px] text-left decoration-solid">
{/* Heading utama dengan warna teks dan ukuran font yang diatur */}
Kami Siap Membantu Bisnis <br /> Anda Lebih Maju!
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[600] text-lg leading-[36px] md:leading-[48px]">
Kami Siap Membantu Bisnis{" "}
<span className="hidden lg:inline">
<br />
</span>{" "}
Anda Lebih Maju!
</h2>
</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 */}
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
profesional.
</p>
@ -69,7 +75,7 @@ const CustomerService = () => {
<img
src={customer} // Menampilkan 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>
</section>

10
src/componen/faq/FAQSection.jsx
View File

@ -114,7 +114,7 @@ const FAQ = () => {
<div className="text-[#212121] max-w-4xl mx-auto px-4 py-6 text-center ">
{/* Judul halaman FAQ */}
<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
</h1>
<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) => (
<div
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 */}
<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
openQuestion === index ? "text-blue-500" : ""
}`}
onClick={() => toggleQuestion(index)} // Ketika pertanyaan diklik, panggil toggleQuestion
>
<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>
{/* Bagian untuk menampilkan jawaban jika pertanyaan ini terbuka */}
{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}
</div>
)}

16
src/componen/footer/Footer.jsx
View File

@ -10,7 +10,7 @@ import frame from "../asset/Component 11.png"; // Gambar logo utama perusahaan
function Footer() {
return (
<footer className="bg-[#D4DAE4] py-10 text-[#212121]">
<footer className="bg-customGrey py-10 text-[#212121]">
{/* 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">
{/* Kolom 1: Logo perusahaan */}
@ -33,11 +33,11 @@ function Footer() {
</span>
</p>
</div>
<p className="mb-4">
<p className="mb-4 text-[18px]">
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
Banten 15413
</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">
{/* Tautan ke media sosial */}
<a href="#">
@ -55,7 +55,7 @@ function Footer() {
{/* Kolom 3: Produk perusahaan */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<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 Veri</li> {/* Produk: Verifikasi data */}
<li>Rekan HR</li> {/* Produk: Manajemen SDM */}
@ -64,9 +64,9 @@ function Footer() {
</div>
{/* 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>
<ul className="space-y-4">
<ul className="space-y-4 text-[18px]">
<li>Personal</li> {/* Solusi untuk individu */}
<li>UMKM</li> {/* Solusi untuk Usaha Mikro, Kecil, dan Menengah */}
<li>Corporate Business</li> {/* Solusi untuk perusahaan besar */}
@ -76,7 +76,7 @@ function Footer() {
{/* Kolom 5: Informasi kontak */}
<div className="flex-1 mb-5 sm:mb-0 sm:pl-0">
<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>Phone: +68452098</li> {/* Nomor telepon */}
<li>F.A.Q</li> {/* Halaman Pertanyaan yang Sering Diajukan */}
@ -101,7 +101,7 @@ function Footer() {
</div>
{/* 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>
© Copyright 2025 Rekan AI. Seluruh hak cipta dilindungi undang-undang
</p>

55
src/componen/form/FormSection.jsx
View File

@ -3,39 +3,38 @@ import bgImage from "../asset/image 10.png";
const ContactForm = () => {
return (
<div
className="flex min-h-screen items-center justify-center p-5 text-white overflow-hidden"
// Menentukan gaya background menggunakan gambar dengan gradien
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(to right, #dc016866, rgba(91, 89, 232, 1)), url(${bgImage})`,
backgroundSize: "cover", // Memastikan background menutupi seluruh elemen
background: `linear-gradient(45deg, #DC016866 5%, rgba(91, 89, 232, 1) 100%), url(${bgImage})`,
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">
<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-[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
mungkin
</h2>
{/* Deskripsi tambahan */}
<p className="text-[20px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6">
Kami percaya bahwa kolaborasi adalah kunci kesuksesan. <br />
Hubungi kami hari ini, dan mari wujudkan masa depan bisnis Anda
bersama Rekan AI!
<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-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 */}
<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
</h3>
{/* 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
</p>
@ -43,61 +42,55 @@ const ContactForm = () => {
<form className="flex flex-col gap-4">
{/* Input Nama */}
<div>
<label className="text-[#6B5CEA] font-bold">
Nama (Tanpa Gelar)*
</label>
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
<input
type="text"
placeholder="Masukkan nama Anda"
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>
{/* Input Nomor Telepon */}
<div>
<label className="text-[#6B5CEA] font-bold">
Nomor Telepon*
</label>
<label className="text-[#6B5CEA]">Nomor Telepon*</label>
<input
type="tel"
placeholder="Masukkan nomor telepon Anda"
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>
{/* Input Email */}
<div>
<label className="text-[#6B5CEA] font-bold">Email*</label>
<label className="text-[#6B5CEA]">Email*</label>
<input
type="email"
placeholder="Masukkan email Anda"
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>
{/* Input Nama Organisasi */}
<div>
<label className="text-[#6B5CEA] font-bold">
<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 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>
{/* Dropdown Pilih Kebutuhan */}
<div>
<label className="text-[#6B5CEA] font-bold">
Pilih Kebutuhan
</label>
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
<select
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="konsultasi">Konsultasi</option>
@ -119,7 +112,7 @@ const ContactForm = () => {
{/* Tombol Kirim */}
<button
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
</button>
@ -130,4 +123,4 @@ const ContactForm = () => {
);
};
export default ContactForm;
export default ContactForm;

4
tailwind.config.js
View File

@ -10,7 +10,9 @@ export default {
theme: {
// Bagian untuk memperluas (extend) tema Tailwind. Anda bisa menambahkan tema atau konfigurasi lain di sini.
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