Rota Viva
WebStartup / Site de Marca & Captação

Rota Viva

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.

Destaques técnicos

Como foi construído.

Identidade Dia/Noite (Dualidade de Tema)

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!
Mascote Soluções
VAMOS
CRESCER!

Conte um pouco sobre o seu projeto. Eu respondo em até 24h — a primeira conversa é gratuita e sem compromisso.