night0721/nyx-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added testimonials, reworked hero, added sidebar (not implemented)

Browse source 
Added testimonial component with dummy data, remade hero component, added sidebar component that is not currently active.
This commit is contained in:
qt-coder 2021-07-05 17:41:32 +08:00
parent f38696e60e
commit 371c567604
5 changed files with 446 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
components/Hero/Hero.js
View file

@ -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
View 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
View 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>
);
}

10
pages/_app.js
View file

@ -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/>
@ -24,4 +28,4 @@ function MyApp({ Component, pageProps }) {
)
}
export default MyApp
export default MyApp

5
pages/index.js
View file

@ -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 />
</>