Added getting started modal to home screen

src/routes/Home.js

@@ -6,6 +6,9 @@ import Footer from "../components/Footer";
 
 import StartModal from "../modals/StartModal";
 import JoinModal from "../modals/JoinModal";
+import GettingStartedModal from "../modals/GettingStartedModal";
+
+import HelpIcon from "../icons/HelpIcon";
 
 import AuthContext from "../contexts/AuthContext";
 
@@ -19,6 +22,9 @@ import owlington from "../images/Owlington.png";
 function Home() {
   const [isStartModalOpen, setIsStartModalOpen] = useState(false);
   const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
+  const [isGettingStartedModalOpen, setIsGettingStartedModalOpen] = useState(
+    false
+  );
 
   // Reset password on visiting home
   const { setPassword } = useContext(AuthContext);
@@ -50,6 +56,18 @@ function Home() {
           Owlbear Rodeo
         </Text>
         <Image src={owlington} m={2} />
+        <Button
+          variant="secondary"
+          m={2}
+          onClick={() => setIsGettingStartedModalOpen(true)}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          Getting Started <HelpIcon />
+        </Button>
         <Button m={2} onClick={() => setIsStartModalOpen(true)}>
           Start Game
         </Button>
@@ -76,6 +94,7 @@ function Home() {
         >
           Donate <DonateIcon />
         </Button>
+
         <Flex mb={4} mt={0} sx={{ justifyContent: "center" }}>
           <Link href="https://www.reddit.com/r/OwlbearRodeo/">
             <IconButton title="Reddit" aria-label="Reddit">
@@ -101,6 +120,10 @@ function Home() {
           isOpen={isStartModalOpen}
           onRequestClose={() => setIsStartModalOpen(false)}
         />
+        <GettingStartedModal
+          isOpen={isGettingStartedModalOpen}
+          onRequestClose={() => setIsGettingStartedModalOpen(false)}
+        />
       </Flex>
       <Footer />
     </Flex>