36 lines
2 KiB
PHP
36 lines
2 KiB
PHP
{{-- Expects: $faqs (array of ['q' => ..., 'a' => ...]), optional $faqTitle / $faqSubtitle --}}
|
|
<section class="mx-auto max-w-3xl px-4 py-20 sm:px-6 sm:py-24" aria-label="{{ __('Veelgestelde vragen') }}">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
|
|
{{ $faqTitle ?? __('Veelgestelde vragen') }}
|
|
</h2>
|
|
<p class="mt-4 text-lg text-slate-500 dark:text-slate-400">
|
|
{{ $faqSubtitle ?? __('Staat je vraag er niet tussen? Mail ons via support@certified.eu.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-12 divide-y divide-slate-200 rounded-2xl border border-slate-200 bg-white shadow-sm dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
|
|
@foreach ($faqs as $faq)
|
|
<div x-data="{ expanded: false }">
|
|
<button
|
|
type="button"
|
|
@click="expanded = !expanded"
|
|
:aria-expanded="expanded"
|
|
class="flex w-full items-center justify-between gap-4 px-6 py-5 text-left transition-colors duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50"
|
|
>
|
|
<span class="text-base font-semibold text-slate-900 dark:text-white">{{ $faq['q'] }}</span>
|
|
<svg
|
|
class="size-5 shrink-0 text-emerald-600 transition-transform duration-300 dark:text-emerald-400"
|
|
:class="expanded && 'rotate-180'"
|
|
fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<div x-show="expanded" x-collapse x-cloak>
|
|
<p class="px-6 pb-5 text-base leading-relaxed text-slate-600 dark:text-slate-400">{{ $faq['a'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|