1aa8f3da42
- memperbaiki custom js - menyimpan menu untuk header di view service dan di foreach - menghapus file yang tidak berguna - membuat halaman outlet
63 lines
3.8 KiB
PHP
63 lines
3.8 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 $index => $faq)
|
|
<article x-data="{ open: null }"
|
|
class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden break-inside-avoid mb-6 shadow-sm">
|
|
|
|
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
|
:aria-expanded="open === {{ $index }}"
|
|
class="w-full px-6 py-5 flex items-center justify-between hover:bg-home-foreground/5 transition-colors">
|
|
|
|
<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 transition-transform duration-300"
|
|
:class="{ 'rotate-180': open === {{ $index }} }" 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 x-show="open === {{ $index }}" x-collapse
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
class="px-6 pb-5 border-t border-home-foreground/10 text-home-foreground/70">
|
|
<p class="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>
|