portifolio-evandrodevbr/app/servicos/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList } from "@/lib/seo";
import {
  caseStudies,
  serviceHubLinks,
  siteName,
  siteUrl,
} from "@/lib/site-content";

const pageUrl = `${siteUrl}/servicos`;
const pageTitle = "Sites, Sistemas e Aplicativos sob Medida";
const pageDescription =
  "Sites, sistemas web e aplicativos sob medida com Evandro, desenvolvedor em Garuva-SC e atendimento remoto no Brasil. Conheça projetos e converse pelo WhatsApp.";

const businessIntents = [
  {
    title: "Quero um site para meu negócio",
    description:
      "Apresente seus serviços, produtos e diferenciais em um endereço próprio, com leitura no celular e um caminho claro para o cliente entrar em contato.",
    href: "/servicos/criacao-de-sites",
    linkLabel: "Conhecer a criação de sites",
    service: "Sites profissionais",
    ctaLabel: "Conversar sobre meu site",
  },
  {
    title: "Preciso organizar minha operação",
    description:
      "Um sistema web para acompanhar pedidos, atendimentos ou informações hoje espalhadas em planilhas. Também posso conectar ferramentas e melhorar o software que você já usa.",
    href: "/servicos/engenharia-de-software",
    linkLabel: "Conhecer o desenvolvimento de sistemas",
    service: "Sistemas web",
    ctaLabel: "Conversar sobre meu sistema",
  },
  {
    title: "Quero desenvolver um aplicativo",
    description:
      "Leve um fluxo de trabalho para o celular ou computador. Avaliamos quem vai usar, os recursos necessários e a plataforma antes de definir o desenvolvimento e a distribuição.",
    href: "/servicos/engenharia-de-software",
    linkLabel: "Entender o escopo de um app mobile",
    service: "Aplicativos mobile e desktop",
    ctaLabel: "Conversar sobre meu aplicativo",
  },
];

const featuredCases = caseStudies.filter((caseStudy) =>
  ["sc-plus", "nutriscan"].includes(caseStudy.id),
);

export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
  alternates: {
    canonical: pageUrl,
  },
  openGraph: {
    locale: "pt_BR",
    title: pageTitle,
    description: pageDescription,
    url: pageUrl,
    siteName,
    type: "website",
  },
};

