Resilience_microsite/specs/04-sections.md

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.