Site de marca e captação da Rota Viva — um super-app multi-cidade que une turismo, comércio local e eventos em um só aplicativo, geolocalizado e sempre vivo. O site apresenta o projeto, o plano de lançamento e a campanha de investimento (crowdfunding), com identidade visual Dia/Noite, gradiente assinatura magenta→laranja e animação em GSAP. Nasceu em Dois Irmãos/RS, com a proposta de ser a primeira 'Cidade Viva' do Brasil.
A marca vive em dois modos com toggle global (☀/☾): a paleta, o gradiente assinatura e os contrastes se reconfiguram por tema. A preferência persiste em localStorage e um script anti-flash roda no <head>, evitando o piscar de tema no carregamento — tudo controlado por tokens de CSS, sem framework de estilo externo.
Movimento com GSAP
As animações de entrada e de scroll são orquestradas com GSAP e @gsap/react, dando o 'sempre vivo' que a marca comunica. Todo o movimento respeita prefers-reduced-motion, degradando com elegância para quem prefere menos animação, sem perder a leitura do conteúdo.
Plano de Lançamento (Funil de Aquisição)
Uma página dedicada de marketing detalha como o turista descobre e baixa o app antes mesmo de chegar à cidade: canais, cronograma e metas do funil de aquisição. É a tradução de estratégia de go-to-market em conteúdo navegável, pensada para investidores e parceiros entenderem a operação.
Captação de Investimento (PIX + Crowdfunding)
A página de investimento estrutura faixas de apoio — de Apoiador a Marca & Patrocínio — conectadas à campanha de financiamento coletivo na Benfeitoria. Inclui chave PIX, mural de apoiadores e formulário de contato via Web3Forms, com fallback automático para mailto caso a integração esteja indisponível.
Brand Book e Voz da Marca
Um mini brand book público apresenta os fundamentos visuais: dualidade Dia/Noite, gradiente, paleta, tipografia (Space Grotesk + DM Sans) e tom de voz. Serve tanto de vitrine de identidade quanto de guia para futuros parceiros e patrocinadores manterem a consistência da marca.
SEO e Performance
OpenGraph e ícones são gerados dinamicamente pelo Next.js (opengraph-image e icon), com metadados próprios por página para compartilhamento social e indexação. As fontes são otimizadas com next/font, garantindo carregamento rápido e estável em todas as rotas.
Stack
Tecnologias utilizadas.
FrameworkNext.js 16.2.9 (App Router)
FrontendReact 19.2.4
EstilizaçãoCSS Modules (sem Tailwind, sem TypeScript)
AnimaçãoGSAP + @gsap/react
Tipografianext/font (Space Grotesk + DM Sans)
FormulárioWeb3Forms (fallback mailto)
CaptaçãoPIX + Benfeitoria (crowdfunding)
DeployVercel
CRESCEMOS JUNTOS!
VAMOS CRESCER!
Conte um pouco sobre o seu projeto. Eu respondo em até 24h — a primeira conversa é gratuita e sem compromisso.