Added hero component and landing page

components/Hero/Hero.js

@@ -0,0 +1,105 @@
+import React from "react"
+import Link from 'next/link'
+import PropTypes from "prop-types"
+import {
+    Box,
+    Button,
+    Flex,
+    Image,
+    Heading,
+    Stack,
+    Text,
+} from "@chakra-ui/react"
+import AuthButton from '../AuthButton'
+import { signIn } from "next-auth/client"
+
+export default function Hero({
+    title,
+    subtitle,
+    image,
+    ctaLink,
+    ctaText,
+    ...rest
+}) {
+    return (
+        <Flex
+            align="center"
+            justify={{ base: "center", md: "space-around", xl: "space-between" }}
+            direction={{ base: "column-reverse", md: "row" }}
+            wrap="no-wrap"
+            minH="70vh"
+            px={8}
+            mb={16}
+            {...rest}
+        >
+            <Stack
+                spacing={4}
+                w={{ base: "80%", md: "40%" }}
+                align={["center", "center", "flex-start", "flex-start"]}
+            >
+                <Heading
+                    as="h1"
+                    size="xl"
+                    fontWeight="bold"
+                    color="primary.800"
+                    textAlign={["center", "center", "left", "left"]}
+                >
+                    {title}
+                </Heading>
+                <Heading
+                    as="h2"
+                    size="md"
+                    color="primary.800"
+                    opacity="0.8"
+                    fontWeight="normal"
+                    lineHeight={1.5}
+                    textAlign={["center", "center", "left", "left"]}
+                >
+                    {subtitle}
+                </Heading>
+                <Link href={ctaLink}>
+                    <Button
+                        backgroundColor='teal'
+                        borderRadius="8px"
+                        py="4"
+                        px="4"
+                        lineHeight="1"
+                        size="md"
+                        onClick={()=>{signIn()}}
+                    >
+                        {ctaText}
+                    </Button>
+                </Link>
+                <Text
+                    fontSize="xs"
+                    mt={2}
+                    textAlign="center"
+                    color="primary.800"
+                    opacity="0.6"
+                >
+                    No credit card required.
+                </Text>
+            </Stack>
+            <Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
+                <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
+            </Box>
+        </Flex>
+    )
+}
+
+Hero.propTypes = {
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    image: PropTypes.string,
+    ctaText: PropTypes.string,
+    ctaLink: PropTypes.string,
+}
+
+Hero.defaultProps = {
+    title: "Hero",
+    subtitle:
+        "This is the subheader section where you describe the basic benefits of your product",
+    image: "https://source.unsplash.com/collection/404339/800x600",
+    ctaText: "Create your account now",
+    ctaLink: "",
+}

pages/index.js

@@ -1,6 +1,7 @@
 import Card from '../components/Card'
 import { useSession } from 'next-auth/client'
 import { Text } from "@chakra-ui/react"
+import Hero from '../components/Hero/Hero'
 
 export default function Home() {
 
@@ -10,7 +11,7 @@ export default function Home() {
   
   <>
     {!session && <>
-      <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
+      <Hero title='Cath.exe' subtitle='Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM.' ctaText='Sign In' image='/logo.png'/>
     </>
   }
   {session && <>