nyx-dashboard/components/Hero/Hero.js
qt-coder 371c567604 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.
2021-07-05 17:41:32 +08:00

103 lines
4.3 KiB
JavaScript

import React from "react";
import {
chakra,
Box,
useColorModeValue,
Button,
Stack,
Image,
Text,
Icon,
} from "@chakra-ui/react";
import { signIn } from 'next-auth/client'
const Hero = () => {
return (
<Box px={8} py={24} mx="auto">
<Box
w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
mx="auto"
textAlign={{ base: "left", md: "center" }}
>
<chakra.h1
mb={6}
fontSize={{ base: "4xl", md: "6xl" }}
fontWeight="bold"
lineHeight="none"
letterSpacing={{ base: "normal", md: "tight" }}
color={useColorModeValue("gray.900", 'gray.100')}
>
Your favorite{" "}
<Text
display={{ base: "block", lg: "inline" }}
w="full"
bgClip="text"
bgGradient="linear(to-r, green.400,purple.500)"
fontWeight="extrabold"
>
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')}
>
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>
</Box>
);
};
export default Hero;