84 lines
4.5 KiB
PHP
84 lines
4.5 KiB
PHP
<section class="section-padding flex items-center relative border-b border-border/30">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
{{-- Left Content --}}
|
|
<div class="space-y-8">
|
|
<div class="space-y-6">
|
|
<h1 class="text-hero">
|
|
{!! $content['title'] !!}
|
|
</h1>
|
|
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
|
{!! $content['subtitle'] !!}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
|
|
{{ $content['cta1_text'] }}
|
|
</a>
|
|
<a href="{{ $content['cta2_link'] }}" class="btn-secondary-accent">
|
|
{{ $content['cta2_text'] }}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-8 text-sm text-muted-foreground">
|
|
@foreach ($content['stats'] as $stat)
|
|
<span>{{ $stat }}</span>
|
|
@if (!$loop->last)
|
|
<span>•</span>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Right Image Tiles --}}
|
|
<div class="relative">
|
|
<div class="flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
|
|
{{-- First Column --}}
|
|
<div class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80">
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
|
<img src="{{ theme_image_url($content['tiles'][0]['image']) }}"
|
|
alt="{{ $content['tiles'][0]['alt'] ?? '' }}"
|
|
class="aspect-2/3 w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Second Column --}}
|
|
<div class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
|
<img src="{{ theme_image_url($content['tiles'][1]['image']) }}"
|
|
alt="{{ $content['tiles'][1]['alt'] ?? '' }}"
|
|
class="aspect-2/3 w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
|
<img src="{{ theme_image_url($content['tiles'][2]['image']) }}"
|
|
alt="{{ $content['tiles'][2]['alt'] ?? '' }}"
|
|
class="aspect-2/3 w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Third Column --}}
|
|
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
|
<img src="{{ theme_image_url($content['tiles'][3]['image']) }}"
|
|
alt="{{ $content['tiles'][3]['alt'] ?? '' }}"
|
|
class="aspect-2/3 w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
|
<img src="{{ theme_image_url($content['tiles'][4]['image']) }}"
|
|
alt="{{ $content['tiles'][4]['alt'] ?? '' }}"
|
|
class="aspect-2/3 w-full object-cover" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|