syntax changes

This commit is contained in:
night0721 2022-01-09 05:38:17 +08:00
parent 3f27eb643e
commit a06dcd0453
18 changed files with 328 additions and 292 deletions

View file

@ -2,9 +2,7 @@ import React from "react";
import Link from "next/link";
import { Text, Flex, Button } from "@chakra-ui/react";
import { motion } from "framer-motion";
const MotionFlex = motion(Flex);
const item = {
hidden: { y: 20, opacity: 0 },
visible: {
@ -12,8 +10,7 @@ const item = {
opacity: 1,
},
};
function Card({ title, desc, link }) {
export default function Card({ title, desc, link }) {
return (
<Link href={link}>
<MotionFlex
@ -36,5 +33,3 @@ function Card({ title, desc, link }) {
</Link>
);
}
export default Card;

View file

@ -1,18 +1,20 @@
import { Box, Stack, Text, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
import { Box, Stack, Text, useColorModeValue as mode } from "@chakra-ui/react";
import * as React from "react";
export const Feature = (props) => {
const { title, children, icon } = props
return (
<Stack spacing={{ base: '3', md: '6' }} direction={{ base: 'column', md: 'row' }}>
<Box fontSize="6xl">{icon}</Box>
<Stack spacing="1">
<Text fontWeight="extrabold" fontSize="lg">
{title}
</Text>
<Box color={mode('gray.600', 'gray.400')}>{children}</Box>
</Stack>
</Stack>
)
}
export const Feature = props => {
const { title, children, icon } = props;
return (
<Stack
spacing={{ base: "3", md: "6" }}
direction={{ base: "column", md: "row" }}
>
<Box fontSize="6xl">{icon}</Box>
<Stack spacing="1">
<Text fontWeight="extrabold" fontSize="lg">
{title}
</Text>
<Box color={mode("gray.600", "gray.400")}>{children}</Box>
</Stack>
</Stack>
);
};

View file

@ -1,23 +1,35 @@
import { Box, SimpleGrid } from '@chakra-ui/react'
import * as React from 'react'
import { FcDoughnutChart, FcMultipleDevices, FcPrivacy, FcTimeline } from 'react-icons/fc'
import { Feature } from './Feature'
import { Box, SimpleGrid } from "@chakra-ui/react";
import * as React from "react";
import {
FcDoughnutChart,
FcMultipleDevices,
FcPrivacy,
FcTimeline,
} from "react-icons/fc";
import { Feature } from "./Feature";
export const Features = () => (
<Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: '6', md: '8' }}>
<SimpleGrid columns={{ base: 1, md: 2 }} spacingX="10" spacingY={{ base: '8', md: '14' }}>
<Feature title="Secure by default" icon={<FcPrivacy />}>
Cath will never leak any of your information. Ever. All your data is stored securely on our side.
</Feature>
<Feature title="Always up to date" icon={<FcTimeline />}>
Cath is constantly being updated and worked on. Bugs and features, you name them, we do them.
</Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
Amazing server statistics that make tracking your server growth a breeze.
</Feature>
<Feature title="For everyone" icon={<FcMultipleDevices />}>
No matter who you are, Cath is sure to have a purpose for you.
</Feature>
</SimpleGrid>
</Box>
)
<Box as="section" maxW="5xl" mx="auto" py="12" px={{ base: "6", md: "8" }}>
<SimpleGrid
columns={{ base: 1, md: 2 }}
spacingX="10"
spacingY={{ base: "8", md: "14" }}
>
<Feature title="Secure by default" icon={<FcPrivacy />}>
Cath will never leak any of your information. Ever. All your data is
stored securely on our side.
</Feature>
<Feature title="Always up to date" icon={<FcTimeline />}>
Cath is constantly being updated and worked on. Bugs and features, you
name them, we do them.
</Feature>
<Feature title="Incredible statistics" icon={<FcDoughnutChart />}>
Amazing server statistics that make tracking your server growth a
breeze.
</Feature>
<Feature title="For everyone" icon={<FcMultipleDevices />}>
No matter who you are, Cath is sure to have a purpose for you.
</Feature>
</SimpleGrid>
</Box>
);

View file

@ -1,8 +1,8 @@
import { Text, TextProps } from '@chakra-ui/layout'
import * as React from 'react'
import { Text, TextProps } from "@chakra-ui/layout";
import * as React from "react";
export const Copyright = (props) => (
<Text fontSize="sm" {...props}>
&copy; {new Date().getFullYear()} Cath. All rights reserved.
</Text>
)
export const Copyright = props => (
<Text fontSize="sm" {...props}>
&copy; {new Date().getFullYear()} Cath. All rights reserved.
</Text>
);

View file

@ -1,15 +1,22 @@
import { Box, Stack } from '@chakra-ui/react'
import * as React from 'react'
import { Copyright } from './Copyright'
import { SocialMediaLinks } from './SocialMediaLinks'
import { Box, Stack } from "@chakra-ui/react";
import * as React from "react";
import { Copyright } from "./Copyright";
import { SocialMediaLinks } from "./SocialMediaLinks";
export const Footer = () => (
<Box as="footer" role="contentinfo" mx="auto" maxW="7xl" py="12" px={{ base: '4', md: '8' }}>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks />
</Stack>
<Copyright alignSelf={{ base: 'center', sm: 'start' }} />
</Stack>
</Box>
)
<Box
as="footer"
role="contentinfo"
mx="auto"
maxW="7xl"
py="12"
px={{ base: "4", md: "8" }}
>
<Stack>
<Stack direction="row" spacing="4" align="center" justify="space-between">
<SocialMediaLinks />
</Stack>
<Copyright alignSelf={{ base: "center", sm: "start" }} />
</Stack>
</Box>
);

