57 lines
2.8 KiB
PHP
57 lines
2.8 KiB
PHP
@props([
|
|
'cases',
|
|
])
|
|
|
|
<section
|
|
aria-labelledby="portfolio-heading"
|
|
class="home-chapter border-b border-amare-border bg-amare-bg"
|
|
data-chapter="portfolio"
|
|
id="portfolio"
|
|
>
|
|
<div class="container-amare py-16 md:py-24" data-reveal-group>
|
|
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal data-reveal-from="up">
|
|
<h2 id="portfolio-heading" class="max-w-2xl text-[clamp(2.375rem,5vw,4rem)] font-medium leading-[1.05] tracking-[-0.02em] text-amare-text">Trabalhos que carregam a assinatura Amare.</h2>
|
|
<p class="max-w-[600px] text-amare-text-muted">Priorizar fotografias reais e uma curadoria pequena. O portfólio não precisa explicar tudo: deve provar cuidado, execução e consistência visual.</p>
|
|
</div>
|
|
|
|
@php
|
|
$slots = collect([
|
|
['label' => 'FOTO DE CASAMENTO 01', 'tall' => true],
|
|
['label' => 'FOTO 02', 'tall' => false],
|
|
['label' => 'FOTO 03', 'tall' => false],
|
|
['label' => 'FOTO 04', 'tall' => false],
|
|
['label' => 'FOTO 05', 'tall' => false],
|
|
]);
|
|
$cases = $cases->take(5)->values();
|
|
@endphp
|
|
|
|
<div class="mt-12 grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-[1.2fr_0.8fr_0.8fr]" 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'],
|
|
])
|
|
@if ($slot['tall']) data-editorial-portfolio-item="feature" @endif
|
|
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>
|