Skip to content

Commit 13e447f

Browse files
SUGAM-ARORASUGAM-ARORA
authored
Merge pull request #691 from Ayushmaanagarwal1211/main
Created a Completely Responsive Carreers Page
2 parents 6c13c74 + 9e911d3 commit 13e447f

File tree

2 files changed

+200
-57
lines changed

2 files changed

+200
-57
lines changed

‎src/Components/Careers/CareersPage.js

Lines changed: 149 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,77 @@
1-
import React from 'react'
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import { faSearch, faRocket, faHeart } from '@fortawesome/free-solid-svg-icons';
4-
import './careers.css'
5-
import homeIcon from '../../img/homeicon.png';
6-
import { Link } from 'react-router-dom';
7-
1+
import React from "react";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import { faSearch, faRocket, faHeart } from "@fortawesome/free-solid-svg-icons";
4+
import "./careers.css";
5+
import homeIcon from "../../img/homeicon.png";
6+
import { Link } from "react-router-dom";
87

98
const careers = () => {
109
const handleResume = () => {
11-
var link = "mailto:[email protected]"
10+
var link = "mailto:[email protected]";
1211
window.location.href = link;
13-
}
12+
};
1413
return (
1514
<>
1615
<Link to="/">
1716
<img src={homeIcon} alt="Home" className="home-icon" />
1817
</Link>
19-
<div className='body'>
20-
18+
<div className="body">
2119
<div className="container1Careers">
2220
<div className="headingCareers1">Let's build from here, together</div>
23-
<div className='descriptionCareers1'>Join our team and accelerate human progress through innovative developer collaboration.</div>
21+
<div className="descriptionCareers1">
22+
Join our team and accelerate human progress through innovative
23+
developer collaboration.
24+
</div>
2425
<div className="searchCareers1">
25-
<input type="text" placeholder='Search for jobs by keyword' />
26+
<input type="text" placeholder="Search for jobs by keyword" />
2627
<button>Search</button>
2728
</div>
2829
</div>
2930
<div className="container3Careers">
30-
<div className="headingCareers2"><span className='textCareers'>Who we are.</span> What we believe.</div>
31+
<div className="headingCareers2">
32+
<span className="textCareers">Who we are.</span> What we believe.
33+
</div>
3134
<div className="boxes2Careers">
3235
<div className="box2aCareers">
3336
<div className="Careers2aa">
3437
<div className="Careers2abHeading">
35-
<FontAwesomeIcon icon={faRocket} style={{ color: "#ffffff", fontSize: "30px" }} />
36-
<span className='text2Careers'>What</span>
38+
<FontAwesomeIcon
39+
icon={faRocket}
40+
style={{ color: "#ffffff", fontSize: "30px" }}
41+
/>
42+
<span className="text2Careers">What</span>
43+
</div>
44+
<div className="Careeers2abdesc">
45+
The premier developer platform for fostering collaboration and
46+
innovation.
3747
</div>
38-
<div className="Careeers2abdesc">The premier developer platform for fostering collaboration and innovation.</div>
3948
</div>
4049
<div className="Careers2aa">
4150
<div className="Careers2abHeading">
42-
<FontAwesomeIcon icon={faSearch} style={{ color: "#ffffff", fontSize: "30px" }} />
43-
<span className='text2Careers'>Why</span>
51+
<FontAwesomeIcon
52+
icon={faSearch}
53+
style={{ color: "#ffffff", fontSize: "30px" }}
54+
/>
55+
<span className="text2Careers">Why</span>
56+
</div>
57+
<div className="Careeers2abdesc">
58+
Accelerate human progress through developer collaboration.
4459
</div>
45-
<div className="Careeers2abdesc">Accelerate human progress through developer collaboration.</div>
4660
</div>
4761
</div>
4862
<div className="box2bCareers">
4963
<div className="Careers2aa">
5064
<div className="Careers2abHeading">
51-
<FontAwesomeIcon icon={faHeart} style={{ color: "#ffffff", fontSize: "30px" }} />
52-
<span className='text2Careers'>How</span>
65+
<FontAwesomeIcon
66+
icon={faHeart}
67+
style={{ color: "#ffffff", fontSize: "30px" }}
68+
/>
69+
<span className="text2Careers">How</span>
70+
</div>
71+
<div className="Careeers2abdesc">
72+
Our values guide our interactions, decision-making, and how we
73+
engage with each other.
5374
</div>
54-
<div className="Careeers2abdesc">Our values guide our interactions, decision-making, and how we engage with each other.</div>
5575
</div>
5676
</div>
5777
</div>
@@ -92,28 +112,87 @@ const careers = () => {
92112
</div>
93113
</div>
94114
<div className="container2Careers">
95-
<div className="headingCareers2"><span className='textCareers'>UniCollab</span> is where the future works</div>
96-
<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>
115+
<div className="headingCareers2">
116+
<span className="textCareers">UniCollab</span> is where the future
117+
works
118+
</div>
119+
<div className="descriptionCareers2">
120+
Every day, we refine, iterate, and explore ways to improve work for
121+
everyone. Join us in creating a better future of work—one that is
122+
more connected, inclusive, and flexible.
123+
</div>
97124
<div className="boxes1Careers">
98125
<div className="box1Careers">
99-
<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>
126+
<svg
127+
fill="none"
128+
height="48"
129+
viewBox="0 0 48 48"
130+
width="48"
131+
xmlns="http://www.w3.org/2000/svg"
132+
>
133+
<g
134+
stroke="#fff"
135+
stroke-linecap="round"
136+
stroke-linejoin="round"
137+
stroke-width="3"
138+
>
139+
<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>
140+
<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>
141+
</g>
142+
</svg>
100143
<div className="headingCareers3">Connected</div>
101-
<div className="descriptionCareers3">We come together wherever we are - across time zones, regions, offices and screens.</div>
144+
<div className="descriptionCareers3">
145+
We come together wherever we are - across time zones, regions,
146+
offices and screens.
147+
</div>
102148
</div>
103149
<div className="box1Careers">
104-
<svg width="48" height="48" fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
105-
<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>
106-
<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>
107-
<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>
108-
<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>
150+
<svg
151+
width="48"
152+
height="48"
153+
fill="none"
154+
viewBox="0 0 40 40"
155+
xmlns="http://www.w3.org/2000/svg"
156+
>
157+
<path
158+
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"
159+
fill="#FFF"
160+
></path>
161+
<path
162+
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"
163+
fill="#FFF"
164+
></path>
165+
<path
166+
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"
167+
fill="#FFF"
168+
></path>
169+
<path
170+
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"
171+
fill="#FFF"
172+
></path>
109173
</svg>
110174

111175
<div className="headingCareers3">Inclusive</div>
112-
<div className="descriptionCareers3">Our teams reflect the rich diversity of our world, with equitable access to opportunity for everyone.</div>
176+
<div className="descriptionCareers3">
177+
Our teams reflect the rich diversity of our world, with
178+
equitable access to opportunity for everyone.
179+
</div>
113180
</div>
114181
<div className="box1Careers">
115-
<svg fill="none" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
116-
<g clipPath="url(#a)" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="3">
182+
<svg
183+
fill="none"
184+
height="48"
185+
viewBox="0 0 48 48"
186+
width="48"
187+
xmlns="http://www.w3.org/2000/svg"
188+
>
189+
<g
190+
clipPath="url(#a)"
191+
stroke="#fff"
192+
strokeLinecap="round"
193+
strokeLinejoin="round"
194+
strokeWidth="3"
195+
>
117196
<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>
118197
<path d="m24 8.86804v2.29196"></path>
119198
<path d="m13.296 13.2959 1.632 1.632"></path>
@@ -127,45 +206,68 @@ const careers = () => {
127206
</svg>
128207

129208
<div className="headingCareers3">Flexible</div>
130-
<div className="descriptionCareers3">We believe in your freedom to work when and how you work best, to help us all thrive.</div>
209+
<div className="descriptionCareers3">
210+
We believe in your freedom to work when and how you work best,
211+
to help us all thrive.
212+
</div>
131213
</div>
132214
</div>
133215
</div>
134216
<div className="container4Careers">
135217
<div className="boxes4Careers">
136-
<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>
218+
<div className="box4desc">
219+
"Working at UniCollab has been transformative. The platform's
220+
commitment to fostering collaboration among students from
221+
different universities is inspiring. UniCollab values innovation
222+
and nurtures a supportive environment where ideas flourish. It's a
223+
privilege to shape the future of student collaboration here."
224+
</div>
137225
<div className="writerCareers">- Taylor, Engineer</div>
138226
</div>
139227
<div className="boxes4Careers">
140-
<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>
228+
<div className="box4desc">
229+
"Joining UniCollab has been rewarding. The platform's dedication
230+
to breaking down barriers between universities and promoting
231+
knowledge sharing is unmatched. UniCollab's emphasis on creativity
232+
and teamwork has empowered me to grow both personally and
233+
professionally. It's exciting to contribute to revolutionizing how
234+
students learn and innovate together."
235+
</div>
141236
<div className="writerCareers">- Stanley, Designer</div>
142237
</div>
143238
</div>
144239
<div className="container5Careers">
145-
<div className="headingCareers2"><span className='textCareers'>Open</span> Positions</div>
146-
<div className='descriptionCareers1'>Explore our open roles for working totally remotely, from the office or somewhere in between.</div>
240+
<div className="headingCareers2">
241+
<span className="textCareers">Open</span> Positions
242+
</div>
243+
<div className="descriptionCareers1">
244+
Explore our open roles for working totally remotely, from the office
245+
or somewhere in between.
246+
</div>
147247
<div className="openingsCareers">
148248
<div className="openCareers">
149249
<span>1. Software Engineer</span>
150250
<span>-</span>
151-
<span className='location'>Mumbai, India / Remote</span>
251+
<span className="location">Mumbai, India / Remote</span>
152252
</div>
153253
<div className="openCareers">
154254
<span>2. Graphic Designer</span>
155255
<span>-</span>
156-
<span className='location'>Gurgaon, India / Remote</span>
256+
<span className="location">Gurgaon, India / Remote</span>
157257
</div>
158258
<div className="openCareers">
159259
<span>3. Data Analyst</span>
160260
<span>-</span>
161-
<span className='location'>Banglore, India / Remote</span>
261+
<span className="location">Banglore, India / Remote</span>
162262
</div>
163263
</div>
164264
</div>
165-
<button className='submitCareers' onClick={handleResume}>Send Your Job-Application @UniCollab</button>
265+
<button className="submitCareers" onClick={handleResume}>
266+
Send Your Job-Application @UniCollab
267+
</button>
166268
</div>
167269
</>
168-
)
169-
}
270+
);
271+
};
170272

171-
export default careers
273+
export default careers;

0 commit comments

Comments
 (0)