From 1c491c927e13b43fa97b13991ee1476dccd57d19 Mon Sep 17 00:00:00 2001
From: qt-coder <chuchenkhang@gmail.com>
Date: Mon, 28 Jun 2021 21:58:43 +0800
Subject: [PATCH] Added CTA and features components

---
 components/CTA.js               | 24 ++++++++++++++++++++++++
 components/Features/Feature.js  | 18 ++++++++++++++++++
 components/Features/Features.js | 23 +++++++++++++++++++++++
 package.json                    |  3 ++-
 pages/index.js                  |  4 ++++
 yarn.lock                       |  5 +++++
 6 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 components/CTA.js
 create mode 100644 components/Features/Feature.js
 create mode 100644 components/Features/Features.js

diff --git a/components/CTA.js b/components/CTA.js
new file mode 100644
index 0000000..b25875a
--- /dev/null
+++ b/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>
+)
diff --git a/components/Features/Feature.js b/components/Features/Feature.js
new file mode 100644
index 0000000..f0464be
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/components/Features/Features.js b/components/Features/Features.js
new file mode 100644
index 0000000..998c48f
--- /dev/null
+++ b/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>
+)
diff --git a/package.json b/package.json
index cd83469..e0127ea 100644
--- a/package.json
+++ b/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",
diff --git a/pages/index.js b/pages/index.js
index a33f3b8..5f7d154 100644
--- a/pages/index.js
+++ b/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 && <>
diff --git a/yarn.lock b/yarn.lock
index f3fd006..984c912 100644
--- a/yarn.lock
+++ b/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"