Manoel Freitas
484ac77ce7
* feat: modalidades de casamento e etapas corporativas * feat: home editorial e header/footer conforme preview * docs: proposta openspec home editorial * test: CTA hero agora ancora #sobre conforme preview * test: speed browser suite via visit reuse Collapse route×viewport cartesian products, merge home motion asserts, skip existing VisualContentSeeder JPEGs, ignore Screenshots.
50 lines
2.8 KiB
PHP
50 lines
2.8 KiB
PHP
@props([
|
|
'settings',
|
|
])
|
|
|
|
<section
|
|
aria-labelledby="hero-heading"
|
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
|
data-chapter="hero"
|
|
data-motion="page-open"
|
|
>
|
|
<div class="container-amare grid items-end gap-12 pb-12 pt-16 md:grid-cols-[1.1fr_0.9fr] md:gap-[clamp(3rem,6vw,7rem)] md:pb-[72px] md:pt-24">
|
|
<div data-hero-content data-reveal-group class="flex flex-col gap-8">
|
|
<div data-motion-beat="eyebrow">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-amare-accent-deep">Assessoria & produção de eventos • São Paulo</p>
|
|
</div>
|
|
|
|
<h1 id="hero-heading" data-motion-beat="title" class="text-[clamp(3rem,8vw,5.75rem)] font-medium leading-[0.95] tracking-[-0.04em] text-amare-text">
|
|
Eventos com intenção, cuidado e presença.
|
|
</h1>
|
|
|
|
<p class="max-w-[760px] text-[clamp(1.1875rem,2vw,1.5rem)] leading-[1.55] text-amare-text-muted">
|
|
Uma boutique de assessoria que une sensibilidade, organização e condução profissional para transformar cada projeto em uma experiência bem cuidada.
|
|
</p>
|
|
|
|
<div data-motion-beat="cta" class="flex flex-wrap items-center gap-4">
|
|
<a href="#sobre" data-testid="home-primary-cta" class="inline-flex min-h-[48px] items-center justify-center border border-transparent bg-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-text transition-colors hover:bg-amare-accent-deep">
|
|
Conhecer a Amare
|
|
</a>
|
|
<a href="#contato" class="inline-flex min-h-[48px] items-center justify-center border border-amare-accent px-6 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent-deep transition-colors hover:bg-amare-accent hover:text-amare-accent-text">
|
|
Enviar briefing
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
data-split-hero
|
|
data-motion-beat="media"
|
|
class="min-h-[320px] overflow-hidden bg-amare-bg-deep md:min-h-[520px]"
|
|
>
|
|
@if (filled($settings->hero_image_path))
|
|
<x-media.image :path="$settings->hero_image_path" :alt="$settings->hero_image_alt ?: $settings->brand_name" loading="eager" fetchpriority="high" sizes="(max-width: 1023px) 100vw, 45vw" class="img-editorial h-full w-full object-cover" />
|
|
@else
|
|
<div data-tonal-hero class="flex h-full min-h-[320px] items-center justify-center bg-gradient-to-br from-amare-bg-deep to-amare-bg-archive md:min-h-[520px]">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">Fotografia hero</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section>
|