manoel freitas
fc1c6177d6
Co-authored-by: manoel freitas <manoel.josefneto@gmail.com> Co-committed-by: manoel freitas <manoel.josefneto@gmail.com>
49 lines
3.3 KiB
PHP
49 lines
3.3 KiB
PHP
@props([
|
|
'settings',
|
|
])
|
|
|
|
@php
|
|
$lead = $settings->about_summary ?: 'Eventos que refletem propósito, conectam pessoas e criam memórias.';
|
|
$hasImage = filled($settings->about_image_path);
|
|
@endphp
|
|
|
|
<section aria-labelledby="about-hero-heading" class="border-b border-amare-border bg-amare-bg" data-about-hero data-motion="page-open">
|
|
@if ($hasImage)
|
|
<div class="container-amare grid min-h-[440px] lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.45fr)]">
|
|
<div class="flex flex-col items-start justify-center py-12 md:py-14 lg:py-16 lg:pr-10" data-reveal-group>
|
|
<p class="text-sm font-medium uppercase tracking-[0.16em] text-amare-accent" data-motion-beat="seal">Sobre nós</p>
|
|
<h1 id="about-hero-heading" class="mt-3 max-w-[470px] text-[clamp(3rem,5vw,5rem)] font-medium leading-[0.96] tracking-tight text-amare-accent-deep" data-motion-beat="title">Sobre a Amare</h1>
|
|
<p class="mt-4 max-w-[450px] font-serif text-[clamp(1.25rem,2vw,1.55rem)] italic leading-snug text-amare-muted" data-motion-beat="lede">{{ $lead }}</p>
|
|
<span class="my-6 block h-9 w-px bg-amare-accent" aria-hidden="true"></span>
|
|
<p class="mb-7 max-w-[430px] text-lg leading-relaxed text-amare-text">A Amare une sensibilidade, organização e atenção aos detalhes para criar experiências bem planejadas, do primeiro encontro à execução do evento.</p>
|
|
<div data-motion-beat="cta">
|
|
<a href="#michele" class="btn btn-outline text-xs font-bold uppercase tracking-[0.11em]">Conhecer mais</a>
|
|
</div>
|
|
</div>
|
|
<div class="min-h-[360px] overflow-hidden bg-amare-bg-deep lg:min-h-full" data-motion-beat="media" data-reveal-media>
|
|
<x-media.image
|
|
:path="$settings->about_image_path"
|
|
:alt="$settings->about_image_alt ?: 'Sobre a Amare'"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
sizes="(max-width: 1023px) 100vw, 58vw"
|
|
class="img-editorial h-full min-h-[360px] w-full object-cover lg:min-h-[440px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="container-amare py-16 md:py-24" data-tonal-hero>
|
|
<div class="max-w-[470px] space-y-5" data-motion-beat="heading">
|
|
<p class="text-sm font-medium uppercase tracking-[0.16em] text-amare-accent" data-motion-beat="seal">Sobre nós</p>
|
|
<h1 id="about-hero-heading" class="text-headline font-medium tracking-tight text-amare-accent-deep" data-motion-beat="title">Sobre a Amare</h1>
|
|
<p class="text-lg italic leading-snug text-amare-muted" data-motion-beat="lede">{{ $lead }}</p>
|
|
<span class="block h-9 w-px bg-amare-accent" aria-hidden="true"></span>
|
|
<p class="text-lg leading-relaxed text-amare-text">A Amare une sensibilidade, organização e atenção aos detalhes para criar experiências bem planejadas, do primeiro encontro à execução do evento.</p>
|
|
<div data-motion-beat="cta">
|
|
<a href="#michele" class="btn btn-outline text-xs font-bold uppercase tracking-[0.11em]">Conhecer mais</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</section>
|