feat: added bot, light and dark mode

src/app/pages/welcome/welcome.component.html

@@ -1,25 +1,97 @@
 <main class="welcome-shell">
+  <div class="theme-toggle-container">
+    <div class="switch">
+      <input type="checkbox" class="switch__input" id="themeToggle" (change)="toggleDarkMode()" [checked]="!isDarkMode()">
+      <label class="switch__label" for="themeToggle">
+        <span class="switch__indicator"></span>
+        <span class="switch__decoration"></span>
+      </label>
+    </div>
+  </div>
+  <div class="clouds-container">
+    <div class="cloud cloud-left">
+      <img src="arabian-chess/player-one.gif" alt="Player One" class="cloud-gif" />
+    </div>
+    <div class="plane plane-left">
+      <img src="arabian-chess/plane.png" alt="Plane" class="plane-body" />
+      <img src="arabian-chess/raf.gif" alt="Raf" class="plane-gif" />
+    </div>
+    <div class="cloud cloud-right">
+      <div class="gif-with-halo">
+        <img src="arabian-chess/player-two.gif" alt="Player Two" class="cloud-gif" />
+      </div>
+    </div>
+  </div>
   <section class="welcome-card">
     <h1>Welcome to NowChess</h1>
     <p>Pick a mode to begin.</p>
 
     <div class="mode-grid">
-      <button type="button" class="mode mode-disabled" disabled>
+      <button type="button" class="mode mode-active" (click)="toggleDifficultySelector()" [disabled]="creating">
         <span>Bot</span>
-        <small>Coming soon</small>
+        <small>{{ creating ? 'Creating game...' : 'Choose difficulty' }}</small>
       </button>
 
+      @if (showDifficultySelector) {
+        <div class="difficulty-selector">
+          <p>Select difficulty:</p>
+          <div class="difficulty-buttons">
+            <button type="button" class="difficulty-btn easy" (click)="startVsBot('easy')" [disabled]="creating">
+              Easy
+            </button>
+            <button type="button" class="difficulty-btn medium" (click)="startVsBot('medium')" [disabled]="creating">
+              Medium
+            </button>
+            <button type="button" class="difficulty-btn hard" (click)="startVsBot('hard')" [disabled]="creating">
+              Hard
+            </button>
+          </div>
+        </div>
+      }
+
       <button type="button" class="mode mode-active" (click)="startOneVsOne()" [disabled]="creating">
         <span>1 vs 1</span>
         <small>{{ creating ? 'Creating game...' : 'Start now' }}</small>
       </button>
 
-      <button type="button" class="mode mode-disabled" disabled>
-        <span>Future Technique</span>
-        <small>Placeholder</small>
+      <button type="button" class="mode mode-active" (click)="toggleJoinGameForm()" [disabled]="joiningGame">
+        <span>Join Game</span>
+        <small>{{ joiningGame ? 'Joining...' : 'Enter game ID' }}</small>
       </button>
     </div>
 
+    @if (showJoinGameForm) {
+      <div class="join-game-form">
+        <p>Enter the game ID:</p>
+        <div class="join-game-input-group">
+          <input
+            type="text"
+            class="join-game-input"
+            [(ngModel)]="gameIdInput"
+            placeholder="Paste game ID here"
+            [disabled]="joiningGame"
+            (keyup.enter)="joinGame()"
+          />
+          <button
+            type="button"
+            class="join-game-btn join"
+            (click)="joinGame()"
+            [disabled]="joiningGame || !gameIdInput.trim()"
+          >
+            {{ joiningGame ? 'Joining...' : 'Join' }}
+          </button>
+          <button
+            type="button"
+            class="join-game-btn cancel"
+            (click)="clearJoinGameForm()"
+            [disabled]="joiningGame"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    }
+
     @if (errorMessage) {
       <p class="error">{{ errorMessage }}</p>
     }