This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
README — Landing Page Banda Larga
1. Visão Geral
Este projeto consiste em uma landing page para venda de planos de banda larga residencial e empresarial.
A implementação contempla:
- Segmentação entre planos residenciais e empresariais
- Integração com formulários FormCraft
- Persistência de dados entre páginas
- Responsividade para diferentes dispositivos
- Navegação com smooth scroll
- Ajustes personalizados em JavaScript e CSS
2. Estrutura Geral da Página
A landing page é composta pelas seguintes seções:
- Sliders com imagens de Banda Larga Residencial e Empresarial
- Seção de planos residenciais
- Seção de planos empresariais
- Página de formulário de viabilidade
- Página de formulário de contratação
Os planos são organizados em duas categorias principais:
- Residencial
- Empresarial
3. Segmentação de Planos
Foi implementado um sistema de identificação automática do tipo de plano selecionado pelo usuário.
Funcionalidades
- Banner individual para cada plano utilizando HTML e CSS
- Captura de clique nos botões de planos
- Salvamento das informações para a página de viabilidade
- Identificação automática do tipo de plano escolhido
4. Seleção Automática de Plano no Formulário
O sistema realiza a pré-seleção automática do plano escolhido anteriormente pelo usuário.
Funcionalidades
- Localização dinâmica do input correspondente ao plano
- Marcação automática do plano selecionado
- Disparo de eventos para integração com o FormCraft
5. Integração com FormCraft
A landing page utiliza formulários desenvolvidos com o plugin FormCraft.
Ajustes realizados
- Atualização das configurações do FormCraft
- JavaScript adicional para alterar posicionamento e fluxo do formulário de viabilidade
- Persistência do plano escolhido entre as páginas 1, 2 e 3 utilizando cache/local storage
6. Responsividade
A aplicação foi otimizada para diferentes resoluções de tela.
Breakpoints principais
| Dispositivo | Resolução |
|---|---|
| Desktop | > 1024px |
| Tablet | 768px – 1024px |
| Mobile | < 480px |
Problemas tratados
- Controle de altura de campos customizados
- Correções de comportamento em dispositivos móveis
- Conflitos entre
flex-wrape altura fixa - Sobreposição de elementos em mobile
- Ajustes de headings em telas pequenas
7. Smooth Scroll
Foi implementado um sistema de rolagem suave para melhorar a navegação entre seções da página.
Características
- Offset dinâmico para compensar header fixo
- Controle de duração da animação
- Ajuste automático de posicionamento
8. Tecnologias Utilizadas
- HTML5
- CSS3
- JavaScript
- WordPress
9. Conclusão
A landing page de banda larga foi estruturada para suportar múltiplos tipos de planos, integração com formulários dinâmicos e responsividade.