146 lines
7.8 KiB
PHP
146 lines
7.8 KiB
PHP
<section class="section-padding {{ $bg }}" id="{{ $content['id'] }}">
|
|
<div class="container-padding">
|
|
@if(isset($content['title']))
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-section-title text-foreground mb-6">
|
|
{{ $content['title'] }}
|
|
</h2>
|
|
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
|
{{ $content['subtitle'] }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid lg:grid-cols-12 gap-16">
|
|
@if ($layout === 'right')
|
|
{{-- Layout Right: Bild zuerst, dann Text --}}
|
|
{{-- Bild --}}
|
|
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-1">
|
|
<div class="relative h-full">
|
|
<div class="sticky top-8">
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-right delay-300">
|
|
@if(isset($content['image']))
|
|
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
|
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
|
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ $content['highlight']['text'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Text --}}
|
|
<div class="space-y-8 col-span-8 order-1 lg:order-2">
|
|
<div class="text-center lg:text-left slide-left delay-400">
|
|
<div
|
|
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
|
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
|
{{ $content['tag'] }}
|
|
</div>
|
|
<h3 class="text-3xl font-light text-foreground mb-6">
|
|
{!! $content['tag_title'] !!}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
@foreach ($content['features'] as $index => $feature)
|
|
<div class="card-elevated p-6 rounded-xl slide-left delay-{{ 500 + ($index * 100) }}">
|
|
<div class="flex gap-4">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
|
@if (isset($feature['icon']))
|
|
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
|
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-semibold text-foreground mb-2">
|
|
{{ $feature['title'] }}
|
|
</h4>
|
|
<p class="text-muted-foreground">
|
|
{{ $feature['description'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- Layout Left (Standard): Text zuerst, dann Bild --}}
|
|
{{-- Text --}}
|
|
<div class="space-y-8 col-span-8 order-1 lg:order-1">
|
|
<div class="text-center lg:text-left slide-right delay-300">
|
|
<div
|
|
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
|
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
|
{{ $content['tag'] }}
|
|
</div>
|
|
<h3 class="text-3xl font-light text-foreground mb-6">
|
|
{!! $content['tag_title'] !!}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
@foreach ($content['features'] as $index => $feature)
|
|
<div class="card-elevated p-6 rounded-xl slide-right delay-{{ 400 + ($index * 100) }}">
|
|
<div class="flex gap-4">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
|
@if (isset($feature['icon']))
|
|
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
|
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-semibold text-foreground mb-2">
|
|
{{ $feature['title'] }}
|
|
</h4>
|
|
<p class="text-muted-foreground">
|
|
{{ $feature['description'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Bild --}}
|
|
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-2">
|
|
<div class="relative h-full">
|
|
<div class="sticky top-8">
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
|
@if(isset($content['image']))
|
|
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
|
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
|
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ $content['highlight']['text'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|