404

frontend/code/src/404/assest/Font.tsx

@@ -0,0 +1,11 @@
+export const Font = () => {
+ return (
+ <svg className="absolute flex z-20 items-center top-[28%] left-[32%] h-2/6 w-2/6 justify-center auth-container " width="720" height="371" viewBox="0 0 720 371" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M124.814 296.8V110.113L159.501 109.519L54.8469 230.317L49.8069 212.509H215.83V252.874H33.7975L14.2305 215.18L128.668 87.2593H173.435V296.8H124.814ZM612.254 296.8V110.113L646.941 109.519L542.287 230.317L537.247 212.509H703.271V252.874H521.238L501.671 215.18L616.108 87.2593H660.875V296.8H612.254Z" fill="white"/>
+ <circle cx="383.751" cy="169.917" r="61.2982" transform="rotate(-179.609 383.751 169.917)" fill="white"/>
+ <rect x="306.516" y="297.18" width="17.5138" height="81.6719" transform="rotate(-145.593 306.516 297.18)" fill="white"/>
+ <path d="M440.706 192.467C454.351 192.467 465.412 181.393 465.412 167.733C465.412 154.073 454.351 143 440.706 143C427.061 143 416 154.073 416 167.733C416 181.393 427.061 192.467 440.706 192.467Z" fill="white" stroke="black" strokeWidth="9"/>
+ </svg>
+
+ )
+}

frontend/code/src/404/index.tsx

@@ -0,0 +1,11 @@
+import {Font} from './assest/Font'
+export const Error = () =>
+{
+ return (
+ <div className=" flex flex-col bg-black h-screen z-0 w-screen relative">
+ <Font/>
+ <div className=" absolute flex z-10 items-center top-1/4 left-1/4 h-1/2 w-1/2 justify-center auth-container overflow-hidden bg-[url(./images/Error.gif)] bg-luxury bg-no-repeat bg-cover bg-center"></div>
+ <h1 className='absolute text-white text-3xl z-30 font-lexend top-[64%] left-[39%]'>Page Not Found</h1>
+ </div>
+ )
+}

frontend/code/src/Auth/index.tsx

@@ -6,10 +6,10 @@ export const Login = () =>
 {
 
  return (
- <div className="auth-container overflow-hidden flex flex-col items-center justify-center h-screen bg-[url(./images/bg.gif)] bg-luxury bg-no-repeat bg-cover bg-center">
- <div className="overlay absolute h-full w-full bg-black opacity-40 z-10"></div>
- <div className="auth-section p-16 absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
- <div className="logo-container flex flex-col justify-center">
+ <div className="overflow-hidden flex flex-col items-center justify-center h-screen bg-[url(./images/bg.gif)] bg-luxury bg-no-repeat bg-cover bg-center">
+ <div className="absolute h-full w-full bg-black opacity-40 z-10"></div>
+ <div className="p-16 absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
+ <div className=" flex flex-col justify-center">
  <img src={pingpong} alt="Logo" />
  </div>
  <Link to="/layout">

frontend/code/src/index.css

@@ -1,3 +1,5 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

frontend/code/src/index.tsx

@@ -5,7 +5,7 @@ import {Login} from './Auth'
 import {Main} from './Auth/main'
 import {Lobby} from './Lobby/index'
 import {Layout} from './Layout/index'
-
+import {Error} from './404/index'
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
@@ -20,6 +20,8 @@ root.render(
  <Route path="/main" element={<Main/>}></Route>
  <Route path="/lobby" element={<Lobby/>}></Route>
  <Route path="/layout" element={<Layout/>}></Route>
+ <Route path="/*" element={<Error/>}></Route>
+
  </Routes>
  </BrowserRouter>
 

frontend/code/tailwind.config.js

@@ -5,8 +5,14 @@ module.exports = {
  "./src/**/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
- extend: {},
+ extend: {
+ fontFamily: {
+ poppins: ['Poppins', 'sans-serif'],
+ lexend: ['Lexend Peta', 'sans-serif'],
+ },
+ },
  },
+
  plugins: [require("daisyui")],
  daisyui: {
  themes: [