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:.
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import {
|
|
BrowserFrame,
|
|
displayUrl,
|
|
} from "@/app/components/showcase/BrowserFrame";
|
|
import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
|
|
import { CasePlayer } from "./CasePlayer";
|
|
import { getCaseMedia } from "./case-media";
|
|
|
|
/**
|
|
* Pôster e vídeo do projeto: o site no computador (moldura de navegador) e no celular (moldura de celular).
|
|
* Cada quadro mostra o pôster com um botão de play; o vídeo só baixa quando a pessoa aperta o botão.
|
|
* Sem captura gravada, não mostra nada.
|
|
*/
|
|
export function CaseMedia({
|
|
id,
|
|
title,
|
|
demoUrl,
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
demoUrl?: string | null;
|
|
}) {
|
|
const desktop = getCaseMedia(id, "desktop");
|
|
const mobile = getCaseMedia(id, "mobile");
|
|
if (!desktop && !mobile) return null;
|
|
|
|
return (
|
|
<div className="mt-sp-8 grid max-w-[1040px] items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
|
|
{desktop ? (
|
|
<figure className="min-w-0">
|
|
<BrowserFrame url={displayUrl({ demoUrl, title })}>
|
|
<div className="relative aspect-[16/10] bg-[#0a0a0a]">
|
|
<CasePlayer assets={desktop} title={title} device="desktop" />
|
|
</div>
|
|
</BrowserFrame>
|
|
<figcaption className="mt-sp-3 font-[family-name:var(--font-body)] text-[15px] text-white/70">
|
|
O site {title} no computador.
|
|
</figcaption>
|
|
</figure>
|
|
) : null}
|
|
{mobile ? (
|
|
<figure className="mx-auto w-[min(62vw,220px)] md:mx-0">
|
|
<PhoneFrame poster={mobile.poster}>
|
|
<CasePlayer assets={mobile} title={title} device="mobile" />
|
|
</PhoneFrame>
|
|
<figcaption className="mt-sp-3 text-center font-[family-name:var(--font-body)] text-[15px] text-white/70">
|
|
No celular.
|
|
</figcaption>
|
|
</figure>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|