b2in/resources/views/livewire/web/components/sections/hero.blade.php
2025-10-20 17:50:35 +02:00

53 lines
2.4 KiB
PHP

<section class="section-padding flex items-center relative">
<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 --}}
<div class="relative">
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
<img src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
class="w-full h-[600px] object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
</div>
{{-- Floating info card --}}
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
<div class="text-sm text-muted-foreground">{{ $content['card_title'] }}</div>
<div class="text-2xl font-medium">{!! $content['card_text'] !!}
</div>
</div>
</div>
</div>
</div>
</section>