361 lines
13 KiB
TypeScript
361 lines
13 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import HeroBackground from "@/app/components/cinematic/HeroBackground";
|
|
import MagneticButton from "@/app/components/cinematic/MagneticButton";
|
|
import WhatsAppLink from "@/app/components/WhatsAppLink";
|
|
import { safeJsonLd } from "@/lib/jsonld";
|
|
import { buildBreadcrumbList, buildServiceJsonLd } from "@/lib/seo";
|
|
import {
|
|
getRelatedCases,
|
|
getServicePage,
|
|
servicePages,
|
|
siteName,
|
|
siteUrl,
|
|
} from "@/lib/site-content";
|
|
|
|
interface ServicePageProps {
|
|
params: Promise<{
|
|
slug: string;
|
|
}>;
|
|
}
|
|
|
|
export function generateStaticParams() {
|
|
return servicePages.map((service) => ({ slug: service.slug }));
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: ServicePageProps): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
const service = getServicePage(slug);
|
|
|
|
if (!service) {
|
|
return {
|
|
title: `Serviço não encontrado`,
|
|
};
|
|
}
|
|
|
|
const url = `${siteUrl}/servicos/${service.slug}`;
|
|
|
|
return {
|
|
title: service.seoTitle,
|
|
description: service.metaDescription,
|
|
alternates: {
|
|
canonical: url,
|
|
},
|
|
openGraph: {
|
|
title: service.seoTitle,
|
|
description: service.metaDescription,
|
|
url,
|
|
siteName,
|
|
type: "article",
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: service.seoTitle,
|
|
description: service.metaDescription,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function ServicePage({ params }: ServicePageProps) {
|
|
const { slug } = await params;
|
|
const service = getServicePage(slug);
|
|
|
|
if (!service) {
|
|
notFound();
|
|
}
|
|
|
|
const relatedCases = getRelatedCases(service.relatedCaseIds);
|
|
const pageUrl = `${siteUrl}/servicos/${service.slug}`;
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@graph": [
|
|
buildServiceJsonLd(service),
|
|
buildBreadcrumbList(pageUrl, [
|
|
["Início", siteUrl],
|
|
["Serviços", `${siteUrl}/servicos`],
|
|
[service.navLabel, pageUrl],
|
|
] as const),
|
|
],
|
|
};
|
|
|
|
return (
|
|
<main>
|
|
<script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
|
|
|
|
<section className="ds-section ds-section-dark relative min-h-[340px] overflow-hidden">
|
|
<HeroBackground />
|
|
<div className="ds-section-shell relative z-10">
|
|
<div className="max-w-[860px]">
|
|
<nav aria-label="Breadcrumb" className="mb-sp-6">
|
|
<ol className="flex flex-wrap items-center gap-sp-2 text-sm">
|
|
<li>
|
|
<Link className="ds-link ds-link-muted" href="/">
|
|
Início
|
|
</Link>
|
|
</li>
|
|
<li className="flex items-center gap-sp-2">
|
|
<span aria-hidden="true">/</span>
|
|
<Link className="ds-link ds-link-muted" href="/servicos">
|
|
Serviços
|
|
</Link>
|
|
</li>
|
|
<li className="flex items-center gap-sp-2">
|
|
<span aria-hidden="true">/</span>
|
|
<Link
|
|
aria-current="page"
|
|
className="ds-link ds-link-muted"
|
|
href={`/servicos/${service.slug}`}
|
|
>
|
|
{service.navLabel}
|
|
</Link>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
<p className="ds-eyebrow">{service.eyebrow}</p>
|
|
<h1 className="ds-section-title max-w-[14ch] 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.navLabel}
|
|
placement="service_detail_hero"
|
|
className="ds-link ds-link-accent min-h-12"
|
|
>
|
|
{service.ctaLabel} no WhatsApp
|
|
</WhatsAppLink>
|
|
<MagneticButton
|
|
as="a"
|
|
href="/cases"
|
|
className="ds-link ds-link-muted"
|
|
strength={0.2}
|
|
>
|
|
Ver casos relacionados
|
|
</MagneticButton>
|
|
</div>
|
|
<p className="mt-sp-4 text-sm leading-6 text-white/70">
|
|
Fale diretamente com Evandro. Abre uma conversa, sem precisar
|
|
preencher um formulário. Atendimento remoto a partir de Garuva,
|
|
SC.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<div className="ds-grid-2">
|
|
<article className="ds-card">
|
|
<h2 className="ds-card-title !mt-0">Para quem faz sentido</h2>
|
|
<ul className="ds-list">
|
|
{service.audience.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
|
|
<article className="ds-card">
|
|
<h2 className="ds-card-title !mt-0">O que podemos entregar</h2>
|
|
<ul className="ds-list">
|
|
{service.outcomes.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<div className="ds-grid-2">
|
|
<article className="min-w-0">
|
|
<div className="ds-kicker">Da conversa à entrega</div>
|
|
<h2 className="ds-card-title">Como trabalhamos</h2>
|
|
<ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-sm leading-8 text-[var(--ink-80)]">
|
|
{service.process.map((step) => (
|
|
<li key={step} className="pl-sp-2">
|
|
{step}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</article>
|
|
|
|
<article className="min-w-0">
|
|
<div className="ds-kicker">Possibilidades de uso</div>
|
|
<h2 className="ds-card-title">Imagine na sua rotina</h2>
|
|
<p className="ds-copy">
|
|
Exemplos ilustrativos para ajudar a explicar o serviço, não
|
|
projetos já entregues. O seu escopo será definido na conversa.
|
|
</p>
|
|
<ul className="ds-list">
|
|
{service.examples.map((example) => (
|
|
<li key={example}>{example}</li>
|
|
))}
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div className="ds-section-shell mt-sp-8">
|
|
<details className="border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
|
|
<summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
|
|
Detalhes técnicos e tecnologias
|
|
</summary>
|
|
<div className="max-w-[80ch]">
|
|
<ul className="ds-list">
|
|
{service.technicalDetails.map((detail) => (
|
|
<li key={detail}>{detail}</li>
|
|
))}
|
|
</ul>
|
|
<p className="ds-copy">
|
|
Tecnologias consideradas neste serviço. A seleção depende do
|
|
problema e do ambiente; não é uma lista obrigatória para todo
|
|
projeto.
|
|
</p>
|
|
<ul className="ds-tags" aria-label="Tecnologias do serviço">
|
|
{service.stack.map((item) => (
|
|
<li key={item} className="ds-tag !whitespace-normal">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="ds-section">
|
|
<div className="ds-section-shell">
|
|
<div className="ds-section-header">
|
|
<div className="ds-section-meta">
|
|
<p className="ds-eyebrow">Casos relacionados</p>
|
|
<h2 className="ds-section-title">
|
|
Projetos para conhecer meu trabalho
|
|
</h2>
|
|
<p className="ds-section-description">
|
|
Referências de problemas e soluções relacionados. Cada projeto
|
|
usa as tecnologias indicadas no próprio case; não representa
|
|
todas as plataformas ou tecnologias oferecidas neste serviço.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ds-grid-2">
|
|
{relatedCases.map((caseStudy) => (
|
|
<article key={caseStudy.id} className="ds-card">
|
|
<div className="ds-kicker">{caseStudy.title}</div>
|
|
<h3 className="ds-card-title">{caseStudy.subtitle}</h3>
|
|
<p className="ds-copy">{caseStudy.summary}</p>
|
|
<p className="mt-sp-4 text-[13px] leading-7 text-[var(--meta)]">
|
|
{caseStudy.impact}
|
|
</p>
|
|
<ul className="ds-tags mt-sp-6">
|
|
{caseStudy.stack.map((item) => (
|
|
<li key={item} className="ds-tag !whitespace-normal">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-sp-6 flex flex-wrap gap-sp-3">
|
|
<Link
|
|
href={`/cases/${caseStudy.id}`}
|
|
className="ds-link ds-link-accent"
|
|
>
|
|
Ler case: {caseStudy.title}
|
|
</Link>
|
|
{caseStudy.demoUrl ? (
|
|
<a
|
|
href={caseStudy.demoUrl}
|
|
className="ds-link ds-link-accent"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Abrir projeto: {caseStudy.title}
|
|
</a>
|
|
) : null}
|
|
{caseStudy.githubUrl ? (
|
|
<a
|
|
href={caseStudy.githubUrl}
|
|
className="ds-link ds-link-muted"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Ver código: {caseStudy.title}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<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">Próximo passo</div>
|
|
<h2 className="ds-card-title text-white">
|
|
Conte o que você precisa resolver.
|
|
</h2>
|
|
<p className="ds-copy !text-[rgba(255,255,255,0.76)]">
|
|
Pode ser uma ideia, uma tarefa que toma tempo ou um sistema que
|
|
precisa melhorar. Não é preciso chegar com uma solução técnica.
|
|
Atendo a partir de Garuva, no Norte de Santa Catarina, e
|
|
remotamente.
|
|
</p>
|
|
<div className="mt-sp-6 flex flex-wrap gap-sp-3">
|
|
<WhatsAppLink
|
|
service={service.navLabel}
|
|
placement="service_detail_footer"
|
|
className="ds-link ds-link-accent min-h-12"
|
|
>
|
|
{service.ctaLabel} no WhatsApp
|
|
</WhatsAppLink>
|
|
<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>
|
|
);
|
|
}
|