From 9a0bfdfcbc25c101bba7357df76ca5bb9f1cbeaa Mon Sep 17 00:00:00 2001 From: 240416 <240416@epvc.pt> Date: Wed, 18 Mar 2026 17:16:43 +0000 Subject: [PATCH] readme completo --- README.md | 157 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 96 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index d2e7761..6c340b2 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,108 @@ -# React + TypeScript + Vite +# Relatório Técnico da Aplicação: RunVision Pro Landing Page -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +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. -Currently, two official plugins are available: +--- -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## 1. Visão Geral do Produto -## React Compiler +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. -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +--- -## Expanding the ESLint configuration +## 2. Stack Tecnológica (O que é usado) -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +A aplicação foi desenvolvida utilizando as ferramentas mais robustas do ecossistema moderno de JavaScript: -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... +### 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. - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +### 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. - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +### 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 ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) -``` +--- +**RunVision Pro - Engenharia e Design ao serviço da corrida.**