readme completo
This commit is contained in:
157
README.md
157
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.**
|
||||
|
||||
Reference in New Issue
Block a user