feat(home): posicionamento com prova, menu sem recarregar e WhatsApp em todo o site
H1 'Sites e sistemas que trazem pedidos pelo WhatsApp e tiram sua operação da planilha.'; HeroWork maior com a SEV; menu Cases, Serviços, Como trabalho, Sobre e IA com next/link e pré-carregamento no hover; menu do celular em tela cheia; WhatsApp flutuante e no rodapé com a mensagem da rota; rodapé em todas as páginas; FAQ da home; /ia como oferta de revisão de app feito com IA; formulário com noscript, validação do mailto e plano B do pop-up; cartões sem foco indevido; sem a fonte Monument.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
e80f73d075
commit
10f170abf4
56 files changed
+3099
-906
No files matched your search
+115
-46
@@ -10,26 +10,51 @@ import WhatsAppLink from "@/app/components/WhatsAppLink";
|
||||
import { safeJsonLd } from "@/lib/jsonld";
|
||||
import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
|
||||
import { siteUrl } from "@/lib/site-content";
|
||||
import { AI_REVIEW_SUBJECT } from "@/lib/whatsapp";
|
||||
|
||||
const pageUrl = `${siteUrl}/ia`;
|
||||
const pageTitle =
|
||||
"Começou um sistema com IA? Revisão e continuidade | Evandro Fonseca Junior";
|
||||
/** Curto de propósito: o template de app/layout.tsx acrescenta " | Evandro.dev.br" e o conjunto cabe em 44 caracteres. */
|
||||
const pageTitle = "Revisão de app feito com IA";
|
||||
const pageDescription =
|
||||
"Protótipo ou sistema criado com IA? Avalio o que pode ser aproveitado, corrijo permissões, dados e publicação e levo o projeto até a produção.";
|
||||
/** Entra na frase "Quero conversar sobre {assunto}." da mensagem do WhatsApp. */
|
||||
const WHATSAPP_SERVICE = "a revisão de um sistema feito com IA";
|
||||
"Fez um app com Lovable, Bolt ou Replit? Eu reviso as falhas de acesso a dados, separo o que aproveitar do que refazer e faço o orçamento para a produção.";
|
||||
/** Entra na frase "Quero conversar sobre {assunto}." da mensagem do WhatsApp (a mesma do botão flutuante em /ia). */
|
||||
const WHATSAPP_SERVICE = AI_REVIEW_SUBJECT;
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: { absolute: pageTitle },
|
||||
title: pageTitle,
|
||||
description: pageDescription,
|
||||
...buildPageSocialMetadata({
|
||||
url: pageUrl,
|
||||
title: pageTitle,
|
||||
// as prévias de compartilhamento não passam pelo template do título
|
||||
title: `${pageTitle} | Evandro.dev.br`,
|
||||
description: pageDescription,
|
||||
type: "website",
|
||||
}),
|
||||
};
|
||||
|
||||
/** O que a pessoa recebe ao contratar a revisão. Sem prazo e sem preço: isso se combina na conversa. */
|
||||
const DELIVERABLES = [
|
||||
{
|
||||
title: "As falhas de acesso a dados",
|
||||
description:
|
||||
"Testo se uma pessoa consegue ver ou alterar os dados de outra e mostro o que precisa de correção.",
|
||||
},
|
||||
{
|
||||
title: "O que dá para aproveitar",
|
||||
description: "O que já está pronto e pode seguir no projeto.",
|
||||
},
|
||||
{
|
||||
title: "O que é melhor refazer",
|
||||
description:
|
||||
"As partes que não se sustentam em uso real, com o motivo de cada uma.",
|
||||
},
|
||||
{
|
||||
title: "Um orçamento para pôr em produção",
|
||||
description:
|
||||
"O que falta para o app atender clientes de verdade, com o orçamento por escrito.",
|
||||
},
|
||||
];
|
||||
|
||||
const RESPONSIBILITIES = [
|
||||
{
|
||||
title: "Quem pode acessar cada dado?",
|
||||
@@ -98,7 +123,7 @@ export default function AiPage() {
|
||||
"@graph": [
|
||||
buildBreadcrumbList(pageUrl, [
|
||||
["Início", siteUrl],
|
||||
["IA no desenvolvimento", pageUrl],
|
||||
["Revisão de app feito com IA", pageUrl],
|
||||
] as const),
|
||||
],
|
||||
};
|
||||
@@ -112,12 +137,12 @@ export default function AiPage() {
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: "Início", href: "/" },
|
||||
{ label: "IA no desenvolvimento", href: "/ia" },
|
||||
{ label: "Revisão de app feito com IA", href: "/ia" },
|
||||
]}
|
||||
/>
|
||||
<p className="ds-eyebrow">IA no desenvolvimento</p>
|
||||
<h1 className="ds-section-title max-w-[22ch] text-balance">
|
||||
Começou um sistema com IA? Dá para partir daí.
|
||||
Revisão de app feito com IA (Lovable, Bolt, Replit)
|
||||
</h1>
|
||||
<p className="ds-copy max-w-[62ch]">
|
||||
A IA permite testar ideias e construir protótipos mesmo sem
|
||||
@@ -131,7 +156,7 @@ export default function AiPage() {
|
||||
service={WHATSAPP_SERVICE}
|
||||
placement="ia_hero"
|
||||
>
|
||||
Falar sobre meu sistema
|
||||
Pedir a revisão do meu app
|
||||
</WhatsAppLink>
|
||||
<Link href="/cases" className={textLinkDark}>
|
||||
Ver projetos entregues
|
||||
@@ -140,6 +165,34 @@ export default function AiPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ds-section" aria-labelledby="ia-receber-title">
|
||||
<div className="ds-section-shell">
|
||||
<h2 id="ia-receber-title" className="ds-section-title max-w-[26ch]">
|
||||
O que você recebe na revisão
|
||||
</h2>
|
||||
<ol className="mt-sp-8 grid gap-sp-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{DELIVERABLES.map((item, index) => (
|
||||
<li
|
||||
key={item.title}
|
||||
className="border-t border-[var(--border)] pt-sp-5"
|
||||
>
|
||||
<span className="ds-kicker">
|
||||
{String(index + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<h3 className="mt-sp-3 text-lg font-semibold leading-snug">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="ds-copy">{item.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<p className="ds-copy mt-sp-8 max-w-[65ch]">
|
||||
Começa por uma conversa pelo WhatsApp, para eu entender o app e o
|
||||
que ele precisa fazer. Não envie senhas nem acessos por mensagem.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ds-section" aria-labelledby="ia-contratar-title">
|
||||
<div className="ds-section-shell">
|
||||
<h2 id="ia-contratar-title" className="ds-section-title max-w-[26ch]">
|
||||
@@ -171,40 +224,56 @@ export default function AiPage() {
|
||||
|
||||
<section className="ds-section" aria-labelledby="ia-casos-title">
|
||||
<div className="ds-section-shell">
|
||||
<h2 id="ia-casos-title" className="ds-section-title max-w-[26ch]">
|
||||
O que casos documentados ensinam
|
||||
</h2>
|
||||
<p className="ds-copy max-w-[75ch]">
|
||||
São episódios de 2025, não avaliações atuais das plataformas. Eles
|
||||
mostram riscos de configuração, permissões e operação; não provam
|
||||
que todo sistema feito com IA seja inseguro ou que um profissional
|
||||
elimine qualquer risco.
|
||||
</p>
|
||||
<div className="mt-sp-6 grid gap-sp-6 lg:grid-cols-3">
|
||||
{INCIDENTS.map((incident) => (
|
||||
<article key={incident.title} className="ds-card">
|
||||
<h3 className="ds-card-title !mt-0">{incident.title}</h3>
|
||||
<p className="ds-copy">{incident.summary}</p>
|
||||
<p className="ds-copy">
|
||||
<strong>O cuidado técnico:</strong> {incident.care}
|
||||
</p>
|
||||
<ul className="mt-sp-4 flex flex-col gap-sp-1">
|
||||
{incident.links.map((link) => (
|
||||
<li key={link.href}>
|
||||
<a
|
||||
className="inline-flex min-h-11 items-center text-sm underline underline-offset-4"
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
{/* Recolhido: as notícias sustentam a oferta, mas não são o que a pessoa veio ver. */}
|
||||
<details className="group border-y border-[var(--border)]">
|
||||
<summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-sp-4 py-sp-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ink)] [&::-webkit-details-marker]:hidden">
|
||||
<h2
|
||||
id="ia-casos-title"
|
||||
className="font-display text-[clamp(20px,3vw,28px)] font-semibold leading-tight tracking-[-0.02em]"
|
||||
>
|
||||
O que casos documentados ensinam
|
||||
</h2>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="shrink-0 font-mono text-2xl leading-none text-[var(--meta)] transition-transform group-open:rotate-45 motion-reduce:transition-none"
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</summary>
|
||||
<div className="pb-sp-8">
|
||||
<p className="ds-copy max-w-[75ch]">
|
||||
São episódios de 2025, não avaliações atuais das plataformas.
|
||||
Eles mostram riscos de configuração, permissões e operação; não
|
||||
provam que todo sistema feito com IA seja inseguro ou que um
|
||||
profissional elimine qualquer risco.
|
||||
</p>
|
||||
<div className="mt-sp-6 grid gap-sp-6 lg:grid-cols-3">
|
||||
{INCIDENTS.map((incident) => (
|
||||
<article key={incident.title} className="ds-card">
|
||||
<h3 className="ds-card-title !mt-0">{incident.title}</h3>
|
||||
<p className="ds-copy">{incident.summary}</p>
|
||||
<p className="ds-copy">
|
||||
<strong>O cuidado técnico:</strong> {incident.care}
|
||||
</p>
|
||||
<ul className="mt-sp-4 flex flex-col gap-sp-1">
|
||||
{incident.links.map((link) => (
|
||||
<li key={link.href}>
|
||||
<a
|
||||
className="inline-flex min-h-11 items-center text-[15px] md:text-sm underline underline-offset-4"
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -229,7 +298,7 @@ export default function AiPage() {
|
||||
adequação.
|
||||
</p>
|
||||
<a
|
||||
className="mt-sp-4 inline-flex min-h-11 items-center text-sm underline underline-offset-4"
|
||||
className="mt-sp-4 inline-flex min-h-11 items-center text-[15px] md:text-sm underline underline-offset-4"
|
||||
href="https://www.gov.br/anpd/pt-br/acesso-a-informacao/institucional/atos-normativos/regulamentacoes_anpd/resolucao-cd-anpd-no-2-de-27-de-janeiro-de-2022"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
Reference in new issue
Block a user