Resilience_microsite/boot.md

# Prompt de arranque

# Contexto
Gestor de projeto na empresa Streamline, responsável pela área de web-design e web-development

# Cliente
INESCC - Álvaro Gomes

# Metodologia
Spec-driven development (SDD)

# Regras de negócio
- Deve ser registado um código de projeto associado para cada situação
- Existem sistemas próprios da Streamline
- Existem sistemas associados a clientes específicos, algumas dedicadas, outras em sistemas partilhados da Streamline
- O site tem de ser obrigatoriamente em inglês, e deve seguir o design system do INESCC, mas também deve ser moderno e institucional, seguindo as melhores práticas de UX/UI

# Objetivos
Manter uma estrutura de pastas para fazer perfil e guardar histórico e rastreabilidade de caracterização, manutenção e operação da infraestrutura TI, para a própria empresa Streamline, mas também para os seus clientes que têm contratualizada a gestão da sua infraestrutura TI.

# Tarefas do agente IA
- Implementar o frontend do projeto em react, seguindo os ficheiros presentes no input files.
- Arquitetura em react e pacotes utilizados:
    - tantstack router - para âncoras e navegação entre secções com scroll suave
    - shadcn (para componentes)
    - tailwind (para estilos)
    - motion para animações 
    - lucide para icones

# Regras de prioridade
- Priorizar a implementação das secções principais e dos componentes mais importantes, seguindo a hierarquia apresentada nos ficheiros de input, e depois ir implementando os restantes componentes.
- Priorizar a implementação dos estilos do tailwind, seguindo as cores e estilos do design system do inescc, e depois ir ajustando os detalhes visuais e as animações.

# Estrutura de entrega
- O projeto deve ser um micro-website de uma só página para apresentação de um projeto chamado "resilience", as informações acerca dele estão presentes no documento input_files\Notas Site.docx.

# Critérios de aceitação
A aplicação deve arrancar com npm install e npm run dev, não pode ter erros de TypeScript, e as rotas principais devem estar acessíveis.

# Critérios de instalação
- O projeto deve ser instalado utilizando npm, com um ficheiro package.json presente na raiz do projeto, e deve ser possível instalar as dependências utilizando o comando `npm install`. 

## Comandos por ordem de instalação de pacotes
1. npm create vite@latest
2. npm install tailwindcss @tailwindcss/vite
3. npm install -D @types/node
4. npx shadcn@latest init
5. npm i @tanstack/react-router @tanstack/react-router-devtools
6. npm i framer-motion
7. npm i lucide-react

## Não esquecer de configurar o tsconfig.json para incluir os paths dos ficheiros de configuração do shadcn, tailwind e router
``` typescript
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

``` json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

``` typescript
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

# Regras de UX/UI
- Deve ser utilizado o design system shadcn para os componentes, e o tailwind para os estilos, seguindo as melhores práticas de design e usabilidade.
- O estilo visual deve ser institucional, mas moderno, seguindo as cores, botões e arredondamentos do inescc (https://www.inescc.pt/), e deve ser responsivo, adaptando-se a diferentes tamanhos de ecrã.
- Font: Outfit
- Animações, utilizando o motion, para transições suaves entre páginas e componentes, mas sem exageros, mantendo a simplicidade e a clareza da interface.

# Regras sobre os input_files
Usar os ficheiros em input_files como fonte de verdade para conteúdo, estrutura e referências visuais.

# Secções Obrigatórias
#### `Utiliza estrutura para organizar o conteúdo do microsite, seguindo a hierarquia apresentada nos ficheiros de input_files/Notas Site.docx`

### Header
Nome do projeto e menu de navegação, seguindo o design system do shadcn para os componentes de header e menu, com ancoras para os seguintes tópicos:
- Home
- Work plan
- Indicadores

### Hero
- Hero sobre o projeto:
    - Nome
    - Descrição
    - Equipa
    - Datas (inicio e fim)
    - Project code
    - Suporte financeiro   
    
### Objetivos e contributo
Esta secção apresenta de forma breve o objetivo central do projeto `Resilience`, o seu enquadramento e o contributo da equipa para a sua concretização. Deve explicar, em poucas linhas, qual o problema que o projeto aborda, qual a solução proposta e qual o impacto esperado para o cliente e para o contexto científico e técnico.
A apresentação deve combinar:

- um texto introdutório breve `GOAL`;
- pontos-chave em destaque sobre o contributo da equipa;
- elementos visuais simples, como cartões ou ícones discretos;
- uma leitura fluida, com boa separação entre informação principal e secundária.

### Work plan
   - Secção interativa com o work plan - presente no documento input_files/Notas Site.docx, onde cada ponto do plano de trabalho é apresentado como um cartão, e ao dar hover no cartão `(desktop)` e clicar `(mobile)`, é apresentado um cronograma, cria esse componente em código, inspirado em shadcn, através da imagem input_files/cronograma.png.

### Indicadores
   - Secção de indicadores, onde são apresentados journals, conferências e outros indicadores de impacto do projeto, seguindo a estrutura apresentada no documento input_files/Notas Site.docx. 
   Cada um desses indicadores deve ser apresentado como um cartão, seguindo o design system do shadcn, e deve ser possível clicar em cada cartão para obter mais detalhes sobre o indicador.

### Footer
   - Logos dos parceiros, seguindo a hierarquia apresentada no documento input_files/Notas Site.docx, e seguindo o design system do shadcn para os cartões de cada parceiro - INESC Coimbra - Instituto de Engenharia de Sistemas e Computadores de Coimbra, Associação para o Desenvolvimento da Aerodinâmica Industrial, Instituto Politécnico de Coimbra – ISCAC.

# Ordem de trabalhos
Antes de editar, apresentar um plano curto; depois, executar e no fim resumir o que foi alterado e o que ficou por fazer

# Output
Criar pasta `specs/` com estrutura SDD 


<!-- AI Agent Run Output
--