88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import {
|
|
compactHero,
|
|
heroWithMediaGrid,
|
|
} from "@/app/cases/_components/hero-styles";
|
|
import { Breadcrumb } from "@/app/components/Breadcrumb";
|
|
import {
|
|
pageTop,
|
|
primaryButton,
|
|
secondaryButtonDark,
|
|
} from "@/app/components/button-styles";
|
|
import WhatsAppLink from "@/app/components/WhatsAppLink";
|
|
import { buttonLabels, type ServicePageContent } from "@/lib/site-content";
|
|
import { ServiceDiagram } from "./ServiceDiagram";
|
|
import { ServiceHeroCover } from "./ServiceHeroCover";
|
|
import type { ServiceHeroData } from "./service-page";
|
|
|
|
/**
|
|
* Topo da página do serviço: trilha, título, resposta, botão de contato e, na coluna ao lado, a capa do case escolhido
|
|
* ou o esquema de fluxo. Sem nenhum dos dois, o topo é uma coluna só e mais baixo.
|
|
*/
|
|
export function ServiceHero({
|
|
service,
|
|
hero,
|
|
}: {
|
|
service: ServicePageContent;
|
|
hero: ServiceHeroData;
|
|
}) {
|
|
const { heroCase, heroDevice, diagram, hasHeroSide, hasCaseCards } = hero;
|
|
|
|
return (
|
|
<section
|
|
className={`ds-section ds-section-dark ${pageTop} ${
|
|
hasHeroSide ? "" : compactHero
|
|
}`}
|
|
>
|
|
<div
|
|
className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
|
|
>
|
|
<div className="max-w-[860px]">
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: "Início", href: "/" },
|
|
{ label: "Serviços", href: "/servicos" },
|
|
{ label: service.navLabel, href: `/servicos/${service.slug}` },
|
|
]}
|
|
/>
|
|
<p className="ds-eyebrow">{service.eyebrow}</p>
|
|
<h1 className="ds-section-title max-w-[22ch] text-balance text-white">
|
|
{service.headline}
|
|
</h1>
|
|
<p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
|
|
{service.answer}
|
|
</p>
|
|
<div className="mt-sp-8 flex flex-wrap gap-sp-3">
|
|
<WhatsAppLink
|
|
service={service.whatsappSubject}
|
|
placement="service_detail_hero"
|
|
className={primaryButton}
|
|
>
|
|
{buttonLabels.contact}
|
|
</WhatsAppLink>
|
|
{hasCaseCards ? (
|
|
<a href="#casos-relacionados" className={secondaryButtonDark}>
|
|
Ver projetos parecidos
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
<p className="mt-sp-4 text-[15px] leading-6 text-white/70">
|
|
O botão abre uma conversa no WhatsApp, sem formulário. Garuva e
|
|
Joinville (SC) · atendimento remoto em todo o Brasil.
|
|
</p>
|
|
</div>
|
|
{diagram ? (
|
|
<ServiceDiagram kind={diagram} />
|
|
) : (
|
|
<ServiceHeroCover
|
|
caseStudy={heroCase}
|
|
device={heroDevice}
|
|
relevance={
|
|
heroCase ? service.caseRelevance[heroCase.id] : undefined
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|