feat(servicos): topo, entregáveis e cases por serviço, assunto próprio no WhatsApp e títulos curtos

2026-10-14 22:54:18 -03:00
1 parent cf360041bd
commit 2fd8b063d9
@@ -0,0 +1,87 @@
+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>
+  );
+}