141 lines
7.2 KiB
JavaScript
141 lines
7.2 KiB
JavaScript
"use client";
|
||
import { jobs2, jobs3 } from "@/data/jobs";
|
||
import React from "react";
|
||
|
||
export default function Jobs2() {
|
||
return (
|
||
<>
|
||
<div className="flex flex-wrap mx-[-15px] !text-center">
|
||
<div className="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||
<h2 className="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">
|
||
Job Positions
|
||
</h2>
|
||
<h3 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10 xxl:!px-20">
|
||
We’re always searching for amazing people to join our team. Take a
|
||
look at our current openings.
|
||
</h3>
|
||
</div>
|
||
{/* /column */}
|
||
</div>
|
||
{/* /.row */}
|
||
<div className="flex flex-wrap mx-[-15px]">
|
||
<div className="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||
<form
|
||
onSubmit={(e) => e.preventDefault()}
|
||
className="filter-form !mb-10"
|
||
>
|
||
<div className="flex flex-wrap mx-[-15px]">
|
||
<div className="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
|
||
<div className="form-select-wrapper">
|
||
<select className="form-select" aria-label="">
|
||
<option>Position</option>
|
||
<option value="position1">Business</option>
|
||
<option value="position2">Design</option>
|
||
<option value="position3">Development</option>
|
||
<option value="position4">Engineering</option>
|
||
<option value="position5">Finance</option>
|
||
<option value="position6">Marketing</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
|
||
<div className="form-select-wrapper">
|
||
<select className="form-select" aria-label="">
|
||
<option>Type</option>
|
||
<option value="type1">Full-time</option>
|
||
<option value="type3">Part-time</option>
|
||
<option value="type4">Remote</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-3">
|
||
<div className="form-select-wrapper">
|
||
<select className="form-select" aria-label="">
|
||
<option>Location</option>
|
||
<option value="location1">Chicago, US</option>
|
||
<option value="location3">Michigan, US</option>
|
||
<option value="location2">New York, US</option>
|
||
<option value="location4">Los Angles, US</option>
|
||
<option value="location5">Moscow, Russia</option>
|
||
<option value="location6">Sydney, Australia</option>
|
||
<option value="location7">Birmingham, UK</option>
|
||
<option value="location8">Manchester, UK</option>
|
||
<option value="location9">Beijing, China</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div className="job-list !mb-10">
|
||
<h3 className="!mb-4">Design</h3>
|
||
{jobs2.map((card, index) => (
|
||
<a key={index} href="#" className="card !mb-4 lift">
|
||
<div className="card-body p-5">
|
||
<span className="flex flex-wrap mx-[-15px] justify-between items-center">
|
||
<span className="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
|
||
<span
|
||
className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3"
|
||
style={{ backgroundColor: card.bgColor }}
|
||
>
|
||
{card.initials}
|
||
</span>
|
||
{card.title}
|
||
</span>
|
||
<span className="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
|
||
<i className="uil uil-clock !mr-[.25rem] before:content-['\e9ee']" />
|
||
{card.type}
|
||
</span>
|
||
<span className="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
|
||
<i className="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']" />
|
||
{card.location}
|
||
</span>
|
||
<span className="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
|
||
<i className="uil uil-angle-right-b before:content-['\e930']" />
|
||
</span>
|
||
</span>
|
||
</div>
|
||
{/* /.card-body */}
|
||
</a>
|
||
))}
|
||
{/* /.card */}
|
||
</div>
|
||
<div className="job-list">
|
||
<h3 className="!mb-4">Development</h3>
|
||
{jobs3.map((card, index) => (
|
||
<a key={index} href="#" className="card !mb-4 lift">
|
||
<div className="card-body p-5">
|
||
<span className="flex flex-wrap mx-[-15px] justify-between items-center">
|
||
<span className="xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 flex items-center !text-[#60697b]">
|
||
<span
|
||
className="flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] opacity-100 !text-white !w-9 !h-9 text-[0.85rem] !mr-3"
|
||
style={{ backgroundColor: card.bgColor }}
|
||
>
|
||
{card.initials}
|
||
</span>
|
||
{card.title}
|
||
</span>
|
||
<span className="w-5/12 xl:w-3/12 lg:w-3/12 md:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
|
||
<i className="uil uil-clock !mr-[.25rem] before:content-['\e9ee']" />
|
||
{card.type}
|
||
</span>
|
||
<span className="w-7/12 md:w-4/12 lg:w-3/12 xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !text-[#60697b] flex items-center">
|
||
<i className="uil uil-location-arrow !mr-[.25rem] before:content-['\ebd9']" />
|
||
{card.location}
|
||
</span>
|
||
<span className="hidden xl:block lg:block w-1/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-[#60697b]">
|
||
<i className="uil uil-angle-right-b before:content-['\e930']" />
|
||
</span>
|
||
</span>
|
||
</div>
|
||
{/* /.card-body */}
|
||
</a>
|
||
))}
|
||
{/* /.card */}
|
||
</div>
|
||
</div>
|
||
{/* /column */}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|