Teste FrontEnd | Brenner Costa

[Brenner-Costa]

Carbon Checkout - Descrição do Pull Request

🌍 Visão Geral

Este PR implementa um fluxo completo de checkout para créditos de carbono, com padrões modernos de UX e validação robusta. A solução permite que os usuários visualizem créditos disponíveis, selecionem quantidades e completem suas compensações ambientais com segurança.

✨ Principais Funcionalidades

Catálogo de Créditos (Home)

• Listagem dinâmica: Integração com API para buscar e exibir todos os créditos disponíveis
• Seleção interativa:
  • Seletor de quantidade com cálculo de preço em tempo real
  • Redirecionamento para checkout com os detalhes do crédito selecionado

Fluxo de Checkout Seguro (Checkout)

• Sistema de validação:
  • Implementação de schemas Zod para todos os campos
  • Máscaras para dados sensíveis (cartões, informações pessoais)
  • Feedback claro de erros em tempo real
• CTAs inteligentes:
  • Botão "Prosseguir" só é ativado quando todos os campos estão válidos
  • Estados de carregamento visuais durante submissão

Arquitetura de Componentes

• Componentes compartilhados (sucesso/erro):
  • Layout dinâmico com props para:
    • Ilustrações responsivas (adaptadas ao viewport)
    • Configuração variável de títulos/mensagens
• Padrões acessíveis:
  • Áreas de toque ampliadas (mínimo 48x48px)
  • Melhor espaçamento e contraste
  • Navegação por teclado

🛠 Implementação Técnica

Tecnologias Principais

• Validação: Zod + React-Hook-Form
• UI: Tailwind CSS com componentes ShadCN
• Gerenciamento de estado: Context API
• Roteamento: Next.js App Router

Otimizações

• Imports dinâmicos para componentes do checkout
• Inputs de cartão memorizados
• Chamadas API otimizadas com cache (fetch API)