feat: control room hero, SEO/AEO optimization and design system fixes

Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
2026-08-27 10:55:21 -03:00
1 parent 0920370f30
commit b791b7de9e
@@ -1,6 +1,8 @@
-import Link from "next/link";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import HeroBackground from "@/app/components/cinematic/HeroBackground";
+import MagneticButton from "@/app/components/cinematic/MagneticButton";
+import { safeJsonLd } from "@/lib/jsonld";
 import {
  getRelatedCases,
  getServicePage,
@@ -9,8 +11,6 @@ import {
  siteName,
  siteUrl,
 } from "@/lib/site-content";
-import HeroBackground from "@/app/components/cinematic/HeroBackground";
-import MagneticButton from "@/app/components/cinematic/MagneticButton";

 interface ServicePageProps {
  params: Promise<{
@@ -30,7 +30,7 @@ export async function generateMetadata({

  if (!service) {
    return {
-      title: `Servico nao encontrado | ${siteName}`,
+      title: `Serviço não encontrado`,
    };
  }

@@ -102,13 +102,13 @@ export default async function ServicePage({ params }: ServicePageProps) {
          {
            "@type": "ListItem",
            position: 1,
-            name: "Inicio",
+            name: "Início",
            item: siteUrl,
          },
          {
            "@type": "ListItem",
            position: 2,
-            name: "Servicos",
+            name: "Serviços",
            item: `${siteUrl}/servicos`,
          },
          {
@@ -124,10 +124,7 @@ export default async function ServicePage({ params }: ServicePageProps) {

  return (
    <main>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

      <section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
        <HeroBackground />
@@ -141,10 +138,20 @@ export default async function ServicePage({ params }: ServicePageProps) {
              {service.intro}
            </p>
            <div className="mt-sp-8 flex flex-wrap gap-sp-3">
-              <MagneticButton as="a" href={service.ctaHref} className="ds-link ds-link-accent" strength={0.25}>
+              <MagneticButton
+                as="a"
+                href={service.ctaHref}
+                className="ds-link ds-link-accent"
+                strength={0.25}
+              >
                {service.ctaLabel}
              </MagneticButton>
-              <MagneticButton as="a" href="/cases" className="ds-link ds-link-muted" strength={0.2}>
+              <MagneticButton
+                as="a"
+                href="/cases"
+                className="ds-link ds-link-muted"
+                strength={0.2}
+              >
                Ver casos relacionados
              </MagneticButton>
            </div>
@@ -157,7 +164,9 @@ export default async function ServicePage({ params }: ServicePageProps) {
          <div className="ds-grid-2">
            <article className="ds-card">
              <div className="ds-kicker">Para quem faz sentido</div>
-              <h2 className="ds-card-title">Contextos em que esse servico encaixa melhor</h2>
+              <h2 className="ds-card-title">
+                Contextos em que esse serviço encaixa melhor
+              </h2>
              <ul className="ds-list mt-sp-5 pl-[1.15rem]">
                {service.audience.map((item) => (
                  <li key={item}>{item}</li>
@@ -167,7 +176,9 @@ export default async function ServicePage({ params }: ServicePageProps) {

            <article className="ds-card">
              <div className="ds-kicker">O que muda</div>
-              <h2 className="ds-card-title">Resultados que eu busco destravar</h2>
+              <h2 className="ds-card-title">
+                Resultados que eu busco destravar
+              </h2>
              <ul className="ds-list mt-sp-5 pl-[1.15rem]">
                {service.outcomes.map((item) => (
                  <li key={item}>{item}</li>
@@ -186,7 +197,10 @@ export default async function ServicePage({ params }: ServicePageProps) {
              <h2 className="ds-card-title">Processo de trabalho</h2>
              <ol className="list-none mt-sp-5 space-y-sp-4 text-[14px] leading-8 text-[var(--ink-80)]">
                {service.process.map((step, index) => (
-                  <li key={step} className="border-t border-[var(--border)] pt-sp-4 first:border-t-0 first:pt-0">
+                  <li
+                    key={step}
+                    className="border-t border-[var(--border)] pt-sp-4 first:border-t-0 first:pt-0"
+                  >
                    <span className="mr-sp-3 inline-flex h-7 min-w-7 items-center justify-center rounded-full border border-[var(--border)] text-[11px] font-semibold text-[var(--meta)]">
                      {index + 1}
                    </span>
@@ -197,15 +211,22 @@ export default async function ServicePage({ params }: ServicePageProps) {
            </article>

            <article className="ds-card">
-              <div className="ds-kicker">Stack e repertorio</div>
-              <h2 className="ds-card-title">Tecnologias e capacidades envolvidas</h2>
+              <div className="ds-kicker">Stack e repertório</div>
+              <h2 className="ds-card-title">
+                Tecnologias e capacidades envolvidas
+              </h2>
              <p className="ds-copy">
-                A stack entra como meio para resolver o problema certo, com criterio de manutencao,
-                observabilidade e evolucao do produto.
+                A stack entra como meio para resolver o problema certo, com
+                critério de manutenção, observabilidade e evolução do produto.
              </p>
              <ul className="ds-tags">
                {service.stack.map((item) => (
-                  <MagneticButton key={item} as="li" className="ds-tag" strength={0.15}>
+                  <MagneticButton
+                    key={item}
+                    as="li"
+                    className="ds-tag"
+                    strength={0.15}
+                  >
                    {item}
                  </MagneticButton>
                ))}
@@ -220,9 +241,12 @@ export default async function ServicePage({ params }: ServicePageProps) {
          <div className="ds-section-header">
            <div className="ds-section-meta">
              <p className="ds-eyebrow">Casos relacionados</p>
-              <h2 className="ds-section-title">Projetos que reforcam esse tipo de entrega</h2>
+              <h2 className="ds-section-title">
+                Projetos que reforçam esse tipo de entrega
+              </h2>
              <p className="ds-section-description">
-                Alguns exemplos de contexto tecnico em que esse servico se conecta a entregas reais.
+                Alguns exemplos de contexto técnico em que esse serviço se
+                conecta a entregas reais.
              </p>
            </div>
          </div>
@@ -245,13 +269,23 @@ export default async function ServicePage({ params }: ServicePageProps) {
                </ul>
                <div className="mt-sp-6 flex flex-wrap gap-sp-3">
                  {caseStudy.demoUrl ? (
-                    <a href={caseStudy.demoUrl} className="ds-link ds-link-accent" target="_blank" rel="noreferrer">
+                    <a
+                      href={caseStudy.demoUrl}
+                      className="ds-link ds-link-accent"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
                      Abrir projeto
                    </a>
                  ) : null}
                  {caseStudy.githubUrl ? (
-                    <a href={caseStudy.githubUrl} className="ds-link ds-link-muted" target="_blank" rel="noreferrer">
-                      Ver codigo
+                    <a
+                      href={caseStudy.githubUrl}
+                      className="ds-link ds-link-muted"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Ver código
                    </a>
                  ) : null}
                </div>
@@ -261,28 +295,65 @@ export default async function ServicePage({ params }: ServicePageProps) {
        </div>
      </section>

-      <section className="ds-section ds-section-dark">
+      <section className="ds-section ds-section-dark pb-sp-6">
        <div className="ds-section-shell">
          <div className="ds-card border-white/10 bg-[rgba(255,255,255,0.03)]">
-            <div className="ds-kicker">Proximo passo</div>
+            <div className="ds-kicker">Próximo passo</div>
            <h2 className="ds-card-title text-white">
-              Se esse servico parece aderente ao seu contexto, a conversa inicial ja pode ser objetiva.
+              Se esse serviço parece aderente ao seu contexto, a conversa
+              inicial já pode ser objetiva.
            </h2>
            <p className="ds-copy !text-[rgba(255,255,255,0.76)]">
-              Traga o sistema, o gargalo e o objetivo de negocio. Eu estruturo a leitura tecnica e
-              indico o caminho mais seguro para avancar.
+              Traga o sistema, o gargalo e o objetivo de negócio. Eu estruturo a
+              leitura técnica e indico o caminho mais seguro para avançar.
            </p>
            <div className="mt-sp-6 flex flex-wrap gap-sp-3">
-              <MagneticButton as="a" href={service.ctaHref} className="ds-link ds-link-accent" strength={0.25}>
+              <MagneticButton
+                as="a"
+                href={service.ctaHref}
+                className="ds-link ds-link-accent"
+                strength={0.25}
+              >
                {service.ctaLabel}
              </MagneticButton>
-              <MagneticButton as="a" href="/servicos" className="ds-link ds-link-muted" strength={0.2}>
-                Ver todos os servicos
+              <MagneticButton
+                as="a"
+                href="/servicos"
+                className="ds-link ds-link-muted"
+                strength={0.2}
+              >
+                Ver todos os serviços
              </MagneticButton>
            </div>
          </div>
        </div>
      </section>
+
+      {service.faq && service.faq.length > 0 ? (
+        <section className="ds-section">
+          <div className="ds-section-shell">
+            <div className="ds-section-header">
+              <div className="ds-section-meta">
+                <p className="ds-eyebrow">Dúvidas comuns</p>
+                <h2 className="ds-section-title">Perguntas frequentes</h2>
+                <p className="ds-section-description">
+                  Respostas diretas às perguntas que costumam aparecer antes de
+                  cada projeto começar.
+                </p>
+              </div>
+            </div>
+
+            <div className="ds-grid-2">
+              {service.faq.map((item) => (
+                <article key={item.question} className="ds-card">
+                  <h3 className="ds-card-title">{item.question}</h3>
+                  <p className="ds-copy">{item.answer}</p>
+                </article>
+              ))}
+            </div>
+          </div>
+        </section>
+      ) : null}
    </main>
  );
 }