feat: adicionar heros fotográficos imersivos (#45)

resources/views/components/public/photo-hero.blade.php

@@ -0,0 +1,76 @@
+@props([
+    'imagePath' => null,
+    'imageAlt' => null,
+    'eyebrow' => null,
+    'title',
+    'summary' => null,
+    'metadata' => null,
+    'headingId' => 'hero-heading',
+    'brandMark' => 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">
+                    @if ($brandMark || filled($eyebrow))
+                        <div class="mb-5 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
+                            @if (filled($eyebrow))
+                                <p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent">{{ $eyebrow }}</p>
+                            @endif
+                        </div>
+                    @endif
+                    <h1 id="{{ $headingId }}" data-motion-beat="title" class="max-w-3xl text-display 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>
+                    @endif
+                    @if (filled($metadata))
+                        <p class="mt-4 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>
+                    @endif
+                </div>
+            </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">
+                @if ($brandMark || filled($eyebrow))
+                    <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
+                        @if (filled($eyebrow))
+                            <p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent">{{ $eyebrow }}</p>
+                        @endif
+                    </div>
+                @endif
+                <h1 id="{{ $headingId }}" data-motion-beat="title" class="text-headline font-medium tracking-tight text-amare-text">{{ $title }}</h1>
+                @if (filled($summary))
+                    <p class="text-lg text-amare-muted">{{ $summary }}</p>
+                @endif
+                @if (filled($metadata))
+                    <p class="text-sm break-words text-amare-muted">{{ $metadata }}</p>
+                @endif
+                @if (trim((string) $slot) !== '')
+                    <div data-motion-beat="cta">{{ $slot }}</div>
+                @endif
+            </div>
+        </div>
+    @endif
+</section>