Add Jobs/internship page

package.json

@@ -41,4 +41,4 @@
     "tailwindcss": "^3.0.24",
     "vite": "^2.9.9"
   }
-}
+}

src/components/Community/CommunityElements.jsx

@@ -10,6 +10,7 @@ export const Header = styled.header`
   justify-content: center;
   align-items: center;
   height: 100vh;
+  position: relative;
 `;
 
 export const Overlay = styled.div`

src/components/Homepage/Info/Info.jsx

@@ -20,7 +20,7 @@ import {
     Img,
     ScrollText,
 } from "./InfoElements";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const InfoSection = ({
                          id,

src/components/Prep/Jobs/Job.jsx

@@ -0,0 +1,71 @@
+import {
+  JobContainer,
+  JobHero,
+  JobHeader,
+  JobTitle,
+  JobRole,
+  JobRoleTitle,
+  JobRating,
+  JobLocation,
+  JobDetails,
+  JobReq,
+  JobTimeline,
+} from "./JobsElements";
+
+import { FaEllipsisV } from "react-icons/fa";
+
+export default function Job(props) {
+  return (
+    <>
+      <JobContainer>
+        <JobHero>
+          <JobHeader>
+            {props.status && <span className="status">{props.status}</span>}
+            <JobTitle>{props.jobTitle}</JobTitle>
+            <JobRole>
+              <JobRoleTitle>{props.jobRoleTitle}</JobRoleTitle>
+              <JobRating>{props.jobRating}</JobRating>
+            </JobRole>
+            <JobLocation>
+              <span>{props.jobLocation}</span>
+            </JobLocation>
+          </JobHeader>
+          <FaEllipsisV />
+        </JobHero>
+        <JobDetails>
+          {props.jobDetails.map((item, i) => (
+            <div key={i}>
+              <span>{item.item}</span>
+              {item.badge && (
+                <div className="badge">
+                  <span>{item.badge}</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </JobDetails>
+        <JobDetails>
+          {props.jobDetails2.map((item, i) => (
+            <div key={i}>
+              <span>{item}</span>
+            </div>
+          ))}
+        </JobDetails>
+        <JobReq>
+          <ul>
+            {props.jobReq.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </JobReq>
+        <JobTimeline>
+          <span>{props.jobTimeline.datePosted}</span>
+          <span className="dot">{props.jobTimeline.separator}</span>
+          <span>
+            From <span className="remote">{props.jobTimeline.directory}</span>
+          </span>
+        </JobTimeline>
+      </JobContainer>
+    </>
+  );
+}

src/components/Prep/Jobs/Jobs.jsx

@@ -1,14 +1,70 @@
-import React from 'react';
-import {Section} from "../../Resources/WriteUps/WriteUpsElements";
+import { useState, useCallback } from "react";
+import { Link as ScrollLink } from "react-scroll";
+
+import {
+  Overlay,
+  Container,
+  Heading,
+  Paragraph,
+} from "../../Community/CommunityElements";
+import { ScrollButton, JobIntroHeader } from "./JobsElements";
+
+import Job from "./Job";
+import { JobsData } from "./JobsData";
+import { JobSection } from "./JobsElements";
+
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { auto } from "@popperjs/core";
 
 const Jobs = () => {
-    return (
-        <Section>
-            <h1>
-                Under Development
-            </h1>
-        </Section>
-    );
+  const [viewMore, setViewMore] = useState(false);
+
+  const toggleViewMore = useCallback(() => {
+    setViewMore((prevView) => !prevView);
+  }, []);
+
+  const allJobs = JobsData.map((data) => <Job key={data.id} {...data} />);
+
+  return (
+    <JobSection viewMore={viewMore}>
+      <JobIntroHeader>
+        <Overlay></Overlay>
+        <Container>
+          <Heading>
+            Searching for a job? <br /> Look no futher!
+          </Heading>
+          <Paragraph>
+            We have collated several areas/field where there are job
+            vacancy(ies). <br /> Go through the <span>Job Section</span>, and
+            find one that is best match for you.
+          </Paragraph>
+          <ScrollLink
+            to={"jobs"}
+            smooth={true}
+            duration={600}
+            spy={true}
+            exact={"true"}
+            offset={-80}
+          >
+            <ScrollButton>
+              <FaChevronDown />
+              <span>Find A Job</span>
+            </ScrollButton>
+          </ScrollLink>
+        </Container>
+      </JobIntroHeader>
+      <div id="jobs" className="grid">
+        {allJobs}
+      </div>
+      <button className="view" onClick={toggleViewMore}>
+        {!viewMore ? (
+          <FaChevronDown size={20} style={{ color: "white" }} />
+        ) : (
+          <FaChevronUp size={20} style={{ color: "white" }} />
+        )}
+      </button>
+    </JobSection>
+  );
 };
 
-export default Jobs;
+export default Jobs;