91 lines
5.1 KiB
PHP
91 lines
5.1 KiB
PHP
<div>
|
|
<section class="px-6 md:px-12 lg:px-24 py-28 md:py-36 bg-white min-h-screen">
|
|
<header class="mb-12 text-center md:text-left">
|
|
<h1 class="text-4xl font-bold text-home-foreground mb-2">Frequently Asked Questions</h1>
|
|
<p class="text-home-foreground/60 text-lg">
|
|
Temukan jawaban untuk pertanyaan umum Anda tentang produk dan layanan kami
|
|
</p>
|
|
</header>
|
|
|
|
<div class="columns-1 lg:columns-2 gap-6 space-y-6 lg:space-y-0">
|
|
@foreach ([
|
|
['id' => 1, 'q' => 'Bagaimana cara melakukan pemesanan?', 'a' => 'Anda dapat melakukan pemesanan melalui website atau aplikasi kami. Pilih produk yang diinginkan, masukkan ke keranjang, dan ikuti langkah checkout.'],
|
|
['id' => 2, 'q' => 'Berapa lama waktu pengiriman?', 'a' => 'Pengiriman untuk area Jakarta 1-2 hari kerja dan luar Jakarta 3-5 hari kerja tergantung ekspedisi yang dipilih.'],
|
|
['id' => 3, 'q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
|
['id' => 4, 'q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
|
['id' => 5, 'q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
|
['id' => 6, 'q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
|
] as $faq)
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm">
|
|
<button
|
|
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors accordion-trigger"
|
|
data-accordion="{{ $faq['id'] }}" aria-expanded="false"
|
|
aria-controls="faq-content-{{ $faq['id'] }}">
|
|
|
|
<h3 class="text-lg font-bold text-home-foreground text-left pr-4">
|
|
{{ $faq['q'] }}
|
|
</h3>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="w-6 h-6 text-home-foreground accordion-icon transition-transform duration-300 flex-shrink-0"
|
|
fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div id="faq-content-{{ $faq['id'] }}"
|
|
class="accordion-content hidden px-6 py-5 border-t border-home-foreground/10"
|
|
data-content="{{ $faq['id'] }}">
|
|
<p class="text-home-foreground/70 leading-relaxed">{{ $faq['a'] }}</p>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-10 bg-home-foreground/5 rounded-2xl border border-home-foreground/10 p-8 text-center">
|
|
<h3 class="text-2xl font-bold text-home-foreground mb-2">Masih ada pertanyaan?</h3>
|
|
<p class="text-home-foreground/60 mb-6">Tim customer service kami siap membantu Anda 24/7</p>
|
|
<button
|
|
class="bg-home-foreground text-white font-bold px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
|
|
Hubungi Kami
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll('.accordion-trigger').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const id = btn.dataset.accordion;
|
|
const content = document.querySelector(`[data-content="${id}"]`);
|
|
const icon = btn.querySelector('.accordion-icon');
|
|
|
|
document.querySelectorAll('.accordion-content').forEach(el => {
|
|
if (el.dataset.content !== id) {
|
|
el.classList.add('hidden');
|
|
const otherBtn = document.querySelector(
|
|
`[data-accordion="${el.dataset.content}"]`);
|
|
if (otherBtn) {
|
|
otherBtn.setAttribute('aria-expanded', 'false');
|
|
otherBtn.querySelector('.accordion-icon').style.transform =
|
|
'rotate(0deg)';
|
|
}
|
|
}
|
|
});
|
|
|
|
content.classList.toggle('hidden');
|
|
|
|
if (content.classList.contains('hidden')) {
|
|
icon.style.transform = 'rotate(0deg)';
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
} else {
|
|
icon.style.transform = 'rotate(180deg)';
|
|
btn.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|