# Hero Circuit Board Animation Plan

## Goal
Implementar um novo design para o componente `Hero.tsx` com uma estética "Hardware / Circuit Board", utilizando SVGs animados via Framer Motion para simular trilhas de circuito impresso, mantendo o conteúdo atual (títulos, links, botões) e garantindo alta performance e acessibilidade.

## Design Direction & DFII
- **Aesthetic Direction:** Industrial / Utilitarian (Cybernetic Hardware). Foco na convergência entre hardware e web moderna.
- **Differentiation Anchor:** Um fundo SVG com linhas ortogonais (traços 90° e 45°) que se desenham sutilmente do centro para as bordas (ou vice-versa) reagindo ao scroll ou carregamento inicial, substituindo o letreiro atual.
- **DFII Assessment:** Impacto (4) + Context Fit (5) + Viabilidade (4) + Performance (4) - Risco de Consistência (2) = **15 (Excelente)**.

## Tasks

- [ ] **Task 1: Preparar o ambiente e limpar o Hero atual**
  - **Ação:** Criar uma branch `feature/hero-circuit-board` (opcional). Fazer backup mental do componente atual. Remover elementos antigos (`Marquee`, `bg-grid-light`) de `app/components/Hero.tsx`.
  - **Verify:** O projeto compila sem erros (`pnpm run build`), o Hero renderiza apenas fundo escuro e o texto central sem as marcações infinitas.

- [ ] **Task 2: Extrair o background para um novo componente**
  - **Ação:** Criar o arquivo `app/components/animations/CircuitBoardBackground.tsx`. Configurar o componente base de UI.
  - **Verify:** Importar no `Hero.tsx` e garantir que renderiza um `div` simples preenchendo a tela por trás do texto sem quebrar o layout.

- [ ] **Task 3: Desenhar os caminhos SVG (PCB Traces)**
  - **Ação:** No `CircuitBoardBackground.tsx`, adicionar um elemento `<svg>` que ocupe todo o fundo. Criar múltiplos `<path>` estáticos com ângulos característicos de placas eletrônicas (45° e 90°). Adicionar nós circulares (`<circle>`) nas extremidades. Usar opacidade baixa para manter sutil.
  - **Verify:** No navegador, as trilhas da placa de circuito estão visíveis no fundo do Hero, não atrapalhando a legibilidade do texto.

- [ ] **Task 4: Animar o desenho dos caminhos com Framer Motion**
  - **Ação:** Converter `<svg>` e `<path>` para `<motion.svg>` e `<motion.path>`. Aplicar animações usando `strokeDasharray` e `strokeDashoffset` (ou propriedades nativas do framer motion como `pathLength: 1`) para animar a renderização do centro para fora no carregamento (`initial` e `animate`).
  - **Verify:** Ao recarregar a página, as linhas do circuito "crescem" de forma animada até o estado final.

- [ ] **Task 5: Animar pontos de dados ("pulsos" ou dados fluindo)**
  - **Ação:** Adicionar pequenos círculos ou feixes de luz que percorrem os caminhos SVG periodicamente, simbolizando dados fluindo pelos barramentos.
  - **Verify:** A animação tem movimento contínuo (mas muito sutil), validando o efeito estético de hardware ativo.

- [ ] **Task 6: Refinar o Conteúdo do Hero e "System Online"**
  - **Ação:** Ajustar cores, espaçamentos e z-index em `Hero.tsx` para garantir que o texto "EVANDRO.DEV.BR" e a badge "System Online" fiquem totalmente legíveis e contrastem perfeitamente com o novo fundo.
  - **Verify:** Contrast-ratio acessível; botões e links funcionais no topo das animações SVG.

- [ ] **Task 7: Garantir responsividade e Reduced Motion**
  - **Ação:** Ajustar viewBox do SVG para funcionar bem em telas mobile. Garantir suporte ao hook `useReducedMotion` já existente no Hero, desativando ou encurtando animações longas para quem prefere movimento reduzido.
  - **Verify:** Animações desligadas/suaves quando o sistema pedir. Nenhum scroll horizontal na tela do mobile (`max-w-full`).

- [ ] **Task 8: Validar performance e arrumar testes**
  - **Ação:** Executar suítes de teste (especialmente de responsividade e animações baseadas em propriedades) para corrigir qualquer erro causado pela mudança no DOM. Corrigir falhas pendentes de chaves duplicadas.
  - **Verify:** `pnpm test` passa sem os warnings do framer-motion em elementos normais e sem erros de `Experience`. (Nota: Consertar testes antigos se possível, mas isolar o teste do Hero).

## Done When
- [ ] O componente Hero exibe trilhas de circuito SVG animadas atrás do texto.
- [ ] O carregamento inicial transmite a estética de "hardware sendo ativado".
- [ ] Acessibilidade e regras de contraste de texto estão intactas.
- [ ] Respeita preferência de `prefers-reduced-motion`.
- [ ] Todos os testes locais e builds não apresentam regressões críticas do frontend.