- improve styling

- change fonts

src/App.tsx

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

src/Components/Cards/Team/index.tsx

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

src/Components/Layout/Meta.tsx

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

src/Components/Layout/index.tsx

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

src/Components/Logo/index.tsx

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

src/Sections/TeamGenerator/Input.tsx

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

src/Sections/TeamGenerator/index.tsx

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

src/Sites/404/index.tsx

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

src/Sites/Start/index.tsx

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

src/Styles/customTheme.ts

@@ -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",
         },

src/Styles/fonts/fluro.css

@@ -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;
+}
+

src/Styles/fonts/gilroy/stylesheet.css

@@ -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;
+}
+

src/index.tsx

@@ -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")