working header!

frontend/app/src/pages/AppRoutes.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import MainPage from "./MainPage";
+import { useGetUserQuery } from "../slice/AuthApi";
+import { getLocalToken, store, updateUser } from "../config/store";
+
+const AppRoutes = () => {
+  store.dispatch(getLocalToken());
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" Component={MainPage} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default AppRoutes;

frontend/app/src/pages/MainPage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./styles.css";
+import logoSquare from "../../static/logo-square.png";
+import { Button } from "antd";
+
+const MainPage = () => {
+  return (
+    <div className="card main">
+      <img src={logoSquare} alt="logo" className="image" />
+      <p style={{ fontSize: "2rem" }}>Organizing queues were never so simple</p>
+      <div className="button-box">
+        <Button>Join a queue</Button>
+        <Button>Take a tour</Button>
+      </div>
+    </div>
+  );
+};
+
+export default MainPage;

frontend/app/src/pages/styles.css

@@ -0,0 +1,27 @@
+.card {
+    background: #001529;
+    margin: 10px;
+    border-radius: 10px;
+  }
+
+.main {
+    display: flex;
+    flex-flow: column;
+    justify-items: center;
+    align-items: center;
+    align-content: space-between;
+}
+
+.image {
+    height: 10vw;
+    width: auto;
+}
+
+.button-box {
+    width: 100%;
+    display: flex;
+    align-self: center;
+    flex-flow: row;
+    justify-items: center;
+    align-content: space-around;
+}