72 lines
3.8 KiB
PHP
72 lines
3.8 KiB
PHP
<section class="section-padding {{ $bg }}">
|
|
<div class="container-padding">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
|
|
@if ($layout === 'right')
|
|
{{-- Layout Right: Image zuerst, dann Content --}}
|
|
{{-- Image --}}
|
|
<div class="relative lg:order-1">
|
|
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
|
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] }}"
|
|
class="w-full h-[500px] object-cover" />
|
|
<div
|
|
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
|
|
{{ $content['image_caption'] }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Content --}}
|
|
<div class="spacing-section lg:order-2">
|
|
<div class="spacing-content slide-right delay-300">
|
|
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
|
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
|
@foreach ($content['paragraphs'] as $paragraph)
|
|
<p>{!! $paragraph !!}</p>
|
|
@endforeach
|
|
</div>
|
|
@if(isset($content['list']))
|
|
<div class="grid grid-cols-1 gap-6 border-t border-border/50 pt-8">
|
|
@foreach ($content['list'] as $index => $item)
|
|
<div class="flex gap-4 slide-up delay-{{ $index * 200 }} mb-4">
|
|
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
|
@svg('heroicon-o-'.$item['icon'], 'w-6 h-6 text-secondary')
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-muted-foreground">{{ $item['title'] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- Layout Left (Standard): Content zuerst, dann Image --}}
|
|
{{-- Content --}}
|
|
<div class="spacing-section">
|
|
<div class="spacing-content slide-right delay-300">
|
|
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
|
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
|
@foreach ($content['paragraphs'] as $paragraph)
|
|
<p>{!! $paragraph !!}</p>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Image --}}
|
|
<div class="relative">
|
|
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
|
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] }}"
|
|
class="w-full h-full object-cover" />
|
|
<div
|
|
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
|
|
{{ $content['image_caption'] }}</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|