Merge pull request #3 from prof-ramos/polish/landing-a11y-design-perf

Landing: a11y, design-system conformance & performance

Author: prof-ramos

.prettierignore

@@ -1,5 +1,7 @@
 .next
 node_modules
 coverage
+.remember/**
+docs/uiux-assets/**
 pnpm-lock.yaml
 .agents/skills/**/SKILL.md

docs/uiux-analysis.md

@@ -0,0 +1,117 @@
+# Análise UI/UX — WebIngressos
+
+Data da análise: 2026-07-31  
+Escopo: landing page pública e candidatura ao Programa Piloto.
+
+## Resumo executivo
+
+A landing já tinha uma base consistente: Next.js 16, React 19, Tailwind 4, HTML semântico básico, skip link, foco visível, formulário com React Hook Form + Zod, feedback via Sonner e ilustrações SVG leves.
+
+O foco desta rodada foi conversão da candidatura, sem trocar a identidade visual nem adicionar dependências de runtime. A proposta continua usando evergreen/mint e o motivo de ingresso/perfuração como assinatura própria; cinco assets locais foram adicionados de forma pontual como apoio visual.
+
+### Pontos principais corrigidos
+
+1. **Menu mobile sem ciclo de foco previsível** — o primeiro item agora recebe foco ao abrir e `Escape` fecha o menu e devolve foco ao botão.
+2. **Erros do formulário pouco anunciados** — mensagens individuais agora usam `role="alert"`; o envio e falhas de rede são anunciados por região viva.
+3. **Formulário sem agrupamento semântico** — contato e dados do evento agora são `fieldset`s com `legend` acessível.
+4. **Proposta de valor pouco contextualizada acima da dobra** — o hero informa imediatamente que se trata do programa piloto e explicita o prazo de retorno já descrito no FAQ.
+5. **Texto de eyebrow em brand-500** — pequenos textos de contexto foram movidos para brand-700, que tem contraste adequado em superfícies claras.
+
+## Evidências técnicas
+
+### Acessibilidade
+
+- O layout mantém `lang="pt-BR"`, skip link, landmarks principais, labels associados e controles com targets de toque adequados.
+- O foco global usa anel de 3px com offset de 3px; componentes que já possuem foco customizado continuam preservando seus estilos.
+- O `FormControl` mantém `aria-describedby` e `aria-invalid`; `FormMessage` anuncia erros com `role="alert"`.
+- A navegação mobile mantém `aria-expanded`, `aria-controls` e labels distintos para navegação principal e móvel.
+- O movimento reduzido continua coberto por `prefers-reduced-motion`.
+
+### Contraste calculado
+
+Os valores abaixo foram calculados diretamente a partir dos tokens CSS atuais; não são resultados estimados de uma ferramenta visual.
+
+| Combinação               | Contraste |             Referência WCAG AA |
+| ------------------------ | --------: | -----------------------------: |
+| brand-500 sobre branco   |    3,38:1 | insuficiente para texto normal |
+| brand-700 sobre branco   |    7,30:1 |                       aprovado |
+| ink-500 sobre ink-50     |    5,52:1 |                       aprovado |
+| destructive sobre branco |    5,06:1 |                       aprovado |
+
+Por isso, brand-500 permanece reservado para detalhes e elementos decorativos, enquanto textos pequenos de contexto usam brand-700.
+
+### Conversão e UX
+
+- O CTA primário continua levando ao formulário do piloto.
+- O hero agora explicita o público e o caráter de candidatura sem compromisso.
+- O formulário informa que a candidatura não garante vaga e que o retorno ocorre em até 48 horas úteis, conteúdo já presente no FAQ.
+- Em validação inválida, o foco é movido para o primeiro campo com erro.
+- Em falha de rede/API, a pessoa recebe feedback visual persistente e anúncio para tecnologia assistiva, além do toast existente.
+
+### Performance
+
+- Os cinco PNGs selecionados foram convertidos para WebP, redimensionados e adicionados em `public/assets/landing`; o conjunto servido soma 95.928 bytes.
+- O ingresso principal usa carregamento prioritário no hero; as imagens abaixo da dobra usam lazy loading e dimensões explícitas.
+- Os PNGs originais chegaram a ser arquivados para curadoria, mas o acervo `docs/uiux-assets` foi removido do repositório (ver Atualização).
+- O dashboard decorativo continua sendo SVG/CSS e permanece marcado como ilustrativo.
+- Não há métrica Lighthouse registrada nesta rodada; qualquer pontuação futura deve ser medida em ambiente de produção ou preview equivalente.
+
+### Assets adicionados
+
+- `ticket-event.webp`: assinatura visual do hero.
+- `mobile-ticket.webp`, `qr-code-ticket.webp` e `checkmark-ticket.webp`: sequência operacional de venda, check-in e confirmação.
+- `concert-ticket.webp`: apoio visual da seção de público universitário.
+
+Os arquivos têm licença de produção ainda não confirmada; a publicação comercial depende da validação da licença oficial do Envato.
+
+## Atualização (2026-07-31) — Auditoria de design
+
+Uma auditoria contra o `DESIGN.md` reprovou os cinco `.webp` adicionados nesta rodada:
+eram renders 3D glossy multicolor (azul/laranja/verde), violando a regra de ilustração
+"traço fino, uma cor, nunca preenchido/multicolor/fotográfico", introduzindo azul e
+laranja fora da paleta verde-única (o pior caso no hero, acima da dobra) e mantendo a
+licença Envato pendente.
+
+Ações aplicadas:
+
+- Os cinco `.webp` foram removidos de `public/assets/landing/` (diretório eliminado),
+  encerrando o risco de licença na aplicação servida.
+- **Hero**: o ingresso 3D flutuante foi removido; o `DashboardPreview` passa a ser o
+  foco visual único.
+- **Fluxo operacional**: deixou de ser uma terceira faixa `brand-900` (que competia com
+  a band de fechamento) e virou seção clara com cards brancos e ícones de traço verde
+  (`lucide`), preservando a numeração de sequência 01/02/03.
+- **Público**: o render 3D foi trocado pela ilustração de traço `TicketLine` em verde; o
+  painel de apoio deixou de ser verde (`bg-brand-50`) e passou a neutro (`bg-ink-100`),
+  para não criar uma terceira faixa verde entre a band do piloto e o CTA final.
+
+Em seguida, todo o acervo de referência `docs/uiux-assets` (~413 MB de pacotes Envato não referenciados pelo app) foi removido do repositório, encerrando de vez a exposição à licença pendente.
+
+### Performance e dependências
+
+Diferente da primeira rodada (que foi feita sem dependências de runtime), esta etapa de
+performance **adicionou duas dependências de runtime deliberadamente**, com necessidade
+demonstrada:
+
+- `@vercel/speed-insights` e `@vercel/analytics`, montados em `src/app/layout.tsx`. Como
+  não há Google Chrome nesta máquina para rodar Lighthouse, o Speed Insights é o caminho
+  para obter Core Web Vitals de campo reais após o deploy.
+- O formulário do piloto (abaixo da dobra) passou a ser carregado por `next/dynamic` com
+  `ssr: false` + `IntersectionObserver`, tirando a stack de validação (`zod` +
+  `react-hook-form` + `radix`) do first-load: **~338 KB → 222 KB gzip** no first-load da
+  home (medido no build).
+
+## Validação executada
+
+- `pnpm format:check`: passou.
+- `pnpm lint`: passou sem erros; existe um warning preexistente em `.remember/tmp/last-ndc.ts`.
+- `pnpm typecheck`: passou.
+- `pnpm build`: passou; rotas estáticas e `/api/subscribe` foram compiladas.
+- `curl http://localhost:3000/`: respondeu `200` com headers de segurança e HTML contendo o novo contexto do piloto, formulário e menu.
+- Contraste dos tokens principais: calculado e registrado acima.
+
+## Limitações e próximos passos
+
+- Ainda é necessário executar Lighthouse em uma URL servida e testar manualmente com teclado/leitor de tela em navegador real; a tentativa automatizada de abrir o navegador local expirou antes de permitir essa inspeção.
+- O acervo `docs/uiux-assets` foi removido do repositório; não há mais arquivos de licença pendente versionados.
+- Não foram alterados contratos da API, banco de dados ou implantação.

