Careers

0import React, { useEffect, useState } from "react";
1import Link from "next/link";
2
3const ClockIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path
11        fillRule="evenodd"
12        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z"
13        clipRule="evenodd"
14      />
15    </svg>
16  );
17};
18
19const LocationIcon = ({ className }) => {
20  return (
21    <svg
22      xmlns="http://www.w3.org/2000/svg"
23      viewBox="0 0 24 24"
24      className={className}
25    >
26      <path
27        fillRule="evenodd"
28        d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
29        clipRule="evenodd"
30      />
31    </svg>
32  );
33};
34
35interface ILocation {
36  country: string;
37  city: string;
38  state: string;
39}
40
41interface ICareers {
42  position: string;
43  location: ILocation;
44  hours: string;
45  link: string;
46  keywords: string;
47}
48
49// object for mapping careers onto the page. Extra objects have been added to make a more powerful search
50const careersData: ICareers[] = [
51  {
52    position: "Front-end Developer",
53    location: { country: "Virtual", state: "NA", city: "Online" },
54    hours: "Full-time",
55    link: "#",
56    keywords: "web developer javascript css",
57  },
58  {
59    position: "UI/UX Designer",
60    location: { country: "Canada", state: "Quebec", city: "Montreal" },
61    hours: "Full-time",
62    link: "#",
63    keywords: "sketch adobe xd user interface",
64  },
65  {
66    position: "Product Designer",
67    location: {
68      country: "United States",
69      state: "California",
70      city: "San Francisco",
71    },
72    hours: "Part-time",
73    link: "#",
74    keywords: "design thinking user research wireframing",
75  },
76  {
77    position: "Project Manager",
78    location: {
79      country: "United States",
80      state: "Florida",
81      city: "Miami",
82    },
83    hours: "Full-time",
84    link: "#",
85    keywords: "agile team leadership communication",
86  },
87  {
88    position: "Back-end Developer",
89    location: { country: "Virtual", state: "NA", city: "Online" },
90    hours: "Part-time",
91    link: "#",
92    keywords: "python java database",
93  },
94  {
95    position: "UI/UX Designer",
96    location: {
97      country: "Canada",
98      state: "Alberta",
99      city: "Calgary",
100    },
101    hours: "Full-time",
102    link: "#",
103    keywords: "user experience prototyping design system",
104  },
105  {
106    position: "Front-end Developer",
107    location: { country: "Virtual", state: "NA", city: "Online" },
108    hours: "Full-time",
109    link: "#",
110    keywords: "web developer javascript css",
111  },
112  {
113    position: "UI/UX Designer",
114    location: { country: "Canada", state: "Quebec", city: "Montreal" },
115    hours: "Full-time",
116    link: "#",
117    keywords: "sketch adobe xd user interface",
118  },
119  {
120    position: "Product Designer",
121    location: {
122      country: "United States",
123      state: "California",
124      city: "San Francisco",
125    },
126    hours: "Part-time",
127    link: "#",
128    keywords: "design thinking user research wireframing",
129  },
130  {
131    position: "Project Manager",
132    location: {
133      country: "United States",
134      state: "Florida",
135      city: "Miami",
136    },
137    hours: "Full-time",
138    link: "#",
139    keywords: "agile team leadership communication",
140  },
141  {
142    position: "Back-end Developer",
143    location: { country: "Virtual", state: "NA", city: "Online" },
144    hours: "Part-time",
145    link: "#",
146    keywords: "python java database",
147  },
148  {
149    position: "UI/UX Designer",
150    location: {
151      country: "Canada",
152      state: "Alberta",
153      city: "Calgary",
154    },
155    hours: "Full-time",
156    link: "#",
157    keywords: "user experience prototyping design system",
158  },
159];
160
161const SearchIcon = ({ className }) => {
162  return (
163    <svg
164      xmlns="http://www.w3.org/2000/svg"
165      viewBox="0 0 24 24"
166      className={className}
167    >
168      <path
169        fillRule="evenodd"
170        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
171        clipRule="evenodd"
172      />
173    </svg>
174  );
175};
176
177const ChevronIcon = ({ className }) => {
178  return (
179    <svg
180      xmlns="http://www.w3.org/2000/svg"
181      viewBox="0 0 24 24"
182      className={className}
183    >
184      <path
185        fillRule="evenodd"
186        d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"
187        clipRule="evenodd"
188      />
189    </svg>
190  );
191};
192
193const ToggleButtons = ({ set, val, title, current }) => {
194  return (
195    <button
196      onClick={() => set(!val)}
197      className={
198        val
199          ? "flex w-full flex-nowrap justify-between rounded-lg border border-slate-200 bg-slate-100 p-3 duration-150"
200          : "flex w-full flex-nowrap justify-between rounded-lg border border-slate-200 p-3 duration-150 hover:bg-slate-100"
201      }
202    >
203      <span className="font-medium text-slate-500">
204        {current.length <= 0 ? title : current}
205      </span>
206      <ChevronIcon
207        className={
208          val
209            ? "h-6 w-6 rotate-0 fill-slate-500 duration-150"
210            : " h-6 w-6 rotate-180 fill-slate-500 duration-150"
211        }
212      />
213    </button>
214  );
215};
216
217const SearchInput = ({ set, val }) => {
218  return (
219    <div className="relative flex h-fit flex-nowrap gap-3">
220      <input
221        onChange={(e) => {
222          set(e.target.value);
223        }}
224        value={val}
225        type="text"
226        className="w-full grow cursor-text self-stretch rounded-lg border border-slate-200 bg-transparent  p-3 pl-10 font-medium text-slate-700  placeholder:font-medium placeholder:text-slate-500 focus:border-slate-200 focus:bg-slate-100 focus:outline-0 focus:ring-0 md:w-min"
227        placeholder="Search..."
228      ></input>
229      <SearchIcon
230        className={
231          " absolute h-6 w-6 translate-x-3 translate-y-[14px]  fill-slate-500 "
232        }
233      />
234    </div>
235  );
236};
237
238const FilterModal = ({ data, set, val, close }) => {
239  // remove duplicates from the array
240  const unique = [...new Set(data)];
241
242  return (
243    <div className="absolute inset-0 flex h-[175px] translate-y-[60px] flex-col gap-1 overflow-y-scroll rounded-lg border border-slate-200 bg-slate-50 p-3 shadow-md ">
244      {/* a button for resetting the filters */}
245      <button
246        onClick={() => {
247          set(""), close(false);
248        }}
249        className="rounded-md p-2 text-left hover:bg-slate-200"
250      >
251        Clear Filters
252      </button>
253      {/* buttons for each unique value in the data */}
254      {unique.map((element: string) => {
255        return (
256          <button
257            onClick={() => {
258              set(element), close(false);
259            }}
260            className={
261              val !== element
262                ? "rounded-md p-2 text-left hover:bg-slate-200"
263                : "rounded-md bg-slate-200 p-2 text-left"
264            }
265          >
266            {element}
267          </button>
268        );
269      })}
270    </div>
271  );
272};
273
274// Custom filtering hook for the careers
275const useCareerFilters = (
276  data: ICareers[],
277  search: string,
278  location: string,
279  hours: string
280) => {
281  // using a init to manipulate & then set a state that react can detect
282  const init = careersData;
283  const [filteredData, setFilteredData] = useState(data);
284
285  useEffect(() => {
286    // if the search input has text in it, filter based on all of the values
287    if (search.length !== 0) {
288      setFilteredData(
289        init.filter(
290          (item) =>
291            item.location.city
292              .toLocaleLowerCase()
293              .includes(search.toLowerCase()) ||
294            item.location.state
295              .toLocaleLowerCase()
296              .includes(search.toLowerCase()) ||
297            item.location.country
298              .toLocaleLowerCase()
299              .includes(search.toLowerCase()) ||
300            item.position.toLocaleLowerCase().includes(search.toLowerCase()) ||
301            item.hours.toLocaleLowerCase().includes(search.toLowerCase()) ||
302            item.keywords.toLocaleLowerCase().includes(search.toLowerCase())
303        )
304      );
305
306      // filter just locations if a location is selected but hours are not
307    } else if (location.length >= 1 && hours.length <= 1) {
308      setFilteredData(init.filter((item) => item.location.city === location));
309      // filter just hours if an hour is selected but a location is not
310    } else if (hours.length >= 1 && location.length <= 1) {
311      setFilteredData(init.filter((item) => item.hours === hours));
312
313      // if both are selected, filter if thee selected value is included in both
314    } else if (location.length >= 1 && hours.length >= 1) {
315      setFilteredData(
316        init.filter(
317          (item) => item.hours === hours && item.location.city === location
318        )
319      );
320      //   if nothing is selected, reset the state back to init
321    } else {
322      setFilteredData(init);
323    }
324  }, [search, location, hours]);
325
326  return filteredData;
327};
328
329export function Careers1() {
330  //   states for storing the selected filters
331  const [search, setSearch] = useState("");
332  const [location, setLocation] = useState("");
333  const [hours, setHours] = useState("");
334
335  //   states for toggling the custom dropdown
336  const [toggleLocation, setToggleLocation] = useState(false);
337  const [toggleHours, setToggleHours] = useState(false);
338
339  const data = useCareerFilters(careersData, search, location, hours);
340
341  return (
342    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-[1440px]">
343      <div className="mx-auto flex w-full flex-col gap-y-12">
344        <div className="mx-auto flex w-full max-w-6xl flex-col gap-5">
345          <div className="mx-auto mb-4 max-w-3xl">
346            <h2 className="mb-2 text-center text-4xl font-bold text-slate-900">
347              Join Our Team and Thrive
348            </h2>
349            <p className="w-full text-center text-lg text-slate-700">
350              Our fundamental principle is to bring together a diverse group of
351              passionate individuals and foster a culture that empowers you to
352              unleash your full potential and thrive in your endeavors.
353            </p>
354          </div>
355          <div className="mx-auto grid w-full grid-cols-1 gap-2 max-lg:max-w-sm lg:grid-cols-3 lg:gap-5">
356            <SearchInput set={setSearch} val={search} />
357            <div className="relative w-full">
358              <ToggleButtons
359                set={setToggleLocation}
360                val={toggleLocation}
361                title={"Location"}
362                current={location}
363              />
364              {toggleLocation ? (
365                <FilterModal
366                  set={setLocation}
367                  close={setToggleLocation}
368                  val={location}
369                  //   extract just the locations from the careers data
370                  data={careersData.map((a) => a.location.city)}
371                />
372              ) : (
373                <></>
374              )}
375            </div>
376            <div className="relative w-full">
377              <ToggleButtons
378                set={setToggleHours}
379                val={toggleHours}
380                title={"Hours"}
381                current={hours}
382              />
383              {toggleHours ? (
384                <FilterModal
385                  set={setHours}
386                  val={hours}
387                  close={setToggleHours}
388                  //   extract just the hours from the careers data
389                  data={careersData.map((a) => a.hours)}
390                />
391              ) : (
392                <></>
393              )}
394            </div>
395          </div>
396        </div>
397
398        {data.length >= 1 ? (
399          <div className="w-full">
400            <div>
401              {data.map(
402                (
403                  { position, location, hours, link, keywords },
404                  index: number
405                ) => {
406                  return (
407                    <div
408                      key={index}
409                      className="flex w-full justify-between gap-y-8 rounded-xl p-6 odd:bg-slate-100 max-sm:flex-col sm:items-center"
410                    >
411                      <div className="flex gap-y-4 max-lg:flex-col lg:mr-8 lg:w-full lg:justify-between">
412                        <div className="text-xl font-semibold text-slate-700">
413                          {position}
414                        </div>
415                        <div className="flex items-center gap-4">
416                          <div className="flex flex-nowrap gap-2 truncate text-slate-500">
417                            <LocationIcon className="h-6 w-6 fill-slate-500" />
418                            {location.city}
419                          </div>
420                          <div className="flex flex-nowrap gap-2 truncate text-slate-500">
421                            <ClockIcon className="h-6 w-6 fill-slate-500" />
422                            {hours}
423                          </div>
424                        </div>
425                      </div>
426                      <div className="flex w-fit justify-center">
427                        <Link
428                          className="truncate rounded-lg bg-sky-600 px-6 py-3 font-medium text-slate-50 duration-150 hover:bg-sky-700"
429                          href={link}
430                        >
431                          View Job
432                        </Link>
433                      </div>
434                    </div>
435                  );
436                }
437              )}
438            </div>
439          </div>
440        ) : (
441          <div className="flex w-full flex-wrap justify-center gap-5">
442            <h3 className="text-center text-5xl font-bold text-slate-900">
443              Oops, no jobs available for that!
444            </h3>
445            <p className="w-full text-center text-lg text-slate-700">
446              Sorry, we're not looking for that right now. Check back soon!{" "}
447            </p>
448            <button
449              onClick={() => {
450                setSearch(""), setLocation(""), setHours("");
451              }}
452              className="hover:bg-sky-700Hover rounded-lg bg-sky-700 px-6 py-3 font-medium text-slate-50 duration-150 "
453            >
454              Clear Filters
455            </button>
456          </div>
457        )}
458      </div>
459    </div>
460  );
461}
462

