Added about

Author: coder13

src/App.tsx

@@ -20,6 +20,7 @@ import AuthProvider from './providers/AuthProvider';
 import usePageTracking from './hooks/usePageTracking';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, useEffect, useState } from 'react';
+import About from './pages/About';
 
 export const GlobalStateContext = createContext<{
   online: boolean;
@@ -50,6 +51,7 @@ const Navigation = () => {
           <Route path="rooms/:roomId" element={<CompetitionRoom />} />
           <Route path="information" element={<CompetitionInformation />} />
         </Route>
+        <Route path="about" element={<About />} />
       </Route>
     </Routes>
   );

src/pages/About/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+
+const Link = ({ to, children }) => (
+  <a className="text-blue-700 underline" href={to} target="_blank" rel="noreferrer">
+    {children}
+  </a>
+);
+
+export default function About() {
+  useEffect(() => {
+    document.title = 'About - Competition Groups';
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex flex-col lg:w-1/2 md:w-2/3 pt-2 w-full text-sm md:text-base p-2 md:px-0  text-gray-800 space-y-4">
+        <p>Welcome to CompetitionGroups.com!</p>
+
+        <p className="leading-relaxed">
+          This purpose of this website is to show WCA competition assignments. This site can show
+          competing and staff assignments for competitions with 1 room or more for 1 day or multiday
+          competitions updating with all of the competition's next round assignments. This site
+          simply presents the assignments *as-is* from how they are, as stored on the WCA website.
+        </p>
+
+        <p className="leading-relaxed">
+          Start times and end times are taken straight from the WCIF data as generated, rounded to
+          the nearest 5 minutes, and converted to the respective venue's timezones.
+        </p>
+
+        <p className="leading-relaxed">
+          To get your competition's assignments to show here, you must generate them with a tool
+          like <Link to="https://groupifier.jonatanklosko.com/">Groupifier</Link>,{' '}
+          <Link to="https://delegate-dashboard.netlify.app/">DelegateDashboard</Link>, or{' '}
+          <Link to="https://goosly.github.io/AGE/">AGE</Link>.
+        </p>
+
+        <p className="leading-relaxed">
+          If you are a developer and you want to learn more about the data that is shown here, check
+          out the{' '}
+          <Link to="https://github.com/thewca/wcif/blob/master/specification.md">
+            WCIF specification
+          </Link>
+          .
+        </p>
+        <br />
+        <p className="leading-relaxed">
+          People can be assigned to groups, rounds, or any arbitrary activity. If you want to get
+          creative with the website, feel free to reach out to{' '}
+          <Link to="https://github.com/coder13">me</Link>!
+        </p>
+      </div>
+    </div>
+  );
+}

src/pages/Home/index.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import MyCompetitions from '../../components/MyCompetitions';
 import UpcomingCompetitions from '../../components/UpcomingCompetitions';
 import { useAuth } from '../../providers/AuthProvider';
+import { Link } from 'react-router-dom';
 
 export default function Home() {
   const { user } = useAuth();
@@ -20,6 +21,9 @@ export default function Home() {
             competitors. The information provided is based on scheduled data. Pay close attention to
             the competition for the most up-to-date information. Start and end times can fluctuate.
           </p>
+          <Link to="/about" className="text-blue-700 underline">
+            How does this site work?
+          </Link>
         </div>
         {user && (
           <>