Added CTA and features components

components/CTA.js

@@ -0,0 +1,24 @@
+import { Box, Button, Heading, Text } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const CTA = () => (
+    <Box as="section">
+        <Box
+            maxW="2xl"
+            mx="auto"
+            px={{ base: '6', lg: '8' }}
+            py={{ base: '16', sm: '20' }}
+            textAlign="center"
+        >
+            <Heading as="h2" size="3xl" fontWeight="extrabold" letterSpacing="tight">
+                Convinced?
+            </Heading>
+            <Text mt="4" fontSize="lg">
+                Start using Cath.exe in your servers now
+            </Text>
+            <Button mt="8" as="a" href="#" size="lg" colorScheme="teal" fontWeight="bold">
+                Start For Free
+            </Button>
+        </Box>
+    </Box>
+)

components/Features/Feature.js

@@ -0,0 +1,18 @@
+import { Box, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react'
+import * as React from 'react'
+
+
+export const Feature = (props) => {
+    const { title, children, icon } = props
+    return (
+        <Stack spacing={{ base: '3', md: '6' }} direction={{ base: 'column', md: 'row' }}>
+            <Box fontSize="6xl">{icon}</Box>
+            <Stack spacing="1">
+                <Text fontWeight="extrabold" fontSize="lg">
+                    {title}
+                </Text>
+                <Box color={mode('gray.600', 'gray.400')}>{children}</Box>
+            </Stack>
+        </Stack>
+    )
+}

components/Features/Features.js

@@ -0,0 +1,23 @@
+import { Box, SimpleGrid } from '@chakra-ui/react'
+import * as React from 'react'
+import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc'
+import { Feature } from './Feature'
+
+export const Features = () => (
+    <Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: '6', md: '8' }}>
+        <SimpleGrid columns={{ base: 1, md: 2 }} spacingX="10" spacingY={{ base: '8', md: '14' }}>
+            <Feature title="Secure by default" icon={<FcPrivacy />}>
+                Cath will never leak any of your information. Ever. All your data is stored securely on our side.
+            </Feature>
+            <Feature title="Always up to date" icon={<FcTimeline />}>
+                Cath is constantly being updated and worked on. Bugs and features, you name them, we do them.
+            </Feature>
+            <Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
+                Amazing server statistics that make tracking your server growth a breeze.
+            </Feature>
+            <Feature title="For everyone" icon={<FcMultipleDevices />}>
+                No matter who you are, Cath is sure to have a purpose for you.
+            </Feature>
+        </SimpleGrid>
+    </Box>
+)

package.json

@@ -20,7 +20,8 @@
     "next": "11.0.0",
     "next-auth": "^3.27.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.2.0"
   },
   "devDependencies": {
     "eslint": "7.29.0",

pages/index.js

@@ -2,6 +2,8 @@ import Card from '../components/Card'
 import { useSession } from 'next-auth/client'
 import { Text } from "@chakra-ui/react"
 import Hero from '../components/Hero/Hero'
+import {CTA} from '../components/CTA'
+import { Features } from '../components/Features/Features'
 
 export default function Home() {
 
@@ -12,6 +14,8 @@ export default function Home() {
   <>
     {!session && <>
       <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'/>
+      <Features/>
+      <CTA/>
     </>
   }
   {session && <>

yarn.lock

@@ -3879,6 +3879,11 @@ react-focus-lock@2.5.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@17.0.2, "react-is@^16.8.0 || ^17.0.0":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"