manoel freitas
8decba693a
Confirmação de briefing/parceria, micro-feedback de campos e nav, e copy mais humana nos erros — sem quebrar reduced-motion. Co-authored-by: Cursor <cursoragent@cursor.com>
65 lines
3.3 KiB
PHP
65 lines
3.3 KiB
PHP
@props([
|
|
'cases',
|
|
])
|
|
|
|
@php
|
|
$slots = collect([
|
|
['label' => 'Eventos sociais', 'tall' => true],
|
|
['label' => 'Celebrações', 'tall' => false],
|
|
['label' => 'Detalhes', 'tall' => false],
|
|
['label' => 'Sociais', 'tall' => false],
|
|
['label' => 'Corporativo', 'tall' => false],
|
|
['label' => 'Produção', 'tall' => false],
|
|
]);
|
|
$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 py-16 md:py-24" data-reveal-group>
|
|
<div class="grid gap-10 lg:grid-cols-12 lg:items-end" data-reveal data-reveal-from="up">
|
|
<div class="lg:col-span-5">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Seleção de trabalhos</p>
|
|
<h2 id="about-portfolio-heading" class="mt-3 text-headline font-medium text-amare-text">Portfólio em destaque</h2>
|
|
</div>
|
|
<div class="lg:col-span-6 lg:col-start-7">
|
|
<p class="max-w-xl text-amare-text-muted">Uma composição de eventos sociais e corporativos para apresentar a versatilidade da Amare.</p>
|
|
<a href="{{ route('portfolio.index') }}" class="btn btn-ghost mt-5 min-h-0 px-0 text-xs font-bold uppercase tracking-[0.09em] text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
|
|
<span class="link-editorial">Ver portfólio completo</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-[1.2fr_0.8fr_0.8fr]" aria-label="Projetos em destaque" data-editorial-portfolio data-reveal-group>
|
|
@foreach ($slots as $index => $slot)
|
|
@php
|
|
$case = $cases->get($index);
|
|
@endphp
|
|
<div
|
|
@class([
|
|
'overflow-hidden bg-amare-bg-deep',
|
|
'sm:col-span-2 sm:min-h-[420px] lg:col-span-1 lg:row-span-2 lg:min-h-[634px]' => $slot['tall'],
|
|
'min-h-[220px] sm:min-h-[310px]' => ! $slot['tall'],
|
|
])
|
|
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) 100vw, 33vw"
|
|
class="img-editorial h-full w-full object-cover transition-opacity hover:opacity-90"
|
|
/>
|
|
</a>
|
|
@else
|
|
<div class="flex h-full w-full items-center justify-center">
|
|
<p class="px-4 text-center text-xs font-semibold uppercase tracking-[0.16em] text-amare-muted">{{ $slot['label'] }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|