Cleaning up CSS, minor refactor into pages Home & Settings, better docs

frontend/src/Pages/Home.tsx

@@ -0,0 +1,36 @@
+import reactLogo from "../assets/react.svg";
+import viteLogo from "/vite.svg";
+import "../index.css";
+import { CountButton } from "../Components/CountButton";
+import { Link } from "react-router-dom";
+
+/**
+ * The home page of the application
+ * @returns {JSX.Element} The home page
+ */
+export default function HomePage(): JSX.Element {
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo h-32 p-5" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img
+            src={reactLogo}
+            className="logo react h-32 p-5"
+            alt="React logo"
+          />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card flex flex-col items-center space-y-4">
+        <CountButton />
+        <Link to="/settings">To Settings</Link>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  );
+}

frontend/src/Pages/Settings.tsx

@@ -0,0 +1,17 @@
+import "../index.css";
+import { Link } from "react-router-dom";
+
+/**
+ * The settings page of the application
+ * @returns {JSX.Element} The settings page
+ */
+export default function SettingsPage(): JSX.Element {
+  return (
+    <>
+      <h1>Very Fancy Settings Page</h1>
+      <div className="card">
+        <Link to="/">To Home</Link>
+      </div>
+    </>
+  );
+}