41 lines
1.9 KiB
PHP
41 lines
1.9 KiB
PHP
@props([
|
|
'imagePath' => null,
|
|
'imageAlt' => null,
|
|
'heading' => null,
|
|
'intro' => null,
|
|
'points' => [],
|
|
])
|
|
|
|
@if ($heading || count($points) > 0)
|
|
<section aria-labelledby="audience-heading" class="border-b border-amare-border bg-amare-bg-deep" data-reveal-group>
|
|
<div class="grid min-h-[390px] lg:grid-cols-2">
|
|
<div class="min-h-[300px] bg-amare-bg lg:min-h-0" data-reveal-media data-reveal-from="left">
|
|
@if ($imagePath)
|
|
<x-media.image :path="$imagePath" :alt="$imageAlt ?: $heading" loading="lazy" sizes="(max-width: 1023px) 100vw, 50vw" class="img-editorial h-full w-full object-cover" />
|
|
@endif
|
|
</div>
|
|
<div class="flex items-center bg-amare-bg-deep px-6 py-16 lg:px-[clamp(3rem,6vw,6rem)]">
|
|
<div class="w-full max-w-[430px]" data-reveal data-reveal-from="right">
|
|
@if ($heading)
|
|
<h2 id="audience-heading" class="text-3xl font-medium uppercase tracking-[0.05em]">{{ $heading }}</h2>
|
|
<div class="mt-4 h-px w-12 bg-amare-border" aria-hidden="true"></div>
|
|
@endif
|
|
@if ($intro)
|
|
<p class="mt-6 text-lg text-amare-text-muted">{{ $intro }}</p>
|
|
@endif
|
|
@if (count($points) > 0)
|
|
<ul class="mt-8 space-y-3">
|
|
@foreach ($points as $point)
|
|
<li class="flex items-start gap-3">
|
|
<span aria-hidden="true" class="text-amare-accent">✓</span>
|
|
<span>{{ $point }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|