Copied all potty chart code without changes.

src/components/buttons/Custom.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/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/KoFi.tsx

@@ -0,0 +1,24 @@
+import React 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 KoFi = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://ko-fi.com/lucidcreationsmedia"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button variant="kofi" leftIcon={<Icon icon="cib:ko-fi" />}>
+          {"Fund The App"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default KoFi;

src/components/buttons/data/links.ts

@@ -0,0 +1,30 @@
+export interface LinkObj {
+  href?: string;
+  name?: string;
+  type: "primary" | "secondary" | "updates" | "ko-fi";
+}
+
+type Links = LinkObj[];
+
+const links: Links = [
+  {
+    href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y",
+    name: "Roadmap and Progress",
+    type: "secondary"
+  },
+  {
+    href: "https://lucidcreations.media/lcm-potty-chart/",
+    name: "Official Announcement",
+    type: "secondary"
+  },
+  {
+    type: "ko-fi"
+  },
+  {
+    href: "https://t.me/LucidCreationsMedia",
+    name: "Dev Updates",
+    type: "secondary"
+  }
+];
+
+export default links;

src/components/buttons/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import CustomButton from "./Custom";
+import links, { LinkObj } from "./data/links";
+import KoFi from "./KoFi";
+
+const Buttons = (): JSX.Element => {
+  return (
+    <Box h="auto" w="100%">
+      <HStack
+        display={{ base: "none", lg: "flex" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
+          }
+        })}
+      </HStack>
+      <VStack
+        display={{ base: "flex", lg: "none" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
+          }
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Buttons;