# 04 — Especificação por secção

Ordem de render = ordem desta lista. Cada secção é envolvida por `<Section id>`
com animação `whileInView`.

## 1. Header (`layout/Header.tsx`)
- Fixo no topo (`sticky`, `backdrop-blur`, fundo translúcido sobre scroll).
- Esquerda: acrónimo **RESILIENCE** (link para `#home`).
- Direita (≥ md): nav inline — **Home** (`#home`), **Work plan** (`#work-plan`),
  **Indicators** (`#indicators`).
- < md: botão menu → `Sheet` shadcn com os mesmos links.
- Clique em item → scroll suave para a âncora; estado ativo conforme secção visível (opcional).
- Componentes shadcn: `button`, `sheet`, (opcional `navigation-menu`).

## 2. Hero (`sections/Hero.tsx`) — id `home`
- Fundo institucional (gradiente navy subtil / formas geométricas discretas).
- Título grande (acrónimo) + subtítulo (título completo) + descrição curta (Goal resumido).
- Bloco de **meta** em cartões/linhas: Dates (start/end), Project Code, EU + National support.
- Lista compacta da **equipa** (badges ou texto).
- CTA secundário: "View work plan" → `#work-plan`.
- Animação: entrada em stagger dos blocos.

## 3. Objetivos e contributo (`sections/Goal.tsx`) — id `goal`
- Coluna texto: **Goal** (parágrafo de 03-content).
- Grelha de **contribution** (5 pontos) como cartões com ícone lucide:
  Multiple Benefits, Hybrid Lifecycle Analysis, Circular resource assessment,
  Portfolio optimization, Decision-makers' preferences.
- Boa separação visual entre info principal (Goal) e secundária (cartões).

## 4. Work plan (`sections/WorkPlan.tsx`) — id `work-plan`
- Intro curta + grelha de **7 cartões** (T1–T7), cada um com número, título, ícone.
- Interação: **hover (desktop)** / **clique (mobile)** revela o **cronograma**.
  - Desktop: ao hover num cartão, destaca a respetiva linha no `Gantt`.
  - Mobile: clique abre `Dialog`/`Drawer` com o cronograma focado nessa tarefa.
- **`Gantt.tsx`** (componente próprio, inspirado em `cronograma.png`):
  - Eixo temporal 36 meses (ago/2025 → jul/2028), agrupado por ano.
  - Uma linha por tarefa, barra posicionada por `startMonth`/`endMonth` (de 03-content).
  - Marcadores de milestones (M1–M10) e reports (linhas verticais).
  - Implementação CSS grid + Tailwind; cores do design system; tooltip por barra.
  - Responsivo: scroll horizontal em mobile.

## 5. Indicators (`sections/Indicators.tsx`) — id `indicators`
- Sub-grupos: **Journals**, **Conferences**, **MSc Dissertations**, (PhD — vazio/oculto).
- Cada item = `IndicatorCard` (tipo via badge, título, autores/venue/ano).
- Clique no cartão → `Dialog` com detalhe completo + link (DOI/URL quando exista).
- Grelha responsiva; ícones lucide por tipo (BookOpen, Presentation, GraduationCap).

## 6. Footer (`layout/Footer.tsx`)
- Cartões dos **3 beneficiários** (INESC Coimbra, ADAI, IPC–ISCAC) — logo/nome.
- Linha de **financiamento**: COMPETE2030 · FEDER · República Portuguesa + montantes.
- Project code + DOI. Copyright Streamline/INESCC.
- Logos: assets em `src/assets/partners/`; placeholder textual se não fornecidos.

## Wrapper `Section.tsx`
- Props: `id`, `className`, `children`, `title?`, `eyebrow?`.
- Aplica `scroll-mt` (compensar header fixo) + animação in-view padrão.