revisi4
This commit is contained in:
Carls2320
parent
c428157517
commit
b0c0bdedd1
|
|
@ -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>
|
||||
|
||||
|
|
@ -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]">
|
||||
#Rekan AI
|
||||
</span>
|
||||
<span className="font-semibold ml-1">?</span>
|
||||
<span className="font-semibold ml-1">?</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
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 */}
|
||||
return (
|
||||
<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] h-auto gap-[29px] text-left">
|
||||
{/* Div untuk teks utama dan informasi pendukung */}
|
||||
|
||||
<div className="mb-5">
|
||||
<h2 className="text-[#212121] text-[28px] md:text-[32px] font-[550] 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-[16px] md:text-[18px]">
|
||||
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
|
||||
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>
|
||||
|
||||
<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 */}
|
||||
<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
|
||||
/>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-[#212121]">
|
||||
Kirim pertanyaan Anda ke{" "}
|
||||
<strong className="text-[#5B59E8]">support@rekanai.com</strong>{" "}
|
||||
dan tim kami
|
||||
</p>
|
||||
<p className="text-sm text-[#212121]">akan segera merespons.</p>
|
||||
<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] 2xl:text-[28px] font-[550] leading-[36px] md:leading-[48px] 2xl:leading-[52px]">
|
||||
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-[16px] md:text-[18px] 2xl:text-[18px]">
|
||||
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>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-start gap-6">
|
||||
<img
|
||||
src={email}
|
||||
alt="Email Icon"
|
||||
className="w-10 h-10 object-contain"
|
||||
/>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
Kirim pertanyaan Anda ke{" "}
|
||||
<strong className="text-[#5B59E8]">
|
||||
support@rekanai.com
|
||||
</strong>{" "}
|
||||
dan tim kami
|
||||
</p>
|
||||
<p className="text-sm text-[#212121] 2xl:text-base">
|
||||
akan segera merespons.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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 className="flex items-start gap-4">
|
||||
{/* Kontainer untuk informasi kontak via telepon */}
|
||||
<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
|
||||
/>
|
||||
<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 className="flex-1 flex justify-center items-center">
|
||||
<img
|
||||
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>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerService; // Ekspor komponen agar dapat digunakan di file lain
|
||||
export default CustomerService;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,34 +73,51 @@ 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>
|
||||
|
||||
{/* Input Nama Organisasi */}
|
||||
<div>
|
||||
<label className="text-[#6B5CEA] ">
|
||||
<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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue