manoel freitas
fc1c6177d6
Co-authored-by: manoel freitas <manoel.josefneto@gmail.com> Co-committed-by: manoel freitas <manoel.josefneto@gmail.com>
60 lines
3.3 KiB
PHP
60 lines
3.3 KiB
PHP
@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>
|