80 lines
3.4 KiB
JavaScript
80 lines
3.4 KiB
JavaScript
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
|
|
|
|
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 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>
|
|
</div>
|
|
|
|
<p className="text-[#212121] leading-relaxed mb-6 text-left">
|
|
{/* Paragraf penjelasan singkat mengenai layanan yang ditawarkan */}
|
|
Butuh informasi lebih lanjut tentang produk atau solusi kami? <br />{" "}
|
|
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>
|
|
</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>
|
|
</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="max-w-full h-auto" // Styling untuk memastikan gambar berskala dengan baik
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CustomerService; // Ekspor komponen agar dapat digunakan di file lain
|