0import React from "react";
1import Link from "next/link";
2
3const MapPinIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        clipRule="evenodd"
14        d="M11.5397 22.351C11.57 22.3685 11.5937 22.3821 11.6105 22.3915L11.6384 22.4071C11.8613 22.5294 12.1378 22.5285 12.3608 22.4075L12.3895 22.3915C12.4063 22.3821 12.43 22.3685 12.4603 22.351C12.5207 22.316 12.607 22.265 12.7155 22.1982C12.9325 22.0646 13.2388 21.8676 13.6046 21.6091C14.3351 21.0931 15.3097 20.3274 16.2865 19.3273C18.2307 17.3368 20.25 14.3462 20.25 10.5C20.25 5.94365 16.5563 2.25 12 2.25C7.44365 2.25 3.75 5.94365 3.75 10.5C3.75 14.3462 5.76932 17.3368 7.71346 19.3273C8.69025 20.3274 9.66491 21.0931 10.3954 21.6091C10.7612 21.8676 11.0675 22.0646 11.2845 22.1982C11.393 22.265 11.4793 22.316 11.5397 22.351ZM12 13.5C13.6569 13.5 15 12.1569 15 10.5C15 8.84315 13.6569 7.5 12 7.5C10.3431 7.5 9 8.84315 9 10.5C9 12.1569 10.3431 13.5 12 13.5Z"
15      />
16    </svg>
17  );
18};
19
20const ClockIcon = ({ className }) => {
21  return (
22    <svg
23      xmlns="http://www.w3.org/2000/svg"
24      viewBox="0 0 24 24"
25      preserveAspectRatio="xMidYMid meet"
26      className={className}
27    >
28      <path
29        fillRule="evenodd"
30        clipRule="evenodd"
31        d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V6Z"
32      />
33    </svg>
34  );
35};
36
37const data = {
38  subHeading: "Igniting Creativity",
39  title: "Join Our Team",
40  paragraph:
41    "Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.",
42  items: [
43    {
44      position: "Front-end Developer",
45      description:
46        "We’re seeking a talented Front-end Developer with 3+ years of experience in React and JavaScript to help build and maintain our web applications.",
47      location: "Remote",
48      jobType: "Full-time",
49      link: "#",
50    },
51    {
52      position: "UI/UX Designer",
53      description:
54        "We're looking for a creative UI/UX Designer with 5+ years of experience to design and improve user interfaces for our software products.",
55      location: "Remote",
56      jobType: "Part-time",
57      link: "#",
58    },
59    {
60      position: "Product Manager",
61      description:
62        "We're seeking a results-driven Product Manager with 7+ years of experience to oversee the development and launch of new software products.",
63      location: "Montreal",
64      jobType: "Full-time",
65      link: "#",
66    },
67    {
68      position: "QA Engineer",
69      description:
70        "We're looking for a meticulous QA Engineer with 2+ years of experience to ensure the quality of our software products through manual and automated testing.",
71      location: "San Francisco",
72      jobType: "Full-time",
73      link: "#",
74    },
75    {
76      position: "Back-end Developer",
77      description:
78        "We're seeking a skilled Back-end Developer with 4+ years of experience in Java and SQL to design and implement scalable APIs and data models.",
79      location: "Miami",
80      jobType: "Full-time",
81      link: "#",
82    },
83    {
84      position: "DevOps Engineer",
85      description:
86        "We're looking for a DevOps Engineer with 5+ years of experience in AWS and Kubernetes to manage and optimize our cloud infrastructure.",
87      location: "Remote",
88      jobType: "Part-time",
89      link: "#",
90    },
91  ],
92};
93
94export function Careers2() {
95  return (
96    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
97      <div className="mb-12 max-w-3xl">
98        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
99          {data.subHeading}
100        </p>
101        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
102          {data.title}
103        </h2>
104        <p className="text-lg text-slate-600 [text-wrap:balance]">
105          {data.paragraph}
106        </p>
107      </div>
108      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
109        {data.items.map(
110          (
111            { position, description, location, jobType, link },
112            index: number
113          ) => {
114            return (
115              <Link
116                key={index}
117                href={link}
118                className="flex w-full flex-col justify-between gap-y-6 rounded-3xl border border-slate-200 bg-white p-8 ring-4 ring-slate-50 duration-300 hover:border-sky-200 hover:ring-sky-100"
119              >
120                <div className="min-w-0">
121                  <p className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
122                    {position}
123                  </p>
124                  <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">
125                    {description}
126                  </p>
127                </div>
128                <div className="flex gap-x-5 gap-y-3 max-lg:flex-wrap">
129                  <div className="flex min-w-0 gap-x-2">
130                    <MapPinIcon className="h-5 w-5 shrink-0 fill-sky-600" />
131                    <p className="truncate text-sm font-semibold text-slate-600">
132                      {location}
133                    </p>
134                  </div>
135                  <div className="flex min-w-0 gap-x-2">
136                    <ClockIcon className="h-5 w-5 shrink-0 fill-sky-600" />
137                    <p className="truncate text-sm font-semibold text-slate-600">
138                      {jobType}
139                    </p>
140                  </div>
141                </div>
142              </Link>
143            );
144          }
145        )}
146      </div>
147    </div>
148  );
149}
150

