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
1 parent e63f3c2ebd
commit fc44a69fb3
@@ -0,0 +1,73 @@
+import { textLink } from "./button-styles";
+import HoverPrefetchLink from "./HoverPrefetchLink";
+
+export interface FaqEntry {
+  question: string;
+  /** Resposta vazia = pergunta preparada, que ainda não é exibida. */
+  answer: string;
+  link?: { href: string; label: string };
+}
+
+/**
+ * Perguntas frequentes em acordeão, um formato só no site: pergunta na linha, resposta ao abrir, "+" que gira.
+ * A home (HomeFaq), as páginas de serviço e a de serviços usam este componente. Só aparecem as perguntas com resposta; sem nenhuma, a seção não existe.
+ * Nunca escrever aqui prazo, preço, garantia ou política de pagamento que o dono não tenha dito.
+ */
+export function Faq({
+  items,
+  id = "faq",
+  title = "Perguntas frequentes",
+  eyebrow = "Dúvidas comuns",
+}: {
+  items?: readonly FaqEntry[];
+  /** Âncora da seção; o título leva `${id}-title`. */
+  id?: string;
+  title?: string;
+  eyebrow?: string;
+}) {
+  const answered = (items ?? []).filter((item) => item.answer.trim() !== "");
+  if (answered.length === 0) return null;
+
+  return (
+    <section id={id} aria-labelledby={`${id}-title`} className="ds-section">
+      <div className="ds-section-shell">
+        <p className="ds-eyebrow">{eyebrow}</p>
+        <h2
+          id={`${id}-title`}
+          className="ds-section-title max-w-[22ch] text-balance"
+        >
+          {title}
+        </h2>
+        <div className="mt-sp-8 max-w-[860px]">
+          {answered.map((item) => (
+            <details
+              key={item.question}
+              className="group border-t border-[var(--border)] last:border-b"
+            >
+              <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-sp-4 py-sp-4 font-display text-[17px] font-semibold leading-snug text-[var(--ink)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ink)] [&::-webkit-details-marker]:hidden">
+                {item.question}
+                <span
+                  aria-hidden="true"
+                  className="shrink-0 font-mono text-xl leading-none text-[var(--meta)] transition-transform group-open:rotate-45 motion-reduce:transition-none"
+                >
+                  +
+                </span>
+              </summary>
+              <div className="pb-sp-5">
+                <p className="ds-copy max-w-[65ch]">{item.answer}</p>
+                {item.link ? (
+                  <HoverPrefetchLink
+                    href={item.link.href}
+                    className={`${textLink} mt-sp-2 text-[var(--ink-80)]`}
+                  >
+                    {item.link.label}
+                  </HoverPrefetchLink>
+                ) : null}
+              </div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}