# 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).
- **Solução baseada em docker**.

## Tipo de sistema
- Docker container para execução independente
- Utilizar nginx.conf para servir os ficheiros estáticos gerados pelo build do Vite.

## 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
```

## 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.