Um template de site estático moderno e profissional que funciona como um gerador de propostas comerciais personalizadas. Desenvolvido com React, TailwindCSS e Framer Motion para criar propostas elegantes e persuasivas sem necessidade de banco de dados.
- Design Minimalista e Profissional: Interface elegante com paleta de cores verde escuro
- Geração Instantânea: Crie propostas comerciais em menos de 5 minutos
- Sem Banco de Dados: Utiliza LocalStorage para armazenamento temporário
- Responsivo: Funciona perfeitamente em desktop e mobile
- Animações Suaves: Transições elegantes com Framer Motion
- Copywriting Persuasivo: Textos otimizados com gatilhos mentais
- URL Única: Cada proposta gera uma URL única para compartilhamento
- Pronto para Impressão: Layout otimizado para PDF/impressão
- React 18 - Framework JavaScript
- Vite - Build tool e dev server
- TailwindCSS - Framework CSS utilitário
- Framer Motion - Biblioteca de animações
- Shadcn/UI - Componentes de interface
- Lucide React - Ícones modernos
- Node.js 18+ instalado
- npm ou pnpm
- Conta na Vercel (para deploy)
# Se usando Git
git clone <url-do-repositorio>
cd gerador-propostas
# Ou extraia o arquivo ZIP e navegue até a pastanpm install
# ou
pnpm installnpm run dev
# ou
pnpm run devAbra seu navegador e acesse: http://localhost:5173
- Instale a CLI da Vercel
npm install -g vercel- Faça login na Vercel
vercel login- Execute o deploy
vercel- Siga as instruções
- Confirme o diretório do projeto
- Escolha sua conta/organização
- Confirme o nome do projeto
- Aguarde o build e deploy
- Acesse vercel.com
- Faça login com sua conta
- Clique em "New Project"
- Importe o projeto:
- Se usando Git: conecte seu repositório
- Se usando arquivos locais: faça upload do ZIP
- Configure o projeto:
- Framework Preset:
Vite - Build Command:
npm run build - Output Directory:
dist
- Framework Preset:
- Clique em "Deploy"
O projeto já está configurado com:
vercel.json(se necessário)- Build otimizado para produção
- Roteamento SPA configurado
- Apresenta a empresa e proposta de valor
- Seções persuasivas com gatilhos mentais
- Depoimentos de clientes
- CTA para criar nova proposta
- Preencha todos os campos obrigatórios:
- Título da Proposta
- Destinatário (Cliente/Empresa)
- Nome do Projeto
- Descrição do Problema
- Solução Proposta
- Benefícios
- Prazo de Entrega
- Valor
- Clique em "Gerar Proposta Comercial"
- Visualização profissional da proposta
- Layout otimizado para impressão
- Botões para compartilhar e imprimir
- URL única para envio ao cliente
Para personalizar o branding da empresa:
- Logo e Nome: Edite os componentes em
src/components/ - Cores: Modifique as variáveis CSS em
src/App.css - Conteúdo: Atualize textos nos componentes React
--primary: oklch(0.3 0.15 150); /* Verde escuro */
--primary-foreground: oklch(0.985 0 0); /* Branco */Edite os arrays de depoimentos e FAQ nos componentes:
src/components/Home.jsxsrc/components/ProposalView.jsx
gerador-propostas/
├── public/ # Arquivos estáticos
├── src/
│ ├── components/ # Componentes React
│ │ ├── ui/ # Componentes de UI (shadcn)
│ │ ├── Home.jsx # Página inicial
│ │ ├── ProposalForm.jsx # Formulário
│ │ └── ProposalView.jsx # Visualização da proposta
│ ├── App.jsx # Componente principal
│ ├── App.css # Estilos globais
│ └── main.jsx # Ponto de entrada
├── package.json # Dependências
├── vite.config.js # Configuração do Vite
└── README.md # Este arquivo
npm run dev # Servidor de desenvolvimento
npm run build # Build para produção
npm run preview # Preview do build
npm run lint # Verificação de código- LocalStorage: Propostas são salvas localmente no navegador
- Persistência: Dados mantidos entre sessões
- IDs Únicos: Cada proposta tem um timestamp único
- Mobile First: Design otimizado para dispositivos móveis
- Breakpoints: Adaptação automática para diferentes telas
- Touch Friendly: Elementos otimizados para toque
- Lazy Loading: Componentes carregados sob demanda
- Otimização de Bundle: Build otimizado com Vite
- Animações Performáticas: Uso de transform e opacity
- Headlines de impacto
- Gatilhos de urgência e escassez
- Prova social com depoimentos
- CTAs estrategicamente posicionados
- Hierarquia visual clara
- Cores que transmitem confiança
- Tipografia legível e moderna
- Espaçamento equilibrado
- Dados Locais: Informações ficam no navegador do usuário
- Sem Servidor: Não há coleta de dados em servidor
- HTTPS: Deploy automático com SSL na Vercel
# Limpe o cache e reinstale
rm -rf node_modules package-lock.json
npm install
npm run build# Verifique a versão do Node.js
node --version # Deve ser 18+
# Atualize as dependências
npm update- Verifique se o build local funciona:
npm run build - Confirme as configurações da Vercel
- Verifique os logs de build no dashboard
Para dúvidas ou problemas:
- Verifique a documentação acima
- Consulte os logs de erro no console
- Entre em contato com o desenvolvedor
Este projeto foi desenvolvido como template personalizado para Thiago Consultoria.
Desenvolvido com ❤️ para gerar propostas comerciais profissionais e converter mais clientes.