Add Arcade and first game Outrun.

src/components/Apps/Arcade/Arcade.css

@@ -0,0 +1,96 @@
+.arcadeWrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.arcade-header {
+    display: flex;
+    justify-content: center;
+    padding: 0px 0px 5px;
+}
+
+.arcade-header div {
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 5px;
+    margin: 0 10px;
+}
+
+.arcade-header div.active {
+    font-weight: bold;
+}
+
+.main-game-banner {
+    position: relative;
+    height: 60%;
+    overflow: hidden;
+}
+
+.main-game-banner img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.gradient {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 31%;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+}
+
+.btnAndTitle {
+    position: absolute;
+    top: 74%;
+    left: 3%;
+    /* transform: translate(-50%, -50%); */
+    display: flex;
+    flex-direction: row;
+}
+
+.play-button {
+    padding: 15px 55px;
+    font-size: 14px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.gameTitle {
+    font-size: 30px;
+    font-weight: 700;
+    color: white;
+    padding-left: 11px;
+    padding-top: 4px;
+}
+
+.game-carousel {
+    display: flex;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.game-carousel img {
+    width: 100px;
+    height: 150px;
+    object-fit: cover;
+    margin-right: 10px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    opacity: 0.5;
+}
+
+.game-carousel img.active {
+    /* border-color: #007bff; */
+    opacity: 1;
+}
+
+.game-container {
+    flex-grow: 1;
+    overflow: hidden;
+}

src/components/Apps/Arcade/Arcade.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { getImagePath } from '../../../utils/assetPaths';
+import { Theater } from '../Theater/Theater';
+import { Toybox } from '../Toybox/Toybox';
+import { Outrun } from './Games/Outrun/Outrun';
+import './Arcade.css';
+
+export const Arcade = () => {
+  const games = [
+    { name: 'Outrun', image: 'outrun.jpg' },
+    { name: 'Asteroids', image: 'asteroids.jpg' },
+    { name: 'Centipede', image: 'centipede.jpg' },
+    { name: 'Missile Command', image: 'missile-command.jpg' },
+  ];
+
+  const [activeGame, setActiveGame] = useState(games[0].name);
+  const [showGame, setShowGame] = useState(false);
+  const [currentGame, setCurrentGame] = useState(null);
+
+  const [activeTab, setActiveTab] = useState('Arcade');
+
+  const handleGameClick = (gameName) => {
+    setActiveGame(gameName);
+    setShowGame(false);
+  };
+
+  const handlePlayClick = () => {
+    setShowGame(true);
+    setCurrentGame(activeGame);
+  };
+
+  const closeGame = () => {
+    setShowGame(false);
+    setCurrentGame(null);
+  };
+
+  const handleTabClick = (tabName) => {
+    setActiveTab(tabName);
+    setShowGame(false);
+    setCurrentGame(null);
+  };
+
+  return (
+    <div className="arcadeWrapper">
+      <div className="arcade-header">
+        <div
+          className={activeTab === 'Theater' ? 'active' : ''}
+          onClick={() => handleTabClick('Theater')}
+        >
+          Theater
+        </div>
+        <div
+          className={activeTab === 'Arcade' ? 'active' : ''}
+          onClick={() => handleTabClick('Arcade')}
+        >
+          Arcade
+        </div>
+        <div
+          className={activeTab === 'Toybox' ? 'active' : ''}
+          onClick={() => handleTabClick('Toybox')}
+        >
+          Toybox
+        </div>
+      </div>
+
+      {activeTab === 'Arcade' && (
+        !showGame ? (
+          <>
+            <div className="main-game-banner">
+              <img
+                src={getImagePath(`games/${activeGame.toLowerCase()}.jpg`)}
+                alt={activeGame}
+              />
+              <div className="gradient"></div>
+              <div className="btnAndTitle">
+                <button className="play-button" onClick={handlePlayClick}>
+                  Play Game
+                </button>
+              <div className="gameTitle">{activeGame}</div>
+              </div>
+            </div>
+            <div className="game-carousel">
+              {games.map((game) => (
+                <img
+                  key={game.name}
+                  src={getImagePath(`games/${game.image}`)}
+                  alt={game.name}
+                  onClick={() => handleGameClick(game.name)}
+                  className={activeGame === game.name ? 'active' : ''}
+                />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="game-container">
+            {currentGame === 'Outrun' && <Outrun onClose={closeGame} />}
+            {/* Add other game components here when they're available */}
+          </div>
+        )
+      )}
+
+      {activeTab === 'Theater' && (
+        <Theater />
+      )}
+
+      {activeTab === 'Toybox' && (
+        <Toybox />
+      )}
+    </div>
+  );
+};