9ab2beb3ea
Fecha a meta de LCP ≤ 2,5 s da SPEC §6.6 em todas as páginas, nos dois presets. Continuação direta do commit anterior: com fontes e marca resolvidas, o elemento de LCP de toda página no mobile passou a ser a imagem do hero, e o Load Delay de 1,88 s era contenção de banda pura. ## Variantes webp `ResponsiveImage::generate()` escreve uma variante `.webp` ao lado de cada variante no formato original, e `x-media.image` a oferece num `<source type="image/webp">`. O `<img>` continua apontando para o formato original: o `<source>` é preferência, não substituição, então nada quebra em quem não decodifica webp, e mídia antiga sem irmãos webp renderiza `<img>` puro como antes. O `<picture>` recebe `display: contents` porque os chamadores estilizam o `<img>` com classes como `h-full w-full object-cover` que resolvem contra o pai grid ou flex — um wrapper inline quebraria isso. O nome do arquivo acrescenta a extensão em vez de trocá-la (`photo-720.jpg.webp`): uploads usam UUID, então colisão já era improvável, mas `photo-720.webp` colidiria com a variante webp de um `photo.png`. ## sizes que descreve a realidade Nenhuma imagem do site ocupa a viewport inteira — todas ficam dentro de `container-amare`, que reserva 1,5rem de padding de cada lado. Declarar `100vw` fazia uma viewport de 412 px em DPR 1,75 pedir 721 px e pular para a variante de 960 para desenhar uma caixa de 637 px. Errar por um pixel custava um terço a mais de bytes em toda página. Com `calc(100vw - 3rem)` a home passa a usar a variante de 720: 74 KiB, contra 143 KiB no início da investigação. Foi também por isso que 720 entrou em `ResponsiveImage::WIDTHS` — sem ela o salto de 480 para 960 é grande demais para a viewport mobile mais comum. ## Efeito medido Mobile, mediana de 3 execuções: home 3,39 → 2,49 s; portfolio-detalhe 3,01 → 2,18 s; servicos 2,63 → 2,03 s; portfolio 1,58 s; sobre 1,58 s; contato 1,50 s. Desktop no máximo 0,65 s. Peso total da home 798 → 347 KiB. Contra o início da investigação (`2e43fde`): home 4,58 → 2,49 s com score de performance 83 → 98. A home passa **em cima da linha** — a pior das três execuções deu 2,57 s. Está documentado como aprovada por margem, não com folga, e os levers restantes estão listados em docs/evidence/lighthouse/README.md em ordem de custo. Os 16 baselines visuais não mudaram: nenhum seeder gera variantes e `media:generate-variants` não roda no runner visual, então naquele ambiente `availableVariants()` volta vazio e o componente renderiza `<img>` puro. A cobertura do caminho com variantes fica em MediaImageComponentTest e ResponsiveImageTest, não nos baselines — anotado como lacuna conhecida. Co-Authored-By: Claude noreply@anthropic.com AI-Assisted: yes AI-Tool: claude-code
78 lines
4.1 KiB
PHP
78 lines
4.1 KiB
PHP
@extends('layouts.public')
|
|
|
|
@section('content')
|
|
<article data-motion="page-open">
|
|
<div class="border-b border-amare-border bg-amare-bg">
|
|
<div class="container-amare space-y-8 py-16 md:py-24">
|
|
<header class="max-w-3xl space-y-4" data-motion-beat="heading">
|
|
@if (filled($case->event_type))
|
|
<p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">{{ $case->event_type }}</p>
|
|
@endif
|
|
<h1 class="text-headline font-medium tracking-tight text-amare-text">{{ $case->title }}</h1>
|
|
<p class="text-lg text-amare-muted">{{ $case->summary }}</p>
|
|
<p class="text-sm break-words text-amare-muted">
|
|
@if ($case->city){{ $case->city }}@endif
|
|
@if ($case->venue) · {{ $case->venue }}@endif
|
|
@if ($case->event_date) · {{ $case->event_date->format('d/m/Y') }}@endif
|
|
</p>
|
|
</header>
|
|
|
|
@if (filled($case->cover_image_path))
|
|
<x-media.image
|
|
:path="$case->cover_image_path"
|
|
:alt="$case->cover_image_alt ?: $case->title"
|
|
loading="eager"
|
|
sizes="(max-width: 1024px) calc(100vw - 3rem), 1120px"
|
|
class="img-editorial aspect-[16/9] w-full object-cover"
|
|
data-motion-beat="media"
|
|
/>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-b border-amare-border bg-amare-bg-deep">
|
|
<div class="container-amare grid gap-10 py-16 md:grid-cols-3" data-reveal-group>
|
|
<section class="space-y-3" data-reveal data-reveal-from="up">
|
|
<h2 class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Desafio</h2>
|
|
<p class="text-amare-muted">{!! nl2br(e($case->challenge)) !!}</p>
|
|
</section>
|
|
<section class="space-y-3" data-reveal data-reveal-from="up">
|
|
<h2 class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Solução</h2>
|
|
<p class="text-amare-muted">{!! nl2br(e($case->solution)) !!}</p>
|
|
</section>
|
|
@if (filled($case->result))
|
|
<section class="space-y-3" data-reveal data-reveal-from="up">
|
|
<h2 class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Resultado</h2>
|
|
<p class="text-amare-muted">{!! nl2br(e($case->result)) !!}</p>
|
|
</section>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@if ($case->images->isNotEmpty())
|
|
<section aria-labelledby="gallery-heading" class="bg-amare-bg">
|
|
<div class="container-amare space-y-8 py-16">
|
|
<h2 id="gallery-heading" class="text-3xl font-medium text-amare-text">Galeria</h2>
|
|
<div class="grid gap-6 md:grid-cols-2" data-reveal-group>
|
|
@foreach ($case->images as $image)
|
|
<figure class="space-y-2" data-reveal data-reveal-from="up" data-reveal-media>
|
|
<x-media.image
|
|
:path="$image->path"
|
|
:alt="$image->alt_text"
|
|
sizes="(max-width: 768px) calc(100vw - 3rem), 50vw"
|
|
class="img-editorial aspect-[4/3] w-full object-cover"
|
|
/>
|
|
@if (filled($image->caption))
|
|
<figcaption class="text-sm text-amare-muted">{{ $image->caption }}</figcaption>
|
|
@endif
|
|
</figure>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</article>
|
|
|
|
<x-home.final-cta :settings="$siteSettings" />
|
|
@endsection
|