Restructured the navigation

frontend/src/App.tsx

@@ -5,7 +5,6 @@ import AppLayout from './pages/AppLayout';
 import Error from './pages/Error';
 import Game from './pages/Game';
 import About from './pages/About';
-import PlayOptions from './pages/PlayOptions';
 
 const router = createBrowserRouter([
     {
@@ -17,10 +16,6 @@ const router = createBrowserRouter([
                 path: '/',
                 element: <Home />,
             },
-            {
-                path: '/play',
-                element: <PlayOptions />,
-            },
             {
                 path: '/game',
                 element: <Game />,

frontend/src/pages/Home.tsx

@@ -1,12 +1,90 @@
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Button from '../library/button';
+import Heading from '../library/heading';
+import '../index.css';
+
+const Home: React.FC = () => {
+    const [gameCode, setGameCode] = useState('');
+    const navigate = useNavigate();
+    const CreateGame = () => {
+        // Logic to create a game
+        console.log('Create Game');
+        navigate('/game');
+    };
+
+    const JoinGame = () => {
+        // Logic to join a game
+        console.log('Join Game with code:', gameCode);
+    };
 
-function Home() {
     return (
-        <>
-            <div className="font-kavoon">Home Page</div>
-            <Link to="/play">Play</Link>
-        </>
+        <div className="flex flex-col items-center justify-center h-screen bg-gradient-to-r from-neutral-950 via-red-950 to-neutral-950">
+            <div className="max-h-screen w-screen max-w-screen-md p-1 md:items-center md:justify-center">
+                <div className="flex items-center justify-center p-3 mb-10 ">
+                    <img
+                        src="/UNO_Logo.svg"
+                        alt="UNO Logo"
+                        className="h-12 w-auto mr-2"
+                    />
+                    <Heading
+                        text="Ready for Action?"
+                        fontSize="text-4xl"
+                        fontWeight="font-bold"
+                        textColor="text-white"
+                        fontStyle="font-serif"
+                    />
+                </div>
+                <div className="flex flex-col md:flex-row w-full md:max-w-screen-md space-y-10 md:space-y-0 md:space-x-10 p-10">
+                    <div className="bg-gradient-to-r from-red-700 via-red-700 to-red-700 flex-1 w-full p-5 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                        <div className="pb-12 pt-3">
+                            <Heading
+                                text="Create a new game"
+                                fontSize="text-3xl"
+                                fontWeight="font-bold"
+                                textColor="text-white"
+                                fontStyle="font-serif"
+                            />
+                        </div>
+                        <Button
+                            textStroke="1.5px 1px black"
+                            text="Start Game"
+                            onClick={CreateGame}
+                        />
+                    </div>
+                    <div className="bg-gradient-to-r from-red-700 via-red-700 to-red-700 flex-1 w-full p-3 border-2 border-spacing-2 border-opacity-80 border-red-950 rounded-xl shadow-md flex flex-col items-center">
+                        <div className="pt-2 pb-2">
+                            <Heading
+                                text="Join an existing Game"
+                                fontSize="text-3xl"
+                                fontWeight="font-bold"
+                                textColor="text-white"
+                                fontStyle="font-serif"
+                            />
+                        </div>
+                        <div className="p-2 pb-2 w-full justify-self-center">
+                            <input
+                                placeholder="Enter the Game Code"
+                                value={gameCode}
+                                onChange={(e) => setGameCode(e.target.value)}
+                                className="border-2 border-red-600 rounded-lg p-1 mb-4 text-md w-full bg-black text-white"
+                            />
+                        </div>
+                        <Button
+                            buttonSize="w-64 h-9"
+                            py="py-0"
+                            textColor="text-white"
+                            text="Sign In using Google"
+                            backgroundColor="bg-gray-400"
+                            hoverColor="hover:bg-gray-500"
+                            textStroke="1.5px 1px black"
+                            onClick={JoinGame}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
     );
-}
+};
 
 export default Home;