0import React from "react";
1import Link from "next/link";
2
3const ClockIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path
12        fillRule="evenodd"
13        clipRule="evenodd"
14        d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V6Z"
15      />
16    </svg>
17  );
18};
19
20const CurrencyDollarIcon = ({ className }) => (
21  <svg
22    className={className}
23    aria-hidden="true"
24    viewBox="0 0 24 24"
25    xmlns="http://www.w3.org/2000/svg"
26  >
27    <path d="M10.4636 8.74626C10.6908 8.56577 10.9607 8.43451 11.25 8.35249V11.1474C10.9552 11.0637 10.686 10.9304 10.4636 10.7537C10.0699 10.441 9.91752 10.073 9.91752 9.75C9.91752 9.42705 10.0699 9.05904 10.4636 8.74626Z" />
28    <path d="M12.75 15.6616V12.8383C13.0972 12.9228 13.4138 13.0658 13.6713 13.259C14.0978 13.5788 14.25 13.9448 14.25 14.25C14.25 14.5551 14.0978 14.9211 13.6713 15.241C13.4138 15.4342 13.0972 15.5772 12.75 15.6616Z" />
29    <path
30      fillRule="evenodd"
31      clipRule="evenodd"
32      d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6V6.81563C10.6231 6.92669 10.0253 7.17873 9.53058 7.57176C8.81822 8.13765 8.41752 8.9213 8.41752 9.75C8.41752 10.5787 8.81822 11.3623 9.53058 11.9282C10.033 12.3274 10.6327 12.575 11.25 12.6843V15.6616C10.9028 15.5771 10.5864 15.4341 10.3289 15.241L9.45001 14.5818C9.11865 14.3333 8.64854 14.4004 8.40001 14.7318C8.15147 15.0631 8.21862 15.5332 8.54999 15.7818L9.42886 16.441C9.96206 16.8409 10.5979 17.0856 11.25 17.1903V18C11.25 18.4142 11.5858 18.75 12 18.75C12.4142 18.75 12.75 18.4142 12.75 18V17.1904C13.4021 17.0856 14.0381 16.8409 14.5714 16.441C15.3164 15.8821 15.75 15.0965 15.75 14.25C15.75 13.4034 15.3164 12.6178 14.5714 12.059C14.0381 11.659 13.4021 11.4143 12.75 11.3096V8.35257C13.0392 8.4346 13.309 8.56583 13.5361 8.74626L13.951 9.07585C14.2753 9.3335 14.7471 9.27944 15.0048 8.95511C15.2624 8.63078 15.2084 8.15899 14.884 7.90135L14.4691 7.57176C13.9745 7.17879 13.3768 6.92677 12.75 6.81567V6Z"
33    />
34  </svg>
35);
36
37const data = {
38  subHeading: "Fueling Innovation",
39  title: "Join Our Dynamic Team",
40  paragraph:
41    "At the heart of our success lies a group of individuals who are diverse in their backgrounds but unified in their passion. We believe in creating an environment where you're not just working — you're thriving.",
42  image: {
43    src: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
44    alt: "",
45  },
46  items: [
47    {
48      category: "Marketing",
49      positions: [
50        {
51          position: "Digital Marketing Manager",
52          description:
53            "We're looking for a skilled Digital Marketing Manager with 5+ years of experience to help develop and implement marketing campaigns",
54          location: { city: "Toronto", country: "CA" },
55          jobType: "Full-time",
56          salary: "$90,000 - $110,000",
57          link: "#",
58        },
59        {
60          position: "Social Media Coordinator",
61          description:
62            "We're looking for a creative and detail-oriented Social Media Coordinator with 2+ years of experience to manage social media platforms",
63          location: { city: "Los Angeles", country: "US" },
64          jobType: "Full-time",
65          salary: "$50,000 - $60,000",
66          link: "#",
67        },
68      ],
69    },
70    {
71      category: "Sales",
72      positions: [
73        {
74          position: "Account Executive",
75          description:
76            "We're looking for an experienced Account Executive to develop and maintain customer relationships",
77          location: { city: "London", country: "GB" },
78          jobType: "Full-time",
79          salary: "$80,000 - $100,000",
80          link: "#",
81        },
82        {
83          position: "Sales Associate",
84          description:
85            "We're looking for a motivated and enthusiastic Sales Associate to provide excellent customer service",
86          location: { city: "Sydney", country: "AU" },
87          jobType: "Part-time",
88          salary: "$20,000 - $30,000",
89          link: "#",
90        },
91        {
92          position: "Business Development Manager",
93          description:
94            "We're seeking a results-driven Business Development Manager with 7+ years of experience to identify and develop new business opportunities",
95          location: { city: "New York", country: "US" },
96          jobType: "Full-time",
97          salary: "$120,000 - $140,000",
98          link: "#",
99        },
100      ],
101    },
102    {
103      category: "Engineering",
104      positions: [
105        {
106          position: "Software Engineer",
107          description:
108            "We're looking for a talented Software Engineer to design and develop software solutions",
109          location: { city: "Berlin", country: "DE" },
110          jobType: "Full-time",
111          salary: "$100,000 - $120,000",
112          link: "#",
113        },
114        {
115          position: "DevOps Engineer",
116          description:
117            "We're seeking a DevOps Engineer with strong automation skills to manage our infrastructure",
118          location: { city: "San Francisco", country: "US" },
119          jobType: "Full-time",
120          salary: "$140,000 - $160,000",
121          link: "#",
122        },
123        {
124          position: "Front-end Developer",
125          description:
126            "We're looking for a skilled Front-end Developer to develop and maintain web applications",
127          location: { city: "Vancouver", country: "CA" },
128          jobType: "Full-time",
129          salary: "$80,000 - $100,000",
130          link: "#",
131        },
132      ],
133    },
134  ],
135};
136
137export function Careers3() {
138  return (
139    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
140      <div className="mx-auto mb-12 max-w-3xl text-center">
141        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
142          {data.subHeading}
143        </p>
144        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
145          {data.title}
146        </h2>
147        <p className="text-lg text-slate-600 [text-wrap:balance]">
148          {data.paragraph}
149        </p>
150      </div>
151      <div className="mx-auto max-w-4xl">
152        <div className="mb-12 h-96 w-full overflow-hidden rounded-3xl">
153          <img
154            src={data.image.src}
155            alt={data.image.alt}
156            onError={(e) => {
157              const image = e.target as HTMLImageElement;
158              image.src = "onerrorimg";
159            }}
160            className="h-full w-full object-cover"
161          />
162        </div>
163        <div className="space-y-12">
164          {data.items.map(({ category, positions }, index: number) => {
165            return (
166              <div key={index}>
167                <p className="mb-8 text-xl font-semibold text-slate-900">
168                  {category}
169                </p>
170                <div className="space-y-8">
171                  {positions.map(
172                    (
173                      {
174                        position,
175                        description,
176                        location,
177                        jobType,
178                        salary,
179                        link,
180                      },
181                      Index2: number
182                    ) => {
183                      return (
184                        <Link
185                          key={Index2}
186                          href={link}
187                          className="flex flex-col gap-y-6 rounded-3xl border border-slate-200 bg-white p-8 ring-4 ring-slate-50 duration-300 hover:border-sky-200 hover:ring-sky-100"
188                        >
189                          <div className="min-w-0">
190                            <div className="mb-2 flex flex-wrap items-center gap-4">
191                              <p className="text-xl font-bold text-slate-900 first-letter:uppercase max-md:w-full md:truncate">
192                                {position}
193                              </p>
194                              <div className="flex grow flex-wrap items-center justify-between gap-x-8 gap-y-3">
195                                <p className="h-fit w-fit rounded-full bg-sky-100 px-2 py-1 text-xs font-semibold text-sky-600">
196                                  {category}
197                                </p>
198                                <p className="h-fit w-fit rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600">
199                                  {location.country}, {location.city}
200                                </p>
201                              </div>
202                            </div>
203                            <p className="text-base text-slate-600 [text-wrap:balance]">
204                              {description}
205                            </p>
206                          </div>
207                          <div className="flex gap-x-5 gap-y-3 max-lg:flex-wrap">
208                            <div className="flex min-w-0 gap-x-2">
209                              <ClockIcon className="h-5 w-5 shrink-0 fill-sky-600" />
210                              <p className="truncate text-sm font-semibold text-slate-600">
211                                {jobType}
212                              </p>
213                            </div>
214                            <div className="flex min-w-0 gap-x-2">
215                              <CurrencyDollarIcon className="h-5 w-5 shrink-0 fill-sky-600" />
216                              <p className="truncate text-sm font-semibold text-slate-600">
217                                {salary}
218                              </p>
219                            </div>
220                          </div>
221                        </Link>
222                      );
223                    }
224                  )}
225                </div>
226              </div>
227            );
228          })}
229        </div>
230      </div>
231    </div>
232  );
233}
234

