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