Merge pull request #13 from cherryontech/roadmap-updates

cherryontech · Dec 1, 2023 · a7d3ba7 · a7d3ba7
2 parents 9b80aa1 + 55cbff0
commit a7d3ba7
Show file tree

Hide file tree

Showing 11 changed files with 339 additions and 58 deletions.
diff --git a/src/components/FreeflowingCard/index.jsx b/src/components/FreeflowingCard/index.jsx
@@ -8,21 +8,27 @@ export const FreeflowingCard = ({ cardName, cardUrl }) => {
   const navigateTo = useNavigate();
 
   const checkIfLoggedIn = () => {
-    if (localStorage.getItem("jobQuestEmail")) {
-      navigateTo(`/${cardUrl}`); //navigate to taskCard
+    const loginStatus = localStorage.getItem("loginStatus");
+
+    if (loginStatus === "true") {
+      navigateTo(`/${cardUrl}`);
     } else {
       //to-do: show user alert that they need to login
       navigateTo("/login");
     }
   };
 
   return (
-    <Card className="card-div cursor-pointer" onClick={() => checkIfLoggedIn()}>
-      <CardBody>
-        <PercentageScore />
-        <p className="card-name">{cardName}</p>
-      </CardBody>
-    </Card>
+    <div onClick={() => checkIfLoggedIn()}>
+      <Card className={`card-div cursor-pointer ${cardUrl}`}>
+        <CardBody>
+          <div style={{ width: '0%', height: '10%', position: 'relative', top: '7.8%', left: '72%', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', display: 'inline-flex' }}>
+            <PercentageScore />
+          </div>
+          <p className="card-name">{cardName}</p>
+        </CardBody>
+      </Card>
+    </div>
   );
 };
 

diff --git a/src/components/FreeflowingCard/style.css b/src/components/FreeflowingCard/style.css
@@ -1,32 +1,64 @@
 .card-name {
-    color: #25274c;
-    text-align: center;
-    font-family: Inter;
-    font-size: 32px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 34px; /* 75% */
-    letter-spacing: 1.6px;
-    word-wrap: 'break-word';
-    position: relative;
-    top: 44%;
-    transform: translateY(-50%);
-  }
-  .card-div {
-    border-radius: 24px;
-    border: 2px solid #ff6667;
-    background: linear-gradient(
-      180deg,
-      rgba(247, 216, 217, 0.4) 42.08%,
-      rgba(21, 131, 255, 0.2) 100%
-    );
-    width: 240px;
-    height: 240px;
-    flex-shrink: 0;
-    margin: 20px;
-  }
-
-  .card-div:hover {
-    box-shadow: -4px 7px 4px #1910A5;
-  }
-
+  color: #25274c;
+  text-align: center;
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 36px; /* 75% */
+  letter-spacing: 0.6px;
+  word-wrap: "break-word";
+  position: relative;
+  top: 42%;
+  transform: translateY(-50%);
+}
+.card-div {
+  border-radius: 24px;
+  width: 240px;
+  height: 240px;
+  flex-shrink: 0;
+  margin: 24px;
+  padding-left : 8px; 
+  padding-right: 6px;
+}
+
+.linkedin {
+  border: 2px solid #ff6667;
+  background: linear-gradient(
+    180deg,
+    rgba(247, 216, 217, 0.4) 42.08%,
+    rgba(21, 131, 255, 0.2) 100%
+  );
+}
+
+.resume {
+  border: 2px solid #3e7cd9;
+  background: linear-gradient(
+    0deg,
+    rgba(149, 189, 250, 0.1) 19.17%,
+    rgba(27, 121, 227, 0.25) 77.08%
+  );
+}
+
+.interview-prep {
+border: 2px solid #36CC96;
+background: linear-gradient(0deg, rgba(207, 237, 226, 0.40) 42.5%, rgba(27, 121, 227, 0.20) 73.12%);
+}
+
+.application-advice {
+border: 2px solid #1910A5;
+background: linear-gradient(0deg, rgba(10, 196, 207, 0.20) 32.15%, rgba(49, 146, 255, 0.20) 80.63%);
+}
+
+.job-searching-tips {
+border: 2px solid #CF3C84;
+background: linear-gradient(0deg, rgba(244, 191, 216, 0.30) 40.63%, rgba(48, 145, 255, 0.15) 84.58%);
+}
+
+.bonus-tasks {
+border: 2px solid #6536EC;
+background: linear-gradient(0deg, rgba(204, 188, 240, 0.40) 43.54%, rgba(45, 144, 255, 0.15) 75.21%);
+}
+.card-div:hover {
+  box-shadow: -4px 7px 4px #1910a5;
+}
diff --git a/src/components/LinearPathCard/index.jsx b/src/components/LinearPathCard/index.jsx
@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import { Card, CardBody } from "@nextui-org/react";
+import { PercentageScore } from "../PercentageScore";
+import "./style.css";
+
+export const LinearPathCard = ({ cardName, cardUrl }) => {
+
+  return (
+    <Card className={`linearpath-card-div ${cardUrl}`}>
+      <CardBody>
+      <div style={{ width: '0%', height: '10%', position: 'relative', top: '8.8%', left: '86%', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', display: 'inline-flex' }}>
+        <PercentageScore />
+        </div>
+          <p className="linearpath-card-name">{cardName}</p>
+        </CardBody>
+      </Card>
+  );
+};
+
+LinearPathCard.propTypes = {
+  cardName: PropTypes.string,
+  cardUrl: PropTypes.string,
+};
diff --git a/src/components/LinearPathCard/style.css b/src/components/LinearPathCard/style.css
@@ -0,0 +1,62 @@
+.linearpath-card-name {
+    color: #25274c;
+    text-align: center;
+    font-family: Inter;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 36px; /* 75% */
+    letter-spacing: 0.6px;
+    word-wrap: 'break-word';
+    position: relative;
+    top: 44%;
+    transform: translateY(-50%);
+  }
+  .linearpath-card-div {
+    border-radius: 24px;
+    width: 600px;
+    height: 240px;
+    flex-shrink: 0;
+    margin: 48px;
+    /* top: 50%; */
+  }
+  .linkedin {
+    border: 2px solid #ff6667;
+    background: linear-gradient(
+      180deg,
+      rgba(247, 216, 217, 0.4) 42.08%,
+      rgba(21, 131, 255, 0.2) 100%
+    );
+  }
+
+  .resume {
+    border: 2px solid #3e7cd9;
+    background: linear-gradient(
+      0deg,
+      rgba(149, 189, 250, 0.1) 19.17%,
+      rgba(27, 121, 227, 0.25) 77.08%
+    );
+  }
+
+  .interview-prep {
+  border: 2px solid #36CC96;
+  background: linear-gradient(0deg, rgba(207, 237, 226, 0.40) 42.5%, rgba(27, 121, 227, 0.20) 73.12%);
+  }
+
+  .application-advice {
+  border: 2px solid #1910A5;
+  background: linear-gradient(0deg, rgba(10, 196, 207, 0.20) 32.15%, rgba(49, 146, 255, 0.20) 80.63%);
+  }
+
+  .job-searching-tips {
+  border: 2px solid #CF3C84;
+  background: linear-gradient(0deg, rgba(244, 191, 216, 0.30) 40.63%, rgba(48, 145, 255, 0.15) 84.58%);
+  }
+
+  .bonus-tasks {
+  border: 2px solid #6536EC;
+  background: linear-gradient(0deg, rgba(204, 188, 240, 0.40) 43.54%, rgba(45, 144, 255, 0.15) 75.21%);
+  }
+  .linearpath-card-div:hover {
+    box-shadow: 0px 7px 4px #1910A5;
+  }
diff --git a/src/components/NavigationBar/index.jsx b/src/components/NavigationBar/index.jsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  Button,
+} from "@nextui-org/react";
+import "./style.css";
+import { useNavigate } from "react-router-dom";
+
+export const NavigationBar = () => {
+  const navigateTo = useNavigate();
+  const [isLoggedin, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    const loginStatus = localStorage.getItem("loginStatus"); //this will always return a string so it needs to be coerced
+    setIsLoggedIn(loginStatus === "true");
+  }, []);
+
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <div
+          className="logo-text cursor-pointer"
+          onClick={() => navigateTo("/")}
+        >
+          Job Quest
+        </div>
+      </NavbarBrand>
+
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        {isLoggedin ? (
+          <NavbarItem className="nav-button mt-5">
+            <Button 
+            onClick={() => {
+              localStorage.setItem("loginStatus", false);
+              navigateTo("/login");
+            }}
+            className="signup-text">
+              Log Out
+            </Button>
+          </NavbarItem>
+        ) : (
+          <>
+            <NavbarItem className="nav-button mt-5">
+              <Link color="login" href="/login" className="login-text">
+                Login
+              </Link>
+            </NavbarItem>
+            <NavbarItem className="nav-button mt-5">
+              <Button as={Link} href="/signup" className="signup-text">
+                Sign Up
+              </Button>
+            </NavbarItem>
+          </>
+        )}
+      </NavbarContent>
+    </Navbar>
+  );
+};
+
+NavigationBar.propTypes = {
+  isLoggedin: PropTypes.boolean,
+};
diff --git a/src/components/NavigationBar/style.css b/src/components/NavigationBar/style.css
@@ -0,0 +1,44 @@
+.logo-text {
+  color: #001561;
+  text-align: center;
+  font-family: Lato;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 20px; /* 62.5% */
+}
+
+.login-text {
+text-align: center;
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 700;
+line-height: normal;
+background: #090459;
+background-clip: text;
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+}
+
+.signup-text {
+  color: #090459;
+  text-align: center;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  border-radius: 10px;
+  border: 2px solid #090459;
+  background: #FFF;
+}
+
+.nav-button {
+  display: flex;
+  width: 86px;
+  height: 32px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
diff --git a/src/components/PercentageScore/index.jsx b/src/components/PercentageScore/index.jsx
@@ -1,14 +1,22 @@
-
+// export const PercentageScore = () => {
+//     return (
+//         <div style={{ width: '0%', height: '10%', position: 'relative', top: '0.2%', left: '72%', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', display: 'inline-flex' }}>
+//         <div style={{paddingTop: '3.5rem', paddingRight: '0.2rem', marginRight: '0.2rem', justifyContent: 'center', position: 'absolute', alignItems: 'center', display: 'inline-flex'}}>
+//             <div style={{width: 50, height: 50, position: 'relative'}}>
+//                 <div style={{position: 'relative', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', color: '#34365C', fontSize: 14, fontFamily: 'Inter', fontWeight: '500', lineHeight: 20, wordWrap: 'break-word'}}>80%</div>
+//                 <div style={{width: 50, height: 50, left: 0, top: 0, position: 'absolute', borderRadius: 99, border: '6px rgba(37, 39, 76, 0.20) solid'}} />
+//                 <div style={{width: 50, height: 50, left: 0, top: 0, position: 'absolute', borderRadius: 99, border: '6px #34365C solid'}} />
+//             </div>
+//         </div>
+//     </div>
+//     )
+// }
 export const PercentageScore = () => {
-    return(
-        <div style={{ width: '10%', height: '10%', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start', gap: 10, display: 'inline-flex' }}>
-        <div style={{paddingTop: 26, paddingLeft: 164, justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}>
+    return (
             <div style={{width: 50, height: 50, position: 'relative'}}>
                 <div style={{position: 'relative', top: '50%', transform: 'translateY(-50%)', textAlign: 'center', color: '#34365C', fontSize: 14, fontFamily: 'Inter', fontWeight: '500', lineHeight: 20, wordWrap: 'break-word'}}>80%</div>
                 <div style={{width: 50, height: 50, left: 0, top: 0, position: 'absolute', borderRadius: 99, border: '6px rgba(37, 39, 76, 0.20) solid'}} />
                 <div style={{width: 50, height: 50, left: 0, top: 0, position: 'absolute', borderRadius: 99, border: '6px #34365C solid'}} />
             </div>
-        </div>
-    </div>
     )
 }
diff --git a/src/pages/LandingPage/index.jsx b/src/pages/LandingPage/index.jsx
@@ -2,6 +2,7 @@ import { Buttons } from "../../components/Buttons";
 import "./style.css";
 import finalHomepage from "../../assets/finalHomepage.png"
 import { useNavigate } from "react-router-dom";
+import { NavigationBar } from "../../components/NavigationBar";
 
 export const LandingPage = () => {
   const navigateTo = useNavigate()
@@ -11,7 +12,7 @@ export const LandingPage = () => {
       <div className="div">
         <div className="top-nav-bar">
           <div className="div-wrapper">
-            <div className="text-wrapper">Job Quest</div>
+          <NavigationBar />
           </div>
         </div>
         <div className="overlap">