128 lines
8.2 KiB
PHP
128 lines
8.2 KiB
PHP
@php($faqCounter = 0)
|
|
<div x-data="{ openIndex: null }">
|
|
<section class="section-padding {{ $bg }}">
|
|
<div class="container-padding">
|
|
{{-- Section Title --}}
|
|
<div class="text-center mb-16">
|
|
<h1 class="text-hero mb-6">
|
|
{!! $content['title'] !!}
|
|
</h1>
|
|
@if(!empty($content['subtitle']))
|
|
<p class="text-large text-muted-foreground max-w-2xl mx-auto">
|
|
{!! $content['subtitle'] !!}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- FAQ Container --}}
|
|
<div class="max-w-4xl mx-auto space-y-12">
|
|
{{-- Allgemeine Fragen (ungrouped) --}}
|
|
@if(!empty($content['questions']))
|
|
<div class="space-y-4">
|
|
@foreach($content['questions'] as $faq)
|
|
@php($index = $faqCounter++)
|
|
<div class="card-elevated rounded-xl overflow-hidden">
|
|
<dt>
|
|
<button
|
|
@click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
|
|
class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
|
|
:aria-expanded="openIndex === {{ $index }}"
|
|
>
|
|
<span class="text-lg font-medium text-foreground pr-6">
|
|
{{ $faq['question'] }}
|
|
</span>
|
|
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
|
|
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
|
|
<svg class="w-5 h-5 transition-transform duration-200"
|
|
:class="openIndex === {{ $index }} ? 'rotate-180' : ''"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</dt>
|
|
<dd x-show="openIndex === {{ $index }}"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
|
class="px-6 pb-6">
|
|
<div class="border-t border-border pt-4">
|
|
<p class="text-muted-foreground leading-relaxed">
|
|
{{ $faq['answer'] }}
|
|
</p>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Gruppierte Sektionen --}}
|
|
@if(!empty($content['sections']))
|
|
@foreach($content['sections'] as $section)
|
|
<div>
|
|
{{-- Sektions-Header --}}
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-secondary/10 text-secondary shrink-0">
|
|
@svg('heroicon-o-' . ($section['icon'] ?? 'question-mark-circle'), 'w-5 h-5')
|
|
</div>
|
|
<h2 class="text-lg font-semibold text-foreground">{{ $section['title'] }}</h2>
|
|
<div class="flex-1 h-px bg-border"></div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
@foreach($section['questions'] as $faq)
|
|
@php($index = $faqCounter++)
|
|
<div class="card-elevated rounded-xl overflow-hidden">
|
|
<dt>
|
|
<button
|
|
@click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
|
|
class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
|
|
:aria-expanded="openIndex === {{ $index }}"
|
|
>
|
|
<span class="text-lg font-medium text-foreground pr-6">
|
|
{{ $faq['question'] }}
|
|
</span>
|
|
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
|
|
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
|
|
<svg class="w-5 h-5 transition-transform duration-200"
|
|
:class="openIndex === {{ $index }} ? 'rotate-180' : ''"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</dt>
|
|
<dd x-show="openIndex === {{ $index }}"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
|
class="px-6 pb-6">
|
|
<div class="border-t border-border pt-4">
|
|
<p class="text-muted-foreground leading-relaxed">
|
|
{{ $faq['answer'] }}
|
|
</p>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
|
|
@if(empty($content['questions']) && empty($content['sections']))
|
|
<div class="text-center py-12">
|
|
<p class="text-muted-foreground">Keine FAQ-Inhalte verfügbar.</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|