109 lines
6.1 KiB
Markdown
109 lines
6.1 KiB
Markdown
# 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.**
|