0import React from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      className={className}
9    >
10      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
11    </svg>
12  );
13};
14
15const data = {
16  subHeading: "Fueling Innovation",
17  title: "Join Our Team of Trailblazers",
18  paragraph:
19    "At our core, we believe in assembling a team of trailblazers from diverse backgrounds and nurturing a culture that empowers you to unleash your creativity and make a remarkable impact.",
20  items: [
21    {
22      position: "Front-end Developer",
23      button: { label: "View job", link: "#" },
24    },
25    {
26      position: "UI/UX Designer",
27      button: { label: "View job", link: "#" },
28    },
29    {
30      position: "Product Designer",
31      button: { label: "View job", link: "#" },
32    },
33    {
34      position: "Project Manager",
35      button: { label: "View job", link: "#" },
36    },
37    {
38      position: "Back-end Developer",
39      button: { label: "View job", link: "#" },
40    },
41  ],
42};
43
44export function Careers4() {
45  return (
46    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
47      <div className="mx-auto mb-12 max-w-3xl text-center">
48        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
49          {data.subHeading}
50        </p>
51        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
52          {data.title}
53        </h2>
54        <p className="text-lg text-slate-600 [text-wrap:balance]">
55          {data.paragraph}
56        </p>
57      </div>
58      <div className="mx-auto max-w-4xl space-y-8 max-md:mx-auto max-md:w-fit">
59        {data.items.map(({ position, button }, index: number) => {
60          return (
61            <div
62              key={index}
63              className="flex justify-between gap-x-12 rounded-2xl border border-slate-200 bg-white p-8 py-10 ring-4 ring-slate-50"
64            >
65              <Link
66                href={button.link}
67                className="text-xl font-bold text-slate-900 duration-150 first-letter:uppercase hover:text-sky-700"
68              >
69                {position}
70              </Link>
71              <Link
72                href={button.link}
73                className="group inline-flex items-center gap-x-0.5 whitespace-nowrap text-base font-semibold text-sky-600 duration-150 hover:text-sky-700"
74              >
75                {button.label}
76                <ChevronRightIcon className="mt-0.5 h-4 w-4 fill-sky-600 duration-150 group-hover:fill-sky-700" />
77              </Link>
78            </div>
79          );
80        })}
81      </div>
82    </div>
83  );
84}
85