frontend/src/app/app.component.html

@@ -1 +1,2 @@
+<app-navbar></app-navbar>
 <router-outlet></router-outlet>

frontend/src/app/app.component.ts

@@ -2,11 +2,11 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { KeycloakAngularModule } from 'keycloak-angular';
-
+import { NavbarComponent } from './shared/components/navbar/navbar.component';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, KeycloakAngularModule],
+  imports: [CommonModule, RouterOutlet, KeycloakAngularModule, NavbarComponent],
   providers: [],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -0,0 +1,42 @@
+<nav class="bg-[#0F212E] text-gray-300 border-b border-[#1B2C3B]">
+  <div class="max-w-full mx-auto px-4">
+    <div class="flex justify-between items-center h-14">
+      <div class="flex items-center space-x-6">
+        <a routerLink="/" class="flex items-center">
+          <span class="text-white text-xl font-semibold">Trustworthy Casino</span>
+        </a>
+        <div class="hidden md:flex items-center space-x-1">
+          <a routerLink="/games"
+            class="px-3 py-2 rounded-md text-sm hover:bg-[#1B2C3B] transition-colors duration-200">Games</a>
+        </div>
+      </div>
+
+      <div class="hidden md:flex items-center space-x-4">
+        <button
+          class="cursor-pointer px-4 py-1.5 rounded bg-[#00A76F] hover:bg-[#00C684] text-white text-sm font-medium transition-colors duration-200">Login</button>
+      </div>
+
+      <div class="md:hidden">
+        <button (click)="toggleMenu()" class="text-gray-300 hover:text-white transition-colors duration-200">
+          <svg class="h-6 w-6" [class.hidden]="isMenuOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          <svg class="h-6 w-6" [class.hidden]="!isMenuOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <div [class]="isMenuOpen ? 'block' : 'hidden'" class="md:hidden">
+      <div class="p-2 pt-2 mb-4 space-y-1 bg-[#1B2C3B] rounded-b-lg">
+        <a routerLink="/games"
+          class="block px-3 py-2 rounded-md text-sm hover:bg-[#263B4D] transition-colors duration-200">Games</a>
+        <div class="pt-2 space-y-2">
+          <button
+            class="cursor-pointer w-full px-4 py-1.5 rounded bg-[#00A76F] hover:bg-[#00C684] text-white text-sm font-medium transition-colors duration-200">Login</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

frontend/src/app/shared/components/navbar/navbar.component.scss

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+.text-gold {
+  color: #FFD700;
+}
+
+.bg-gold {
+  background-color: #FFD700;
+  &:hover {
+    background-color: #FFC000;
+  }
+}
+
+.hover\:bg-gold-dark:hover {
+  background-color: #FFC000;
+}
+
+.hover\:text-gold:hover {
+  color: #FFD700;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.transition-colors {
+  transition: all 0.2s ease-in-out;
+} 

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  standalone: true,
+  imports: [CommonModule, RouterModule]
+})
+export class NavbarComponent {
+  isMenuOpen = false;
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+} 

frontend/tailwind.config.js

@@ -5,6 +5,34 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        // Core colors from the palette
+        'primary': {
+          900: '#000000',  // #000000
+          800: '#05080a',  // #05080a
+          700: '#071d2a',  // #071d2a
+          600: '#0f212e',  // #0f212e - dark navy
+          500: '#1a2c38',  // #1a2c38
+          400: '#213743',  // #213743
+          300: '#2f4553',  // #2f4553
+        },
+        'accent': {
+          blue: '#1475e1',    // Bright blue
+          green: '#00e701',   // Bright green
+        },
+        'gray': {
+          400: '#557086',     // Mid gray
+          300: '#b1bad3',     // Light gray
+          200: '#d5dceb',     // Lighter gray
+          100: '#ffffff',     // White
+        },
+        // Semantic colors
+        'gold': {
+          DEFAULT: '#b1bad3',
+          light: '#d5dceb',
+          dark: '#557086',
+        },
+      },
       animation: {
         'fadeIn': 'fadeIn 0.3s ease-out',
         'backdropBlur': 'backdropBlur 0.4s ease-out',