🚀 Landing Page de Alta Conversão — Produto Digital

⚠️ Observação: Imagem para visualizar um pouco do projeto. Se quiser ver em funcionamento, acesse o link abaixo!!

🔗 Visualize o projeto online:
👉 Landing Page - Clique para Visualizar

📖 Sobre o Projeto

Esta landing page é um exemplo funcional e personalizável para vender produtos digitais como cursos, e-books ou mentorias online. Ela foi desenvolvida para demonstrar minhas habilidades como desenvolvedor e mostrar como construir uma página de alta conversão seguindo padrões modernos de design e usabilidade.

O projeto foi desenvolvido com foco em:

• Velocidade e performance
• Design responsivo
• Estrutura semântica e acessível
• Experiência de usuário otimizada para conversão

🛠 Tecnologias Utilizadas

• HTML5: Estrutura semântica e compatível com SEO.
• CSS3 / TailwindCSS: Estilização rápida e moderna com classes utilitárias.
• JavaScript (Vanilla): Interatividade e carregamento de componentes.
• AOS: Animações suaves ao scroll.
• Git & GitHub Pages: Controle de versão e deploy estático.

📂 Estrutura do Projeto

landing-page-produto/
├─ index.html            # Página principal
├─ css/
│  └─ style.css          # Estilos customizados
├─ js/
│  ├─ main.js            # Funcionalidades da página
│  └─ include.js         # Carregamento de componentes HTML
├─ components/
│  ├─ hero.html
│  ├─ beneficios.html
│  ├─ conteudo.html
│  ├─ depoimentos.html
│  ├─ preco.html
│  ├─ footer.html
│  ├─ header.html
│  └─ faq.html
├─ assets/
│  ├─ images/            # Imagens e mockups
│  └─ icons/             # Ícones utilizados
└─ README.md

✨ Funcionalidades

• Hero Section: Destaca o produto e CTA principal.
• Benefícios: Mostra as vantagens do produto com cards claros.
• Conteúdo: Explica módulos ou tópicos do curso/ebook.
• Depoimentos: Feedback de usuários para aumentar confiança.
• Preço: Diferentes planos com destaque para o mais popular.
• FAQ: Responde dúvidas frequentes e reduz objeções.
• CTA Sticky: Botões fixos que acompanham o usuário.
• Header Dinâmico: Esconde/mostra conforme scroll.
• Barra de Progresso: Indica progresso de leitura na página.

⚡ Como Usar

1. Clone o repositório:

git clone https://github.com/seuusuario/landing-page-produto.git

2. Abra o projeto com VS Code e use Live Server para testar localmente.
3. Suba o projeto no GitHub e habilite o GitHub Pages para deploy online.

🖌 Personalização

• Textos e títulos: Altere diretamente nos arquivos HTML dentro de components/.
• Cores e fontes: Configure via tailwind.config.js ou css/style.css.
• Imagens e mockups: Substitua em assets/images/ mantendo nomes ou atualize referências.
• Planos e preços: Edite preco.html para ajustar valores e planos.

📈 Otimização e Performance

• Componentes carregados via include.js para modularidade.
• Animações leves com AOS.
• TailwindCSS reduzido via CDN para carregamento rápido.
• Design responsivo para todos os dispositivos.

📌 Conclusão

Esta landing page serve como exemplo profissional de produto digital, pronta para ser adaptada para qualquer serviço ou curso. Criada para mostrar minhas habilidades de desenvolvimento, design e UX.

---

✍️ Autor

Desenvolvido com 💛 por Angel Luz.

Se quiser conversar, colaborar ou oferecer uma oportunidade:

📬 E-mail: contatoangelluz@gmail.com
🐙 GitHub: @angelluzk
💼 LinkedIn: linkedin.com/in/angelitaluz
🗂️Website / Portfólio: meu_portfolio/