add participate form

.eslintrc.json

@@ -1,3 +1,13 @@
 {
-    "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+        "eslint:recommended",
+        "next/core-web-vitals",
+        "prettier",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["error"]
+    }
 }

package.json

@@ -16,6 +16,7 @@
     "@supabase/auth-helpers-nextjs": "^0.2.5",
     "@supabase/auth-helpers-react": "^0.2.3",
     "@supabase/supabase-js": "^1.35.4",
+    "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
     "next": "12.2.1",
     "react": "18.2.0",

src/components/Nav.tsx

@@ -68,10 +68,10 @@ function NavBarContainer({ children }: PropsWithChildren) {
             <Flex
                 flexGrow={1}
                 align="center"
-                justify="flex-start"
+                justify="space-between"
                 wrap="wrap"
                 py={5}
-                px={{base: 4, md: 6, xl: 0}}
+                px={{ base: 4, xl: 0 }}
                 maxW="container.xl"
             >
                 {children}
@@ -118,8 +118,8 @@ export default function NavBar() {
                 <MenuItem onClick={toggle} to="/timeline">
                     Timeline
                 </MenuItem>
+                <AvatarWrapper />
             </MenuLinksContainer>
-            <AvatarWrapper />
         </NavBarContainer>
     );
 }

src/components/ParticipateButton.tsx

@@ -1,23 +1,26 @@
 import { BoxProps, Box } from '@chakra-ui/react';
+import PageLink from './nav/link';
 
 export default function ParticipateButton(props: BoxProps) {
     return (
-        <Box
-            as="button"
-            bgGradient="linear(to-r, secondary, primary)"
-            px={4}
-            py={3}
-            borderRadius={4}
-            minW={72}
-            fontWeight="black"
-            opacity={0.9}
-            _hover={{ opacity: '0.7' }}
-            _active={{ opacity: '1', boxShadow: 'outline' }}
-            _focus={{ opacity: '1', boxShadow: 'outline' }}
-            transition="all .15s"
-            {...props}
-        >
-            Participate
-        </Box>
+        <PageLink href='/participate'>
+            <Box
+                as="button"
+                bgGradient="linear(to-r, secondary, primary)"
+                px={4}
+                py={3}
+                borderRadius={4}
+                minW={72}
+                fontWeight="black"
+                opacity={0.9}
+                _hover={{ opacity: '0.7' }}
+                _active={{ opacity: '1', boxShadow: 'outline' }}
+                _focus={{ opacity: '1', boxShadow: 'outline' }}
+                transition="all .15s"
+                {...props}
+            >
+                Participate
+            </Box>
+        </PageLink>
     );
 }

src/components/PartnerBlock.tsx

@@ -1,5 +1,5 @@
 import { GridItem, Heading, Image, Link, SimpleGrid } from '@chakra-ui/react';
-import { Sponsor } from 'types/partner';
+import { Sponsor } from 'types';
 
 function PartnerItem({ link: href, logo, name }: Partial<Sponsor>) {
     return (