implemented better ui and pseudo data

frontend/src/app/feature/home/home.component.ts

@@ -2,12 +2,25 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { KeycloakService } from 'keycloak-angular';
 import { MatDialog } from '@angular/material/dialog';
 import { DepositComponent } from '../deposit/deposit.component';
-
 import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
+import {CurrencyPipe, NgFor} from "@angular/common";
+
+interface Game {
+  id: string;
+  name: string;
+  image: string;
+}
+interface Transaction {
+  id: string;
+  type: string;
+  amount: number;
+  date: string;
+}
+
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent],
+  imports: [NavbarComponent, CurrencyPipe, NgFor],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -15,6 +28,67 @@ export default class HomeComponent {
   private keycloakService: KeycloakService = inject(KeycloakService);
   public dialog: MatDialog = inject(MatDialog);
 
+  userAvatar = '/assets/images/default-avatar.png';
+  username = this.keycloakService.getUsername();
+  vipLevel = 1;
+  balance = 1000.00;
+
+  featuredGames: Game[] = [
+    {
+      id: '1',
+      name: 'Poker',
+      image: '/assets/images/games/poker.jpg',
+    },
+    {
+      id: '2',
+      name: 'Blackjack',
+      image: '/assets/images/games/blackjack.jpg',
+    },
+    {
+      id: '3',
+      name: 'Slots',
+      image: '/assets/images/games/slots.jpg',
+    },
+    {
+      id: '4',
+      name: 'Plinko',
+      image: '/assets/images/games/plinko.jpg',
+    },
+    {
+      id: '5',
+      name: 'Liars Dice',
+      image: '/assets/images/games/liars-dice.jpg',
+    },
+    {
+      id: '6',
+      name: 'Lootboxen',
+      image: '/assets/images/games/lootboxen.jpg',
+    }
+  ];
+
+  allGames: Game[] = [...this.featuredGames];
+
+  recentTransactions: Transaction[] = [
+    {
+      id: '1',
+      type: 'Deposit',
+      amount: 100.00,
+      date: '2024-03-20'
+    },
+    {
+      id: '2',
+      type: 'Withdrawal',
+      amount: -50.00,
+      date: '2024-03-19'
+    },
+    {
+      id: '3',
+      type: 'Bonus',
+      amount: 25.00,
+      date: '2024-03-18'
+    }
+  ];
+
   public logout() {
     const baseUrl = window.location.origin;