51 lines
2.6 KiB
PHP
51 lines
2.6 KiB
PHP
@props([
|
|
'eyebrow' => '02 — Duas vertentes, uma mesma forma de cuidar',
|
|
'heading' => 'Como podemos acompanhar você?',
|
|
'cards' => [
|
|
[
|
|
'label' => 'Amare Casamentos',
|
|
'title' => 'Planejamento e condução para viver o processo com mais leveza.',
|
|
'body' => 'Do início da organização à reta final, modalidades pensadas para diferentes momentos do casal.',
|
|
'href' => '#casamentos',
|
|
'cta' => 'Conhecer casamentos',
|
|
],
|
|
[
|
|
'label' => 'Amare Corporate',
|
|
'title' => 'Eventos empresariais com organização, intenção e execução segura.',
|
|
'body' => 'Uma frente própria para projetos corporativos, com linguagem e necessidades diferentes das celebrações sociais.',
|
|
'href' => '#corporate',
|
|
'cta' => 'Conhecer Corporate',
|
|
],
|
|
],
|
|
])
|
|
|
|
<section
|
|
aria-labelledby="vertentes-heading"
|
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
|
data-chapter="vertentes"
|
|
id="vertentes"
|
|
>
|
|
<div class="container-amare py-16 md:py-24" data-reveal-group>
|
|
<div class="max-w-3xl space-y-4" data-reveal data-reveal-from="up">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $eyebrow }}</p>
|
|
<h2 id="vertentes-heading" class="text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">{{ $heading }}</h2>
|
|
</div>
|
|
|
|
<div class="mt-12 grid gap-6 md:mt-16 md:grid-cols-2 md:gap-[24px]">
|
|
@foreach ($cards as $card)
|
|
<article class="relative flex min-h-[420px] flex-col justify-end bg-amare-bg-deep p-8 md:p-10" data-reveal data-reveal-from="up">
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-[43%] bg-gradient-to-b from-amare-bg to-transparent"></div>
|
|
<div class="relative flex flex-col gap-5">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">{{ $card['label'] }}</p>
|
|
<h3 class="text-[clamp(1.5625rem,2.7vw,2.125rem)] font-medium leading-tight text-amare-text">{{ $card['title'] }}</h3>
|
|
<p class="text-amare-text-muted">{{ $card['body'] }}</p>
|
|
<a href="{{ $card['href'] }}" class="btn btn-outline mt-2 self-start text-xs font-bold uppercase tracking-[0.09em]">
|
|
{{ $card['cta'] }}
|
|
</a>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|