Added testimonials, reworked hero, added sidebar (not implemented)
Added testimonial component with dummy data, remade hero component, added sidebar component that is not currently active.
This commit is contained in:
qt-coder
parent
f38696e60e
commit
371c567604
5 changed files with 446 additions and 94 deletions
|
|
@ -1,104 +1,103 @@
|
|||
import React from "react"
|
||||
import Link from 'next/link'
|
||||
import PropTypes from "prop-types"
|
||||
import React from "react";
|
||||
import {
|
||||
chakra,
|
||||
Box,
|
||||
useColorModeValue,
|
||||
Button,
|
||||
Flex,
|
||||
Image,
|
||||
Heading,
|
||||
Stack,
|
||||
Image,
|
||||
Text,
|
||||
} from "@chakra-ui/react"
|
||||
import AuthButton from '../AuthButton'
|
||||
import { signIn } from "next-auth/client"
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import { signIn } from 'next-auth/client'
|
||||
|
||||
export default function Hero({
|
||||
title,
|
||||
subtitle,
|
||||
image,
|
||||
ctaLink,
|
||||
ctaText,
|
||||
...rest
|
||||
}) {
|
||||
const Hero = () => {
|
||||
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"]}
|
||||
<Box px={8} py={24} mx="auto">
|
||||
<Box
|
||||
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
|
||||
mx="auto"
|
||||
textAlign={{ base: "left", md: "center" }}
|
||||
>
|
||||
<Heading
|
||||
as="h1"
|
||||
size="xl"
|
||||
<chakra.h1
|
||||
mb={6}
|
||||
fontSize={{ base: "4xl", md: "6xl" }}
|
||||
fontWeight="bold"
|
||||
color="primary.800"
|
||||
textAlign={["center", "center", "left", "left"]}
|
||||
lineHeight="none"
|
||||
letterSpacing={{ base: "normal", md: "tight" }}
|
||||
color={useColorModeValue("gray.900", 'gray.100')}
|
||||
>
|
||||
{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"
|
||||
Your favorite{" "}
|
||||
<Text
|
||||
display={{ base: "block", lg: "inline" }}
|
||||
w="full"
|
||||
bgClip="text"
|
||||
bgGradient="linear(to-r, green.400,purple.500)"
|
||||
fontWeight="extrabold"
|
||||
>
|
||||
{ctaText}
|
||||
</Button>
|
||||
</Link>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
mt={2}
|
||||
textAlign="center"
|
||||
color="primary.800"
|
||||
opacity="0.6"
|
||||
CODM
|
||||
</Text>{" "}
|
||||
bot.
|
||||
</chakra.h1>
|
||||
<chakra.p
|
||||
px={{ base: 0, lg: 24 }}
|
||||
mb={6}
|
||||
fontSize={{ base: "lg", md: "xl" }}
|
||||
color={useColorModeValue("gray.600", 'gray.300')}
|
||||
>
|
||||
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" />
|
||||
Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM.
|
||||
</chakra.p>
|
||||
<Stack
|
||||
direction={{ base: "column", sm: "row" }}
|
||||
mb={{ base: 4, md: 8 }}
|
||||
spacing={2}
|
||||
justifyContent={{ sm: "left", md: "center" }}
|
||||
>
|
||||
<Button
|
||||
as="a"
|
||||
variant="solid"
|
||||
colorScheme="blue"
|
||||
display="inline-flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
w={{ base: "full", sm: "auto" }}
|
||||
mb={{ base: 2, sm: 0 }}
|
||||
href={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"}
|
||||
size="lg"
|
||||
>
|
||||
Invite Cath
|
||||
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</Icon>
|
||||
</Button>
|
||||
<Button
|
||||
as="a"
|
||||
colorScheme="gray"
|
||||
display="inline-flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
w={{ base: "full", sm: "auto" }}
|
||||
mb={{ base: 2, sm: 0 }}
|
||||
onClick={() => { signIn() }}
|
||||
size="lg"
|
||||
>
|
||||
Sign Up
|
||||
<Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</Icon>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
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: "",
|
||||
}
|
||||
export default Hero;
|
||||
|
|
|
|||
177
components/Sidebar/Sidebar.js
Normal file
177
components/Sidebar/Sidebar.js
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Collapse,
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
Flex,
|
||||
Icon,
|
||||
IconButton,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { FaBell } from "react-icons/fa";
|
||||
import { AiFillGift } from "react-icons/ai";
|
||||
import { FiMenu, FiSearch } from "react-icons/fi";
|
||||
import { HiCode } from "react-icons/hi";
|
||||
import { MdKeyboardArrowRight, MdHome } from "react-icons/md";
|
||||
import React from "react";
|
||||
|
||||
export default function Sidebar({children}) {
|
||||
const sidebar = useDisclosure();
|
||||
const integrations = useDisclosure();
|
||||
|
||||
const NavItem = (props) => {
|
||||
const { icon, children, ...rest } = props;
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
px="4"
|
||||
pl="4"
|
||||
py="3"
|
||||
cursor="pointer"
|
||||
color={useColorModeValue("inherit", "gray.400")}
|
||||
_hover={{
|
||||
bg: useColorModeValue("gray.100", "gray.900"),
|
||||
color: useColorModeValue("gray.900", "gray.200"),
|
||||
}}
|
||||
role="group"
|
||||
fontWeight="semibold"
|
||||
transition=".15s ease"
|
||||
{...rest}
|
||||
>
|
||||
{icon && (
|
||||
<Icon
|
||||
mr="2"
|
||||
boxSize="4"
|
||||
_groupHover={{
|
||||
color: useColorModeValue("gray.600", "gray.300"),
|
||||
}}
|
||||
as={icon}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const SidebarContent = (props) => (
|
||||
<Box
|
||||
as="nav"
|
||||
pos="fixed"
|
||||
top="0"
|
||||
left="0"
|
||||
zIndex="sticky"
|
||||
h="full"
|
||||
pb="10"
|
||||
overflowX="hidden"
|
||||
overflowY="auto"
|
||||
bg={useColorModeValue("white", "gray.800")}
|
||||
borderColor={useColorModeValue("inherit", "gray.700")}
|
||||
borderRightWidth="1px"
|
||||
w="60"
|
||||
{...props}
|
||||
>
|
||||
<Flex px="4" py="5" align="center">
|
||||
<Text
|
||||
fontSize="2xl"
|
||||
ml="2"
|
||||
color={useColorModeValue("brand.500", "white")}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
Cath.exe
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
as="nav"
|
||||
fontSize="sm"
|
||||
color="gray.600"
|
||||
aria-label="Main Navigation"
|
||||
>
|
||||
<NavItem icon={MdHome}>Home</NavItem>
|
||||
<NavItem icon={HiCode} onClick={integrations.onToggle}>
|
||||
Control Panel
|
||||
<Icon
|
||||
as={MdKeyboardArrowRight}
|
||||
ml="auto"
|
||||
transform={integrations.isOpen && "rotate(90deg)"}
|
||||
/>
|
||||
</NavItem>
|
||||
<Collapse in={integrations.isOpen}>
|
||||
<NavItem pl="12" py="2">
|
||||
Main
|
||||
</NavItem>
|
||||
<NavItem pl="12" py="2">
|
||||
Commands
|
||||
</NavItem>
|
||||
</Collapse>
|
||||
<NavItem icon={AiFillGift}>Coming Soon</NavItem>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box
|
||||
as="section"
|
||||
bg={useColorModeValue("gray.50", "gray.700")}
|
||||
minH="100vh"
|
||||
>
|
||||
<SidebarContent display={{ base: "none", md: "unset" }} />
|
||||
<Drawer
|
||||
isOpen={sidebar.isOpen}
|
||||
onClose={sidebar.onClose}
|
||||
placement="left"
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<SidebarContent w="full" borderRight="none" />
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
|
||||
<Flex
|
||||
as="header"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
w="full"
|
||||
px="4"
|
||||
bg={useColorModeValue("white", "gray.800")}
|
||||
borderBottomWidth="1px"
|
||||
borderColor={useColorModeValue("inherit", "gray.700")}
|
||||
h="14"
|
||||
>
|
||||
<IconButton
|
||||
aria-label="Menu"
|
||||
display={{ base: "inline-flex", md: "none" }}
|
||||
onClick={sidebar.onOpen}
|
||||
icon={<FiMenu />}
|
||||
size="sm"
|
||||
/>
|
||||
<InputGroup w="96" display={{ base: "none", md: "flex" }}>
|
||||
<InputLeftElement color="gray.500" children={<FiSearch />} />
|
||||
<Input placeholder="Search for articles..." />
|
||||
</InputGroup>
|
||||
|
||||
<Flex align="center">
|
||||
<Icon color="gray.500" as={FaBell} cursor="pointer" />
|
||||
<Avatar
|
||||
ml="4"
|
||||
size="sm"
|
||||
name="anubra266"
|
||||
src="https://avatars.githubusercontent.com/u/30869823?v=4"
|
||||
cursor="pointer"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Box as="main" p="4" background={'#1a202c'}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
169
components/Testimonials/Testimonials.js
Normal file
169
components/Testimonials/Testimonials.js
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
chakra,
|
||||
Container,
|
||||
Flex,
|
||||
Icon,
|
||||
SimpleGrid,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: 'John Doe',
|
||||
role: 'Chief Marketing Officer',
|
||||
content:
|
||||
'Remarkable',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
role: 'Chief Marketing Officer',
|
||||
content:
|
||||
'Remarkable',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
role: 'Chief Marketing Officer',
|
||||
content:
|
||||
'Remarkable',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
|
||||
},
|
||||
{
|
||||
name: 'John Doe',
|
||||
role: 'Chief Marketing Officer',
|
||||
content:
|
||||
'Remarkable',
|
||||
avatar:
|
||||
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
|
||||
},
|
||||
];
|
||||
|
||||
const backgrounds = [
|
||||
`url("data:image/svg+xml, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'560\' height=\'185\' viewBox=\'0 0 560 185\' fill=\'none\'%3E%3Cellipse cx=\'102.633\' cy=\'61.0737\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23ED64A6\' /%3E%3Cellipse cx=\'399.573\' cy=\'123.926\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23F56565\' /%3E%3Cellipse cx=\'366.192\' cy=\'73.2292\' rx=\'193.808\' ry=\'73.2292\' fill=\'%2338B2AC\' /%3E%3Cellipse cx=\'222.705\' cy=\'110.585\' rx=\'193.808\' ry=\'73.2292\' fill=\'%23ED8936\' /%3E%3C/svg%3E")`,
|
||||
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ED8936'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%2348BB78'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%230BC5EA'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%23ED64A6'/%3E%3C/svg%3E")`,
|
||||
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='102.633' cy='61.0737' rx='102.633' ry='61.0737' fill='%23ED8936'/%3E%3Cellipse cx='399.573' cy='123.926' rx='102.633' ry='61.0737' fill='%2348BB78'/%3E%3Cellipse cx='366.192' cy='73.2292' rx='193.808' ry='73.2292' fill='%230BC5EA'/%3E%3Cellipse cx='222.705' cy='110.585' rx='193.808' ry='73.2292' fill='%23ED64A6'/%3E%3C/svg%3E")`,
|
||||
`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ECC94B'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%239F7AEA'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%234299E1'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%2348BB78'/%3E%3C/svg%3E")`,
|
||||
];
|
||||
|
||||
function TestmonialCard(props) {
|
||||
const { name, role, content, avatar, index } = props;
|
||||
return (
|
||||
<Flex
|
||||
_hover={{ backgroundColor: 'gray.700' }}
|
||||
boxShadow={'lg'}
|
||||
maxW={'640px'}
|
||||
direction={{ base: 'column-reverse', md: 'row' }}
|
||||
width={'full'}
|
||||
rounded={'xl'}
|
||||
p={10}
|
||||
justifyContent={'space-between'}
|
||||
position={'relative'}
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
_after={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
height: '21px',
|
||||
width: '29px',
|
||||
left: '35px',
|
||||
top: '-10px',
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
zIndex: '-1',
|
||||
height: 'full',
|
||||
maxW: '640px',
|
||||
width: 'full',
|
||||
filter: 'blur(40px)',
|
||||
transform: 'scale(0.98)',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
top: 0,
|
||||
left: 0,
|
||||
backgroundImage: backgrounds[index % 4],
|
||||
}}>
|
||||
<Flex
|
||||
direction={'column'}
|
||||
textAlign={'left'}
|
||||
justifyContent={'space-between'}>
|
||||
<chakra.p
|
||||
fontWeight={'medium'}
|
||||
fontSize={'15px'}
|
||||
pb={4}>
|
||||
{content}
|
||||
</chakra.p>
|
||||
<chakra.p fontWeight={'bold'} fontSize={14}>
|
||||
{name}
|
||||
<chakra.span
|
||||
fontWeight={'medium'}
|
||||
color={'gray.500'}>
|
||||
{' '}
|
||||
- {role}
|
||||
</chakra.span>
|
||||
</chakra.p>
|
||||
</Flex>
|
||||
<Avatar
|
||||
src={avatar}
|
||||
height={'80px'}
|
||||
width={'80px'}
|
||||
alignSelf={'center'}
|
||||
m={{ base: '0 0 35px 0', md: '0 0 0 50px' }}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GridBlurredBackdrop() {
|
||||
return (
|
||||
<Flex
|
||||
textAlign={'center'}
|
||||
pt={10}
|
||||
justifyContent={'center'}
|
||||
direction={'column'}
|
||||
width={'full'}>
|
||||
<Box width={{ base: 'full', sm: 'lg', lg: 'xl' }} margin={'auto'}>
|
||||
<chakra.h3
|
||||
fontWeight={'bold'}
|
||||
fontSize={20}
|
||||
textTransform={'uppercase'}
|
||||
color={'purple.400'}>
|
||||
Users love Cath
|
||||
</chakra.h3>
|
||||
<chakra.h1
|
||||
py={5}
|
||||
fontSize={48}
|
||||
fontWeight={'bold'}
|
||||
color={useColorModeValue('gray.700', 'gray.50')}>
|
||||
You're in good company
|
||||
</chakra.h1>
|
||||
<chakra.h2
|
||||
margin={'auto'}
|
||||
width={'70%'}
|
||||
fontWeight={'medium'}
|
||||
color={useColorModeValue('gray.500', 'gray.400')}>
|
||||
See why over{' '}
|
||||
<chakra.strong color={useColorModeValue('gray.700', 'gray.50')}>
|
||||
110000+
|
||||
</chakra.strong>{' '}
|
||||
users use Cath in their servers
|
||||
</chakra.h2>
|
||||
</Box>
|
||||
<SimpleGrid
|
||||
columns={{ base: 1, xl: 2 }}
|
||||
spacing={'20'}
|
||||
mt={16}
|
||||
mx={'auto'}>
|
||||
{testimonials.map((cardInfo, index) => (
|
||||
<TestmonialCard {...cardInfo} index={index} />
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
import '../styles/globals.css'
|
||||
import Head from 'next/head'
|
||||
import { Provider } from 'next-auth/client'
|
||||
import { Provider, useSession } from 'next-auth/client'
|
||||
import { ChakraProvider } from "@chakra-ui/react"
|
||||
import Header from '../components/Nav/Header'
|
||||
import theme from '../chakra_config/theme'
|
||||
import { ColorModeScript } from "@chakra-ui/react"
|
||||
import Sidebar from '../components/Sidebar/Sidebar'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
|
||||
const [session, loading] = useSession()
|
||||
|
||||
return (
|
||||
<Provider>
|
||||
<ChakraProvider>
|
||||
<Head>
|
||||
<title>Cath Dashboard</title>
|
||||
<link rel="icon" href="/logo.png" type="image/png"/>
|
||||
<link rel="icon" href="/logo.png" type="image/png" />
|
||||
</Head>
|
||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||
<Header/>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { Features } from '../components/Features/Features'
|
|||
import { Footer } from '../components/Footer/Footer'
|
||||
import { motion } from 'framer-motion'
|
||||
import StatCard from '../components/StatCard'
|
||||
import Testimonials from '../components/Testimonials/Testimonials'
|
||||
import AuthButton from '../components/AuthButton'
|
||||
|
||||
export default function Home() {
|
||||
|
||||
|
|
@ -29,8 +31,9 @@ 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='Add Cath to your server' image='/logo.png' ctaLink={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"}/>
|
||||
<Hero/>
|
||||
<Features />
|
||||
<Testimonials/>
|
||||
<CTA />
|
||||
<Footer />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue