Files
portifolio-evandrodevbr/app/cases/_components/CaseCapabilitiesSection.tsx
T
Evandro Fonseca Junior fc44a69fb3 feat(servicos): ofertas no topo de /servicos, capa por assunto e diagramas
/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.
2026-10-14 19:14:46 -03:00

62 lines
2.1 KiB
TypeScript

import { primaryButton } from "@/app/components/button-styles";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
import { similarProjectSubject } from "@/lib/whatsapp";
import { hasCaseMedia } from "./CaseMediaSection";
/**
* Logo depois de "Como ficou": o que o cliente passou a poder fazer (2 ou 3 itens, sem número, só com o que as entregas já sustentam)
* e, de novo, o botão de contato, para quem acabou de ver o resultado não precisar rolar até o fim da página.
* Sem itens, só o botão (e só quando há "Como ficou"); sem itens e sem mídia, a seção não aparece.
*/
export function CaseCapabilitiesSection({
caseStudy,
isClient,
}: {
caseStudy: Pick<
CaseStudyContent,
"id" | "title" | "demoUrl" | "capabilities"
>;
isClient: boolean;
}) {
const capabilities = caseStudy.capabilities ?? [];
const showContact = hasCaseMedia(caseStudy);
if (capabilities.length === 0 && !showContact) return null;
return (
<section className="ds-section" aria-labelledby="case-capabilities">
<div className="ds-section-shell">
{capabilities.length > 0 ? (
<>
<h2 id="case-capabilities" className="ds-card-title !mt-0">
{isClient
? "O que o cliente passou a poder fazer"
: "O que dá para fazer com ele"}
</h2>
<ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
{capabilities.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</>
) : (
<h2 id="case-capabilities" className="sr-only">
Fale sobre o seu projeto
</h2>
)}
{showContact ? (
<div className="mt-sp-8">
<WhatsAppLink
service={similarProjectSubject(caseStudy.title)}
placement="case_after_media"
className={primaryButton}
>
{buttonLabels.contact}
</WhatsAppLink>
</div>
) : null}
</div>
</section>
);
}