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

4
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]"> <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-[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 Masih punya pertanyaan seputar
</h3> </h3>
@ -14,7 +14,7 @@ const BottomCTA = () => {
<span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 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> <span className="font-semibold ml-1">?</span>
</h3> </h3>
</div> </div>

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

@ -1,83 +1,79 @@
import { email,phone,customer } from "../asset"; // Import gambar icon untuk email,telepon,customer service import { email, phone, customer } from "../asset";
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="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 dengan styling responsif untuk menampung konten customer service */} {/* Container utama */}
<div className="w-full md:w-[773px] h-auto gap-[29px] text-left"> <div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
{/* Div untuk teks utama dan informasi pendukung */} {/* Teks dan informasi */}
<div className="mb-5">
<div className="mb-5"> <h2 className="text-[#212121] text-[28px] md:text-[32px] 2xl:text-[28px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] text-lg leading-[36px] md:leading-[48px]"> Kami Siap Membantu Bisnis{" "}
Kami Siap Membantu Bisnis{" "} <span className="hidden lg:inline">
<span className="hidden lg:inline"> <br />
<br /> </span>{" "}
</span>{" "} Anda Lebih Maju!
Anda Lebih Maju! </h2>
</h2> </div>
</div> <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?{" "}
<p className="text-[#212121] leading-relaxed mb-6 text-[16px] md:text-[18px]"> <span className="hidden lg:inline">
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */} <br />
Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "} </span>{" "}
<span className="hidden lg:inline"> Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
<br /> profesional.
</span>{" "} </p>
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan <div className="flex flex-col gap-6">
profesional. <div className="flex items-start gap-6">
</p> <img
src={email}
<div className="flex flex-col gap-4"> alt="Email Icon"
{/* Container untuk menampung daftar kontak dalam format fleksibel */} className="w-10 h-10 object-contain"
/>
<div className="flex items-start gap-4"> <div className="text-left">
{/* Kontainer untuk informasi kontak via email */} <p className="text-sm text-[#212121] 2xl:text-base">
<img Kirim pertanyaan Anda ke{" "}
src={email} // Menampilkan icon email <strong className="text-[#5B59E8]">
alt="Email Icon" // Teks alternatif untuk gambar email support@rekanai.com
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar </strong>{" "}
/> dan tim kami
<div className="text-left"> </p>
<p className="text-sm text-[#212121]"> <p className="text-sm text-[#212121] 2xl:text-base">
Kirim pertanyaan Anda ke{" "} akan segera merespons.
<strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "} </p>
dan tim kami </div>
</p> </div>
<p className="text-sm text-[#212121]">akan segera merespons.</p> <div className="flex items-start gap-6">
<img
src={phone}
alt="Phone Icon"
className="w-10 h-10 object-contain"
/>
<div className="text-left">
<p className="text-sm text-[#212121] 2xl:text-base">
Hubungi kami di{" "}
<strong className="text-[#5B59E8]">
(+62) 123-4567-890
</strong>
</p>
<p className="text-sm text-[#212121] 2xl:text-base">
(Senin - Jumat, 08:00 - 17:00 WIB).
</p>
</div>
</div>
</div>
</div> </div>
</div>
<div className="flex items-start gap-4"> <div className="flex-1 flex justify-center items-center">
{/* Kontainer untuk informasi kontak via telepon */} <img
<img src={customer}
src={phone} // Menampilkan icon telepon alt="Customer Service"
alt="Phone Icon" // Teks alternatif untuk gambar telepon 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"
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar />
/>
<div className="text-left">
<p className="text-sm text-[#212121]">
Hubungi kami di{" "}
<strong className="text-[#5B59E8]">(+62) 123-4567-890</strong>
</p>
<p className="text-sm text-[#212121]">
(Senin - Jumat, 08:00 - 17:00 WIB).
</p>
</div> </div>
</div> </section>
</div> );
</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"
/>
</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?", question: "Apa saja produk yang ditawarkan oleh Rekan AI?",
answer: ( answer: (
<div> <div>
<p>Kami menawarkan beberapa produk unggulan, termasuk:</p> <p className="mb-1">Kami menawarkan beberapa produk unggulan, termasuk:</p>
<ul className="list-disc list-inside"> <ul className="list-decimal list-inside space-y-1">
<li> <li>
Rekan Doku: Solusi autentikasi dan manajemen dokumen digital. Rekan Doku: Solusi autentikasi dan manajemen dokumen digital.
</li> </li>
@ -49,8 +49,8 @@ const FAQ = () => {
question: "Bagaimana cara menghubungi tim Rekan AI?", question: "Bagaimana cara menghubungi tim Rekan AI?",
answer: ( answer: (
<div> <div>
<p>Anda dapat menghubungi kami melalui:</p> <p className="mb-1">Anda dapat menghubungi kami melalui:</p>
<ul className="list-disc list-inside"> <ul className="list-decimal list-inside space-y-1">
<li>Email: support@rekanai.com</li> <li>Email: support@rekanai.com</li>
<li>Telepon: (+62) 123-4567-890</li> <li>Telepon: (+62) 123-4567-890</li>
<li>WhatsApp: (+62) 812-3456-7890</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 "> <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-[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 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">
@ -123,27 +123,27 @@ const FAQ = () => {
</div> </div>
{/* Bagian FAQ */} {/* Bagian FAQ */}
<div className="space-y-4 mb-[110px] mt-[60px] "> <div className="space-y-[22px] mb-[110px] mt-[60px]">
{faqData.map((item, index) => ( {faqData.map((item, index) => (
<div <div
key={index} 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 */} {/* Bagian untuk menampilkan pertanyaan dan tanda buka/tutup */}
<div <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 // 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-[550]">{item.question}</span>
<span className="text-[39px] text-[#845FF1] mr-4">{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-[16px] text-left bg-white text-sm"> <div className="p-4 text-[16px] ml-4 text-left bg-white text-sm">
{item.answer} {item.answer}
</div> </div>
)} )}

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

@ -1,5 +1,5 @@
// Import gambar-gambar yang digunakan dalam komponen Footer // 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() { function Footer() {
return ( return (
@ -26,7 +26,7 @@ function Footer() {
</span> </span>
</p> </p>
</div> </div>
<p className="mb-4 text-[18px]"> <p className="mb-[39px] 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>

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

@ -3,43 +3,43 @@ import { img10 } from "../asset";
const ContactForm = () => { const ContactForm = () => {
return ( return (
<div <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={{ style={{
background: `linear-gradient(45deg, #DC016866 5%, rgba(91, 89, 232, 1) 100%), url(${img10})`, background: `linear-gradient(45deg, #DC016866 15%, rgba(91, 89, 232, 1),rgba(91, 89, 232, 1)), url(${img10})`,
backgroundSize: "100% auto", // Memastikan gambar mengisi seluruh elemen backgroundSize: "cover",
backgroundPosition: "center", // Menempatkan gambar di tengah backgroundPosition: "center",
backgroundRepeat: "no-repeat", // Menghindari gambar terulang 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 */} {/* 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 */} {/* 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 Isi formulir di samping ini dan kami akan menghubungi Anda secepat
mungkin mungkin
</h2> </h2>
{/* Deskripsi tambahan */} {/* 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 Kami percaya bahwa kolaborasi adalah kunci kesuksesan. Hubungi kami
hari ini, dan mari wujudkan masa depan bisnis Anda bersama Rekan AI! hari ini, dan mari wujudkan masa depan bisnis Anda 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-[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 */} {/* 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 Hubungi Tim Terbaik Kami
</h3> </h3>
{/* Deskripsi form */} {/* 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 Silakan isi data diri Anda pada formulir di bawah ini
</p> </p>
{/* Formulir input */} {/* Formulir input */}
<form className="flex flex-col gap-4"> <form className="flex flex-col gap-4 px-2">
{/* Input Nama */} {/* Input Nama */}
<div> <div>
<label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label> <label className="text-[#6B5CEA]">Nama (Tanpa Gelar)*</label>
@ -47,7 +47,7 @@ const ContactForm = () => {
type="text" type="text"
placeholder="Masukkan nama Anda" placeholder="Masukkan nama Anda"
required 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> </div>
@ -58,7 +58,11 @@ const ContactForm = () => {
type="tel" type="tel"
placeholder="Masukkan nomor telepon Anda" placeholder="Masukkan nomor telepon Anda"
required 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> </div>
@ -69,34 +73,51 @@ const ContactForm = () => {
type="email" type="email"
placeholder="Masukkan email Anda" placeholder="Masukkan email Anda"
required 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> </div>
{/* Input Nama Organisasi */} {/* Input Nama Organisasi */}
<div> <div>
<label className="text-[#6B5CEA] "> <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 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> </div>
{/* Dropdown Pilih Kebutuhan */} {/* Dropdown Pilih Kebutuhan */}
<div> <div className="relative">
<label className="text-[#6B5CEA]">Pilih Kebutuhan</label> <label className="text-[#6B5CEA]">Pilih Kebutuhan</label>
<select <select
required 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="">Pilih kebutuhan Anda</option>
<option value="konsultasi">Konsultasi</option> <option value="konsultasi">Konsultasi</option>
<option value="pelatihan">Pelatihan</option> <option value="pelatihan">Pelatihan</option>
<option value="pengembangan">Pengembangan</option> <option value="pengembangan">Pengembangan</option>
</select> </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> </div>
{/* Checkbox Verifikasi */} {/* Checkbox Verifikasi */}
@ -112,7 +133,7 @@ const ContactForm = () => {
{/* Tombol Kirim */} {/* Tombol Kirim */}
<button <button
type="submit" 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 Kirim Pesan
</button> </button>