# Relatório Técnico da Aplicação: RunVision Pro Landing Page 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: 1. **`Navigation.tsx`**: Gere o menu superior fixo, a lógica de scroll suave e o menu mobile hambúrguer. 2. **`Hero.tsx`**: A primeira secção. Contém a imagem principal do produto e os botões de Call-to-Action (CTA). 3. **`About.tsx`**: Explica a proposta de valor do produto (Inteligente, Conectado, Tempo Real). 4. **`Technology.tsx`**: Detalha o "motor" do óculos (ESP32, Módulo GPS, Impressão 3D). 5. **`Comfort.tsx`**: Foca-se na ergonomia, ventilção ativa e no peso ultra-leve de 35g. 6. **`Features.tsx`**: Lista as funcionalidades atuais como cálculo de velocidade e sincronização com o telemóvel. 7. **`Integration.tsx`**: Mostra como o óculos comunica com a aplicação smartphone através de um mockup interativo. 8. **`Colors.tsx`**: Permite ao utilizador interagir com as diferentes opções de cores do produto. 9. **`Specs.tsx`**: Uma tabela técnica exaustiva (Memória RAM, Autonomia, Dimensões). 10. **`DeepDive.tsx`**: Um "mergulho profundo" nos cálculos matemáticos de energia (Wh) e armazenamento. 11. **`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 1. Crie um novo ficheiro em `src/sections/MinhaNovaSeccao.tsx`. 2. Importe-o no `App.tsx` e adicione-o à lista de componentes. 3. 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: ```bash 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.**