export default function ServicesIndexPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${pageUrl}#page`,
        name: pageTitle,
        url: pageUrl,
        description: pageDescription,
      },
      {
        "@type": "ItemList",
        itemListElement: serviceHubLinks.map((service, index) => ({
          "@type": "ListItem",
          position: index + 1,
          url: `${siteUrl}${service.href}`,
          name: service.label,
        })),
      },
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Serviços", pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <nav aria-label="Breadcrumb" className="mb-sp-6">
            <ol className="flex flex-wrap items-center gap-sp-3 text-sm">
              <li>
                <Link
                  className="inline-flex min-h-11 items-center underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                  href="/"
                >
                  Início
                </Link>
              </li>
              <li className="flex items-center gap-sp-3">
                <span aria-hidden="true">/</span>
                <span aria-current="page">Serviços</span>
              </li>
            </ol>
          </nav>
          <h1 className="ds-section-title max-w-[22ch] text-balance">
            Sites, sistemas e aplicativos sob medida.
          </h1>
          <p className="ds-copy max-w-[62ch]">
            Apresente seu negócio, organize a operação ou conecte ferramentas
            que hoje dão trabalho. Desenvolvo a solução a partir do que você
            precisa resolver, não de uma lista de tecnologias.
          </p>
          <div className="mt-sp-6 flex flex-wrap items-center gap-sp-4">
            <WhatsAppLink
              className="ds-link ds-link-accent min-h-12"
              service="Sites, sistemas e aplicativos"
              placement="service_hub_hero"
            >
              Falar com Evandro no WhatsApp
            </WhatsAppLink>
            <a
              href="#projetos"
              className="ds-link ds-link-muted min-h-12 focus-visible:outline-2 focus-visible:outline-offset-4"
            >
              Ver projetos realizados
            </a>
          </div>
          <p className="ds-copy max-w-[62ch]">
            Sou Evandro, desenvolvedor em Garuva, Santa Catarina. Atendimento
            remoto para todo o Brasil, com conversa direta comigo.
          </p>
        </div>
      </section>

      <section className="ds-section" aria-labelledby="necessidade-title">
        <div className="ds-section-shell grid items-start gap-sp-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-sp-16">
          <div>
            <h2 id="necessidade-title" className="ds-section-title">
              O que você precisa fazer?
            </h2>
            <p className="ds-copy">
              Não precisa chegar com um projeto técnico pronto. Começamos pela
              sua rotina e pelo que precisa mudar.
            </p>
          </div>
          <div className="divide-y divide-[var(--border)]">
            {businessIntents.map((intent) => (
              <article
                key={intent.service}
                className="py-sp-6 first:pt-0 last:pb-0"
              >
                <h3 className="ds-card-title">{intent.title}</h3>
                <p className="ds-copy">{intent.description}</p>
                <div className="mt-sp-4 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-2">
                  <WhatsAppLink
                    className="ds-link ds-link-accent min-h-11"
                    service={intent.service}
                    placement="service_hub_intent"
                  >
                    {intent.ctaLabel}
                  </WhatsAppLink>
                  <Link
                    href={intent.href}
                    className="inline-flex min-h-11 items-center text-sm underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                  >
                    {intent.linkLabel}
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section
        id="projetos"
        className="ds-section"
        aria-labelledby="projetos-title"
      >
        <div className="ds-section-shell">
          <h2 id="projetos-title" className="ds-section-title">
            Veja o trabalho antes de conversar.
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Dois projetos com demonstrações publicadas. Os cases mostram o que
            foi implementado e as tecnologias usadas, sem promessas de resultado
            comercial.
          </p>
          <div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
            {featuredCases.map((caseStudy) => (
              <article
                key={caseStudy.id}
                className="border-t border-[var(--border)] pt-sp-6"
              >
                <p className="mb-sp-3 text-sm text-[var(--meta)]">
                  Demonstração publicada
                </p>
                <h3 className="ds-card-title">{caseStudy.title}</h3>
                <p className="ds-copy">{caseStudy.summary}</p>
                <Link
                  href={`/cases/${caseStudy.id}`}
                  className="mt-sp-4 inline-flex min-h-11 items-center text-sm underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                >
                  Ver o case {caseStudy.title}
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section">
        <div className="ds-section-shell grid gap-sp-10 lg:grid-cols-2 lg:gap-sp-16">
          <div>
            <h2 className="ds-section-title">
              Como saímos da conversa para a entrega.
            </h2>
            <ol className="ds-list space-y-sp-4 list-decimal">
              <li>
                <strong>Entender o problema.</strong> Conversamos sobre o
                negócio, quem vai usar e o que já existe.
              </li>
              <li>
                <strong>Combinar o escopo.</strong> Definimos prioridades,
                plataformas, responsabilidades, orçamento e prazo na proposta.
              </li>
              <li>
                <strong>Construir e revisar.</strong> Você acompanha as etapas.
                Validamos a entrega e combinamos publicação, suporte e evolução.
              </li>
            </ol>
          </div>
          <div>
            <h2 className="ds-card-title">Antes de contratar</h2>
            <dl className="mt-sp-5 space-y-sp-6 text-sm">
              <div>
                <dt className="font-semibold">
                  Quanto custa e quanto tempo leva?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  Depende das funcionalidades, conteúdo e integrações. O valor e
                  o prazo são definidos depois de entender os requisitos, antes
                  de iniciar o desenvolvimento.
                </dd>
              </div>
              <div>
                <dt className="font-semibold">
                  Preciso estar perto de Garuva?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  Não. O atendimento é remoto, com conversas, demonstrações e
                  revisões on-line para projetos em todo o Brasil.
                </dd>
              </div>
              <div>
                <dt className="font-semibold">
                  E se eu já tiver um site ou sistema?
                </dt>
                <dd className="ds-copy !mt-sp-2">
                  Avalio a base atual para propor melhorias, correções ou
                  integrações. Recomeçar do zero não é uma condição para
                  trabalhar comigo.
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </section>

      <section className="ds-section" aria-labelledby="servicos-title">
        <div className="ds-section-shell">
          <h2 id="servicos-title" className="ds-section-title">
            Quer aprofundar o escopo técnico?
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Consulte as áreas de atuação, incluindo desktop, integrações,
            consultoria e IoT. Cada página explica possibilidades e limites.
          </p>
          <ul className="mt-sp-8 divide-y divide-[var(--border)] border-y border-[var(--border)]">
            {serviceHubLinks.map((service) => (
              <li
                key={service.href}
                className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-sp-8"
              >
                <Link
                  href={service.href}
                  className="inline-flex min-h-11 items-center font-semibold underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
                >
                  {service.label}
                </Link>
                <p className="ds-copy !mt-0">{service.description}</p>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <h2 className="ds-section-title max-w-[24ch]">
            Conte o que você quer resolver.
          </h2>
          <p className="ds-copy max-w-[62ch]">
            Pode ser uma ideia nova, uma rotina manual ou um sistema que precisa
            melhorar. Me conte pelo WhatsApp; não precisa preencher um
            formulário para começar.
          </p>
          <WhatsAppLink
            className="ds-link ds-link-accent mt-sp-6 min-h-12"
            service="Sites, sistemas e aplicativos"
            placement="service_hub_footer"
          >
            Conversar com Evandro no WhatsApp
          </WhatsAppLink>
        </div>
      </section>
    </main>
  );
}