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 React from "react";
|
||||||
import Link from 'next/link'
|
|
||||||
import PropTypes from "prop-types"
|
|
||||||
import {
|
import {
|
||||||
|
chakra,
|
||||||
Box,
|
Box,
|
||||||
|
useColorModeValue,
|
||||||
Button,
|
Button,
|
||||||
Flex,
|
|
||||||
Image,
|
|
||||||
Heading,
|
|
||||||
Stack,
|
Stack,
|
||||||
|
Image,
|
||||||
Text,
|
Text,
|
||||||
} from "@chakra-ui/react"
|
Icon,
|
||||||
import AuthButton from '../AuthButton'
|
} from "@chakra-ui/react";
|
||||||
import { signIn } from "next-auth/client"
|
import { signIn } from 'next-auth/client'
|
||||||
|
|
||||||
export default function Hero({
|
const Hero = () => {
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
image,
|
|
||||||
ctaLink,
|
|
||||||
ctaText,
|
|
||||||
...rest
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<Flex
|
<Box px={8} py={24} mx="auto">
|
||||||
align="center"
|
<Box
|
||||||
justify={{ base: "center", md: "space-around", xl: "space-between" }}
|
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
|
||||||
direction={{ base: "column-reverse", md: "row" }}
|
mx="auto"
|
||||||
wrap="no-wrap"
|
textAlign={{ base: "left", md: "center" }}
|
||||||
minH="70vh"
|
|
||||||
px={8}
|
|
||||||
mb={16}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<Stack
|
|
||||||
spacing={4}
|
|
||||||
w={{ base: "80%", md: "40%" }}
|
|
||||||
align={["center", "center", "flex-start", "flex-start"]}
|
|
||||||
>
|
>
|
||||||
<Heading
|
<chakra.h1
|
||||||
as="h1"
|
mb={6}
|
||||||
size="xl"
|
fontSize={{ base: "4xl", md: "6xl" }}
|
||||||
fontWeight="bold"
|
fontWeight="bold"
|
||||||
color="primary.800"
|
lineHeight="none"
|
||||||
textAlign={["center", "center", "left", "left"]}
|
letterSpacing={{ base: "normal", md: "tight" }}
|
||||||
|
color={useColorModeValue("gray.900", 'gray.100')}
|
||||||
>
|
>
|
||||||
{title}
|
Your favorite{" "}
|
||||||
</Heading>
|
<Text
|
||||||
<Heading
|
display={{ base: "block", lg: "inline" }}
|
||||||
as="h2"
|
w="full"
|
||||||
size="md"
|
bgClip="text"
|
||||||
color="primary.800"
|
bgGradient="linear(to-r, green.400,purple.500)"
|
||||||
opacity="0.8"
|
fontWeight="extrabold"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
{ctaText}
|
CODM
|
||||||
</Button>
|
</Text>{" "}
|
||||||
</Link>
|
bot.
|
||||||
<Text
|
</chakra.h1>
|
||||||
fontSize="xs"
|
<chakra.p
|
||||||
mt={2}
|
px={{ base: 0, lg: 24 }}
|
||||||
textAlign="center"
|
mb={6}
|
||||||
color="primary.800"
|
fontSize={{ base: "lg", md: "xl" }}
|
||||||
opacity="0.6"
|
color={useColorModeValue("gray.600", 'gray.300')}
|
||||||
>
|
>
|
||||||
No credit card required.
|
Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM.
|
||||||
</Text>
|
</chakra.p>
|
||||||
</Stack>
|
<Stack
|
||||||
<Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
|
direction={{ base: "column", sm: "row" }}
|
||||||
<Image src={image} size="100%" rounded="1rem" shadow="2xl" />
|
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>
|
</Box>
|
||||||
</Flex>
|
</Box>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
Hero.propTypes = {
|
export default Hero;
|
||||||
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: "",
|
|
||||||
}
|
|
||||||
|
|
|
||||||
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 '../styles/globals.css'
|
||||||
import Head from 'next/head'
|
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 { ChakraProvider } from "@chakra-ui/react"
|
||||||
import Header from '../components/Nav/Header'
|
import Header from '../components/Nav/Header'
|
||||||
import theme from '../chakra_config/theme'
|
import theme from '../chakra_config/theme'
|
||||||
import { ColorModeScript } from "@chakra-ui/react"
|
import { ColorModeScript } from "@chakra-ui/react"
|
||||||
|
import Sidebar from '../components/Sidebar/Sidebar'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
|
|
||||||
|
const [session, loading] = useSession()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Provider>
|
<Provider>
|
||||||
<ChakraProvider>
|
<ChakraProvider>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Cath Dashboard</title>
|
<title>Cath Dashboard</title>
|
||||||
<link rel="icon" href="/logo.png" type="image/png"/>
|
<link rel="icon" href="/logo.png" type="image/png" />
|
||||||
</Head>
|
</Head>
|
||||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||||
<Header/>
|
<Header/>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ import { Features } from '../components/Features/Features'
|
||||||
import { Footer } from '../components/Footer/Footer'
|
import { Footer } from '../components/Footer/Footer'
|
||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import StatCard from '../components/StatCard'
|
import StatCard from '../components/StatCard'
|
||||||
|
import Testimonials from '../components/Testimonials/Testimonials'
|
||||||
|
import AuthButton from '../components/AuthButton'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
|
||||||
|
|
@ -29,8 +31,9 @@ export default function Home() {
|
||||||
|
|
||||||
<>
|
<>
|
||||||
{!session && <>
|
{!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 />
|
<Features />
|
||||||
|
<Testimonials/>
|
||||||
<CTA />
|
<CTA />
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue