played/gen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

- improve styling
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- change fonts
This commit is contained in:
Enrico Bühler 2022-05-16 03:08:55 +02:00
parent 71fa0133e3
commit 1cf978c85d
58 changed files with 658 additions and 726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules
.DS_Store
dist

392
dist/assets/index.3030d437.js vendored
View File

File diff suppressed because one or more lines are too long

9
dist/index.html vendored
View File

@ -3,16 +3,19 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>played - Random Team Generator</title>
<script type="module" crossorigin src="/assets/index.3030d437.js"></script>
<title>gen.played - Random Team Generator for CS:GO, Valorant and other Games</title>
<meta name="description"
content="gen.played is a random team generator. Simply enter the names of the players, press generate and you've got as many random teams as you like. Not happy with the result? Just press generate again!" />
<script type="module" crossorigin src="/assets/index.5d5789f0.js"></script>
<link rel="stylesheet" href="/assets/index.87f7909d.css">
</head>
<body>
<div id="root"></div>
<script defer data-domain="gen.played.party" src="https://analytics.unom.io/js/plausible.js"></script>
</body>
</html>

30
package.json
View File

@ -22,15 +22,13 @@
"@chakra-ui/react": "^1.8.8",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@fontsource/inter": "^4.5.7",
"@fontsource/raleway": "^4.5.5",
"@unom/style": "^0.2.14",
"chakra-ui-markdown-renderer": "^4.0.0",
"framer-motion": "^6.3.1",
"framer-motion": "^6.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.30.0",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.31.1",
"react-icons": "^4.3.1",
"react-markdown": "^8.0.3",
"react-router-dom": "^6.3.0",
@ -38,22 +36,22 @@
"zustand": "^4.0.0-rc.1"
},
"devDependencies": {
"@commitlint/config-conventional": "^16.2.1",
"@types/node": "^17.0.23",
"@commitlint/config-conventional": "^16.2.4",
"@types/node": "^17.0.33",
"@types/react": "^17.0.44",
"@types/react-dom": "^17.0.15",
"@types/react-helmet": "^6.1.5",
"@vitejs/plugin-react": "^1.3.0",
"commitlint": "^16.2.3",
"eslint": "^8.13.0",
"@vitejs/plugin-react": "^1.3.2",
"commitlint": "^16.3.0",
"eslint": "^8.15.0",
"eslint-config-sznm": "^0.2.1",
"husky": "^7.0.4",
"lint-staged": "^12.3.7",
"netlify-cli": "^10.0.0",
"husky": "^8.0.1",
"lint-staged": "^12.4.1",
"netlify-cli": "^10.3.1",
"prettier": "^2.6.2",
"standard-version": "^9.3.2",
"typescript": "^4.6.3",
"vite": "^2.9.1",
"standard-version": "^9.5.0",
"typescript": "^4.6.4",
"vite": "^2.9.9",
"vite-tsconfig-paths": "^3.4.1"
}
}

37
src/App.tsx
View File

@ -14,25 +14,28 @@ import Layout from "Components/Layout";
import Page404 from "Sites/404";
import { routes } from "Sites";
import { SWRConfig } from "swr";
import { HelmetProvider } from "react-helmet-async";
const App = () => (
<Router>
<SWRConfig
value={{
fetcher: (resource, init) =>
fetch(resource, init).then((res) => res.json()),
}}
>
<Layout>
<Routes>
{routes.map((routeProps) => (
<Route {...routeProps} key={routeProps.path as string} />
))}
<Route path="*" element={<Page404 />} />
</Routes>
</Layout>
</SWRConfig>
</Router>
<HelmetProvider>
<Router>
<SWRConfig
value={{
fetcher: (resource, init) =>
fetch(resource, init).then((res) => res.json()),
}}
>
<Layout>
<Routes>
{routes.map((routeProps) => (
<Route {...routeProps} key={routeProps.path as string} />
))}
<Route path="*" element={<Page404 />} />
</Routes>
</Layout>
</SWRConfig>
</Router>
</HelmetProvider>
);
export default App;

30
src/Components/Cards/Team/index.tsx
View File

