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

revisi4

Browse Source
This commit is contained in:
Carls2320 2025-01-24 09:02:33 +07:00
parent c428157517
commit b0c0bdedd1
5 changed files with 127 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ 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-[600] leading-[48px] tracking-[0.005em]">
<h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
Masih punya pertanyaan seputar
</h3>

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

@ -1,15 +1,14 @@
import { email,phone,customer } from "../asset"; // Import gambar icon untuk email,telepon,customer service
import { email, phone, customer } from "../asset";
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="w-full md:w-[773px] h-auto gap-[29px] text-left">
{/* Div untuk teks utama dan informasi pendukung */}
<section className="main-container mt-[180px] md:mt-[115px] 2xl:mt-[45px] flex flex-col md:flex-row justify-between items-center px-5 py-10 max-w-7xl mx-auto gap-10 mb-[114px] 2xl:px-20 2xl:gap-20">
{/* Container utama */}
<div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
{/* Teks dan informasi */}
<div className="mb-5">
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] text-lg leading-[36px] md:leading-[48px]">
<h2 className="text-[#212121] text-[28px] md:text-[32px] 2xl:text-[28px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
Kami Siap Membantu Bisnis{" "}
<span className="hidden lg:inline">
<br />
@ -17,9 +16,7 @@ const CustomerService = () => {
Anda Lebih Maju!
</h2>
</div>
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]">
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px] 2xl:text-[18px]">
Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
<span className="hidden lg:inline">
<br />
@ -27,40 +24,40 @@ const CustomerService = () => {
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
profesional.
</p>
<div className="flex flex-col gap-4">
{/* Container untuk menampung daftar kontak dalam format fleksibel */}
<div className="flex items-start gap-4">
{/* Kontainer untuk informasi kontak via email */}
<div className="flex flex-col gap-6">
<div className="flex items-start gap-6">
<img
src={email} // Menampilkan icon email
alt="Email Icon" // Teks alternatif untuk gambar email
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
src={email}
alt="Email Icon"
className="w-10 h-10 object-contain"
/>
<div className="text-left">
<p className="text-sm text-[#212121]">
<p className="text-sm text-[#212121] 2xl:text-base">
Kirim pertanyaan Anda ke{" "}
<strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "}
<strong className="text-[#5B59E8]">
support@rekanai.com
</strong>{" "}
dan tim kami
</p>
<p className="text-sm text-[#212121]">akan segera merespons.</p>
<p className="text-sm text-[#212121] 2xl:text-base">
akan segera merespons.
</p>
</div>
</div>
<div className="flex items-start gap-4">
{/* Kontainer untuk informasi kontak via telepon */}
<div className="flex items-start gap-6">
<img
src={phone} // Menampilkan icon telepon
alt="Phone Icon" // Teks alternatif untuk gambar telepon
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar
src={phone}
alt="Phone Icon"
className="w-10 h-10 object-contain"
/>
<div className="text-left">
<p className="text-sm text-[#212121]">
<p className="text-sm text-[#212121] 2xl:text-base">
Hubungi kami di{" "}
<strong className="text-[#5B59E8]">(+62) 123-4567-890</strong>
<strong className="text-[#5B59E8]">
(+62) 123-4567-890
</strong>
</p>
<p className="text-sm text-[#212121]">
<p className="text-sm text-[#212121] 2xl:text-base">
(Senin - Jumat, 08:00 - 17:00 WIB).
</p>
</div>
@ -69,15 +66,14 @@ const CustomerService = () => {
</div>
<div className="flex-1 flex justify-center items-center">
{/* Div untuk menampilkan gambar ilustrasi customer service */}
<img
src={customer} // Menampilkan gambar customer service
alt="Customer Service" // Teks alternatif untuk gambar customer service
className="w-full md:w-[400px] lg:w-[500px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
src={customer}
alt="Customer Service"
className="w-full md:w-[400px] lg:w-[500px] 2xl:w-[600px] max-w-xs sm:max-w-sm md:max-w-md h-auto object-contain"
/>
</div>
</section>
);
};
export default CustomerService; // Ekspor komponen agar dapat digunakan di file lain
export default CustomerService;

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

