From d247eb0598eeaaabba6dd19b055c80bd031f3748 Mon Sep 17 00:00:00 2001
From: Akshit Garg <153659573+AkshitGarg24@users.noreply.github.com>
Date: Fri, 21 Jun 2024 03:08:43 +0530
Subject: [PATCH] Added Careers Page

---
 src/App.js                            |   3 +-
 src/Components/Careers/CareersPage.js | 162 +++++++++++++++++++
 src/Components/Careers/careers.css    | 219 ++++++++++++++++++++++++++
 3 files changed, 383 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Careers/CareersPage.js
 create mode 100644 src/Components/Careers/careers.css

diff --git a/src/App.js b/src/App.js
index a5bd593a..cb92a958 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,6 +20,7 @@ import Profile from "./Components/Profile/profile";
 import Licensing from "./Components/footer_section/Legal/Licensing";
 import TermsConditions from "./Components/footer_section/Legal/TermsandConditions";
 import PrivacyPolicy from "./Components/footer_section/Legal/PrivacyPolicy";
+import Careers from "./Components/Careers/CareersPage";
 
 function App() {
   return (
@@ -50,7 +51,7 @@ function App() {
           <Route path="/projects" element={<MyProjects />} />
           <Route path="/new/project" element={<NewProject />} />
           <Route path="/profile" element={<Profile />} />
-
+          <Route path="/careers" element={<Careers />} />
         </Routes>
         <Footer />
       </div>
diff --git a/src/Components/Careers/CareersPage.js b/src/Components/Careers/CareersPage.js
new file mode 100644
index 00000000..99a88ef4
--- /dev/null
+++ b/src/Components/Careers/CareersPage.js
@@ -0,0 +1,162 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch, faRocket, faHeart } from '@fortawesome/free-solid-svg-icons';
+import './careers.css'
+
+const careers = () => {
+  const handleResume = () => {
+    var link = "mailto:abc@unicollab.com"
+    window.location.href = link;
+  }
+  return (
+    <div className='body'>
+      <div className="container1Careers">
+        <div className="headingCareers1">Let's build from here, together</div>
+        <div className='descriptionCareers1'>Join our team and accelerate human progress through innovative developer collaboration.</div>
+        <div className="searchCareers1">
+          <input type="text" placeholder='Search for jobs by keyword' />
+          <button>Search</button>
+        </div>
+      </div>
+      <div className="container3Careers">
+        <div className="headingCareers2"><span className='textCareers'>Who we are.</span> What we believe.</div>
+        <div className="boxes2Careers">
+          <div className="box2aCareers">
+            <div className="Careers2aa">
+              <div className="Careers2abHeading">
+                <FontAwesomeIcon icon={faRocket} style={{ color: "#ffffff", fontSize: "30px" }} />
+                <span className='text2Careers'>What</span>
+              </div>
+              <div className="Careeers2abdesc">The premier developer platform for fostering collaboration and innovation.</div>
+            </div>
+            <div className="Careers2aa">
+              <div className="Careers2abHeading">
+                <FontAwesomeIcon icon={faSearch} style={{ color: "#ffffff", fontSize: "30px" }} />
+                <span className='text2Careers'>Why</span>
+              </div>
+              <div className="Careeers2abdesc">Accelerate human progress through developer collaboration.</div>
+            </div>
+          </div>
+          <div className="box2bCareers">
+            <div className="Careers2aa">
+              <div className="Careers2abHeading">
+                <FontAwesomeIcon icon={faHeart} style={{ color: "#ffffff", fontSize: "30px" }} />
+                <span className='text2Careers'>How</span>
+              </div>
+              <div className="Careeers2abdesc">Our values guide our interactions, decision-making, and how we engage with each other.</div>
+            </div>
+          </div>
+        </div>
+        <div className="boxes3Careers">
+          <div className="boxes3aCareers">
+            <div className="headingCareers3">UniCollab Values</div>
+            <div className="box3adesc">
+              <ul>
+                <li>Students-obsessed</li>
+                <li>Ship to learn</li>
+                <li>Growth mindset</li>
+                <li>Own the outcome</li>
+                <li>Better together</li>
+                <li>Diverse and inclusive</li>
+              </ul>
+            </div>
+          </div>
+          <div className="boxes3aCareers">
+            <div className="headingCareers3">Manager fundamentals</div>
+            <div className="box3adesc">
+              <ul>
+                <li>Model</li>
+                <li>Coach</li>
+                <li>Care</li>
+              </ul>
+            </div>
+          </div>
+          <div className="boxes3aCareers">
+            <div className="headingCareers3">Leadership principles</div>
+            <div className="box3adesc">
+              <ul>
+                <li>Create clarity</li>
+                <li>Generate energy</li>
+                <li>Deliver success</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container2Careers">
+        <div className="headingCareers2"><span className='textCareers'>UniCollab</span> is where the future works</div>
+        <div className="descriptionCareers2">Every day, we refine, iterate, and explore ways to improve work for everyone. Join us in creating a better future of work—one that is more connected, inclusive, and flexible.</div>
+        <div className="boxes1Careers">
+          <div className="box1Careers">
+            <svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"><path d="m29.976 46.4039c9.0928 0 16.464-7.3711 16.464-16.4639 0-9.0929-7.3712-16.464-16.464-16.464s-16.464 7.3711-16.464 16.464c0 9.0928 7.3712 16.4639 16.464 16.4639z"></path><path d="m26.46 1.52405h-21.396c-1.93521 0-3.504 1.56879-3.504 3.504v21.39595c0 1.9353 1.56879 3.504 3.504 3.504h21.396c1.9352 0 3.504-1.5687 3.504-3.504v-21.39595c0-1.93521-1.5688-3.504-3.504-3.504z"></path></g></svg>
+            <div className="headingCareers3">Connected</div>
+            <div className="descriptionCareers3">We come together wherever we are - across time zones, regions, offices and screens.</div>
+          </div>
+          <div className="box1Careers">
+            <svg width="48" height="48" fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+              <path d="m27.29 8.2a1 1 0 0 0 .33.05 1 1 0 0 0 .94-.66l1.19-3.44a1 1 0 0 0 -.05-.76.92.92 0 0 0 -.56-.5 1 1 0 0 0 -1.27.61l-1.19 3.43a1 1 0 0 0 0 .76 1 1 0 0 0 .61.51z" fill="#FFF"></path>
+              <path d="m23.65 7.93h.07a1 1 0 0 0 .68-.34 1 1 0 0 0 .24-.72l-.27-3.87a1 1 0 0 0 -1.06-.92 1 1 0 0 0 -.68.34 1 1 0 0 0 -.24.72l.27 3.86a1 1 0 0 0 .99.93z" fill="#FFF"></path>
+              <path d="m30.93 10.46a1 1 0 0 0 .74-.33l2.6-2.85a1 1 0 0 0 -.07-1.41 1 1 0 0 0 -1.4.07l-2.6 2.85a1 1 0 0 0 .06 1.41 1 1 0 0 0 .67.26z" fill="#FFF"></path>
+              <path d="m39.92 26.94a3.69 3.69 0 0 0 -3.7-3.2 5.81 5.81 0 0 0 -2.48.64v-7.5a3.71 3.71 0 0 0 -2.88-3.65 3.82 3.82 0 0 0 -.89-.07 3.64 3.64 0 0 0 -6.2.27 3.82 3.82 0 0 0 -.85.13v-1.8a3.72 3.72 0 0 0 -3.05-3.68h-.11a3.64 3.64 0 0 0 -3.58-3.31 3.64 3.64 0 0 0 -6.18-.29 4.53 4.53 0 0 0 -.89.08 3.7 3.7 0 0 0 -2.9 3.65v7.5a5.88 5.88 0 0 0 -2.48-.64 3.69 3.69 0 0 0 -3.73 3.19 3.85 3.85 0 0 0 3.1 4.23c1.12.31 3.42 2.71 4.65 4.31a8.34 8.34 0 0 0 7.3 3.51 8 8 0 0 0 2-.37v.48a8.49 8.49 0 0 0 7.85 8.58h.49a8.37 8.37 0 0 0 6.8-3.52c1.42-1.85 3.6-4 4.66-4.32a3.85 3.85 0 0 0 3.07-4.22zm-37.7-8.38a1.49 1.49 0 0 1 1.51-1.29 6.56 6.56 0 0 1 3.12 1.38 1 1 0 0 0 1 .07 1 1 0 0 0 .54-.89v-9.62a1.5 1.5 0 0 1 1.17-1.5 1 1 0 0 1 .39 0v8.29a1 1 0 0 0 2 0v-9.47a1.43 1.43 0 0 1 2-.08v9.76a1 1 0 1 0 2 0v-8.21a1.57 1.57 0 0 1 .53 0 1.37 1.37 0 0 1 1 .8v6.86a1 1 0 1 0 2 0v-4.42h.12a1.49 1.49 0 0 1 1.18 1.5v3.46a3.66 3.66 0 0 0 -.52 1.54l-.29.05a3.71 3.71 0 0 0 -2.97 3.65v7.15a6 6 0 0 1 -2.11.52h-.36a6.15 6.15 0 0 1 -5-2.62c-.14-.18-3.42-4.46-5.84-5.14-1.22-.35-1.56-1.14-1.47-1.79zm17 1.88a1.5 1.5 0 0 1 1.12-1.5v5.94a1 1 0 1 0 2 0v-7.8a1.43 1.43 0 0 1 1.44-1.44h.21v9.22a1 1 0 1 0 2 0v-10.75a1.44 1.44 0 0 1 1.79-.06v10.83a1 1 0 1 0 2 0v-9.49a1.57 1.57 0 0 1 .61 0 1.5 1.5 0 0 1 1.13 1.49v9.63a1 1 0 0 0 1 1 1 1 0 0 0 .56-.18 6.45 6.45 0 0 1 3.12-1.39 1.49 1.49 0 0 1 1.51 1.3c.09.64-.25 1.46-1.47 1.8-2.42.67-5.7 5-5.84 5.14a6.15 6.15 0 0 1 -5.4 2.61 6.28 6.28 0 0 1 -5.79-6.37z" fill="#FFF"></path>
+            </svg>
+
+            <div className="headingCareers3">Inclusive</div>
+            <div className="descriptionCareers3">Our teams reflect the rich diversity of our world, with equitable access to opportunity for everyone.</div>
+          </div>
+          <div className="box1Careers">
+            <svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
+              <g clipPath="url(#a)" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="3">
+                <path d="m24 1.5c-4.4501 0-8.8002 1.3196-12.5003 3.79194-3.70013 2.47233-6.58401 5.98636-8.28698 10.09766-1.70297 4.1114-2.14855 8.6354-1.28038 12.9999.86817 4.3646 3.01109 8.3737 6.15777 11.5204 3.14669 3.1467 7.15579 5.2896 11.52039 6.1578 4.3646.8681 8.8885.4226 12.9999-1.2804 4.1113-1.703 7.6253-4.5869 10.0977-8.287 2.4723-3.7001 3.7919-8.0502 3.7919-12.5003.0016-2.9552-.5793-5.8817-1.7095-8.6122-1.1302-2.7306-2.7874-5.2116-4.8771-7.30122-2.0896-2.08963-4.5706-3.74691-7.3011-4.87708-2.7306-1.13017-5.6571-1.71107-8.6123-1.7095z"></path>
+                <path d="m24 8.86804v2.29196"></path>
+                <path d="m13.296 13.2959 1.632 1.632"></path>
+                <path d="m8.86804 24h2.29196"></path>
+                <path d="m13.296 34.704 1.632-1.632"></path>
+                <path d="m24 39.132v-2.292"></path>
+                <path d="m34.704 34.704-1.632-1.632"></path>
+                <path d="m39.132 24h-2.292"></path>
+                <path d="m19.596 19.5959 4.404 4.404 10.704-10.704"></path>
+              </g>
+            </svg>
+
+            <div className="headingCareers3">Flexible</div>
+            <div className="descriptionCareers3">We believe in your freedom to work when and how you work best, to help us all thrive.</div>
+          </div>
+        </div>
+      </div>
+      <div className="container4Careers">
+        <div className="boxes4Careers">
+          <div className="box4desc">"Working at UniCollab has been transformative. The platform's commitment to fostering collaboration among students from different universities is inspiring. UniCollab values innovation and nurtures a supportive environment where ideas flourish. It's a privilege to shape the future of student collaboration here."</div>
+          <div className="writerCareers">- Taylor, Engineer</div>
+        </div>
+        <div className="boxes4Careers">
+          <div className="box4desc">"Joining UniCollab has been rewarding. The platform's dedication to breaking down barriers between universities and promoting knowledge sharing is unmatched. UniCollab's emphasis on creativity and teamwork has empowered me to grow both personally and professionally. It's exciting to contribute to revolutionizing how students learn and innovate together."</div>
+          <div className="writerCareers">- Stanley, Information Technology</div>
+        </div>
+      </div>
+      <div className="container5Careers">
+        <div className="headingCareers2"><span className='textCareers'>Open</span> Positions</div>
+        <div className='descriptionCareers1'>Explore our open roles for working totally remotely, from the office or somewhere in between.</div>
+        <div className="openingsCareers">
+          <div className="openCareers">
+            <span>1. Software Engineer</span>
+            <span>-</span>
+            <span className='location'>Mumbai, India / Remote</span>
+          </div>
+          <div className="openCareers">
+            <span>2. Graphic Designer</span>
+            <span>-</span>
+            <span className='location'>Gurgaon, India / Remote</span>
+          </div>
+          <div className="openCareers">
+            <span>3. Data Analyst</span>
+            <span>-</span>
+            <span className='location'>Banglore, India / Remote</span>
+          </div>
+        </div>
+      </div>
+      <button className='submitCareers' onClick={handleResume}>Send Your Job-Application @UniCollab</button>
+    </div>
+  )
+}
+
+export default careers
diff --git a/src/Components/Careers/careers.css b/src/Components/Careers/careers.css
new file mode 100644
index 00000000..5f3fe865
--- /dev/null
+++ b/src/Components/Careers/careers.css
@@ -0,0 +1,219 @@
+.container1Careers {
+    width: 100vw;
+    height: 450px;
+}
+
+.body {
+    margin: 70px 0px;
+    font-family: sans-serif
+}
+
+.headingCareers1 {
+    font-size: 90px;
+    line-height: 96px;
+    font-weight: 900;
+    width: 1200px;
+    margin: auto;
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.descriptionCareers1 {
+    font-size: 20px;
+    color: #cccccc;
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.searchCareers1 {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+}
+
+.searchCareers1 input {
+    width: 500px;
+    margin: 0;
+    font-weight: bold;
+}
+
+.searchCareers1 button {
+    height: 40px;
+}
+
+.container2Careers {
+    width: 100vw;
+    height: 600px;
+}
+
+.headingCareers2 {
+    text-align: center;
+    font-size: 45px;
+    font-weight: 900;
+    margin-bottom: 40px;
+}
+
+.textCareers {
+    color: #ff21bc;
+}
+
+.descriptionCareers2 {
+    margin: auto;
+    width: 1000px;
+    text-align: center;
+    font-size: 20px;
+    color: #cccccc;
+    margin-bottom: 40px;
+}
+
+.boxes1Careers {
+    width: 92vw;
+    margin: auto;
+    height: 450px;
+    display: flex;
+}
+
+.box1Careers {
+    width: 100%;
+    padding: 45px;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+}
+
+.headingCareers3 {
+    font-size: 25px;
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.descriptionCareers3 {
+    text-align: justify;
+    line-height: 26px;
+    font-size: 18px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.container3Careers {
+    margin-bottom: 70px;
+}
+
+.boxes2Careers {
+    height: 400px;
+    width: 90vw;
+    margin: auto;
+    margin-bottom: 40px;
+}
+
+.box2aCareers {
+    height: 225px;
+    display: flex;
+}
+
+.Careers2aa{
+    width: 100%;
+    height: 175px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.text2Careers{
+    color: white;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: underline;
+}
+.Careers2abHeading{
+    display: flex;
+    gap: 15px;
+}
+.Careeers2abdesc{
+    font-size: 20px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    text-align: center;
+}
+.boxes3Careers{
+    height: 350px;
+    width: 85vw;
+    margin: auto;
+    display: flex;
+}
+.boxes3aCareers{
+    width: 100%;
+    height: 400px;
+    padding: 45px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.box3adesc{
+    font-size: 20px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    line-height: 32px;
+    
+}
+.box3adesc ul li{
+    list-style: disc;
+    list-style-position: inside;
+    color: #cccccc;
+}
+.container4Careers{
+    height: 500px;
+    margin: auto;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 100px;
+}
+.boxes4Careers{
+    width: 652px;
+    height: 500px;
+    outline: 5px solid #ff6347;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    background-color: #13093d;
+    border-radius: 50px;
+}
+.box4desc{
+    text-align: justify;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 45px;
+}
+.writerCareers{
+    font-size: 30px;
+    font-weight: bold;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    color: #ff21bc;
+}
+.container5Careers{
+    width: 90vw;
+    height: 300px;
+    margin: auto;
+    margin-bottom: 100px;
+}
+.openingsCareers{
+    padding: 0 50px;
+}
+.openCareers{
+    display: flex;
+    gap: 50px;
+    margin-bottom: 15px;
+}
+.openCareers span{
+    color: white;
+    font-size: 20px;
+}
+.location{
+    color: #cccccc !important;
+    font-style: italic;
+}
+.submitCareers{
+    width: 80vw;
+    height: 80px;
+    font-size: 40px;
+    font-weight: bolder;
+    margin: auto;
+    
+}
\ No newline at end of file