REFACTOR: Images and header code

[Caussz]

General Code Corrections

This task involves several steps to organize assets, enhance component logic, and ensure consistency across the project. Please refer to the existing examples in the project for guidance.

Checklist

• Create an images folder inside the assets folder and organize all site images there.
• Create a composable for the desktop header component to add the logic for state changes.
• Add a type field to the mock publications. Create another mock for types, which include: book, dissertation, article, and scientific article.
  • Example of a publication with type:

    {
      "id": 1,
      "label": "Análise de Algoritmos Genéticos",
      "link": "http://copec.eu/congresses/intertech2014/proc/works/101.pdf",
      "authors": ["1"],
      "keywords": ["1", "2", "3"],
      "categories": ["9", "10"],
      "type": 1,
      "resume": "Este artigo explora o uso de algoritmos genéticos na otimização de funções complexas.",
      "favorite": false
    }

• Create the mock and interface for types.
• Ensure that each publication references the type by its ID, not the type itself.
• - [ ] Add a color field to the mock categories and assign a different color hash to each category.
• Add a favorite boolean field to all mocks where the user has some type of interaction, such as publications, authors, and keywords.
• Update the populatePublications function to include types in the data population. Create the necessary service following existing examples in the project to populate correctly.
• Review the entire codebase for consistency, including class names, component names, function names, variable names, and the presence of semicolons where necessary.
• Run the command npm run build, check for errors, and ensure images are displayed correctly.
• Review all requirements with the team leader before finalizing.

Note: Follow the new design guidelines as established in Figma.