work on contributors-cards

frontend/components/Contributors/Contributors.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import ContributorsStyle from './Contributors.style'
+import styles from '../../styles/Contributors.module.css'
+export default function Contributors() {
+  return (
+    <ContributorsStyle>
+      <>
+        <div className={styles.head}>CONTRIBUTORS</div>
+        <div className="contributor-cards">
+          <div className="contributor-card1">
+            <div className="contributor-cardPointer"></div>
+            <div className="contributor-Pic"></div>
+            <div className="contributor-Name"></div>
+            <div className="contributor-GithubUsername"></div>
+          </div>
+        </div>
+      </>
+    </ContributorsStyle>
+  )
+}

frontend/components/Contributors/Contributors.style.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+export default styled.section`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`

frontend/components/NavBar/index.js

@@ -50,8 +50,19 @@ function Index(props) {
     >
       <Container maxWidth="xl">
         <Toolbar disableGutters="false">
-          <span><Logo /></span>
-          <Typography component={motion.div} initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} variant="h5" sx={{ fontWeight: 'bold', fontFamily: "'Montserrat Alternates', sans-serif;" }}>
+          <span>
+            <Logo />
+          </span>
+          <Typography
+            component={motion.div}
+            initial={{ y: -50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
+            variant="h5"
+            sx={{
+              fontWeight: 'bold',
+              fontFamily: "'Montserrat Alternates', sans-serif;",
+            }}
+          >
             UrlMiniFy
           </Typography>
           <Box
@@ -94,7 +105,11 @@ function Index(props) {
                   href="https://github.com/BRAVO68WEB/url-minify"
                   target={'_blank'}
                 >
-                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
+                  <Typography
+                    textAlign="center"
+                    variant="h6"
+                    sx={{ display: 'flex' }}
+                  >
                     <GitHubIcon fontSize="medium" />
                     GitHub
                   </Typography>
@@ -102,7 +117,11 @@ function Index(props) {
               </MenuItem>
               <MenuItem onClick={handleCloseNavMenu}>
                 <a href={NotFound}>
-                  <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
+                  <Typography
+                    textAlign="center"
+                    variant="h6"
+                    sx={{ display: 'flex' }}
+                  >
                     CREDITS
                   </Typography>
                 </a>
@@ -158,7 +177,7 @@ function Index(props) {
                   fontWeight: 'bold',
                 }}
               >
-                CREDITS
+                <Link href="./contributors">CREDITS</Link>
               </Button>
             </a>
           </Box>
@@ -198,16 +217,20 @@ function Index(props) {
               </Menu>
             </Box>
           ) : (
-            <Typography sx={{
-              color: 'white',
-              display: 'flex',
-              fontSize: 'h6.fontSize',
-              fontFamily: "'Open Sans', sans-serif;",
-              fontWeight: 'bold',
-            }} component={motion.div}
+            <Typography
+              sx={{
+                color: 'white',
+                display: 'flex',
+                fontSize: 'h6.fontSize',
+                fontFamily: "'Open Sans', sans-serif;",
+                fontWeight: 'bold',
+              }}
+              component={motion.div}
               initial={{ y: -50, opacity: 0 }}
               animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
-              whileHover={{ scale: 1.1, textShadow: '2px 2px black' }} onClick={login}>
+              whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
+              onClick={login}
+            >
               <Link href="./login">LOGIN</Link>
             </Typography>
           )}

frontend/nodemon.json

@@ -0,0 +1,6 @@
+{
+    "verbose": true,
+    "ignore": ["node_modules", ".next"],
+    "watch": ["server/**/*", "index.js"],
+    "ext": "js json"
+}

frontend/package.json

@@ -57,6 +57,7 @@
   },
   "homepage": "https://github.com/bravo68web/url-minify#readme",
   "devDependencies": {
+    "nodemon": "^2.0.15",
     "prettier": "2.5.1"
   }
 }

frontend/pages/contributors.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import Navbar from 'components/NavBar'
+import Contributors from 'components/Contributors/Contributors'
+function contributors() {
+  return (
+    <>
+      <main className={'main-bg'}>
+        <Navbar />
+        <Contributors />
+      </main>
+    </>
+  )
+}
+
+export default contributors

frontend/styles/Contributors.module.css

@@ -0,0 +1,10 @@
+.head {
+  font-family: 'Montserrat Alternates', sans-serif;
+  color: #fff;
+  /* text-shadow: 3px 2px 1px black; */
+  line-height: 1.15;
+  font-size: 5.5rem;
+  font-weight: bold;
+  margin-bottom:300px;
+  text-align: center;
+}