Uma landing page de alta conversão, moderna e performática, criada para a venda do e-book "Guia Prático do Jejum Intermitente".
Explore o código-fonte »
Visite o Site »
Reporte um Bug
·
Sugira uma Funcionalidade
Índice
Este projeto representa a materialização de uma landing page moderna, desenvolvida com o objetivo de ser uma ferramenta de vendas eficaz e visualmente atraente para produtos digitais. O foco foi criar uma experiência de usuário (UX) limpa e direta, que guiasse o visitante através de uma jornada de persuasão, desde a apresentação dos benefícios até a chamada para ação (CTA) final.
A página foi meticulosamente otimizada para performance e SEO, garantindo tempos de carregamento rápidos e uma base sólida para ser bem ranqueada em motores de busca. Além de ser um projeto funcional, serve como um case de estudo e um template robusto para a criação de outras páginas de venda, utilizando um stack de desenvolvimento moderno e escalável.
A escolha das tecnologias foi fundamental para atingir os objetivos de performance, manutenibilidade e experiência de desenvolvimento.
-
Utilizado como a biblioteca principal para a construção da interface de usuário. Sua arquitetura baseada em componentes permite a criação de uma UI modular, reutilizável e fácil de manter.
-
Escolhido como a ferramenta de build e servidor de desenvolvimento. O Vite oferece uma experiência de desenvolvimento extremamente rápida com Hot Module Replacement (HMR) instantâneo e um processo de build otimizado que gera pacotes menores e mais eficientes para produção.
-
Adotado para adicionar tipagem estática ao JavaScript. O TypeScript aumenta a robustez do código, previne bugs comuns em tempo de desenvolvimento e melhora a autocompletude e a compreensão geral do projeto.
-
Utilizado para a estilização. Como um framework utility-first, o Tailwind CSS permite construir designs complexos e customizados diretamente no HTML, resultando em um desenvolvimento rápido e um sistema de design consistente.
-
Usado para a criação dos componentes de UI. Diferente de bibliotecas de componentes tradicionais, o Shadcn/UI fornece componentes lindamente desenhados que podem ser copiados para o seu projeto, dando a você controle total sobre o código, estilo e comportamento.
- Otimização para SEO: O
index.htmlfoi enriquecido com um conjunto completo de meta tags, incluindo Open Graph para redes sociais, dados estruturados (Schema.org) para resultados de busca ricos, e tags canônicas para evitar conteúdo duplicado. - Performance de Carregamento: O uso do Vite garante um build otimizado, e as fontes são pré-carregadas para uma renderização mais rápida, visando altas pontuações em métricas como o Lighthouse.
- Design Totalmente Responsivo: A interface foi construída com uma abordagem mobile-first, garantindo uma experiência de visualização e navegação perfeita em todos os dispositivos, de smartphones a desktops.
- Deploy Automatizado (CI/CD): Um workflow de GitHub Actions está configurado para automaticamente construir e publicar o site no GitHub Pages a cada
pushna branchmain, garantindo que o site esteja sempre atualizado com a última versão do código.
A estrutura de arquivos do projeto foi organizada para ser intuitiva e escalável.
/
├── .github/
│ └── workflows/
│ └── deploy.yml # Workflow de deploy automático
├── public/
│ ├── assets/img/ # Ícones e imagens públicas
│ └── site.webmanifest # Manifesto do site
├── src/
│ ├── assets/ # Imagens e assets importados nos componentes
│ ├── components/
│ │ ├── ui/ # Componentes base do Shadcn/UI (ex: button.tsx)
│ │ └── HeroSection.tsx # Componentes de seção da página
│ ├── pages/
│ │ └── Index.tsx # Componente principal da página de índice
│ ├── App.tsx # Componente raiz com provedores e rotas
│ ├── main.tsx # Ponto de entrada da aplicação React
│ └── index.css # Estilos globais e configuração do Tailwind
├── index.html # A "casca" principal da aplicação
└── vite.config.ts # Arquivo de configuração do Vite
Para obter uma cópia local do projeto e começar a desenvolver, siga estes passos simples.
Certifique-se de ter o Node.js (versão LTS recomendada) instalado em sua máquina.
- Clone o repositório para sua máquina local.
git clone [https://github.com/voaneves/jejumintermitente.git](https://github.com/voaneves/jejumintermitente.git)
- Navegue até o diretório do projeto.
cd jejumintermitente - Instale todas as dependências do projeto.
npm install
- Inicie o servidor de desenvolvimento.
npm run dev
- Abra seu navegador e acesse
http://localhost:8080(ou a porta indicada no seu terminal). Você verá a página com hot-reloading ativado.
O deploy deste projeto é totalmente automatizado através do GitHub Actions e do GitHub Pages.
O workflow, definido em .github/workflows/deploy.yml, é acionado a cada push na branch main. Ele executa os seguintes passos:
- Checkout: Baixa a versão mais recente do código.
- Setup Node.js: Prepara o ambiente Node.js.
- Install Dependencies: Instala todas as dependências do projeto com
npm install. - Build: Executa
npm run buildpara compilar o site para produção. A configuraçãobasenovite.config.tsgarante que todos os caminhos dos assets sejam gerados corretamente para o subdiretório/jejumintermitente/. - Deploy: Pega os arquivos gerados na pasta
diste os publica no ambiente do GitHub Pages.
Contribuições são bem-vindas! Se você tem alguma ideia para melhorar este projeto, sinta-se à vontade para fazer um fork e abrir um pull request.
Distribuído sob a Licença MIT. Veja LICENSE para mais informações.
linkedin@voaneves - voaneves.com - voaneves@gmail.com
Link do Projeto: https://github.com/voaneves/jejumintermitente
Gostaria de agradecer às seguintes ferramentas e comunidades que tornaram este projeto possível: