amnannn
/
rekan_ai
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revisi4

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]"> <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>

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 = () => { 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 untuk teks utama dan informasi pendukung */}
<div className="w-full md:w-[773px] 2xl:w-[900px] h-auto gap-[29px] text-left">
{/* Teks dan informasi */}
<div className="mb-5"> <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{" "} Kami Siap Membantu Bisnis{" "}
<span className="hidden lg:inline"> <span className="hidden lg:inline">
<br /> <br />
@ -17,9 +16,7 @@ const CustomerService = () => {
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]">
<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?{" "} Butuh informasi lebih lanjut tentang produk atau solusi kami?{" "}
<span className="hidden lg:inline"> <span className="hidden lg:inline">
<br /> <br />
@ -27,40 +24,40 @@ const CustomerService = () => {
Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan Tim Rekan AI siap menjawab pertanyaan Anda dengan cepat dan
profesional. profesional.
</p> </p>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-4"> <div className="flex items-start gap-6">
{/* Container untuk menampung daftar kontak dalam format fleksibel */}
<div className="flex items-start gap-4">
{/* Kontainer untuk informasi kontak via email */}
<img <img
src={email} // Menampilkan icon email src={email}
alt="Email Icon" // Teks alternatif untuk gambar email alt="Email Icon"
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar className="w-10 h-10 object-contain"
/> />
<div className="text-left"> <div className="text-left">
<p className="text-sm text-[#212121]"> <p className="text-sm text-[#212121] 2xl:text-base">
Kirim pertanyaan Anda ke{" "} Kirim pertanyaan Anda ke{" "}
<strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "} <strong className="text-[#5B59E8]">
support@rekanai.com
</strong>{" "}
dan tim kami dan tim kami
</p> </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> </div>
<div className="flex items-start gap-6">
<div className="flex items-start gap-4">
{/* Kontainer untuk informasi kontak via telepon */}
<img <img
src={phone} // Menampilkan icon telepon src={phone}
alt="Phone Icon" // Teks alternatif untuk gambar telepon alt="Phone Icon"
className="w-10 h-10 object-contain" // Styling untuk ukuran gambar className="w-10 h-10 object-contain"
/> />
<div className="text-left"> <div className="text-left">
<p className="text-sm text-[#212121]"> <p className="text-sm text-[#212121] 2xl:text-base">
Hubungi kami di{" "} Hubungi kami di{" "}
<strong className="text-[#5B59E8]">(+62) 123-4567-890</strong> <strong className="text-[#5B59E8]">
(+62) 123-4567-890
</strong>
</p> </p>
<p className="text-sm text-[#212121]"> <p className="text-sm text-[#212121] 2xl:text-base">
(Senin - Jumat, 08:00 - 17:00 WIB). (Senin - Jumat, 08:00 - 17:00 WIB).
</p> </p>
</div> </div>
@ -69,15 +66,14 @@ const CustomerService = () => {
</div> </div>
<div className="flex-1 flex justify-center items-center"> <div className="flex-1 flex justify-center items-center">
{/* Div untuk menampilkan gambar ilustrasi customer service */}
<img <img
src={customer} // Menampilkan gambar customer service src={customer}
alt="Customer Service" // Teks alternatif untuk gambar customer service alt="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" 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> </div>
</section> </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>