feat: remodelar /sobre conforme mock editorial
All checks were successful
All checks were successful
Alinha a página Sobre à composição aprovada (hero, pilares, Michele, processo, portfólio, CTA), com foto da Michele via CMS e tokens Heritage Editorial. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
40
resources/views/components/about/founder.blade.php
Normal file
40
resources/views/components/about/founder.blade.php
Normal file
@@ -0,0 +1,40 @@
|
||||
@props([
|
||||
'settings',
|
||||
])
|
||||
|
||||
@php
|
||||
$hasImage = filled($settings->founder_image_path);
|
||||
@endphp
|
||||
|
||||
<section id="michele" aria-labelledby="founder-heading" class="border-b border-amare-border bg-amare-bg" data-about-founder>
|
||||
<div class="grid min-h-[500px] lg:grid-cols-2" data-reveal-group>
|
||||
@if ($hasImage)
|
||||
<div class="min-h-[420px] overflow-hidden bg-amare-bg-deep lg:min-h-full" data-reveal-media>
|
||||
<x-media.image
|
||||
:path="$settings->founder_image_path"
|
||||
:alt="$settings->founder_image_alt ?: 'Michele, da Amare'"
|
||||
sizes="(max-width: 1023px) 100vw, 50vw"
|
||||
class="img-editorial h-full min-h-[420px] w-full object-cover object-[center_35%] lg:min-h-full"
|
||||
/>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex min-h-[420px] items-center justify-center bg-amare-bg-deep lg:min-h-full" data-founder-tonal>
|
||||
<p class="px-4 text-center text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">Retrato da Michele</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col justify-center px-6 py-12 md:px-12 md:py-16 lg:px-[70px]" data-reveal data-reveal-from="up">
|
||||
<p class="text-sm font-medium uppercase tracking-[0.16em] text-amare-accent">A pessoa por trás da experiência</p>
|
||||
<h2 id="founder-heading" class="mt-3 text-[clamp(2rem,3vw,2.55rem)] font-medium text-amare-accent-deep">Conheça Michele</h2>
|
||||
<p class="mt-5 max-w-[520px] text-lg leading-relaxed text-amare-text">Michele representa o olhar humano da Amare: escuta, organização e presença durante todo o processo de construção do evento.</p>
|
||||
<p class="mt-3.5 max-w-[520px] text-lg leading-relaxed text-amare-text">Seu papel é transformar necessidades e escolhas em um planejamento claro, cuidando dos detalhes sem perder de vista a experiência de quem contrata e de quem participa.</p>
|
||||
<div class="mt-5 flex max-w-[500px] flex-col items-start justify-between gap-4 bg-amare-bg-deep px-4 py-3.5 sm:flex-row sm:items-center">
|
||||
<div>
|
||||
<strong class="block text-[2rem] font-normal italic text-amare-accent-deep">Michele</strong>
|
||||
<small class="text-[0.65rem] uppercase tracking-[0.08em] text-amare-muted">Assessoria e produção de eventos</small>
|
||||
</div>
|
||||
<a href="{{ route('briefing') }}" class="btn btn-outline shrink-0 text-xs font-bold uppercase tracking-[0.11em]">Falar com a Michele</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user