View file

@ -1,9 +1,15 @@
import { ButtonGroup, ButtonGroupProps, IconButton } from '@chakra-ui/react'
import * as React from 'react'
import { FaGithub } from 'react-icons/fa'
import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
import * as React from "react";
import { FaGithub } from "react-icons/fa";
export const SocialMediaLinks = (props) => (
<ButtonGroup variant="ghost" color="gray.600" {...props}>
<IconButton as="a" href="https://github.com/night0721/cath.gq" aria-label="GitHub" icon={<FaGithub fontSize="20px" />} target='_empty'/>
</ButtonGroup>
)
export const SocialMediaLinks = props => (
<ButtonGroup variant="ghost" color="gray.600" {...props}>
<IconButton
as="a"
href="https://github.com/night0721/cath.gq"
aria-label="GitHub"
icon={<FaGithub fontSize="20px" />}
target="_empty"
/>
</ButtonGroup>
);

View file

@ -1,103 +1,108 @@
import React from "react";
import {
chakra,
Box,
useColorModeValue,
Button,
Stack,
Image,
Text,
Icon,
chakra,
Box,
useColorModeValue,
Button,
Stack,
Image,
Text,
Icon,
} from "@chakra-ui/react";
import { signIn } from 'next-auth/client'
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, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)"
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>
);
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, rgba(0,76,213,1) 0%, rgba(0,99,255,1) 50%, rgba(0,183,255,1) 100%)"
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;

View file

