gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit

Browse source
This commit is contained in:
Kevin Adametz 2025-10-20 17:50:35 +02:00
commit 7cf3558ba7
12933 changed files with 1180047 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

67
resources/views/livewire/web/components/sections/f-a-q.blade.php Normal file
View file

@ -0,0 +1,67 @@
<div x-data="{ openIndex: null }">
<section class="section-padding {{ $bg }}">
<div class="container-padding">
{{-- Section Title --}}
<div class="text-center mb-16">
<h2 class="text-hero mb-6">
{!! $content['title'] !!}
</h2>
@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">
@if(!empty($content['questions']))
<div class="space-y-4">
@foreach($content['questions'] as $index => $faq)
<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>
@else
{{-- Fallback wenn keine FAQ-Daten vorhanden --}}
<div class="text-center py-12">
<p class="text-muted-foreground">Keine FAQ-Inhalte verfügbar.</p>
</div>
@endif
</div>
</div>
</section>
</div>