From 371c567604e4ecf4a1444583339c285f33f806d6 Mon Sep 17 00:00:00 2001 From: qt-coder Date: Mon, 5 Jul 2021 17:41:32 +0800 Subject: [PATCH] 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. --- components/Hero/Hero.js | 179 ++++++++++++------------ components/Sidebar/Sidebar.js | 177 +++++++++++++++++++++++ components/Testimonials/Testimonials.js | 169 ++++++++++++++++++++++ pages/_app.js | 10 +- pages/index.js | 5 +- 5 files changed, 446 insertions(+), 94 deletions(-) create mode 100644 components/Sidebar/Sidebar.js create mode 100644 components/Testimonials/Testimonials.js diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js index 35179db..6bcd904 100644 --- a/components/Hero/Hero.js +++ b/components/Hero/Hero.js @@ -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 ( - - + - - {title} - - - {subtitle} - - - - - {" "} + bot. + + - No credit card required. - - - - + Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM. + + + + + - - ) -} + + ); +}; -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; diff --git a/components/Sidebar/Sidebar.js b/components/Sidebar/Sidebar.js new file mode 100644 index 0000000..a65f80b --- /dev/null +++ b/components/Sidebar/Sidebar.js @@ -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 ( + + {icon && ( + + )} + {children} + + ); + }; + + const SidebarContent = (props) => ( + + + + Cath.exe + + + + Home + + Control Panel + + + + + Main + + + Commands + + + Coming Soon + + + ); + return ( + + + + + + + + + + + } + size="sm" + /> + + } /> + + + + + + + + + + + {children} + + + + ); +} diff --git a/components/Testimonials/Testimonials.js b/components/Testimonials/Testimonials.js new file mode 100644 index 0000000..f00101c --- /dev/null +++ b/components/Testimonials/Testimonials.js @@ -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 ( + + + + {content} + + + {name} + + {' '} + - {role} + + + + + + ); +} + +export default function GridBlurredBackdrop() { + return ( + + + + Users love Cath + + + You're in good company + + + See why over{' '} + + 110000+ + {' '} + users use Cath in their servers + + + + {testimonials.map((cardInfo, index) => ( + + ))} + + + ); +} diff --git a/pages/_app.js b/pages/_app.js index 3211eac..5782d9f 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -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 ( Cath Dashboard - +
@@ -24,4 +28,4 @@ function MyApp({ Component, pageProps }) { ) } -export default MyApp +export default MyApp \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index de75526..07eaab9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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 && <> - + +