@ -14,70 +14,83 @@ import {
useColorModeValue,
useBreakpointValue,
useDisclosure,
} from '@chakra-ui/react';
} from "@chakra-ui/react";
import {
HamburgerIcon,
CloseIcon,
ChevronDownIcon,
ChevronRightIcon,
} from '@chakra-ui/icons';
import AuthButton from '../AuthButton'
import { signIn, signOut, useSession } from 'next-auth/client';
} from "@chakra-ui/icons";
import AuthButton from "../AuthButton";
import { signIn, signOut, useSession } from "next-auth/client";
export default function WithSubnavigation() {
const { isOpen, onToggle } = useDisclosure();
const [session, loading] = useSession()
const [session, loading] = useSession();
return (
<Box>
<Flex
bg={useColorModeValue('white', 'gray.800')}
color={useColorModeValue('gray.600', 'white')}
minH={'60px'}
bg={useColorModeValue("white", "gray.800")}
color={useColorModeValue("gray.600", "white")}
minH={"60px"}
py={{ base: 2 }}
px={{ base: 4 }}
borderBottom={1}
borderStyle={'solid'}
borderColor={useColorModeValue('gray.200', 'gray.900')}
align={'center'}>
borderStyle={"solid"}
borderColor={useColorModeValue("gray.200", "gray.900")}
align={"center"}
>
<Flex
flex={{ base: 1, md: 'auto' }}
flex={{ base: 1, md: "auto" }}
ml={{ base: -2 }}
display={{ base: 'flex', md: 'none' }}>
display={{ base: "flex", md: "none" }}
>
<IconButton
onClick={onToggle}
icon={
isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
}
variant={'ghost'}
aria-label={'Toggle Navigation'}
variant={"ghost"}
aria-label={"Toggle Navigation"}
/>
</Flex>
<Flex flex={{ base: 1 }} justify={{ base: 'center', md: 'start' }}>
<Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
<Text
textAlign={useBreakpointValue({ base: 'center', md: 'left' })}
fontFamily={'heading'}
color={useColorModeValue('gray.800', 'white')}>
textAlign={useBreakpointValue({ base: "center", md: "left" })}
fontFamily={"heading"}
color={useColorModeValue("gray.800", "white")}
>
Cath.exe
</Text>
<Flex display={{ base: 'none', md: 'flex' }} ml={10}>
<Flex display={{ base: "none", md: "flex" }} ml={10}>
<DesktopNav />
</Flex>
</Flex>
<Stack
flex={{ base: 1, md: 0 }}
justify={'flex-end'}
direction={'row'}
spacing={6}>
justify={"flex-end"}
direction={"row"}
spacing={6}
>
<Button
as={'a'}
fontSize={'sm'}
as={"a"}
fontSize={"sm"}
fontWeight={400}
variant={'link'}
onClick={session ? ()=>{signOut()} : ()=>{signIn()}}>
{session ? 'Sign Out' : 'Sign In'}
variant={"link"}
onClick={
session
? () => {
signOut();
}
: () => {
signIn();
}
}
>
{session ? "Sign Out" : "Sign In"}
</Button>
</Stack>
</Flex>
@ -90,26 +103,27 @@ export default function WithSubnavigation() {
}
const DesktopNav = () => {
const linkColor = useColorModeValue('gray.600', 'gray.200');
const linkHoverColor = useColorModeValue('gray.800', 'white');
const popoverContentBgColor = useColorModeValue('white', 'gray.800');
const linkColor = useColorModeValue("gray.600", "gray.200");
const linkHoverColor = useColorModeValue("gray.800", "white");
const popoverContentBgColor = useColorModeValue("white", "gray.800");
return (
<Stack direction={'row'} spacing={4}>
{NAV_ITEMS.map((navItem) => (
<Stack direction={"row"} spacing={4}>
{NAV_ITEMS.map(navItem => (
<Box key={navItem.label}>
<Popover trigger={'hover'} placement={'bottom-start'}>
<Popover trigger={"hover"} placement={"bottom-start"}>
<PopoverTrigger>
<Link
p={2}
href={navItem.href ?? '#'}
fontSize={'sm'}
href={navItem.href ?? "#"}
fontSize={"sm"}
fontWeight={500}
color={linkColor}
_hover={{
textDecoration: 'none',
textDecoration: "none",
color: linkHoverColor,
}}>
}}
>
{navItem.label}
</Link>
</PopoverTrigger>
@ -117,13 +131,14 @@ const DesktopNav = () => {
{navItem.children && (
<PopoverContent
border={0}
boxShadow={'xl'}
boxShadow={"xl"}
bg={popoverContentBgColor}
p={4}
rounded={'xl'}
minW={'sm'}>
rounded={"xl"}
minW={"sm"}
>
<Stack>
{navItem.children.map((child) => (
{navItem.children.map(child => (
<DesktopSubNav key={child.label} {...child} />
))}
</Stack>
@ -140,30 +155,33 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
return (
<Link
href={href}
role={'group'}
display={'block'}
role={"group"}
display={"block"}
p={2}
rounded={'md'}
_hover={{ bg: useColorModeValue('teal.50', 'gray.900') }}>
<Stack direction={'row'} align={'center'}>
rounded={"md"}
_hover={{ bg: useColorModeValue("teal.50", "gray.900") }}
>
<Stack direction={"row"} align={"center"}>
<Box>
<Text
transition={'all .3s ease'}
_groupHover={{ color: 'teal.200' }}
fontWeight={500}>
transition={"all .3s ease"}
_groupHover={{ color: "teal.200" }}
fontWeight={500}
>
{label}
</Text>
<Text fontSize={'sm'}>{subLabel}</Text>
<Text fontSize={"sm"}>{subLabel}</Text>
</Box>
<Flex
transition={'all .3s ease'}
transform={'translateX(-10px)'}
transition={"all .3s ease"}
transform={"translateX(-10px)"}
opacity={0}
_groupHover={{ opacity: '100%', transform: 'translateX(0)' }}
justify={'flex-end'}
align={'center'}
flex={1}>
<Icon color={'teal.200'} w={5} h={5} as={ChevronRightIcon} />
_groupHover={{ opacity: "100%", transform: "translateX(0)" }}
justify={"flex-end"}
align={"center"}
flex={1}
>
<Icon color={"teal.200"} w={5} h={5} as={ChevronRightIcon} />
</Flex>
</Stack>
</Link>
@ -173,10 +191,11 @@ const DesktopSubNav = ({ label, href, subLabel }) => {
const MobileNav = () => {
return (
<Stack
bg={useColorModeValue('white', 'gray.800')}
bg={useColorModeValue("white", "gray.800")}
p={4}
display={{ md: 'none' }}>
{NAV_ITEMS.map((navItem) => (
display={{ md: "none" }}
>
{NAV_ITEMS.map(navItem => (
<MobileNavItem key={navItem.label} {...navItem} />
))}
</Stack>
@ -191,38 +210,41 @@ const MobileNavItem = ({ label, children, href }) => {
<Flex
py={2}
as={Link}
href={href ?? '#'}
justify={'space-between'}
align={'center'}
href={href ?? "#"}
justify={"space-between"}
align={"center"}
_hover={{
textDecoration: 'none',
}}>
textDecoration: "none",
}}
>
<Text
fontWeight={600}
color={useColorModeValue('gray.600', 'gray.200')}>
color={useColorModeValue("gray.600", "gray.200")}
>
{label}
</Text>
{children && (
<Icon
as={ChevronDownIcon}
transition={'all .25s ease-in-out'}
transform={isOpen ? 'rotate(180deg)' : ''}
transition={"all .25s ease-in-out"}
transform={isOpen ? "rotate(180deg)" : ""}
w={6}
h={6}
/>
)}
</Flex>
<Collapse in={isOpen} animateOpacity style={{ marginTop: '0!important' }}>
<Collapse in={isOpen} animateOpacity style={{ marginTop: "0!important" }}>
<Stack
mt={2}
pl={4}
borderLeft={1}
borderStyle={'solid'}
borderColor={useColorModeValue('gray.200', 'gray.700')}
align={'start'}>
borderStyle={"solid"}
borderColor={useColorModeValue("gray.200", "gray.700")}
align={"start"}
>
{children &&
children.map((child) => (
children.map(child => (
<Link key={child.label} py={2} href={child.href}>
{child.label}
</Link>
@ -233,29 +255,28 @@ const MobileNavItem = ({ label, children, href }) => {
);
};
const NAV_ITEMS = [
{
label: 'Home',
href: '/',
label: "Home",
href: "/",
},
{
label: 'Control Panel',
label: "Control Panel",
children: [
{
label: 'Main',
subLabel: 'Control Everything',
href: '/controlpanel',
label: "Main",
subLabel: "Control Everything",
href: "/controlpanel",
},
{
label: 'Commands',
subLabel: 'Control Caths commands',
href: '/controlpanel/commands',
label: "Commands",
subLabel: "Control Caths commands",
href: "/controlpanel/commands",
},
],
},
{
label: 'Coming soon...',
href: '#',
label: "Coming soon...",
href: "#",
},
];
];

View file

@ -2,11 +2,11 @@ import React from "react";
import { Box, Text } from "@chakra-ui/react";
export default function Logo(props) {
return (
<Box {...props}>
<Text fontSize="lg" fontWeight="bold">
Logo
</Text>
</Box>
);
}
return (
<Box {...props}>
<Text fontSize="lg" fontWeight="bold">
Logo
</Text>
</Box>
);
}

View file

@ -1,12 +1,11 @@
import Head from "next/head";
export default function Custom404() {
return (
<>
<Head>
<title>404</title>
</Head>
<h1>404 - Page Not Found</h1>
<pre>404 - Page Not Found</pre>
</>
);
}

View file

@ -7,7 +7,7 @@ import theme from "../chakra_config/theme";
import { ColorModeScript } from "@chakra-ui/react";
import Sidebar from "../components/Sidebar/Sidebar";
function MyApp({ Component, pageProps }) {
export default function MyApp({ Component, pageProps }) {
const [session, loading] = useSession();
return (
@ -37,5 +37,3 @@ function MyApp({ Component, pageProps }) {
</Provider>
);
}
export default MyApp;

View file

@ -33,15 +33,9 @@ function Controller({ initialState }) {
function processOnline(status) {
console.log(status);
if (status == "online") {
return true;
}
if (status == "offline") {
return false;
}
if (status == "maintenance") {
return false;
}
if (status == "online") return true;
if (status == "offline") return false;
if (status == "maintenance") return false;
}
function Commands() {

View file

@ -24,7 +24,6 @@ export default function Home() {
};
const [session, loading] = useSession();
return (
<>
{!session && (

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View file

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View file

View file

@ -1,10 +1,12 @@
.home-card {
width: 300px;
height: 150px;
background: #1f1b24;
border: 1px solid blue;
width: 300px;
height: 150px;
background: #1f1b24;
border: 1px solid blue;
}
.title {}
/* .title {
}
.desc {}
.desc {
} */

View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap");
* {
color: #fff;
@ -8,8 +8,8 @@ html,
body {
padding: 0;
margin: 0;
font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family: "Epilogue", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background: #1a202c;
}
@ -22,7 +22,7 @@ body {
.page-container {
padding: 2px;
margin: 2px;
}
}
}
a {
@ -45,4 +45,4 @@ a {
display: grid;
grid-template-columns: repeat(auto-fill, 350px);
grid-gap: 10px;
}
}