Este documento serve como um relatório exaustivo da arquitetura, design e implementação tecnológica da landing page do RunVision Pro. Ele detalha todas as escolhas técnicas, a organização do código e as funcionalidades que compõem este ecossistema web de alta performance.

1. Visão Geral do Produto

O RunVision Pro é uma solução de wearable technology focada em corredores de alta performance. O site tem como objetivo principal apresentar o produto, detalhar as suas especificações técnicas (baseadas em hardware real como ESP32 e GPS) e converter visitantes em clientes através de uma experiência visual premium e informativa.

2. Stack Tecnológica (O que é usado)

A aplicação foi desenvolvida utilizando as ferramentas mais robustas do ecossistema moderno de JavaScript:

Core Frameworks

React 19: Utilizado para a criação de uma interface declarativa e baseada em componentes. A versão 19 traz melhorias de performance e gestão de estados.
TypeScript: Implementado em todo o projeto para garantir tipagem estática, reduzindo bugs em tempo de execução e facilitando a manutenção a longo prazo.
Vite 7: O motor de build que proporciona uma experiência de desenvolvimento instantânea e builds de produção altamente otimizados.

Estilização e UI

Tailwind CSS: Utilizado para todo o design system. Permite uma estilização rápida através de classes utilitárias, garantindo consistência visual e performance (CSS atómico).
Shadcn UI (Radix UI): A base dos componentes de interface (botões, cards, diálogos). Estes componentes são acessíveis (WAI-ARIA) e altamente customizáveis.
Lucide React: Biblioteca de ícones vetoriais que oferece clareza visual em toda a interface.

Performance e Animações

Modern CSS Transitions: Utilizadas para micro-interacções e efeitos de hover.
Intersection Observer API: Lógica nativa do browser utilizada para criar efeitos de "revelação" (reveal) de elementos conforme o utilizador faz scroll na página.

3. Arquitetura e Estrutura de Pastas (Onde está o quê)

O projeto segue uma estrutura modular onde cada funcionalidade ou secção está isolada.

Diretório Raiz

index.html: O ponto de entrada do browser. Contém as meta-tags de SEO e o link para o script principal.
package.json: Manifesto do projeto com todas as dependências e scripts de execução.
tailwind.config.js: Configuração do tema, cores personalizadas e extensões de animação.

Diretório `src/` (Código Fonte)

main.tsx: O ficheiro que inicializa o React e renderiza a aplicação no DOM.
App.tsx: O componente raiz que orquestra a montagem de todas as secções da landing page.
index.css: Contém as diretivas do Tailwind, as cores do tema (em HSL) e as animações globais (como animate-float e animate-pulse-glow).

Diretório `src/sections/` (Mapeamento de Conteúdo)

Esta é a parte mais importante para a manutenção do site:

Navigation.tsx: Gere o menu superior fixo, a lógica de scroll suave e o menu mobile hambúrguer.
Hero.tsx: A primeira secção. Contém a imagem principal do produto e os botões de Call-to-Action (CTA).
About.tsx: Explica a proposta de valor do produto (Inteligente, Conectado, Tempo Real).
Technology.tsx: Detalha o "motor" do óculos (ESP32, Módulo GPS, Impressão 3D).
Comfort.tsx: Foca-se na ergonomia, ventilção ativa e no peso ultra-leve de 35g.
Features.tsx: Lista as funcionalidades atuais como cálculo de velocidade e sincronização com o telemóvel.
Integration.tsx: Mostra como o óculos comunica com a aplicação smartphone através de um mockup interativo.
Colors.tsx: Permite ao utilizador interagir com as diferentes opções de cores do produto.
Specs.tsx: Uma tabela técnica exaustiva (Memória RAM, Autonomia, Dimensões).
DeepDive.tsx: Um "mergulho profundo" nos cálculos matemáticos de energia (Wh) e armazenamento.
Footer.tsx: Rodapé com formulário de newsletter, links sociais e informações de contacto.

4. Design System e Identidade Visual

O site utiliza uma paleta de cores moderna e tecnológica:

Base: Azul Slate escuro (#0f172a) para um look premium e "Dark Mode" por padrão.
Destaques: Laranja (#f97316) para ações de compra e Teal (#0d9488) para tecnologia e status.
Tipografia:
- Inter: Para textos de leitura e interface.
- Space Grotesk: Para títulos impactantes e displays.
- JetBrains Mono: Para dados técnicos e especificações (look de engenharia).

5. Fluxos de Interatividade

Navegação

O site utiliza Smooth Scrolling. Quando o utilizador clica num link no menu ou nos botões de "Saber Mais", a página desliza suavemente até ao ID correspondente do elemento, em vez de saltar bruscamente.

Efeitos de Scroll (Reveal)

Quase todas as secções utilizam hooks de useEffect com IntersectionObserver. Isto garante que os elementos de UI surjam com uma animação de "fade-in up" apenas quando se tornam visíveis, o que aumenta o engajamento do utilizador e a perceção de performance.

6. Como Manter e Evoluir

Adicionar uma nova secção

Crie um novo ficheiro em src/sections/MinhaNovaSeccao.tsx.
Importe-o no App.tsx e adicione-o à lista de componentes.
Se desejar que apareça no menu, adicione o link em Navigation.tsx e Footer.tsx.

Alterar Cores Globais

Todas as cores base estão definidas no src/index.css dentro do bloco :root em formato HSL. Alterar a variável --primary mudará a cor principal de todos os botões e destaques do site.

7. Instruções de Desenvolvimento

Para rodar o ambiente de desenvolvimento e ver o relatório em tempo real:

npm install     # Instala as dependências
npm run dev     # Inicia o servidor local (Vite)
npm run build   # Gera a versão final otimizada para produção

RunVision Pro - Engenharia e Design ao serviço da corrida.

README.md

Relatório Técnico da Aplicação: RunVision Pro Landing Page