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

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

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

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