about page

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import NotFoundRedirect from "components/NotFoundRedirect";
 import { AlertQueue, AlertQueueProvider } from "hooks/alerts";
 import { AuthenticationProvider, OneTimePasswordWrapper } from "hooks/auth";
 import { ThemeProvider } from "hooks/theme";
+import About from "pages/About";
 import Home from "pages/Home";
 import NotFound from "pages/NotFound";
 import PartDetails from "pages/PartDetails";
@@ -28,6 +29,7 @@ const App = () => {
                 <Container className="content">
                   <Routes>
                     <Route path="/" element={<Home />} />
+                    <Route path="/about" element={<About />} />
                     <Route path="/robots/" element={<Robots />} />
                     <Route path="/robot/:id" element={<RobotDetails />} />
                     <Route path="/parts/" element={<Parts />} />

frontend/src/components/nav/Sidebar.tsx

@@ -1,5 +1,6 @@
 import AuthComponent from "components/auth/AuthComponent";
 import { Col, Offcanvas, Row } from "react-bootstrap";
+import { Link } from "react-router-dom";
 
 interface Props {
   show: boolean;
@@ -23,7 +24,7 @@ const Sidebar = ({ show, onHide }: Props) => {
           <AuthComponent />
           <Row style={{ marginTop: "auto" }} />
           <Row>
-            <a href="#">About</a>
+            <Link to="/about">About</Link>
           </Row>
           <Row>
             <a href="#">Privacy Policy</a>

frontend/src/pages/About.tsx

@@ -0,0 +1,22 @@
+import { Container, Row } from "react-bootstrap";
+
+const About = () => {
+  return (
+    <Container className="pt-5" style={{ textAlign: "center" }} fluid>
+      <Row className="mb-5">
+        <h1 className="display-4">about</h1>
+        <p className="lead">
+          This is a simple platform for aggregating robots, robot parts and
+          build guides.
+        </p>
+        <p>
+          It is maintained by <a href="https://kscale.dev/">K-Scale Labs</a>{" "}
+          with source code freely available on{" "}
+          <a href="https://github.com/kscalelabs/store">Github</a>.
+        </p>
+      </Row>
+    </Container>
+  );
+};
+
+export default About;

frontend/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import { Card, Col, Row } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
-const RobotDetails = () => {
+const Home = () => {
   const navigate = useNavigate();
 
   return (
@@ -32,4 +32,4 @@ const RobotDetails = () => {
   );
 };
 
-export default RobotDetails;
+export default Home;