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:.
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { Breadcrumb } from "@/app/components/Breadcrumb";
|
|
import { pageTop } from "@/app/components/button-styles";
|
|
import type { CaseStudyContent } from "@/lib/site-content";
|
|
import { CaseCover } from "./CaseCover";
|
|
import { getCaseMedia } from "./case-media";
|
|
|
|
/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
|
|
function CaseFacts({ facts }: { facts?: string[] }) {
|
|
if (!facts?.length) return null;
|
|
|
|
return (
|
|
<ul
|
|
className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
|
|
aria-label="Fatos do projeto"
|
|
>
|
|
{facts.map((fact) => (
|
|
<li key={fact}>{fact}</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
|
|
function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
|
|
return (
|
|
<div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
|
|
<CaseCover
|
|
id={caseStudy.id}
|
|
title={caseStudy.title}
|
|
demoUrl={caseStudy.demoUrl}
|
|
sizes="(min-width: 1024px) 560px, 100vw"
|
|
priority
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
|
|
* no celular a mídia vem logo abaixo do título.
|
|
*/
|
|
export function CaseHero({
|
|
caseStudy,
|
|
isClient,
|
|
}: {
|
|
caseStudy: CaseStudyContent;
|
|
isClient: boolean;
|
|
}) {
|
|
const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));
|
|
|
|
return (
|
|
<section className={`ds-section ds-section-dark ${pageTop}`}>
|
|
<div
|
|
className={`ds-section-shell ${
|
|
hasMedia
|
|
? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: "Início", href: "/" },
|
|
{ label: "Cases", href: "/cases" },
|
|
{ label: caseStudy.title, href: `/cases/${caseStudy.id}` },
|
|
]}
|
|
/>
|
|
<p className="ds-eyebrow">
|
|
{isClient ? "Case de cliente" : "Projeto de laboratório"} ·{" "}
|
|
{caseStudy.title}
|
|
</p>
|
|
<h1 className="ds-section-title text-balance text-white">
|
|
{caseStudy.headline}
|
|
</h1>
|
|
</div>
|
|
{hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
|
|
<div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
|
|
<p className="ds-copy !text-[rgba(255,255,255,.78)]">
|
|
{caseStudy.summary}
|
|
</p>
|
|
<CaseFacts facts={caseStudy.facts} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|