@ -1,6 +1,13 @@
import { Box, Text, Heading, useStyleConfig, chakra } from "@chakra-ui/react";
import {
Box,
Text,
Heading,
useStyleConfig,
chakra,
useColorModeValue,
} from "@chakra-ui/react";
import { ease } from "@unom/style";
import { motion, isValidMotionProp } from "framer-motion";
import { m, isValidMotionProp, motion } from "framer-motion";
import { VFC } from "react";
type CardTeamProps = {
@ -8,11 +15,13 @@ type CardTeamProps = {
index: number;
};
const Container = chakra(motion.div, {
const Container = chakra(m.div, {
shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
});
const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
const headingColor = useColorModeValue("purple.600", "purple.100");
const styles = useStyleConfig("Card", { variant: "smooth" });
return (
<Container
@ -20,17 +29,26 @@ const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
enter: {
y: 0,
opacity: 1,
transition: ease.quint(0.8).out,
transition: { ...ease.quint(0.8).out, staggerChildren: 0.1 },
},
from: { y: 100, opacity: 0 },
}}
__css={styles}
>
<Heading size="md" as="h3">
<Heading fontFamily="Gilroy" color={headingColor} size="md" as="h4">
Team {index + 1}
</Heading>
{players.map((player, index) => (
<Text fontWeight={500} key={index}>
<Text
as={motion.p}
variants={{
enter: { y: 0, opacity: 1, transition: ease.quint(0.8).out },
from: { y: 30, opacity: 0 },
}}
fontSize="lg"
fontWeight={500}
key={index}
>
{player}
</Text>
))}

2
src/Components/Layout/Meta.tsx
View File

@ -1,4 +1,4 @@
import { Helmet } from "react-helmet";
import { Helmet } from "react-helmet-async";
const Meta = () => {
return (

4
src/Components/Layout/index.tsx
View File

@ -1,5 +1,5 @@
import { Box, chakra, Flex } from "@chakra-ui/react";
import { isValidMotionProp, motion } from "framer-motion";
import { isValidMotionProp, m } from "framer-motion";
import type { ReactNode } from "react";
import Footer from "./Footer";
@ -10,7 +10,7 @@ type LayoutProps = {
children: ReactNode;
};
const ContentContainer = chakra(motion.main, {
const ContentContainer = chakra(m.main, {
shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
});

30
src/Components/Logo/index.tsx
View File

@ -1,11 +1,11 @@
import { Box, chakra } from "@chakra-ui/react";
import React from "react";
import { useToken } from "@chakra-ui/react";
import { motion } from "framer-motion";
import { m } from "framer-motion";
const Logo = () => {
return (
<Box maxW="200px">
<motion.svg
<m.svg
style={{ width: "100%" }}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 798.92 453.49"
@ -40,50 +40,50 @@ const Logo = () => {
</style>
</defs>
<motion.g
<m.g
style={{ zIndex: 0 }}
transition={{ type: "tween", ease: "circOut", duration: 0.5 }}
animate={{ scale: 1 }}
initial={{ scale: 0 }}
>
<motion.path
<m.path
transition={{ delay: 1, opacity: { duration: 0.1 } }}
animate={{ pathLength: 1, opacity: 1 }}
initial={{ pathLength: 0, opacity: 0 }}
d="M759.76 308.57L714.51 378.92 637.05 333.59"
className="c"
></motion.path>
<motion.path
></m.path>
<m.path
transition={{ delay: 0.1, opacity: { duration: 0.1 } }}
animate={{ pathLength: 1, opacity: 1 }}
initial={{ pathLength: 0, opacity: 0 }}
d="M108.52 155.94L38.17 110.7 83.5 33.23"
className="c"
></motion.path>
<motion.path
></m.path>
<m.path
transition={{ type: "tween", duration: 1, ease: "circOut" }}
animate={{ pathLength: 1 }}
initial={{ pathLength: 0 }}
style={{ pathOffset: 34 }}
d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
className="b"
></motion.path>
</motion.g>
<motion.path
></m.path>
</m.g>
<m.path
animate={{ scale: 1 }}
initial={{ scale: 0 }}
transition={{ type: "spring" }}
d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z"
className="e"
></motion.path>
<motion.path
></m.path>
<m.path
animate={{ scale: 1 }}
initial={{ scale: 2 }}
transition={{ type: "tween", duration: 0.3 }}
d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z"
className="played"
></motion.path>
</motion.svg>
></m.path>
</m.svg>
</Box>
);
};

4
src/Sections/TeamGenerator/Input.tsx
View File

@ -1,7 +1,7 @@
import { CloseIcon } from "@chakra-ui/icons";
import { Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import { ease } from "@unom/style";
import { motion } from "framer-motion";
import { m } from "framer-motion";
import { VFC } from "react";
import type { UseFormGetValues, UseFormRegister } from "react-hook-form";
@ -15,7 +15,7 @@ const PlayerNameInput: VFC<{
}> = ({ index, onRemove, onAppend, register, fieldsLength, getValues }) => {
return (
<InputGroup
as={motion.div}
as={m.div}
exit="exit"
animate="enter"
initial="from"

26
src/Sections/TeamGenerator/index.tsx
View File

@ -9,20 +9,16 @@ import {
Switch,
} from "@chakra-ui/react";
import CardTeam from "Components/Cards/Team";
import { AnimatePresence, motion } from "framer-motion";
import { AnimatePresence, m } from "framer-motion";
import useTeamGenerator from "lib/Hooks/useTeamGenerator";
import { useEffect } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import PlayerNameInput from "./Input";
const SectionTeamGenerator = () => {
const {
handleSubmit,
register,
control,
getValues,
formState: { errors, isSubmitting },
} = useForm({ defaultValues: { players: [{ value: "" }], teamCount: 2 } });
const { handleSubmit, register, control, getValues } = useForm({
defaultValues: { players: [{ value: "" }], teamCount: 2 },
});
const { fields, append, remove } = useFieldArray({
control,
@ -43,9 +39,11 @@ const SectionTeamGenerator = () => {
<Box>
<form
onSubmit={handleSubmit((values) => {
setConfig({ teamCount: values.teamCount });
setPlayers(values.players.map((player) => player.value));
generate();
if (values.players.length > 1) {
setConfig({ teamCount: values.teamCount });
setPlayers(values.players.map((player) => player.value));
generate();
}
})}
>
<Stack mb={6} spacing={3}>
@ -89,8 +87,10 @@ const SectionTeamGenerator = () => {
}}
/>
</FormControl>
<Button type="submit">Generate</Button>
</Stack>
<Button width="100%" mt="4rem" type="submit">
Generate
</Button>
</form>
{teams.length > 0 && (
@ -99,7 +99,7 @@ const SectionTeamGenerator = () => {
enter: { transition: { staggerChildren: 0.2 } },
from: {},
}}
as={motion.div}
as={m.div}
columns={2}
animate="enter"
initial="from"

6
src/Sites/404/index.tsx
View File

@ -8,7 +8,7 @@ import {
Link,
Text,
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import { m } from "framer-motion";
import { useNavigate } from "react-router-dom";
const Page404 = () => {
@ -21,14 +21,14 @@ const Page404 = () => {
<Heading>Page not Found</Heading>
<Box maxWidth={[280, 400]} marginX="auto">
<motion.h1
<m.h1
transition={{ type: "tween", ease: "circOut", duration: 1 }}
animate={{ scale: 1 }}
initial={{ scale: 0 }}
style={{ fontSize: "8rem" }}
>
404
</motion.h1>
</m.h1>
</Box>
<Center flexDirection="column">

27
src/Sites/Start/index.tsx
View File

@ -1,9 +1,34 @@
import { Grid, Text } from "@chakra-ui/react";
import {
Grid,
Heading,
Text,
useColorModeValue,
useToken,
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import SectionTeamGenerator from "Sections/TeamGenerator";
const Home = () => {
const colorMain = useToken("colors", "main");
return (
<Grid gap={4}>
<Heading
color="transparent"
lineHeight="1"
style={
{
TextStroke: `1px ${colorMain}`,
WebkitTextStroke: `1px ${colorMain}`,
} as any
}
opacity="0.5"
mb="2rem"
fontSize="5xl"
as={motion.h1}
>
Random Team Generator
</Heading>
<SectionTeamGenerator />
</Grid>
);

25
src/Styles/customTheme.ts
View File

@ -11,9 +11,10 @@ const Card = {
background: "neutral",
transition: "background-color 0.1s linear",
alignItems: "center",
borderWidth: "2px",
borderWidth: "1px",
borderStyle: "solid",
borderColor: props.colorMode === "dark" ? "gray.800" : "gray.100",
borderColor:
props.colorMode === "dark" ? "whiteAlpha.500" : "blackAlpha.200",
gap: 6,
}),
// Two variants: rounded and smooth
@ -113,8 +114,8 @@ export const theme = extendTheme(
},
{
fonts: {
heading: "Raleway, sans-serif",
body: "Inter, sans-serif",
heading: "Fluro, sans-serif",
body: "Gilroy, sans-serif",
},
config: {
initialColorMode: "dark",
@ -140,21 +141,7 @@ export const theme = extendTheme(
background: props.colorMode === "dark" ? "black" : "white",
lineHeight: "tall",
},
"h1.chakra-heading": {
fontSize: "var(--chakra-fontSizes-5xl)",
},
"h2.chakra-heading": {
fontSize: "var(--chakra-fontSizes-3xl)",
},
"h3.chakra-heading": {
fontSize: "var(--chakra-fontSizes-2xl)",
},
"h4.chakra-heading": {
fontSize: "var(--chakra-fontSizes-lg)",
},
"h5.chakra-heading": {
fontSize: "var(--chakra-fontSizes-md)",
},
a: {
color: props.colorMode === "dark" ? "teal.300" : "teal.500",
},

BIN
src/Styles/fonts/FLUROBold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/FLUROBold.woff2 Normal file
View File

Binary file not shown.

9
src/Styles/fonts/fluro.css Normal file
View File

@ -0,0 +1,9 @@
@font-face {
font-family: 'FLURO';
src: url('FLUROBold.woff2') format('woff2'),
url('FLUROBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

BIN
src/Styles/fonts/gilroy/Gilroy-Black.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Black.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BlackItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BlackItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Bold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BoldItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-BoldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Extrabold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Extrabold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Heavy.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Heavy.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-HeavyItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-HeavyItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Light.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Light.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-LightItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-MediumItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-MediumItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Regular.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-RegularItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-RegularItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Semibold.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Semibold.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-SemiboldItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-SemiboldItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Thin.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-Thin.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-ThinItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-ThinItalic.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLight.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLight.woff2 Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLightItalic.woff Normal file
View File

Binary file not shown.

BIN
src/Styles/fonts/gilroy/Gilroy-UltraLightItalic.woff2 Normal file
View File

Binary file not shown.

152
src/Styles/fonts/gilroy/stylesheet.css Normal file
View File

@ -0,0 +1,152 @@
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-UltraLightItalic.woff2') format('woff2'),
url('Gilroy-UltraLightItalic.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-BoldItalic.woff2') format('woff2'),
url('Gilroy-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Regular.woff2') format('woff2'),
url('Gilroy-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Semibold.woff2') format('woff2'),
url('Gilroy-Semibold.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-MediumItalic.woff2') format('woff2'),
url('Gilroy-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-BlackItalic.woff2') format('woff2'),
url('Gilroy-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Heavy.woff2') format('woff2'),
url('Gilroy-Heavy.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Thin.woff2') format('woff2'),
url('Gilroy-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-LightItalic.woff2') format('woff2'),
url('Gilroy-LightItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-HeavyItalic.woff2') format('woff2'),
url('Gilroy-HeavyItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-RegularItalic.woff2') format('woff2'),
url('Gilroy-RegularItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-UltraLight.woff2') format('woff2'),
url('Gilroy-UltraLight.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-ThinItalic.woff2') format('woff2'),
url('Gilroy-ThinItalic.woff') format('woff');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Extrabold.woff2') format('woff2'),
url('Gilroy-Extrabold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Medium.woff2') format('woff2'),
url('Gilroy-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-SemiboldItalic.woff2') format('woff2'),
url('Gilroy-SemiboldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Bold.woff2') format('woff2'),
url('Gilroy-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Black.woff2') format('woff2'),
url('Gilroy-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Gilroy';
src: url('Gilroy-Light.woff2') format('woff2'),
url('Gilroy-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}

9
src/index.tsx
View File

@ -3,17 +3,20 @@ import { StrictMode } from "react";
import ReactDOM from "react-dom";
// fonts
import "@fontsource/raleway/latin.css";
import "@fontsource/inter/latin.css";
import "Styles/fonts/gilroy/stylesheet.css";
import "Styles/fonts/fluro.css";
import App from "./App";
import { theme } from "Styles/customTheme";
import { domAnimation, LazyMotion } from "framer-motion";
ReactDOM.render(
<StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<ChakraProvider theme={theme}>
<App />
<LazyMotion strict features={domAnimation}>
<App />
</LazyMotion>
</ChakraProvider>
</StrictMode>,
document.getElementById("root")

589
yarn.lock
View File

File diff suppressed because it is too large Load Diff