103 lines
6.5 KiB
PHP
103 lines
6.5 KiB
PHP
<div>
|
|
{{-- Hero Section --}}
|
|
<section class="relative h-[500px] flex items-center justify-center overflow-hidden">
|
|
{{-- Background Image --}}
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.pexels.com/photos/2789781/pexels-photo-2789781.jpeg" alt="Perfume Background"
|
|
class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
</div>
|
|
|
|
{{-- Content --}}
|
|
<div class="relative z-10 container mx-auto px-6 text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">Artikel Terbaru</h1>
|
|
<p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
|
|
Baca tips profesional seputar perawatan wewangian, tren lifestyle, dan rekomendasi terbaik.
|
|
</p>
|
|
|
|
{{-- Search Bar --}}
|
|
<div class="max-w-xl mx-auto relative group">
|
|
<input type="search" placeholder="Cari artikel menarik..." aria-label="Cari artikel"
|
|
class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
|
|
<button
|
|
class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main class="px-6 lg:px-32 xl:px-48 py-24 bg-white min-h-screen font-sans">
|
|
|
|
<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>
|