eslint.config.mjs

@@ -5,5 +5,5 @@ import nextTypeScript from "eslint-config-next/typescript"
 export default defineConfig([
   ...nextVitals,
   ...nextTypeScript,
-  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts", "docs/uiux-assets/**"]),
 ])

src/app/globals.css

@@ -53,7 +53,9 @@
   --destructive-foreground: #ffffff;
   --border: var(--ink-200);
   --input: var(--ink-200);
-  --ring: var(--brand-500);
+  --ring: var(--brand-600);
+  /* Single source for focus color: the 3px outline and component rings share it. */
+  --focus-ring: var(--ring);
   --radius: 0.625rem;
 }
 
@@ -74,6 +76,7 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-focus-ring: var(--focus-ring);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -144,16 +147,45 @@
     border-color: var(--color-border);
   }
 
+  html {
+    scroll-padding-top: 5rem;
+  }
+
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
     -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
+    outline: 3px solid var(--focus-ring);
+    outline-offset: 3px;
   }
 
   ::selection {
     background-color: var(--brand-100);
     color: var(--brand-800);
   }
+
+  a,
+  button {
+    touch-action: manipulation;
+  }
+}
+
+/* Respect prefers-reduced-motion for every transition/animation (accordion
+   height, header mobile menu slide, card hover-lift) instead of hand-rolling
+   a reduced variant per component. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 /* Decorative dot grid, tinted with `text-*`. Replaces the /grid.svg that never existed. */

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata, Viewport } from "next"
 import { Plus_Jakarta_Sans } from "next/font/google"