@ -30,8 +30,8 @@ const FAQ = () => {
question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
answer: (
<div>
<p>Kami menawarkan beberapa produk unggulan, termasuk:</p>
<ul className="list-disc list-inside">
<p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
<ul className="list-decimal list-inside space-y-1">
<li>
Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
</li>
@ -49,8 +49,8 @@ const FAQ = () => {
question: "Bagaimana cara menghubungi tim Rekan AI?",
answer: (
<div>
<p>Anda dapat menghubungi kami melalui:</p>
<ul className="list-disc list-inside">
<p className="mb-1">Anda dapat menghubungi kami melalui:</p>
<ul className="list-decimal list-inside space-y-1">
<li>Email: support@rekanai.com</li>
<li>Telepon: (+62) 123-4567-890</li>
<li>WhatsApp: (+62) 812-3456-7890</li>
@ -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-[550] leading-[48px] tracking-[0.005em] text-center mb-4">
<h1 className="text-[32px] font-[505] 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">
@ -123,27 +123,27 @@ const FAQ = () => {
</div>
{/* Bagian FAQ */}
<div className="space-y-4 mb-[110px] mt-[60px] ">
<div className="space-y-[22px] mb-[110px] mt-[60px]">
{faqData.map((item, index) => (
<div
key={index}
className="text-[20px] border border-[#5B59E8] rounded-lg overflow-hidden mb-[22px]"
className="text-[20px] border border-[#5B59E8] p-[5px] rounded-[12px] overflow-hidden "
>
{/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
<div
className={`flex justify-between items-center p-4 cursor-pointer bg-white ml-4 ${
className={`flex justify-between items-center 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 className="font-[550]">{item.question}</span>
<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-[16px] text-left bg-white text-sm">
<div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
{item.answer}
</div>
)}

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

@ -1,5 +1,5 @@
// Import gambar-gambar yang digunakan dalam komponen Footer
import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "../asset"; // Gambar logo NVIDIA sebagai partner
import { nvidia,kmn,kominfo,ojk,facebook,x,instagram,component11 } from "../asset"; // Gambar logo sebagai partner dan logo medsos dan logo rekanai
function Footer() {
return (
@ -26,7 +26,7 @@ function Footer() {
</span>
</p>
</div>
<p className="mb-4 text-[18px]">
<p className="mb-[39px] text-[18px]">
Jl. Anggrek No.6, Sawah Lama, Kec. Ciputat, Kota Tangerang Selatan,
Banten 15413
</p>

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

@ -3,43 +3,43 @@ 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]"
className="flex min-h-screen items-center justify-center p-5 text-white 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
background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
>
<div className="flex flex-col lg:flex-row items-start w-full max-w-6xl mt-[-40px] 2xl:max-w-7xl 2xl:px-20">
<div className="flex flex-col lg:flex-row items-start w-full max-w-[90%] 2xl:max-w-[100%] 2xl:max-h-[100%] sm:mt-[79px] sm:mb-[79px] 2xl:mt-[-125px] 2xl:px-10">
{/* 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-0 sm mt-20 2xl:mt-28">
{/* Judul utama */}
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px]">
<h2 className="text-[32px] font-[550] leading-[48px] tracking-[0.005em] text-left mb-[39px] 2xl:text-[36px] 2xl:leading-[52px]">
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]">
<p className="text-[18px] font-[400] leading-[30px] tracking-[0.005em] text-left mb-6 2xl:text-[20px] 2xl:leading-[34px]">
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">
<div className="flex-1 bg-white text-[#212121] rounded-[25px] 2xl:mt-[100px] p-[40px] border-[8px] border-[#F086A4] w-full 2xl:px-[60px] 2xl:py-[50px]">
{/* Judul form */}
<h3 className="text-xl font-bold mb-4 text-[#212121] 2xl:text-2xl">
<h3 className="text-[32px] font-[550] mb-4 text-[#212121] 2xl:text-[28px] 2xl:mb-6">
Hubungi Tim Terbaik Kami
</h3>
{/* Deskripsi form */}
<p className="mb-6 text-[#212121] 2xl:text-lg">
<p className="mb-6 text-[#212121] 2xl:text-[18px]">
Silakan isi data diri Anda pada formulir di bawah ini
</p>
{/* Formulir input */}
<form className="flex flex-col gap-4">
<form className="flex flex-col gap-4 px-2">
{/* Input Nama */}
<div>
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
@ -47,7 +47,7 @@ const ContactForm = () => {
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"
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
</div>
@ -58,7 +58,11 @@ const ContactForm = () => {
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"
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
pattern="[0-9]*"
onInput={(e) => {
e.target.value = e.target.value.replace(/[^0-9]/g, "");
}}
/>
</div>
@ -69,7 +73,7 @@ const ContactForm = () => {
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"
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
</div>
@ -81,22 +85,39 @@ const ContactForm = () => {
<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"
className="w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
/>
</div>
{/* Dropdown Pilih Kebutuhan */}
<div>
<div className="relative">
<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"
className="appearance-none w-full mt-1 p-4 border border-[#5B59E8] rounded-lg focus:ring-2 focus:ring-[#5B59E8] 2xl:p-5"
>
<option value="">Pilih kebutuhan Anda</option>
<option value="konsultasi">Konsultasi</option>
<option value="pelatihan">Pelatihan</option>
<option value="pengembangan">Pengembangan</option>
</select>
{/* Tanda panah kustom */}
<div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
<svg
className="w-6 text-[#5B59E8]"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
</div>
{/* Checkbox Verifikasi */}
@ -112,7 +133,7 @@ const ContactForm = () => {
{/* 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"
className="bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-6 rounded-lg shadow-md transition-all w-[173px] 2xl:w-[200px] 2xl:py-4"
>
Kirim Pesan
</button>