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:.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import Link from "next/link";
|
|
import { textLinkDark } from "@/app/components/button-styles";
|
|
import { getRelatedServices } from "@/lib/site-content";
|
|
|
|
/** Quantos serviços aparecem no fim do case: dois cards bastam para levar a pessoa ao serviço certo sem virar um menu. */
|
|
export const MAX_RELATED_SERVICES = 2;
|
|
|
|
/** Cards dos serviços que citam este case (no máximo dois), sobre fundo escuro. Sem serviço relacionado, não mostra nada. */
|
|
export function CaseRelatedServices({ caseId }: { caseId: string }) {
|
|
const services = getRelatedServices(caseId).slice(0, MAX_RELATED_SERVICES);
|
|
if (services.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-sp-10">
|
|
<p className="ds-kicker">Serviços ligados a este projeto</p>
|
|
<ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
|
|
{services.map((service) => (
|
|
<li key={service.slug} className="flex">
|
|
<article className="ds-card w-full">
|
|
<h3 className="ds-card-title !mt-0">{service.navLabel}</h3>
|
|
<p className="ds-copy">{service.intro}</p>
|
|
<Link
|
|
className={`${textLinkDark} mt-sp-4 self-start`}
|
|
href={`/servicos/${service.slug}`}
|
|
>
|
|
Ver o serviço: {service.navLabel}
|
|
</Link>
|
|
</article>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|