Resilience_microsite/specs/02-architecture.md

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.

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