79 lines
5 KiB
PHP
79 lines
5 KiB
PHP
<section class="section-padding flex items-center relative overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div class="space-y-8">
|
|
<h1 class="text-hero">
|
|
{!! $content['title'] !!}
|
|
</h1>
|
|
|
|
<p class="text-large text-muted-foreground leading-relaxed">
|
|
{{ $content['subtitle'] }}
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
@foreach ($content['features'] as $feature)
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
|
@if ($feature['icon'] === 'users')
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
|
</svg>
|
|
@elseif($feature['icon'] === 'building-2')
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
@elseif($feature['icon'] === 'network')
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
|
|
</svg>
|
|
@else
|
|
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-foreground">{{ $feature['title'] }}</p>
|
|
<p class="text-sm text-muted-foreground">{{ $feature['description'] }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<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-center">
|
|
<div
|
|
class="w-24 h-24 mx-auto rounded-full bg-secondary flex items-center justify-center mb-4">
|
|
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-foreground">{{ $content['hub']['title'] }}</h3>
|
|
<p class="text-sm text-muted-foreground">{{ $content['hub']['subtitle'] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|