Added initial landing page

src/App.tsx

@@ -1,35 +1,26 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import LandingPage from "./Pages/LandingPage/LandingPage";
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "react-redux";
+import "./App.css";
+import store from "./Components/Plugins/Redux/Store/Store";
 
-function App() {
-  const [count, setCount] = useState(0)
+const queryClient = new QueryClient();
 
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <LandingPage />,
+    errorElement: <></>,
+  },
+]);
+
+export default function App() {
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
+    </Provider>
+  );
 }
-
-export default App

src/Components/Buttons/Button.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import styles from "../styles";
+import { colors } from "../styles";
+
+export interface props {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  label?: string;
+  type: "light" | "dark";
+  children?: React.ReactNode;
+}
+export default function Button(props: props) {
+  const [clicked, setClicked] = useState(false);
+  return (
+    <div>
+      <button
+        onMouseDown={() => {
+          if (!clicked) {
+            props.onClick;
+            setClicked(true);
+          }
+        }}
+        onMouseUp={() => setClicked(false)}
+        onMouseLeave={() => setClicked(false)}
+        style={{
+          borderRadius: 24,
+          minWidth: "15vw",
+          borderColor: colors.button_border,
+          borderStyle: "solid",
+          borderWidth: 2,
+          paddingBottom: "2vh",
+          paddingTop: "2vh",
+          paddingRight: "5vw",
+          paddingLeft: "5vw",
+          marginBottom: "0.5vh",
+          marginTop: "0.5vh",
+          backgroundColor:
+            props.type == "light"
+              ? clicked
+                ? colors.button_dark
+                : colors.button_light
+              : clicked
+              ? colors.button_light
+              : colors.button_dark,
+        }}
+      >
+        <p
+          style={{
+            ...(props.type == "light"
+              ? clicked
+                ? styles.text_light
+                : styles.text_dark
+              : clicked
+              ? styles.text_dark
+              : styles.text_light),
+            ...styles.text_M,
+          }}
+        >
+          {props.label}
+        </p>
+        {props.children}
+      </button>
+    </div>
+  );
+}

src/Components/Plugins/Redux/Store/Store.tsx

@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+const store = configureStore({
+  reducer: {},
+});
+
+export default store;
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;

src/Components/styles.tsx

@@ -0,0 +1,69 @@
+export const colors = {
+  background: "#FFFFFF",
+  header_color: "#141762",
+  font_dark: "#141762",
+  font_light: "#FFFFFF",
+  button_dark: "#141762",
+  button_light: "#FFFFFF",
+  button_border: "#141762",
+  red: "#a44141",
+  orange: "#c57331",
+  green: "#80b28a",
+};
+const styles: { [key: string]: React.CSSProperties } = {
+  background: {
+    backgroundColor: colors.background,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100%",
+    width: "100%",
+    minHeight: "100%",
+    minWidth: "100%",
+  },
+  text_dark: {
+    color: colors.font_dark,
+    fontWeight: "bold",
+  },
+  text_light: {
+    color: colors.font_light,
+    fontWeight: "bold",
+  },
+  text_red: {
+    color: colors.red,
+    fontWeight: "bold",
+  },
+  text_orange: {
+    color: colors.orange,
+    fontWeight: "bold",
+  },
+  text_green: {
+    color: colors.green,
+    fontWeight: "bold",
+  },
+  text_XL: {
+    fontSize: "clamp(1vw, 4rem, 2vw)",
+  },
+  text_L: {
+    fontSize: "clamp(1vw, 2rem, 2vw)",
+  },
+  text_M: {
+    fontSize: "clamp(1vw, 1rem, 2vw)",
+  },
+  text_S: {
+    fontSize: "clamp(1vw, 0.5rem, 2vw)",
+  },
+  text_XS: {
+    fontSize: "clamp(1vw, 0.2rem, 2vw)",
+  },
+  flex_row: {
+    display: "flex",
+    flexDirection: "row",
+  },
+  flex_column: {
+    display: "flex",
+    flexDirection: "column",
+  },
+};
+
+export default styles;

src/Pages/LandingPage/LandingPage.tsx

@@ -0,0 +1,57 @@
+import Button from "../../Components/Buttons/Button";
+import styles from "../../Components/styles";
+import citc_logo from "../../assets/citc_logo.jpg";
+export default function LandingPage() {
+  return (
+    <div style={styles.background}>
+      <div
+        style={{
+          ...styles.flex_row,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+        }}
+      >
+        <div style={{ maxWidth: "50%", height: "auto", flex: 1 }}>
+          <img style={{ maxWidth: "50%", height: "auto" }} src={citc_logo} />
+        </div>
+        <div
+          style={{
+            maxWidth: "50%",
+            height: "auto",
+            flex: 1,
+          }}
+        >
+          <div
+            style={{
+              minWidth: "30vw",
+              borderRadius: 4,
+              borderColor: "grey",
+              borderStyle: "solid",
+              borderWidth: 1,
+              padding: 16,
+              margin: 64,
+              paddingBottom: "16vh",
+              paddingTop: "16vh",
+            }}
+          >
+            <p style={{ ...styles.text_dark, ...styles.text_L }}>
+              CITC EQUIPMENT
+              <br />
+              TRACKER
+            </p>
+            <div style={{ ...styles.flex_column }}>
+              <Button type={"light"} label={"Login"} onClick={() => {}} />
+              <Button type={"dark"} label={"Register"} onClick={() => {}} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <p>heh</p>
+    </div>
+  );
+}

src/main.tsx

@@ -1,10 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);