Add Privacy Policy and Terms of Service pages with routing

src/App.js

@@ -1,5 +1,4 @@
 import AppRouter from "./AppRouter";
-import Footer from "./Footer";
 import UpdateBar from "./UpdateBar";
 import "./App.css";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -32,7 +31,6 @@ export default function App() {
 				<div className="fade-in">
 					<UpdateBar />
 					<AppRouter />
-					<Footer />
 				</div>
 			</LocalizationProvider>
 		</ThemeProvider>

src/AppRouter.js

@@ -1,9 +1,14 @@
 import { useState } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import About from "./About";
+import Footer from "./Footer";
 import Home from "./Home";
 import Navbar from "./Navbar";
 import NotFound from "./NotFound";
+import Privacy from "./Privacy";
+import Subscribed from "./Subscribed";
+import Terms from "./Terms";
+import Unsubscribed from "./Unsubscribed";
 import "./AppRouter.css";
 
 export default function AppRouter() {
@@ -40,6 +45,11 @@ export default function AppRouter() {
 						}
 					/>
 					<Route path="/about" element={<About />} />
+					<Route path="/alerts" element={<Alerts />} />
+					<Route path="/privacy" element={<Privacy />} />
+					<Route path="/subscribed" element={<Subscribed />} />
+					<Route path="/terms" element={<Terms />} />
+					<Route path="/unsubscribed" element={<Unsubscribed />} />
 					<Route
 						path="/:mode/*"
 						element={
@@ -55,6 +65,7 @@ export default function AppRouter() {
 					/>
 					<Route path="*" element={<NotFound msg={"Invalid URL"} />} />
 				</Routes>
+				<Footer />
 			</BrowserRouter>
 			{searching && !searchError && !showTurnstile && searchAnimationsBool && (
 				<img alt="" id="acela" src="/images/acela.svg" />

src/Footer.css

@@ -25,26 +25,17 @@ footer > div {
 	gap: 0.5rem;
 }
 
-footer > span:first-child {
-	cursor: pointer;
-	text-decoration: underline;
-}
-
 .vertical-bar {
 	background-color: rgba(128, 128, 128, 0.5);
 	height: 1.25rem;
 	width: 1px;
 }
 
-#disclaimer a {
-	color: white;
-}
-
 @media all and (max-width: 800px) {
 	footer {
 		flex-direction: column;
 		gap: 1rem;
-		height: 10.5rem;
+		height: 12rem;
 	}
 
 	.vertical-bar {

src/Footer.js

@@ -1,17 +1,10 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import "./Footer.css";
 import DoneIcon from "@mui/icons-material/Done";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import Button from "@mui/material/Button";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
 
 export default function Footer() {
-	const [disclaimerOpen, setDisclaimerOpen] = useState(false);
-
 	const [status, setStatus] = useState(false);
 
 	useEffect(() => {
@@ -23,34 +16,9 @@ export default function Footer() {
 
 	return (
 		<footer>
-			<span onClick={() => setDisclaimerOpen(true)}>
-				Non-Affiliation Disclaimer
-			</span>
-			<Dialog
-				id="disclaimer"
-				onClose={() => setDisclaimerOpen(false)}
-				open={disclaimerOpen}
-			>
-				<DialogTitle>Non-Affiliation Disclaimer</DialogTitle>
-				<DialogContent>
-					<DialogContentText>
-						We are not affiliated, associated, authorized, endorsed by, or in
-						any way officially connected with Amtrak, or any of its subsidiaries
-						or its affiliates. The official Amtrak website can be found at{" "}
-						<a
-							href="https://www.amtrak.com"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							https://www.amtrak.com
-						</a>
-						.
-					</DialogContentText>
-				</DialogContent>
-				<DialogActions>
-					<Button onClick={() => setDisclaimerOpen(false)}>OK</Button>
-				</DialogActions>
-			</Dialog>
+			<Link to="/terms">Terms and Conditions</Link>
+			<div className="vertical-bar" />
+			<Link to="/privacy">Privacy Policy</Link>
 			<div className="vertical-bar" />
 			<span>
 				Site by{" "}

src/Legal.css

@@ -0,0 +1,36 @@
+#legal-container {
+	gap: 1.5rem;
+	padding: 2rem 0;
+}
+
+#legal-container .section-container {
+	align-items: flex-start;
+	gap: 1rem;
+	padding: 1.5rem 2rem;
+}
+
+#legal-container .section-container h1 {
+	align-self: center;
+	font-size: 1.75rem;
+	text-align: center;
+}
+
+#legal-container .section-container h3 {
+	font-size: 1.1rem;
+	font-weight: 600;
+}
+
+#legal-container .section-container p,
+#legal-container .section-container ul {
+	font-size: 0.9rem;
+	line-height: 1.5;
+	text-align: left;
+}
+
+#legal-container .section-container ul {
+	padding-left: 1.25rem;
+}
+
+#legal-container .section-container ul li {
+	margin-bottom: 0.4rem;
+}