64 lines
3.7 KiB
PHP
64 lines
3.7 KiB
PHP
<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 font-sans text-home-foreground overflow-hidden">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
|
|
<figure class="w-full relative order-2 lg:order-1">
|
|
<div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform -rotate-2"></div>
|
|
<img src="https://images.pexels.com/photos/4659793/pexels-photo-4659793.jpeg" alt="Botol Parfum Elegan"
|
|
class="w-full h-[400px] lg:h-[600px] object-cover rounded-2xl shadow-lg">
|
|
</figure>
|
|
|
|
<article class="space-y-8 order-1 lg:order-2" x-data="{ activeAccordion: 0 }">
|
|
|
|
<header>
|
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-foreground leading-tight mb-6">
|
|
Kenapa Harus Kami? 🏆✨
|
|
</h2>
|
|
<p class="text-base md:text-lg text-home-foreground/70 leading-relaxed">
|
|
Tiap tetesnya dibikin spesial buat kamu, biar wangimu tahan lama dan bikin happy sepanjang hari!
|
|
💖✨
|
|
</p>
|
|
</header>
|
|
|
|
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
|
|
@foreach ($perfumeFeatures as $index => $perfumeFeature)
|
|
<div class="border-b border-gray-100 last:border-0">
|
|
<button
|
|
@click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
|
|
class="w-full flex justify-between items-center py-5 text-left group focus:outline-none transition-all duration-300"
|
|
:aria-expanded="activeAccordion === {{ $index }}">
|
|
|
|
<span class="text-lg font-bold transition-colors duration-300"
|
|
:class="activeAccordion === {{ $index }} ? 'text-home-primary' :
|
|
'text-home-foreground group-hover:text-home-primary'">
|
|
{{ $perfumeFeature['name'] }}
|
|
</span>
|
|
|
|
<span
|
|
class="ml-4 flex-shrink-0 transition-transform duration-300 w-8 h-8 flex items-center justify-center rounded-full"
|
|
:class="activeAccordion === {{ $index }} ? 'rotate-180 bg-home-primary text-white' :
|
|
'bg-gray-100 text-gray-400 group-hover:bg-home-primary/10 group-hover:text-home-primary'">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<div x-show="activeAccordion === {{ $index }}" x-collapse x-cloak
|
|
class="overflow-hidden text-home-foreground/70 text-base leading-relaxed">
|
|
<div class="pb-5">
|
|
{{ $perfumeFeature['description'] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|