Add Sponsors and FAQ section to front page

alexwaeseperlman · Feb 27, 2024 · 477b81f · 477b81f
1 parent 1c25094
commit 477b81f
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 23 deletions.
diff --git a/website/app/src/Home/FAQ/index.tsx b/website/app/src/Home/FAQ/index.tsx
@@ -0,0 +1,85 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionGroup,
+  AccordionSummary,
+  Card,
+  CardContent,
+  Link,
+  Typography,
+} from "@mui/joy";
+import React from "react";
+
+export default function FAQ() {
+  return (
+    <Card>
+      <CardContent>
+        <Typography level="h3" color="inherit">
+          FAQ
+        </Typography>
+      </CardContent>
+      <CardContent>
+        <AccordionGroup>
+          <Accordion>
+            <AccordionSummary>What is UPAC?</AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                UPAC stands for University Poker Algorithm Competition. It is a
+                competition where students from different universities compete
+                to create the best poker bot.
+              </Typography>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary>Can I compete on a team?</AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                Yes! You can create a team and add your friends to it. You can
+                then submit a bot together.
+              </Typography>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary>Who is elligible to compete?</AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                Right now anyone is elligible, university student or not! The
+                website is open so that anyone can create an account and submit
+                a bot. Next year we plan to host a university only competition
+                with prizes.
+              </Typography>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary>Who is behind UPAC?</AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                UPAC was created by a group of students from McGill University.
+                We started talking about strategies in our poker club and
+                decided it would be fun to create a competition around it. After
+                we started developing the website we realized that MIT hosts a
+                similar event, but it's not open to the public. We decided to
+                make our event open to everyone and we are excited to see the
+                results.
+              </Typography>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary>
+              Do I have to use a particular language/technology in particular?
+            </AccordionSummary>
+            <AccordionDetails>
+              <Typography>
+                Nope! You can use any language or technology you want. You
+                submit a json file with a build command and a run command, and
+                we will take care of the rest. Communication with the engine is
+                done through stdin and stdout. For more information, check out
+                the <Link href="https://docs.upac.dev/">documentation</Link>.
+              </Typography>
+            </AccordionDetails>
+          </Accordion>
+        </AccordionGroup>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/website/app/src/Home/Sponsors/Sponsors.tsx b/website/app/src/Home/Sponsors/Sponsors.tsx
@@ -0,0 +1,11 @@
+import { Box } from "@mui/joy";
+import React from "react";
+import QuantConnectLogo from "./logos/QuantConnect";
+
+export default function Logos() {
+  return (
+    <Box>
+      <QuantConnectLogo />
+    </Box>
+  );
+}
diff --git a/website/app/src/Home/Sponsors/logos/QuantConnect.tsx b/website/app/src/Home/Sponsors/logos/QuantConnect.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function QuantConnectLogo() {
+    return <img src="https://cdn.quantconnect.com/i/tu/qc-header-logo.svg" alt="QuantConnect" />;
+}
diff --git a/website/app/src/Home/index.tsx b/website/app/src/Home/index.tsx
@@ -1,13 +1,15 @@
 import React from "react";
 import Box from "@mui/joy/Box";
 import Logo from "../components/Logo";
-import { Button, Link, Sheet, Typography } from "@mui/joy";
+import { Button, Divider, Link, Sheet, Typography, useTheme } from "@mui/joy";
 import { DiscordLogo } from "./Discord";
 import Container from "@mui/joy/Container";
 import graphic_small from "./graphic_small.png";
 import graphic from "./graphic.png";
 import BackgroundImage from "../components/BackgroundImage";
 import HeaderFooter from "../components/HeaderFooter";
+import Logos from "./Sponsors/Sponsors";
+import FAQ from "./FAQ";
 
 export function LogoText({ text }: { text: string }) {
   let vals1 = "0px 0px";
@@ -50,39 +52,76 @@ export function LogoText({ text }: { text: string }) {
   );
 }
 
+function InfoSection(props: { title: string; children: React.ReactNode }) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      <Typography level="h3" color="inherit">
+        {props.title}
+      </Typography>
+      {props.children}
+    </Box>
+  );
+}
+
+function InfoSections() {
+  return (
+    <Box
+      sx={(theme) => ({
+        display: "flex",
+        flexDirection: "row",
+        gap: 2,
+        justifyContent: "space-between",
+        [theme.breakpoints.down("sm")]: {
+          flexDirection: "column",
+          gap: 4,
+        },
+      })}
+    >
+      <InfoSection title="Design a bot">
+        <Typography level="body-md" color="inherit">
+          Develop a poker algorithm in a programming language of your choice
+        </Typography>
+        <Link href="https://docs.upac.dev/">View documentation</Link>
+      </InfoSection>
+      <InfoSection title="Compete">
+        <Typography level="body-md" color="inherit">
+          Your algorithms will automatically be tested against each other on our
+          platform
+        </Typography>
+        <Link href="/recent-games">View recent games</Link>
+      </InfoSection>
+      <InfoSection title="Get ranked">
+        <Typography level="body-md" color="inherit">
+          We will calculate your Elo, and rank you against other competitors
+        </Typography>
+        <Link href="/leaderboard">View leaderboard</Link>
+      </InfoSection>
+    </Box>
+  );
+}
+
 export default function HomePage() {
   return (
     <HeaderFooter>
-      <Container
+      <Box
         sx={{
-          margin: "auto",
-          gridArea: "content",
-          height: "100%",
+          mt: 16,
+          gridArea: "content / content / content / extra",
           flexDirection: "column",
           justifyContent: "center",
           display: "flex",
+          gap: 10,
         }}
       >
         <Box
           sx={{
-            flexDirection: "column",
-            justifyContent: "center",
             display: "flex",
-            maxWidth: "700px",
-            flexGrow: 1,
+            flexDirection: "column",
+            alignItems: "left",
             gap: 2,
           }}
         >
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "left",
-              gap: 4,
-            }}
-          >
-            <LogoText text="UPAC" />
-          </Box>
+          <LogoText text="UPAC" />
           <Box
             sx={{
               display: "flex",
@@ -101,13 +140,29 @@ export default function HomePage() {
               Join our discord
             </Button>
           </Box>
-          <Typography textColor="inherit" level="body-md">
-            The competition will start in 2024. For sponsorship inquiries,
-            please contact{" "}
+        </Box>
+        <Box>
+          <Typography level="h3" color="inherit">
+            Sponsored by
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 4,
+            }}
+          >
+            <Logos />
+          </Box>
+          <Typography textColor="inherit" level="body-md" mt={1}>
+            For sponsorship inquiries, please contact{" "}
             <Link href="mailto:[email protected]">[email protected]</Link>
           </Typography>
         </Box>
-      </Container>
+        <InfoSections />
+        <FAQ />
+      </Box>
     </HeaderFooter>
   );
 }