feat: add themed avatars to all media list views

Added custom avatars for each media type, appearing at the top of their respective list pages:
- Games: Gaming setup with controller and LED lights (red border)
- Books: Reading in the library with warm tones (brown border)
- Music: Joyful with headphones and urban nightscape (blue border)
- Shows: Relaxing on couch with remote and theater curtains (pink border)
- Manga: Reading manga surrounded by manga shelves (teal border)
- Art: Art studio with paintbrush and golden tones (yellow border)

Each avatar is:
- 120x120px circular display
- Themed border colour matching the media type
- Smooth hover animation with scale and shadow effects
- Positioned in a centered hero section above the header

All avatars showcase Naomi's personality and interests whilst maintaining consistent styling across the application.

apps/frontend/src/app/components/art/art-gallery.component.ts

@@ -23,6 +23,10 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
   imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/art-avatar.jpg" alt="Art avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>Art Gallery</h2>
         <p class="subtitle">Artwork of Naomi</p>
@@ -458,6 +462,26 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #fdcb6e;
+      box-shadow: 0 4px 12px rgba(253, 203, 110, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(253, 203, 110, 0.5);
+    }
+
     .header-section {
       display: flex;
       flex-direction: column;

apps/frontend/src/app/components/books/books-list.component.ts

@@ -23,6 +23,10 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/books-avatar.jpg" alt="Books avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Book Collection</h2>
         @if (authService.isAdmin()) {
@@ -701,6 +705,26 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #8b6f47;
+      box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(139, 111, 71, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/games/games-list.component.ts

@@ -23,6 +23,10 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
   imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/games-avatar.jpg" alt="Gaming avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Game Collection</h2>
         @if (authService.isAdmin()) {
@@ -684,6 +688,26 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #ff6b6b;
+      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(255, 107, 107, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/manga/manga-list.component.ts

@@ -23,6 +23,10 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/manga-avatar.jpg" alt="Manga avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Manga Collection</h2>
         @if (authService.isAdmin()) {
@@ -619,6 +623,26 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #00b894;
+      box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 184, 148, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/music/music-list.component.ts

@@ -23,6 +23,10 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/music-avatar.jpg" alt="Music avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Music Collection</h2>
         @if (authService.isAdmin()) {
@@ -689,6 +693,26 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #74b9ff;
+      box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(116, 185, 255, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/shows/shows-list.component.ts

@@ -23,6 +23,10 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
   imports: [CommonModule, RouterLink, FormsModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/shows-avatar.jpg" alt="Shows avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Shows &amp; Films</h2>
         @if (authService.isAdmin()) {
@@ -615,6 +619,26 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #e84393;
+      box-shadow: 0 4px 12px rgba(232, 67, 147, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(232, 67, 147, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;