97 lines
4.4 KiB
PHP
97 lines
4.4 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-20 px-6 lg:px-48 relative overflow-hidden font-sans text-home-foreground">
|
|
<div class="absolute top-24 left-[40%] w-4 h-4 bg-gray-200 rounded-full opacity-50"></div>
|
|
<div class="absolute top-32 left-[30%] w-2 h-2 bg-orange-200 rounded-full opacity-50"></div>
|
|
<div class="absolute bottom-10 right-[20%] w-2 h-2 bg-red-200 rounded-full opacity-50"></div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 mb-20 items-start">
|
|
<figure class="w-full">
|
|
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
|
|
class="w-full h-[500px] object-cover rounded-2xl shadow" alt="Parfum Premium">
|
|
</figure>
|
|
|
|
<article class="space-y-4 mt-4 lg:mt-0">
|
|
<h2 class="text-4xl leading-tight mb-6 text-home-foreground">
|
|
Keunggulan Produk Kami.
|
|
</h2>
|
|
<p class="text-gray-700 mb-8 max-w-3xl leading-relaxed">
|
|
Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik.
|
|
Dan kalau kamu ingin pengalaman yang lebih eksklusif, ada paket membership yang bikin kamu jauh lebih
|
|
hemat dan leluasa mencoba banyak aroma.
|
|
</p>
|
|
|
|
@foreach ($accordions as $acc)
|
|
<div class="border-b border-gray-200 pb-4 accordion-item">
|
|
<button class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
|
|
onclick="toggleAccordion(this)" aria-expanded="false">
|
|
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
|
|
{{ $acc['title'] }}
|
|
</span>
|
|
<span
|
|
class="text-xl font-light text-gray-400 transition-transform duration-300 icon-plus">+</span>
|
|
</button>
|
|
<div
|
|
class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out content text-gray-700 text-sm leading-relaxed">
|
|
<div class="pt-2 pb-2">{{ $acc['content'] }}</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function toggleAccordion(button) {
|
|
const content = button.nextElementSibling;
|
|
const icon = button.querySelector('.icon-plus');
|
|
|
|
document.querySelectorAll('.accordion-item').forEach(item => {
|
|
const otherBtn = item.querySelector('button');
|
|
const otherContent = item.querySelector('.content');
|
|
const otherIcon = item.querySelector('.icon-plus');
|
|
|
|
if (otherBtn !== button) {
|
|
otherContent.style.maxHeight = null;
|
|
otherIcon.textContent = '+';
|
|
otherIcon.style.transform = 'rotate(0deg)';
|
|
otherBtn.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
|
|
if (content.style.maxHeight) {
|
|
content.style.maxHeight = null;
|
|
icon.textContent = '+';
|
|
icon.style.transform = 'rotate(0deg)';
|
|
button.setAttribute('aria-expanded', 'false');
|
|
} else {
|
|
content.style.maxHeight = content.scrollHeight + 'px';
|
|
icon.style.transform = 'rotate(45deg)';
|
|
button.setAttribute('aria-expanded', 'true');
|
|
}
|
|
}
|
|
</script>
|