Preciso desenvolver uma landing page moderna e imersiva para o Stats Protocol, um projeto inovador de dados ambientais que promete tornar o mundo mais confortável, eficiente e saudável através de estatísticas inteligentes.
Escopo do Projeto:
🌐 Landing Page Imersiva:
Design moderno e impactante que impressione visitantes
Animações suaves conforme rolagem da página (parallax/scroll animations)
Vídeo hero ou animações que demonstrem o poder da plataforma
Multilíngue: Português (BR), Espanhol e Inglês com seletor de idioma
Tema claro/escuro com toggle suave
Seções: Hero, Como Funciona, Tecnologia, Impacto Global, CTA para o globo
Design responsivo (mobile-first)
Elementos visuais incríveis para ux/ui excepcional
🗺️ globo 3d interativo (mapbox):
globo 3d navegável com controles suaves
duas camadas de visualização independentes:
camada 1 - hexágonos de qualidade do ar:
hexágonos que se redimensionam conforme zoom (usando biblioteca h3)
cobertura de boa parte dos continentes (não precisa ser global completo)
cores em gradiente: verde (boa) → amarelo (média) → vermelho (ruim)
hexágonos se juntam/separam automaticamente conforme zoom
dados via openweather api (ou similar gratuita) para aqi
modal estilizado ao clicar: dados atuais + histórico básico
carregamento progressivo para respeitar limites de api gratuita
camada 2 - sensores demo:
marcadores diferentes dos hexágonos (ícones de sensores)
5-10 localizações demo espalhadas pelo globo
clustering quando próximos (mostra quantidade: "2", "3", etc.)
Ao clicar: redireciona para página demo (pode ser placeholder)
Camada separada que pode ser ligada/desligada
Funcionalidades Técnicas:
Carregamento otimizado e progressivo dos dados
Cache inteligente para não exceder limites de API
Transições suaves entre diferentes níveis de zoom
Performance otimizada para diferentes dispositivos
Código limpo e bem documentado para futuras modificações
Stack Tecnológico Sugerido:
Frontend:
Next.js 14+ com TypeScript
Styling: Tailwind CSS + Framer Motion para animações
Mapas: Mapbox gl js +
deck.gl para visualizações 3D
Hexágonos: Biblioteca H3 para sistema hexagonal
APIs: Openweather api (gratuita) ou
waqi.org
Deploy: Vercel ou similar
Entregáveis:
Código fonte completo e organizado
Landing page responsiva com animações
Globo 3D funcional com ambas as camadas
Integração com API de qualidade do ar
Documentação básica de setup e configuração
Assets visuais e ícones necessários
.env.example com variáveis necessárias
Design e UX:
Visual moderno, limpo e profissional
Cores que remetam a dados ambientais (azuis, verdes, tecnológicos)
Tipografia moderna e legível
Micro-interações que encantam o usuário
Loading states elegantes
Estados de erro tratados graciosamente
Critérios de Aceitação:
Landing page carrega em menos de 3 segundos
Globo 3D roda suavemente em dispositivos médios
Hexágonos se redimensionam corretamente com zoom
Modal de dados abre e fecha suavemente
Seletor de idiomas funciona perfeitamente
Tema claro/escuro alterna sem bugs
Camadas podem ser ligadas/desligadas independentemente
Código está bem comentado e organizável
Informações Importantes:
Os textos podem ser genéricos/placeholder - eu editarei depois
Foco na experiência visual e interatividade
Não precisa de backend complexo, apenas frontend + APIs públicas
Código deve ser facilmente modificável para futuras integrações
Performance é crucial - deve rodar bem em diferentes dispositivos
Timeline Estimado: 2-3 semanas de desenvolvimento
Orçamento: Negociável - envie sua proposta com:
Preço fixo por marcos
Alternativa por hora
Sua abordagem técnica
Exemplos de trabalhos similares
O que incluir na proposta:
Links para projetos com Mapbox/visualizações 3D
Experiência com APIs de dados ambientais
Exemplos de landing pages modernas que você criou
Sua abordagem para otimização de performance
Timeline detalhado com marcos
Tecnologias que você recomenda usar
Diferenciais valorizados:
Experiência com visualizações de dados geoespaciais
Conhecimento em bibliotecas de animação (Framer Motion, GSAP)
Portfolio com projetos de impacto visual forte
Experiência com otimização de performance web
Conhecimento em acessibilidade web
Estou procurando um desenvolvedor que entenda a importância da primeira impressão e possa criar uma experiência verdadeiramente impressionante que demonstre o potencial transformador do Stats Protocol.
Project duration Not specified