Added links.

src/components/buttons/Custom.tsx

@@ -0,0 +1,26 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+interface CustomButtonProps {
+  text: string;
+  link: string;
+  type: "primary" | "secondary" | "footer";
+}
+
+const MotionBox = motion<BoxProps>(Box);
+
+const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link href={link} target="_blank" rel="noopener">
+        <Button variant={type}>
+          {text}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default CustomButton;

src/components/buttons/Patreon.tsx

@@ -0,0 +1,27 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Patreon = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button
+          variant="patreon"
+          leftIcon={<Icon icon="ri:patreon-fill" />}
+        >
+          {"Fund The App"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Patreon;

src/components/buttons/Twitter.tsx

@@ -0,0 +1,27 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Twitter = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button
+          variant="twitter"
+          leftIcon={<Icon icon="akar-icons:twitter-fill" />}
+        >
+          {"Dev Updates"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Twitter;

src/components/calender/index.tsx

@@ -106,7 +106,13 @@ const Calender = ({
             );
           })}
         </HStack>
-        <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
+        <SimpleGrid
+          px={{ base: 1, sm: 2, md: 6 }}
+          w="100%"
+          h="100%"
+          columns={7}
+          alignItems="center"
+        >
           {Object.keys(month).map((week) => {
             const thisWeek = month[week];
 
@@ -142,7 +148,7 @@ const Calender = ({
                     id.length
                       ? id
                       : format(toDateObj, "yyyyddLL") +
-                      `/${sticker === null ? 0 : sticker}`
+                        `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );

src/components/tutorial/CalenderExample.tsx

@@ -108,7 +108,13 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
           );
         })}
       </HStack>
-      <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
+      <SimpleGrid
+        px={{ base: 1, sm: 2, md: 6 }}
+        w="100%"
+        h="100%"
+        columns={7}
+        alignItems="center"
+      >
         {currWeek.map((day: MonthDay) => {
           const { date, isOverflow, overflowDirection } = day;
 
@@ -142,7 +148,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
                 id.length
                   ? id
                   : format(toDateObj, "yyyyddLL") +
-                  `/${sticker === null ? 0 : sticker}`
+                    `/${sticker === null ? 0 : sticker}`
               }
             />
           );

src/components/tutorial/index.tsx

@@ -5,10 +5,14 @@ import {
   Divider,
   Heading,
   HStack,
+  Link,
   Text,
   VStack
 } from "@chakra-ui/react";
 import React, { useState } from "react";
+import CustomButton from "../buttons/Custom";
+import Patreon from "../buttons/Patreon";
+import Twitter from "../buttons/Twitter";
 import CalenderExample from "./CalenderExample";
 
 interface TutorialProps {
@@ -138,7 +142,8 @@ const Tutorial = ({
           <VStack
             h="auto"
             w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
             alignContent="center"
             spacing={1}
           >
@@ -170,7 +175,8 @@ const Tutorial = ({
           <VStack
             h="auto"
             w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
             alignContent="center"
             spacing={4}
           >
@@ -193,7 +199,8 @@ const Tutorial = ({
           <VStack
             h="auto"
             w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
             alignContent="center"
             spacing={4}
           >
@@ -215,6 +222,43 @@ const Tutorial = ({
           </VStack>
           <Divider orientation="horizontal" />
         </VStack>
+        {/* Links */}
+        <VStack
+          h="auto"
+          w="100%"
+          justifyContent="center"
+          alignContent="center"
+          spacing={4}
+        >
+          <Heading as="h3" size="lg">
+            {"More Info"}
+          </Heading>
+          <HStack
+            h="auto"
+            w="100%"
+            justifyContent="center"
+            alignContent="center"
+            spacing={4}
+          >
+            <CustomButton
+              link={
+                "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y"
+              }
+              text="Roadmap and Progress"
+              type="secondary"
+            />
+            <CustomButton
+              link={
+                "https://lucidcreations.media/introducing-code-name-potty-chart/"
+              }
+              text="Original Announcement"
+              type="secondary"
+            />
+            <Patreon />
+            <Twitter />
+          </HStack>
+          <Divider orientation="horizontal" />
+        </VStack>
         {/* Complete tutorial */}
         <HStack
           h="auto"