manoel-freitas/amare
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: aplicar spread editorial 5/7 aos heros (#51)

Browse Source
This commit is contained in:
Manoel Freitas
2026-08-11 13:36:32 -03:00
committed by GitHub
parent 213d6843e7
commit 70cc65227a
12 changed files with 224 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
resources/views/components/public/photo-hero.blade.php
View File

@@ -7,25 +7,16 @@
'metadata' => null,
'headingId' => 'hero-heading',
'brandMark' => false,
'fullHeightFallback' => false,
])
<section aria-labelledby="{{ $headingId }}" {{ $attributes->class(['border-b border-amare-border bg-amare-bg']) }} data-motion="page-open">
@if (filled($imagePath))
<div class="relative flex min-h-[calc(100dvh-5.5rem)] items-end overflow-hidden" data-photo-hero>
<x-media.image
:path="$imagePath"
:alt="$imageAlt ?: $title"
loading="eager"
fetchpriority="high"
sizes="100vw"
class="img-editorial absolute inset-0 h-full w-full object-cover"
data-motion-beat="media"
/>
<div class="container-amare relative z-10 w-full py-8 md:py-12">
<div class="max-w-3xl border border-amare-border bg-amare-bg p-6 text-amare-text md:p-10" data-motion-beat="heading">
<div class="grid min-h-[calc(100dvh-5rem)] lg:h-[calc(100dvh-5rem)] lg:min-h-0 lg:grid-cols-12" data-photo-hero>
<div class="flex min-w-0 items-center bg-amare-bg px-6 py-16 lg:col-span-5 lg:px-[clamp(3rem,6vw,7rem)]" data-hero-content data-reveal-group>
<div class="w-full max-w-[470px] space-y-7">
@if ($brandMark || filled($eyebrow))
<div class="mb-5 flex items-center gap-4" data-motion-beat="seal">
<div class="flex items-center gap-4" data-motion-beat="seal">
@if ($brandMark)
<x-brand.logo mark variant="on-light" class="h-8 w-auto" alt="" />
@endif
@@ -34,22 +25,36 @@
@endif
</div>
@endif
<h1 id="{{ $headingId }}" data-motion-beat="title" class="max-w-3xl text-display font-medium text-amare-text">{{ $title }}</h1>
<h1 id="{{ $headingId }}" data-motion-beat="title" class="max-w-[470px] whitespace-normal break-normal text-hero-spread font-medium text-amare-text">{{ $title }}</h1>
@if (filled($summary))
<p class="mt-5 max-w-2xl text-lg text-amare-text-muted">{{ $summary }}</p>
<p class="max-w-[470px] text-lg text-amare-text-muted">{{ $summary }}</p>
@endif
@if (filled($metadata))
<p class="mt-4 text-sm break-words text-amare-text-muted">{{ $metadata }}</p>
<p class="max-w-[470px] text-sm break-words text-amare-text-muted">{{ $metadata }}</p>
@endif
@if (trim((string) $slot) !== '')
<div class="mt-7" data-motion-beat="cta">{{ $slot }}</div>
<div data-motion-beat="cta">{{ $slot }}</div>
@endif
</div>
</div>
<div data-split-hero data-motion-beat="media" class="min-h-[56dvh] overflow-hidden bg-amare-bg-deep max-lg:aspect-[4/5] lg:col-span-7 lg:min-h-0" data-reveal-media>
<x-media.image
:path="$imagePath"
:alt="$imageAlt ?: $title"
loading="eager"
fetchpriority="high"
sizes="(max-width: 1023px) 100vw, 58vw"
class="img-editorial h-full w-full object-cover"
/>
</div>
</div>
@else
<div class="container-amare py-16 md:py-24" data-tonal-hero>
<div class="max-w-3xl space-y-4" data-motion-beat="heading">
<div @class([
'container-amare py-16 md:py-24',
'min-h-[100dvh]' => $fullHeightFallback,
]) data-tonal-hero>
<div class="max-w-[470px] space-y-4" data-motion-beat="heading">
@if ($brandMark || filled($eyebrow))
<div class="flex items-center gap-4" data-motion-beat="seal">
@if ($brandMark)
@@ -60,12 +65,12 @@
@endif
</div>
@endif
<h1 id="{{ $headingId }}" data-motion-beat="title" class="text-headline font-medium tracking-tight text-amare-text">{{ $title }}</h1>
<h1 id="{{ $headingId }}" data-motion-beat="title" class="max-w-[470px] whitespace-normal break-normal text-headline font-medium tracking-tight text-amare-text">{{ $title }}</h1>
@if (filled($summary))
<p class="text-lg text-amare-muted">{{ $summary }}</p>
<p class="max-w-[470px] text-lg text-amare-muted">{{ $summary }}</p>
@endif
@if (filled($metadata))
<p class="text-sm break-words text-amare-muted">{{ $metadata }}</p>
<p class="max-w-[470px] text-sm break-words text-amare-muted">{{ $metadata }}</p>
@endif
@if (trim((string) $slot) !== '')
<div data-motion-beat="cta">{{ $slot }}</div>