Evandro Fonseca Junior
de6af74a0c
Diagnóstico sem case que não cabe; desktop com o GCC Installer como projeto próprio; IoT com o Twins Lab e a nota da Apolo. Mosaico de pôsteres em /servicos e /cases, faixa baixa em uma coluna no currículo, privacidade e laboratório; Laboratório como lista compacta; SEV começando por catálogo, pedido no WhatsApp e painel; Joinville e SC nos títulos; imagens do LCP com fetchPriority e sizes reais; pré-carregamento só no hover; 404 com Open Graph próprio.
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { Breadcrumb } from "@/app/components/Breadcrumb";
|
|
import { pageTop } from "@/app/components/button-styles";
|
|
import type { CaseStudyContent } from "@/lib/site-content";
|
|
import { CaseCover, coverSizes } from "./CaseCover";
|
|
import { getCaseMedia } from "./case-media";
|
|
import { compactHero } from "./hero-styles";
|
|
|
|
/** 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={coverSizes.hero}
|
|
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. Sem captura, o topo é uma coluna só e mais baixo.
|
|
*/
|
|
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} ${
|
|
hasMedia ? "" : compactHero
|
|
}`}
|
|
>
|
|
<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>
|
|
);
|
|
}
|