feat(cases): mídia no topo, títulos de busca curtos e CreativeWork

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:.
2026-10-14 14:15:25 -03:00
1 parent c9a0b80656
commit e80f73d075
@@ -0,0 +1,86 @@
+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>
+  );
+}