85 lines
4.6 KiB
PHP
85 lines
4.6 KiB
PHP
@php
|
|
$accordions = [
|
|
[
|
|
'title' => 'Aroma Premium Tahan Lama',
|
|
'content' =>
|
|
'Setiap varian dirancang menggunakan konsentrat berkualitas tinggi sehingga wanginya bertahan sepanjang hari, cocok dipakai kerja maupun aktivitas luar.',
|
|
],
|
|
[
|
|
'title' => 'Formula Aman untuk Kulit',
|
|
'content' =>
|
|
'Parfum kami menggunakan bahan yang lebih lembut di kulit sehingga nyaman digunakan setiap hari tanpa rasa perih atau iritasi.',
|
|
],
|
|
[
|
|
'title' => 'Pilihan Aroma Sangat Beragam',
|
|
'content' =>
|
|
'Mulai dari floral, fresh, woody, oriental hingga parfum harian — semua tersedia untuk menyesuaikan gaya dan kepribadianmu.',
|
|
],
|
|
[
|
|
'title' => 'Harga Terjangkau Kualitas Premium',
|
|
'content' =>
|
|
'Nikmati parfum berkelas tanpa perlu mengeluarkan biaya tinggi. Value terbaik untuk kebutuhan harian maupun koleksi pribadi.',
|
|
],
|
|
];
|
|
@endphp
|
|
|
|
<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.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
|
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">
|
|
Keunggulan Produk Kami.
|
|
</h2>
|
|
<p class="text-base md:text-lg text-home-foreground/70 leading-relaxed">
|
|
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik dan pengalaman wangi yang tak terlupakan.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
|
|
@foreach ($accordions as $index => $acc)
|
|
<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'">
|
|
{{ $acc['title'] }}
|
|
</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">
|
|
{{ $acc['content'] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section> |