Evandro Fonseca Junior
fc44a69fb3
/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.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { CaseCover, coverSizes } from "@/app/cases/_components/CaseCover";
|
|
import { getCaseMedia } from "@/app/cases/_components/case-media";
|
|
import { textLinkDark } from "@/app/components/button-styles";
|
|
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
|
|
import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
|
|
import {
|
|
buttonLabels,
|
|
type CaseStudyContent,
|
|
type HeroDevice,
|
|
} from "@/lib/site-content";
|
|
|
|
/**
|
|
* Capa do case de destaque ao lado do título do serviço: o site no computador (moldura de navegador) ou no celular
|
|
* (moldura de celular), conforme `device`. Sem captura do aparelho pedido, não mostra nada.
|
|
* Embaixo, a legenda: o nome do case, por que ele interessa a este serviço (`relevance`) e o botão "Ver case". É esta
|
|
* legenda que cita o case na página: ele não ganha um cartão a mais mais abaixo, porque a mesma imagem e o mesmo nome
|
|
* não aparecem duas vezes. A imagem também leva ao case, mas fica fora da leitura e da tabulação (o link da legenda
|
|
* já leva ao mesmo lugar).
|
|
*/
|
|
export function ServiceHeroCover({
|
|
caseStudy,
|
|
device = "desktop",
|
|
relevance,
|
|
}: {
|
|
caseStudy?: CaseStudyContent;
|
|
device?: HeroDevice;
|
|
/** Por que o case interessa ao serviço, em uma frase. */
|
|
relevance?: string;
|
|
}) {
|
|
if (!caseStudy) return null;
|
|
|
|
const href = `/cases/${caseStudy.id}`;
|
|
const media =
|
|
device === "mobile" ? getCaseMedia(caseStudy.id, "mobile") : null;
|
|
if (device === "mobile" && !media) return null;
|
|
|
|
return (
|
|
<figure
|
|
className={`min-w-0 ${device === "mobile" ? "mx-auto w-full max-w-[360px]" : ""}`}
|
|
>
|
|
<HoverPrefetchLink
|
|
href={href}
|
|
aria-hidden="true"
|
|
tabIndex={-1}
|
|
className={
|
|
media ? "mx-auto block w-[min(62vw,240px)] min-w-0" : "block min-w-0"
|
|
}
|
|
>
|
|
{media ? (
|
|
<PhoneFrame poster={media.poster} />
|
|
) : (
|
|
<CaseCover
|
|
id={caseStudy.id}
|
|
title={caseStudy.title}
|
|
demoUrl={caseStudy.demoUrl}
|
|
sizes={coverSizes.hero}
|
|
priority
|
|
/>
|
|
)}
|
|
</HoverPrefetchLink>
|
|
<figcaption className="mt-sp-4 text-[15px] leading-6 text-white/75">
|
|
<strong className="font-semibold text-white">{caseStudy.title}</strong>
|
|
{relevance ? `: ${relevance}` : null}
|
|
<span className="mt-sp-1 block">
|
|
<HoverPrefetchLink
|
|
href={href}
|
|
className={`${textLinkDark} focus-visible:outline-2 focus-visible:outline-offset-4`}
|
|
>
|
|
{buttonLabels.case}
|
|
<span className="sr-only"> {caseStudy.title}</span>
|
|
</HoverPrefetchLink>
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
);
|
|
}
|