Evandro Fonseca Junior
e80f73d075
Case com mídia ao lado do título e play acessível; problema de cada cliente reescrito com base nos dados; serviços relacionados em 2 cards; FAQ antes do próximo passo e bloco 'Onde já apliquei isso'; Apolo citada em IoT e arquitetura. metaTitle até 43 caracteres e descrições até 155 com teste; JSON-LD CreativeWork; imagens de compartilhamento abaixo de 100 KB; 404 e robots corrigidos; server-only nos módulos com node:.
318 lines
12 KiB
TypeScript
318 lines
12 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
|
|
import { Breadcrumb } from "@/app/components/Breadcrumb";
|
|
import {
|
|
pageTop,
|
|
primaryButton,
|
|
secondaryButtonDark,
|
|
textLink,
|
|
} from "@/app/components/button-styles";
|
|
import WhatsAppLink from "@/app/components/WhatsAppLink";
|
|
import { safeJsonLd } from "@/lib/jsonld";
|
|
import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
|
|
import { clientCases, serviceHubLinks, 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 para apresentar seu negócio e organizar a operação. Atendimento de Garuva-SC para todo o Brasil.";
|
|
|
|
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",
|
|
},
|
|
];
|
|
|
|
export const metadata: Metadata = {
|
|
title: pageTitle,
|
|
description: pageDescription,
|
|
...buildPageSocialMetadata({
|
|
url: pageUrl,
|
|
title: pageTitle,
|
|
description: pageDescription,
|
|
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 ${pageTop}`}>
|
|
<div className="ds-section-shell">
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: "Início", href: "/" },
|
|
{ label: "Serviços", href: "/servicos" },
|
|
]}
|
|
/>
|
|
<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={primaryButton}
|
|
service="Sites, sistemas e aplicativos"
|
|
placement="service_hub_hero"
|
|
>
|
|
Falar com Evandro no WhatsApp
|
|
</WhatsAppLink>
|
|
<a
|
|
href="#projetos"
|
|
className={`${secondaryButtonDark} 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={primaryButton}
|
|
service={intent.service}
|
|
placement="service_hub_intent"
|
|
>
|
|
{intent.ctaLabel}
|
|
</WhatsAppLink>
|
|
<Link
|
|
href={intent.href}
|
|
className={`${textLink} 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]">
|
|
Projetos feitos para empresas. Abra o case para ver o que foi feito
|
|
e como o site ficou.
|
|
</p>
|
|
<div className="mt-sp-8 grid gap-sp-8 md:grid-cols-2">
|
|
{clientCases.map((caseStudy) => (
|
|
<article
|
|
key={caseStudy.id}
|
|
className="border-t border-[var(--border)] pt-sp-6"
|
|
>
|
|
<CaseCoverLink
|
|
id={caseStudy.id}
|
|
title={caseStudy.title}
|
|
demoUrl={caseStudy.demoUrl}
|
|
/>
|
|
<p className="ds-kicker">{caseStudy.title}</p>
|
|
<h3 className="ds-card-title">{caseStudy.headline}</h3>
|
|
<p className="ds-copy">{caseStudy.summary}</p>
|
|
<Link
|
|
href={`/cases/${caseStudy.id}`}
|
|
className={`${textLink} mt-sp-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-[15px] md: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 o que posso fazer por você.
|
|
</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={`${primaryButton} mt-sp-6`}
|
|
service="Sites, sistemas e aplicativos"
|
|
placement="service_hub_footer"
|
|
>
|
|
Conversar com Evandro no WhatsApp
|
|
</WhatsAppLink>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|