Uma landing page moderna desenvolvida com as melhores práticas de desenvolvimento web.

O projeto foi refatorado para seguir as melhores práticas:

Antes:

• Script inline no HTML
• Código misturado com markup
• Difícil manutenção

Depois:

• Scripts em arquivos separados
• Código modular e organizado
• Fácil manutenção e reutilização

• Performance: debounce(), throttle()
• DOM: $(), $$() para seletores
• Animações: fadeIn(), fadeOut()
• Validações: validateEmail(), validatePhone()
• Storage: Wrapper para localStorage
• Detecção: Device e feature detection

• MobileNavigation Class: Gerencia menu mobile
• SmoothScroll Class: Scroll suave para âncoras
• Acessibilidade: ARIA attributes, navegação por teclado
• Performance: Event delegation e otimizações

landing-page/
├── index.html          # Página principal
├── styles.css          # Estilos CSS
├── utils.js           # Utilitários JavaScript
├── script.js          # Script principal de navegação
└── README.md          # Documentação

• ✅ Toggle do hamburger menu
• ✅ Fechamento automático ao clicar nos links
• ✅ Fechamento com tecla Escape
• ✅ Fechamento ao clicar fora do menu
• ✅ Responsive (fecha automaticamente em desktop)

• ✅ ARIA attributes (aria-expanded, aria-controls, aria-label)
• ✅ Navegação por teclado
• ✅ Focus management
• ✅ Screen reader support

• ✅ Event delegation
• ✅ Debounce para resize events
• ✅ Throttle para scroll events
• ✅ Lazy initialization

• ✅ Smooth scrolling para links âncora
• ✅ Offset para header fixo
• ✅ Atualização da URL sem jump

1. Clone o repositório:

   git clone <repository-url>
   cd landing-page

2. Abra o projeto:

   # Serve localmente (recomendado)
   python -m http.server 8000
   # ou
   npx serve .
   
   # Ou simplesmente abra index.html no navegador

3. Acesse: http://localhost:8000

// Em script.js, você pode customizar:
const nav = new MobileNavigation();

// Adicionar novos comportamentos:
nav.onMenuOpen = () => {
    console.log('Menu aberto!');
};

// Use as utilidades em utils.js:
const email = 'test@example.com';
if (utils.validateEmail(email)) {
    console.log('Email válido!');
}

// Salvar dados:
utils.storage.set('userPreference', { theme: 'dark' });

// Recuperar dados:
const prefs = utils.storage.get('userPreference', { theme: 'light' });

• Mobile: < 768px (menu hamburger ativo)
• Desktop: ≥ 768px (menu horizontal)

• Mobile-first CSS
• Progressive enhancement
• Touch-friendly targets (44px mínimo)

• Semântica: HTML5 adequado
• ARIA: Labels e estados dinâmicos
• Teclado: Tab, Escape, Enter funcionais
• Screen Readers: Anúncios apropriados
• Contraste: Cores adequadas para WCAG

# Use ferramentas como:
- Lighthouse (Performance + A11y)
- axe-core (Acessibilidade)
- WAVE (Web Accessibility Evaluation)

• JavaScript: Modular e lazy
• Events: Debounce/throttle onde necessário
• DOM: Queries otimizadas
• Memory: Cleanup adequado

• LCP: < 2.5s
• FID: < 100ms
• CLS: < 0.1

1. Criar nova classe em arquivo separado
2. Importar utilitários conforme necessário
3. Testar acessibilidade com screen readers
4. Validar performance com Lighthouse

// Console logs estão incluídos:
// ✅ Navigation script loaded successfully
// Menu opened/closed
// ❌ Error messages com detalhes

• ✅ Classes ES6: Código orientado a objetos
• ✅ Modules: Separação de responsabilidades
• ✅ Error Handling: Try/catch e validações
• ✅ Performance: Debounce, throttle, event delegation
• ✅ Accessibility: ARIA, keyboard navigation

• ✅ Semântica: Tags apropriadas
• ✅ Acessibilidade: ARIA attributes
• ✅ Performance: Scripts no final do body

• ✅ Separação: HTML, CSS, JS em arquivos separados
• ✅ Modularidade: Cada funcionalidade em sua classe
• ✅ Reutilização: Utilitários compartilhados
• ✅ Documentação: Comentários e README detalhado

class MobileNavigation {
    constructor()     // Inicialização
    init()           // Setup principal
    bindEvents()     // Event listeners
    setupAccessibility() // ARIA attributes
    toggleMenu()     // Toggle principal
    openMenu()       // Abrir menu
    closeMenu()      // Fechar menu
    destroy()        // Cleanup
}

class SmoothScroll {
    constructor()    // Inicialização
    init()          // Setup
    bindEvents()    // Click handlers
    scrollToElement() // Scroll suave
}

• Menu hamburger abre/fecha
• Links do menu funcionam
• Scroll suave funciona
• Menu fecha com Escape
• Menu fecha clicando fora
• Responsive (mobile/desktop)
• Acessibilidade (screen reader)
• Performance (Lighthouse)

# Servidor local para testes
python -m http.server 8000

# Testes de acessibilidade
# Use extensões do navegador:
# - axe DevTools
# - WAVE
# - Lighthouse

1. Fork o projeto
2. Crie branch para feature (git checkout -b feature/nova-feature)
3. Commit mudanças (git commit -am 'Adiciona nova feature')
4. Push para branch (git push origin feature/nova-feature)
5. Abra Pull Request

• Mantenha o código modular
• Adicione comentários para funcionalidades complexas
• Teste acessibilidade
• Valide performance
• Atualize documentação

Este projeto está sob licença MIT. Veja arquivo LICENSE para detalhes.

Desenvolvido com ❤️ seguindo as melhores práticas de desenvolvimento web.