small changes to the hero

frontend/src/components/Hero.tsx

@@ -1,12 +1,23 @@
-import { Flex, Heading } from "@chakra-ui/react";
+import { Flex, Heading, keyframes } from "@chakra-ui/react";
+import { css } from "@emotion/react";
+
+const gradient = keyframes`
+0% { background-position: 0% 0%; }
+100% { background-position: 100% 0%; }
+}
+`;
 
 export const Hero = ({ title }: { title: string }) => (
   <Flex
     justifyContent="center"
     alignItems="center"
     height="100vh"
-    bgGradient="linear(to-l, #7928CA, #FF0080)"
+    backgroundImage="linear-gradient(90deg,#cf5c5c,#c19b4a,#def2a0,#c6ee4a,#42eca6,#64b3d9,#208ea2,#498ada,#5b73df,#897ed3,#cf5c5c,#c19b4a)"
+    backgroundSize="1100% 100%"
     bgClip="text"
+    css={css`
+      animation: ${gradient} 14s linear infinite;
+    `}
   >
     <Heading fontSize="6vw">{title}</Heading>
   </Flex>

frontend/src/pages/index.tsx

@@ -1,6 +1,7 @@
-import { Button, Text } from "@chakra-ui/react";
+import { Button, Link as ChakraLink, Text } from "@chakra-ui/react";
 import { GetServerSideProps, NextPage } from "next";
 import { getSession, signIn } from "next-auth/react";
+import Link from "next/link";
 import React from "react";
 import { Container } from "../components/Container";
 import { Footer } from "../components/Footer";
@@ -16,12 +17,17 @@ const Index: NextPage = () => {
           maxWidth="200"
           alignSelf="center"
           onClick={() => signIn("discord")}
+          disabled
         >
           Login With Discord
         </Button>
       </Main>
       <Footer>
-        <Text>&copy;2022 Velvox</Text>
+        <ChakraLink>
+          <Link href="https://velvox.dev">
+            <Text>&copy;2022 Velvox</Text>
+          </Link>
+        </ChakraLink>
       </Footer>
     </Container>
   );