evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): ofertas que vendem o título, WhatsApp no hero e menu do celular acessível

Browse Source 
Três ofertas (site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema existente) com miniatura e formulário com o tipo escolhido; botão principal do hero abre o WhatsApp; moldura da SEV no hero do celular; menu fecha ao navegar, Esc, foco preso incluindo a barra de cookies e espaço para ela; CinematicHome como componente de servidor com ilha cliente; /ia com H1 de oferta e cartão do que você recebe; botão flutuante em aside com transform; AVIF antes de WebP; copy sem repetir contato direto.
This commit is contained in:
Evandro Fonseca Junior committed 2026-10-14 17:01:36 -03:00
1 parent de6af74a0c
commit f8545cd442
44 files changed
+2286 -571
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/ia/page.tsx
+64 -27
View File
@@ -1,5 +1,4 @@
import type { Metadata } from "next";
import Link from "next/link";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
pageTop,
@@ -25,8 +24,7 @@ export const metadata: Metadata = {
description: pageDescription,
...buildPageSocialMetadata({
url: pageUrl,
// as prévias de compartilhamento não passam pelo template do título
title: `${pageTitle} | Evandro.dev.br`,
title: pageTitle,
description: pageDescription,
type: "website",
}),
@@ -140,32 +138,71 @@ export default function AiPage() {
{ 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">
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
experiência em programação. Quando o sistema passa a cuidar de
clientes, dinheiro ou dados pessoais, alguém precisa avaliar o que
foi gerado e validar como ele se comporta fora da demonstração.
</p>
<div className="mt-sp-6 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-3">
<WhatsAppLink
className={primaryButton}
service={WHATSAPP_SERVICE}
placement="ia_hero"
<div className="grid items-center gap-sp-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] lg:gap-sp-12">
<div className="min-w-0">
<p className="ds-eyebrow">IA no desenvolvimento</p>
<h1 className="ds-section-title max-w-[24ch] text-balance">
Seu app feito com IA está pronto para receber clientes? Eu testo
antes deles.
</h1>
<p className="ds-copy max-w-[62ch]">
A IA permite testar ideias e construir protótipos mesmo sem
experiência em programação. Quando o sistema passa a cuidar de
clientes, dinheiro ou dados pessoais, alguém precisa avaliar o
que foi gerado e validar como ele se comporta fora da
demonstração. Revisão para apps criados com Lovable, Bolt,
Replit e ferramentas parecidas.
</p>
<div className="mt-sp-6 flex flex-wrap items-center gap-x-sp-6 gap-y-sp-3">
<WhatsAppLink
className={primaryButton}
service={WHATSAPP_SERVICE}
placement="ia_hero"
>
Pedir a revisão do meu app
</WhatsAppLink>
{/* Segue na própria página: os cases do portfólio não são revisões de app feito com IA. */}
<a href="#ia-receber" className={textLinkDark}>
Ver como a revisão funciona
</a>
</div>
</div>
<div
data-testid="ia-review-card"
className="min-w-0 border border-white/15 bg-white/[0.04] p-sp-6 sm:p-sp-8"
>
Pedir a revisão do meu app
</WhatsAppLink>
<Link href="/cases" className={textLinkDark}>
Ver projetos entregues
</Link>
<p className="font-display text-xl font-semibold leading-7 text-white">
O que você recebe
</p>
<ol className="mt-sp-5 flex flex-col">
{DELIVERABLES.map((item, index) => (
<li
key={item.title}
className="flex items-start gap-sp-4 border-t border-white/12 py-sp-4 first:border-t-0 first:pt-0 last:pb-0"
>
<span
aria-hidden="true"
className="w-7 shrink-0 font-mono text-[15px] leading-6 text-white/60"
>
{String(index + 1).padStart(2, "0")}
</span>
<span className="min-w-0 font-display text-base leading-6 text-white/90">
{item.title}
</span>
</li>
))}
</ol>
</div>
</div>
</div>
</section>
<section className="ds-section" aria-labelledby="ia-receber-title">
<section
id="ia-receber"
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
@@ -198,7 +235,7 @@ export default function AiPage() {
<h2 id="ia-contratar-title" className="ds-section-title max-w-[26ch]">
Se a IA cria um sistema, por que contratar um desenvolvedor?
</h2>
<div className="mt-sp-6 border-l-2 border-[var(--slash)] pl-sp-5">
<div className="mt-sp-6 border-l-2 border-[var(--ink)] pl-sp-5">
<p className="max-w-[75ch] text-lg leading-8 text-[var(--ink)]">
Você contrata engenharia para transformar as regras do seu negócio
em um sistema que possa ser testado, operado e mantido. A IA pode
@@ -259,7 +296,7 @@ export default function AiPage() {
{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"
className="inline-flex min-h-11 items-center text-[15px] underline underline-offset-4"
href={link.href}
target="_blank"
rel="noopener noreferrer"
@@ -298,7 +335,7 @@ export default function AiPage() {
adequação.
</p>
<a
className="mt-sp-4 inline-flex min-h-11 items-center text-[15px] md:text-sm underline underline-offset-4"
className="mt-sp-4 inline-flex min-h-11 items-center text-[15px] 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"