Bem-vindo ao repositório do ThumbGerador!
Este projeto é um template open-source de Landing Page e Pricing Page criado com foco em alta conversão, voltado para um SaaS de criação de thumbnails com IA. O projeto tem a Landing Page e a Pricing Page prontas para uso, demais páginas e backend não foram finalizados.
Sinta-se 100% livre para clonar, estudar, modificar e usar este template gratuitamente em seus próprios projetos comerciais ou pessoais! 🎉
Este projeto foi construído utilizando as seguintes tecnologias modernas do ecossistema front-end:
- Angular - Framework principal para estruturação dos componentes e roteamento da aplicação (versão mais recente standalone).
- Tailwind CSS - Framework utilitário de CSS usado para construir rapidamente a interface e garantir total responsividade.
- TypeScript - Tipagem estática para JavaScript, garantindo código mais seguro e manutenível.
- HTML5 & SCSS - Para a marcação semântica e estilos customizados complexos, incluindo animações de glitch em keyframes, backgrounds com mesh gradients e sobreposições de ruído (noise).
- Vercel Analytics - Integrado para monitoramento de métricas e acessos.
- Design "Neo-Brutalism / Cyberpunk": Sombras chapadas (
box-shadow), cores em neon brilhante, fontes marcantes (Outfit e Plus Jakarta Sans). - Animações "Glitch" Customizadas: Efeitos de texto com aberração cromática e vibração inspirada em interfaces virais (estilo TikTok).
- Totalmente Responsivo: Desde telas de smartphones pequenas até monitores ultrawide.
- Micro-interações: Bento cards com efeitos hover 3D (
perspective), máscaras de gradiente em bordas brilhantes e botões glow. - Páginas Prontas:
Landing Page (/):Hero section, Features, Casos de Uso (Bento Grid), Como Funciona, Testemunhos (Reviews), Footer.Pricing Page (/pricing):Comparação de 3 tiers de preços (Grátis, Pro e Agência) com destaques visuais nas melhores opções.
Para rodar este template na sua máquina local, certifique-se de ter o Node.js e o Angular CLI instalados.
-
Clone o repositório:
git clone https://github.com/DaviLuquini/ThumbGerador.git cd ThumbGerador/ThumbGenerator.FrontEnd -
Instale as dependências:
npm install
-
Inicie o servidor de desenvolvimento:
npm run start # ou ng serve -
Acesse em seu navegador:
http://localhost:4200/
Este template foi criado de forma totalmente gratuita e livre para uso. Você pode pegá-lo como base de inspiração, adaptar para seus clientes ou utilizar como portfólio. Não há restrições!