+import { Analytics } from "@vercel/analytics/next"
+import { SpeedInsights } from "@vercel/speed-insights/next"
 import "./globals.css"
 import { Toaster } from "@/components/ui/sonner"
 
@@ -28,8 +30,16 @@ export default function RootLayout({
   return (
     <html lang="pt-BR" className={`${jakarta.variable} scroll-smooth`}>
       <body className="bg-background text-foreground antialiased">
+        <a
+          href="#main-content"
+          className="sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-4 focus-visible:left-4 focus-visible:z-100 focus-visible:rounded-xl focus-visible:bg-brand-700 focus-visible:px-4 focus-visible:py-2 focus-visible:text-sm focus-visible:font-bold focus-visible:text-white focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+        >
+          Pular para o conteúdo
+        </a>
         {children}
         <Toaster richColors position="top-center" />
+        <SpeedInsights />
+        <Analytics />
       </body>
     </html>
   )

src/app/obrigado/page.tsx

@@ -5,7 +5,10 @@ import { Logo } from "@/components/brand/logo"
 
 export default function ThankYouPage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center px-5 py-16">
+    <main
+      id="main-content"
+      className="flex min-h-screen flex-col items-center justify-center px-5 py-16"
+    >
       <div className="w-full max-w-lg rounded-card border border-border bg-white p-8 text-center shadow-card sm:p-10">
         <div className="flex justify-center">
           <Logo markClassName="size-7" wordmarkClassName="text-lg" />

src/app/page.tsx

@@ -4,25 +4,27 @@ import { Problems } from "@/components/landing/problems"
 import { Pillars } from "@/components/landing/pillars"
 import { TargetAudience } from "@/components/landing/target-audience"
 import { PilotBand } from "@/components/landing/pilot-band"
-import { PilotForm } from "@/components/landing/pilot-form"
 import { Faq } from "@/components/landing/faq"
 import { FinalCta } from "@/components/landing/final-cta"
 import { Footer } from "@/components/landing/footer"
+import { OperationalFlow } from "@/components/landing/operational-flow"
+import { PilotFormLazy } from "@/components/landing/pilot-form-lazy"
 import { Section } from "@/components/landing/section"
 
 export default function Home() {
   return (
     <>
       <Header />
-      <main>
+      <main id="main-content">
         <Hero />
         <Problems />
         <Pillars />
+        <OperationalFlow />
         <TargetAudience />
         <PilotBand />
 
         <Section id="piloto" className="py-8 sm:py-10">
-          <PilotForm />
+          <PilotFormLazy />
         </Section>
 
         <Faq />

src/app/privacidade/page.tsx

@@ -3,7 +3,7 @@ import { ArrowLeft } from "lucide-react"
 
 export default function PrivacyPolicyPage() {
   return (
-    <main className="px-5 py-16 sm:py-20">
+    <main id="main-content" className="px-5 py-16 sm:py-20">
       <div className="mx-auto max-w-3xl">
         <Link
           href="/"

src/components/landing/header.tsx

@@ -10,6 +10,24 @@ import { NAV_LINKS, SITE_CONFIG } from "@/lib/constants"
 
 export function Header() {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+  const menuButtonRef = React.useRef<HTMLButtonElement>(null)
+  const firstMenuLinkRef = React.useRef<HTMLAnchorElement>(null)
+
+  React.useEffect(() => {
+    if (!isMenuOpen) return
+
+    firstMenuLinkRef.current?.focus()
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setIsMenuOpen(false)
+        menuButtonRef.current?.focus()
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [isMenuOpen])
 
   return (
     <header className="sticky top-0 z-50 border-b border-border bg-white/85 backdrop-blur-md">
@@ -19,7 +37,7 @@ export function Header() {
             <Logo markClassName="size-7 sm:size-8" wordmarkClassName="text-lg sm:text-xl" />
           </Link>
 
-          <nav className="hidden items-center gap-7 lg:flex">
+          <nav aria-label="Navegação principal" className="hidden items-center gap-7 lg:flex">
             {NAV_LINKS.map((link) => (
               <a
                 key={link.href}
@@ -41,6 +59,7 @@ export function Header() {
             </a>
 
             <button
+              ref={menuButtonRef}
               type="button"
               aria-label={isMenuOpen ? "Fechar menu" : "Abrir menu"}
               aria-expanded={isMenuOpen}
@@ -54,35 +73,35 @@ export function Header() {
         </div>
       </Shell>
 
-      {isMenuOpen ? (
-        <div
-          id="menu-principal"
-          className="border-t border-border bg-white transition-[opacity,translate] duration-200 starting:-translate-y-2 starting:opacity-0 lg:hidden"
-        >
-          <Shell>
-            <nav className="flex flex-col gap-1 py-4">
-              {NAV_LINKS.map((link) => (
-                <a
-                  key={link.href}
-                  href={link.href}
-                  onClick={() => setIsMenuOpen(false)}
-                  className="rounded-xl px-3 py-3 text-base font-medium text-ink-700 transition-colors hover:bg-brand-50 hover:text-brand-700"
-                >
-                  {link.label}
-                </a>
-              ))}
+      <div
+        id="menu-principal"
+        hidden={!isMenuOpen}
+        className="border-t border-border bg-white transition-[opacity,translate] duration-200 starting:-translate-y-2 starting:opacity-0 lg:hidden"
+      >
+        <Shell>
+          <nav aria-label="Navegação móvel" className="flex flex-col gap-1 py-4">
+            {NAV_LINKS.map((link, index) => (
               <a
-                href={SITE_CONFIG.pilotFormUrl}
+                key={link.href}
+                ref={index === 0 ? firstMenuLinkRef : undefined}
+                href={link.href}
                 onClick={() => setIsMenuOpen(false)}
-                className="mt-2 inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-brand-700 px-5 text-sm font-bold text-white transition-colors hover:bg-brand-800 sm:hidden"
+                className="rounded-xl px-3 py-3 text-base font-medium text-ink-700 transition-colors hover:bg-brand-50 hover:text-brand-700"
               >
-                {SITE_CONFIG.ctaLabel}
-                <ArrowRight className="size-4" />
+                {link.label}
               </a>
-            </nav>
-          </Shell>
-        </div>
-      ) : null}
+            ))}
+            <a
+              href={SITE_CONFIG.pilotFormUrl}
+              onClick={() => setIsMenuOpen(false)}
+              className="mt-2 inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-brand-700 px-5 text-sm font-bold text-white transition-colors hover:bg-brand-800 sm:hidden"
+            >
+              {SITE_CONFIG.ctaLabel}
+              <ArrowRight className="size-4" />
+            </a>
+          </nav>
+        </Shell>
+      </div>
     </header>
   )
 }