You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.7 KiB
Markdown
64 lines
2.7 KiB
Markdown
# 02 — Arquitetura
|
|
|
|
## Stack
|
|
- **Build:** Vite + React + TypeScript.
|
|
- **Estilos:** Tailwind CSS (`@tailwindcss/vite`).
|
|
- **Componentes:** shadcn/ui (Radix + Tailwind).
|
|
- **Routing/âncoras:** `@tanstack/react-router` (scroll suave entre secções).
|
|
- **Animações:** `framer-motion` (motion).
|
|
- **Ícones:** `lucide-react`.
|
|
- **Alias:** `@/*` → `./src/*` (tsconfig + vite resolve).
|
|
- **Empacotamento/runtime:** Docker (multi-stage node→nginx) para execução
|
|
isolada e independente do host. Ver [06-deployment.md](./06-deployment.md).
|
|
|
|
## Estrutura de pastas (proposta)
|
|
```
|
|
src/
|
|
main.tsx # bootstrap + RouterProvider
|
|
router.tsx # rootRoute + indexRoute (single page)
|
|
index.css # Tailwind + tokens (CSS vars do design system)
|
|
lib/
|
|
utils.ts # cn() (shadcn)
|
|
scroll.ts # helper de scroll suave para âncoras
|
|
data/
|
|
project.ts # conteúdo canónico (de 03-content.md), tipado
|
|
components/
|
|
ui/ # primitivos shadcn (button, card, sheet, badge, dialog...)
|
|
layout/
|
|
Header.tsx
|
|
Footer.tsx
|
|
Section.tsx # wrapper de secção (id âncora + animação in-view)
|
|
sections/
|
|
Hero.tsx
|
|
Goal.tsx # Objetivos e contributo
|
|
WorkPlan.tsx
|
|
Gantt.tsx # cronograma (inspirado em cronograma.png)
|
|
WorkPlanCard.tsx
|
|
Indicators.tsx
|
|
IndicatorCard.tsx
|
|
App.tsx # composição das secções na ordem da spec
|
|
|
|
# raiz (deployment — ver 06-deployment.md)
|
|
Dockerfile # multi-stage: node (build) → nginx (runtime)
|
|
.dockerignore # exclui node_modules/dist/.git do contexto
|
|
nginx.conf # SPA fallback + gzip + cache de assets
|
|
docker-compose.yml # build + port mapping (8080:80) + healthcheck
|
|
```
|
|
|
|
## Routing / navegação
|
|
- Single-page: uma rota `/` que renderiza todas as secções em sequência.
|
|
- Navegação por **âncoras**: `#home`, `#goal`, `#work-plan`, `#indicators`.
|
|
- Scroll suave via helper (`element.scrollIntoView({ behavior: 'smooth' })`)
|
|
acionado pelos itens de menu; TanStack Router para estrutura e (opcional) hash.
|
|
- IDs estáveis em cada `<Section>` para deep-linking.
|
|
|
|
## Dados
|
|
- Sem backend. Conteúdo estático tipado em `src/data/project.ts`, derivado
|
|
exclusivamente de [03-content.md](./03-content.md).
|
|
- Logos dos parceiros como assets em `src/assets/partners/` (placeholder se em falta).
|
|
|
|
## Decisões abertas (precisam validação)
|
|
1. Logos oficiais dos parceiros — não fornecidos em `input_files/`; usar
|
|
placeholder textual/cartão até receber ficheiros? **(assumir placeholder)**
|
|
2. Hex exatos da marca INESCC — usar paleta proposta em 01 e afinar depois.
|