1aa8f3da42
- memperbaiki custom js - menyimpan menu untuk header di view service dan di foreach - menghapus file yang tidak berguna - membuat halaman outlet
65 lines
3.1 KiB
PHP
65 lines
3.1 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 font-sans text-home-foreground">
|
|
<div class="grid lg:grid-cols-2 gap-12 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">
|
|
</figure>
|
|
<article class="space-y-4">
|
|
<h2 class="text-4xl leading-tight mb-6">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.
|
|
</p>
|
|
|
|
@foreach ($accordions as $index => $acc)
|
|
<div x-data="{ open: null }" class="border-b border-gray-200 pb-4 accordion-item">
|
|
<button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
|
|
class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
|
|
:aria-expanded="open === {{ $index }}">
|
|
<span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
|
|
{{ $acc['title'] }}
|
|
</span>
|
|
|
|
<span class="icon-plus text-xl font-light text-gray-400 transition-transform duration-300"
|
|
:class="{ 'rotate-45': open === {{ $index }} }">
|
|
+
|
|
</span>
|
|
</button>
|
|
<div x-show="open === {{ $index }}" x-collapse
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
class="min-h-0 content overflow-hidden text-gray-700 text-sm leading-relaxed">
|
|
<div class="pt-2 pb-2">
|
|
{{ $acc['content'] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</article>
|
|
</div>
|
|
</section>
|