113 lines
6.5 KiB
PHP
113 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">{{ $pageTitle }}</h1>
|
|
<p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
|
|
{{ $pageDesc }}
|
|
</p>
|
|
|
|
{{-- Search Bar --}}
|
|
<div class="max-w-xl mx-auto relative group">
|
|
<input wire:model.live.debounce.500="search" type="search"
|
|
placeholder="Cari pertanyaan kamu di sini... 🔍✨" 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 text-black font-sans">
|
|
@if (!empty($faqs))
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
|
|
@foreach ($faqs 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['question'] }}
|
|
</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-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 max-h-0" x-transition:enter-end="opacity-100 max-h-96"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 max-h-96" x-transition:leave-end="opacity-0 max-h-0"
|
|
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 overflow-hidden">
|
|
{{ $faq['answer'] }}
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
@include('components.animations.lottie.boxing-cat')
|
|
@endif
|
|
|
|
<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 Belum Ketemu Jawabannya? 🧐</h3>
|
|
<p class="text-white/80 mb-8 max-w-xl mx-auto">
|
|
Jangan khawatir! Tim kami siap bantuin kamu kapan aja, 24/7 lho! 💬👋
|
|
Yuk tanya langsung!
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<!-- WhatsApp -->
|
|
<a href="https://wa.me/{{ formatToWhatsApp($contactSettings->phone_number) }}" target="_blank"
|
|
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 text-center">
|
|
Chat WhatsApp 💬
|
|
</a>
|
|
|
|
<!-- Email -->
|
|
<a href="mailto:{{ $contactSettings->email }}"
|
|
class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition-all text-center">
|
|
Kirim Email 📧
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
@assets
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
|
@endassets
|