Evandro Fonseca Junior
e80f73d075
Case com mídia ao lado do título e play acessível; problema de cada cliente reescrito com base nos dados; serviços relacionados em 2 cards; FAQ antes do próximo passo e bloco 'Onde já apliquei isso'; Apolo citada em IoT e arquitetura. metaTitle até 43 caracteres e descrições até 155 com teste; JSON-LD CreativeWork; imagens de compartilhamento abaixo de 100 KB; 404 e robots corrigidos; server-only nos módulos com node:.
40 lines
970 B
TypeScript
40 lines
970 B
TypeScript
import Image from "next/image";
|
|
import {
|
|
BrowserFrame,
|
|
displayUrl,
|
|
} from "@/app/components/showcase/BrowserFrame";
|
|
import { getCaseMedia } from "./case-media";
|
|
|
|
/** Capa do case: o pôster do site dentro de uma moldura de navegador. Sem captura gravada, não mostra nada. */
|
|
export function CaseCover({
|
|
id,
|
|
title,
|
|
demoUrl,
|
|
sizes = "(min-width: 1024px) 560px, 100vw",
|
|
priority = false,
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
demoUrl?: string | null;
|
|
sizes?: string;
|
|
priority?: boolean;
|
|
}) {
|
|
const media = getCaseMedia(id, "desktop");
|
|
if (!media) return null;
|
|
|
|
return (
|
|
<BrowserFrame url={displayUrl({ demoUrl, title })}>
|
|
<div className="relative aspect-[16/10] bg-[#0a0a0a]">
|
|
<Image
|
|
src={media.poster}
|
|
alt={`Captura de tela do site ${title}`}
|
|
fill
|
|
sizes={sizes}
|
|
priority={priority}
|
|
className="object-cover object-top"
|
|
/>
|
|
</div>
|
|
</BrowserFrame>
|
|
);
|
|
}
|