79 lines
5.0 KiB
PHP
79 lines
5.0 KiB
PHP
<div>
|
|
<section class="px-6 lg:px-32 xl:px-48 py-36 bg-white min-h-screen">
|
|
|
|
<header class="mb-16 text-center">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-home-primary mb-4">Frequently Asked Questions</h1>
|
|
<p class="text-home-foreground/60 text-lg max-w-2xl mx-auto">
|
|
Temukan jawaban cepat untuk pertanyaan umum seputar produk, pengiriman, dan layanan kami.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
|
|
|
|
@foreach ([
|
|
['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.'],
|
|
['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.'],
|
|
['q' => 'Apakah produk original?', 'a' => 'Semua produk 100% original dari distributor resmi dengan sertifikat keaslian dan garansi uang kembali.'],
|
|
['q' => 'Bagaimana kebijakan pengembalian barang?', 'a' => 'Pengembalian dalam 30 hari dengan syarat barang belum digunakan, segel utuh, dan menyertakan video unboxing.'],
|
|
['q' => 'Metode pembayaran apa saja yang tersedia?', 'a' => 'Kami menerima Transfer bank (BCA, Mandiri), Kartu Kredit, E-wallet (GoPay, OVO), dan cicilan 0%.'],
|
|
['q' => 'Bagaimana cara menggunakan voucher?', 'a' => 'Masukkan kode voucher pada halaman checkout di kolom "Kode Promo", diskon akan otomatis terpotong.'],
|
|
] as $index => $faq)
|
|
<article
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
|
|
<button
|
|
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
|
class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none transition-colors"
|
|
:class="activeAccordion === {{ $index }} ? 'bg-home-primary/5' :
|
|
'bg-white hover:bg-home-foreground/5'">
|
|
|
|
<h3 class="text-lg font-bold pr-4 transition-colors"
|
|
:class="activeAccordion === {{ $index }} ? 'text-home-primary' :
|
|
'text-home-foreground group-hover:text-home-primary'">
|
|
{{ $faq['q'] }}
|
|
</h3>
|
|
|
|
<span class="flex-shrink-0 ml-4 p-1 rounded-full transition-all duration-300"
|
|
:class="activeAccordion === {{ $index }} ? 'bg-home-primary text-white rotate-180' :
|
|
'bg-home-foreground/10 text-home-foreground group-hover:bg-home-primary group-hover:text-white'">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<div x-show="activeAccordion === {{ $index }}" x-collapse x-cloak
|
|
class="px-6 pb-6 pt-2 bg-home-primary/5 border-t border-home-primary/10 text-home-foreground/70 leading-relaxed text-sm md:text-base">
|
|
{{ $faq['a'] }}
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div
|
|
class="mt-16 bg-home-primary rounded-2xl p-10 text-center relative overflow-hidden shadow-xl shadow-home-primary/20">
|
|
<div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -mr-12 -mt-12"></div>
|
|
<div class="absolute bottom-0 left-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -ml-8 -mb-8">
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<h3 class="text-2xl font-bold text-white mb-3">Masih ada pertanyaan?</h3>
|
|
<p class="text-white/80 mb-8 max-w-xl mx-auto">Jika Anda tidak menemukan jawaban yang dicari, tim
|
|
customer service kami siap membantu Anda 24/7.</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<button
|
|
class="bg-white text-home-primary font-bold px-8 py-3 rounded-xl hover:bg-home-secondary hover:text-white transition-all shadow-lg">
|
|
Chat WhatsApp
|
|
</button>
|
|
<button
|
|
class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition-all">
|
|
Kirim Email
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|