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:
22
resources/views/components/about/cta.blade.php
Normal file
22
resources/views/components/about/cta.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
@props([
|
||||
'settings',
|
||||
])
|
||||
|
||||
<section aria-labelledby="about-cta-heading" class="border-b border-amare-border bg-amare-bg py-6 md:py-7" data-about-cta>
|
||||
<div class="container-amare grid items-center gap-7 md:grid-cols-[auto_minmax(0,1fr)_auto]" data-reveal-group>
|
||||
<svg class="mx-auto h-11 w-11 text-amare-accent md:mx-0" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true" data-reveal data-reveal-from="up">
|
||||
<rect x="7" y="12" width="34" height="26" rx="2"/>
|
||||
<path d="m8 15 16 13 16-13"/>
|
||||
<path d="M18 12v-2a6 6 0 0 1 12 0v2"/>
|
||||
</svg>
|
||||
<div class="text-center md:text-left" data-reveal data-reveal-from="up">
|
||||
<h2 id="about-cta-heading" class="text-[clamp(1.75rem,3vw,2rem)] font-medium text-amare-accent-deep">Vamos criar algo inesquecível juntos?</h2>
|
||||
<p class="mt-1 text-base leading-relaxed text-amare-text">Conte com a Amare para transformar seu evento em uma experiência organizada, cuidadosa e memorável.</p>
|
||||
</div>
|
||||
<div class="justify-self-center md:justify-self-end" data-reveal data-reveal-from="up">
|
||||
<a href="{{ route('briefing') }}" class="btn btn-primary text-xs font-bold uppercase tracking-[0.11em]">
|
||||
{{ $settings->hero_cta_label ?: 'Solicitar proposta' }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
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>
|
||||
48
resources/views/components/about/hero.blade.php
Normal file
48
resources/views/components/about/hero.blade.php
Normal file
@@ -0,0 +1,48 @@
|
||||
@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>
|
||||
31
resources/views/components/about/pillars.blade.php
Normal file
31
resources/views/components/about/pillars.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
<section aria-label="Pilares da Amare" class="border-b border-amare-border bg-amare-bg" data-about-pillars>
|
||||
<div class="container-amare" data-reveal-group>
|
||||
<div class="grid md:grid-cols-3">
|
||||
<article class="relative border-t border-amare-border px-6 py-8 text-center md:border-t-0 md:px-10" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto mb-2.5 h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<circle cx="18" cy="16" r="6"/>
|
||||
<circle cx="30" cy="16" r="6"/>
|
||||
<path d="M7 37c1-8 5-12 11-12s10 4 11 12M21 37c1-8 5-12 11-12 5 0 9 4 10 12"/>
|
||||
</svg>
|
||||
<h3 class="text-base font-medium uppercase tracking-[0.05em] text-amare-accent-deep">Atendimento próximo</h3>
|
||||
<p class="mx-auto mt-2 max-w-[280px] text-[0.95rem] leading-relaxed text-amare-text">Escuta atenta para compreender prioridades, contexto e expectativas de cada evento.</p>
|
||||
</article>
|
||||
<article class="relative border-t border-amare-border px-6 py-8 text-center md:border-t-0 md:px-10 md:before:absolute md:before:inset-y-[30px] md:before:left-0 md:before:w-px md:before:bg-amare-border" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto mb-2.5 h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<rect x="10" y="7" width="28" height="34" rx="2"/>
|
||||
<path d="M17 15h14M17 22h14M17 29h8M29 29h2"/>
|
||||
</svg>
|
||||
<h3 class="text-base font-medium uppercase tracking-[0.05em] text-amare-accent-deep">Planejamento minucioso</h3>
|
||||
<p class="mx-auto mt-2 max-w-[280px] text-[0.95rem] leading-relaxed text-amare-text">Organização clara das etapas para transformar decisões em uma execução consistente.</p>
|
||||
</article>
|
||||
<article class="relative border-t border-amare-border px-6 py-8 text-center md:border-t-0 md:px-10 md:before:absolute md:before:inset-y-[30px] md:before:left-0 md:before:w-px md:before:bg-amare-border" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto mb-2.5 h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<path d="M24 40C10 32 8 20 8 12c8 0 14 4 16 11 2-7 8-11 16-11 0 8-2 20-16 28Z"/>
|
||||
<path d="M24 23v17"/>
|
||||
</svg>
|
||||
<h3 class="text-base font-medium uppercase tracking-[0.05em] text-amare-accent-deep">Execução tranquila</h3>
|
||||
<p class="mx-auto mt-2 max-w-[280px] text-[0.95rem] leading-relaxed text-amare-text">Cuidado com a operação para que anfitriões e convidados possam viver o momento.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
59
resources/views/components/about/portfolio.blade.php
Normal file
59
resources/views/components/about/portfolio.blade.php
Normal file
@@ -0,0 +1,59 @@
|
||||
@props([
|
||||
'cases',
|
||||
])
|
||||
|
||||
@php
|
||||
$slots = [
|
||||
'Eventos sociais',
|
||||
'Celebrações',
|
||||
'Detalhes',
|
||||
'Sociais',
|
||||
'Corporativo',
|
||||
'Produção',
|
||||
];
|
||||
$cases = $cases->take(6)->values();
|
||||
@endphp
|
||||
|
||||
<section id="portfolio" aria-labelledby="about-portfolio-heading" class="border-b border-amare-border bg-amare-bg" data-about-portfolio>
|
||||
<div class="container-amare grid lg:grid-cols-[315px_minmax(0,1fr)]" data-reveal-group>
|
||||
<div class="flex flex-col justify-center px-6 py-11 md:px-10" data-reveal data-reveal-from="up">
|
||||
<p class="text-sm font-medium uppercase tracking-[0.16em] text-amare-accent">Seleção de trabalhos</p>
|
||||
<h2 id="about-portfolio-heading" class="mt-3 text-[clamp(1.75rem,3vw,2.05rem)] font-medium leading-tight text-amare-accent-deep">Portfólio em destaque</h2>
|
||||
<p class="mt-4 max-w-sm text-base leading-relaxed text-amare-text">Uma composição de eventos sociais e corporativos para apresentar a versatilidade da Amare.</p>
|
||||
<a href="{{ route('portfolio.index') }}" class="btn btn-outline mt-5 self-start text-xs font-bold uppercase tracking-[0.11em]">Ver portfólio completo</a>
|
||||
</div>
|
||||
|
||||
<div class="grid auto-rows-[150px] grid-cols-2 gap-1 py-1 lg:auto-rows-[118px] lg:grid-cols-12" aria-label="Projetos em destaque" data-reveal-group>
|
||||
@foreach ($slots as $index => $label)
|
||||
@php
|
||||
$case = $cases->get($index);
|
||||
$span = match ($index) {
|
||||
0 => 'lg:col-span-5',
|
||||
1 => 'lg:col-span-4',
|
||||
2 => 'lg:col-span-3 lg:row-span-2 min-h-[190px] lg:min-h-0',
|
||||
3 => 'lg:col-span-4',
|
||||
4 => 'lg:col-span-3',
|
||||
default => 'lg:col-span-2',
|
||||
};
|
||||
@endphp
|
||||
<div @class(['relative min-h-[150px] overflow-hidden bg-amare-bg-deep', $span]) data-reveal data-reveal-from="up">
|
||||
@if ($case && filled($case->cover_image_path))
|
||||
<a href="{{ route('portfolio.show', $case) }}" class="block h-full w-full" aria-label="{{ $case->title }}">
|
||||
<x-media.image
|
||||
:path="$case->cover_image_path"
|
||||
:alt="$case->cover_image_alt ?: $case->title"
|
||||
sizes="(max-width: 1023px) 50vw, 25vw"
|
||||
class="img-editorial h-full w-full object-cover transition-transform duration-[450ms] ease-out hover:scale-[1.03]"
|
||||
/>
|
||||
<span class="absolute bottom-3 left-3 bg-amare-accent-deep/90 px-3 py-1.5 text-[0.57rem] font-semibold uppercase tracking-[0.06em] text-amare-accent-text">{{ $label }}</span>
|
||||
</a>
|
||||
@else
|
||||
<div class="flex h-full w-full items-end justify-start p-3">
|
||||
<span class="bg-amare-accent-deep/90 px-3 py-1.5 text-[0.57rem] font-semibold uppercase tracking-[0.06em] text-amare-accent-text">{{ $label }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
30
resources/views/components/about/process.blade.php
Normal file
30
resources/views/components/about/process.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<section aria-labelledby="process-heading" class="border-b border-amare-border bg-amare-bg py-5 md:py-6" data-about-process>
|
||||
<div class="container-amare" data-reveal-group>
|
||||
<h2 id="process-heading" class="mb-3 text-center text-[clamp(1.75rem,3vw,2rem)] font-medium text-amare-accent-deep" data-reveal data-reveal-from="up">Como trabalhamos</h2>
|
||||
<div class="grid md:grid-cols-3">
|
||||
<article class="relative border-t border-amare-border px-6 py-4 text-center md:border-t-0 md:px-10" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<path d="M15 29c-5-4-6-12-2-17 5-7 17-7 22 0 4 6 2 14-4 18-2 1-3 4-3 7H20c0-4-2-6-5-8Z"/>
|
||||
<path d="M20 41h8"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-base font-medium uppercase tracking-[0.04em] text-amare-accent-deep">Escuta e entendimento</h3>
|
||||
<p class="mx-auto mt-1.5 max-w-[280px] text-[0.94rem] leading-relaxed text-amare-text">Começamos pelo contexto do evento, suas prioridades, estilo e expectativas.</p>
|
||||
</article>
|
||||
<article class="relative border-t border-amare-border px-6 py-4 text-center md:border-t-0 md:px-10 md:before:absolute md:before:inset-y-3 md:before:left-0 md:before:w-px md:before:bg-amare-border" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<rect x="8" y="11" width="32" height="29" rx="2"/>
|
||||
<path d="M15 7v8M33 7v8M8 20h32M15 26h4M23 26h4M31 26h3M15 33h4M23 33h4"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-base font-medium uppercase tracking-[0.04em] text-amare-accent-deep">Planejamento e curadoria</h3>
|
||||
<p class="mx-auto mt-1.5 max-w-[280px] text-[0.94rem] leading-relaxed text-amare-text">Organizamos etapas, fornecedores e decisões para manter cada frente alinhada.</p>
|
||||
</article>
|
||||
<article class="relative border-t border-amare-border px-6 py-4 text-center md:border-t-0 md:px-10 md:before:absolute md:before:inset-y-3 md:before:left-0 md:before:w-px md:before:bg-amare-border" data-reveal data-reveal-from="up">
|
||||
<svg class="mx-auto h-[34px] w-[34px] text-amare-muted" viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
|
||||
<path d="M24 39S8 30 8 18c0-6 4-10 10-10 4 0 7 2 9 6 2-4 5-6 9-6 6 0 10 4 10 10 0 12-22 21-22 21Z"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-base font-medium uppercase tracking-[0.04em] text-amare-accent-deep">Execução e experiência</h3>
|
||||
<p class="mx-auto mt-1.5 max-w-[280px] text-[0.94rem] leading-relaxed text-amare-text">Coordenamos a operação para que o evento aconteça com fluidez e presença.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,29 +1,10 @@
|
||||
@extends('layouts.public')
|
||||
|
||||
@section('content')
|
||||
@php
|
||||
$principles = filled($siteSettings->principles)
|
||||
? $siteSettings->principles
|
||||
: \App\Models\SiteSetting::defaultPrinciples();
|
||||
$city = $siteSettings->city ?: 'São Paulo - SP';
|
||||
@endphp
|
||||
|
||||
<x-public.photo-hero :image-path="$siteSettings->about_image_path" :image-alt="$siteSettings->about_image_alt" eyebrow="A Amare" title="Humana no cuidado. Precisa na entrega." :summary="$siteSettings->about_summary">
|
||||
<p class="max-w-xl text-amare-text-muted">A {{ $siteSettings->brand_name }} atua em {{ $city }} com foco em planejamento completo, presença no dia do evento e uma condução serena do início ao fim.</p>
|
||||
</x-public.photo-hero>
|
||||
|
||||
<div class="border-b border-amare-border bg-amare-bg">
|
||||
<div class="container-amare py-16 md:py-24">
|
||||
<ul class="space-y-4 border-t border-amare-border pt-6" aria-label="Princípios da Amare" data-reveal-group>
|
||||
@foreach ($principles as $index => $principle)
|
||||
<li class="grid grid-cols-[3rem_minmax(0,1fr)] gap-4 border-b border-amare-border pb-4 text-amare-text" data-reveal data-reveal-from="up">
|
||||
<span class="text-sm font-semibold uppercase tracking-[0.14em] text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
|
||||
<span>{{ $principle }}</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-home.final-cta :settings="$siteSettings" />
|
||||
<x-about.hero :settings="$content->settings" />
|
||||
<x-about.pillars />
|
||||
<x-about.founder :settings="$content->settings" />
|
||||
<x-about.process />
|
||||
<x-about.portfolio :cases="$content->featuredCases" />
|
||||
<x-about.cta :settings="$content->settings" />
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user