279 lines
14 KiB
JavaScript
279 lines
14 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import Sidebar from '../../partials/Sidebar';
|
|
import Header from '../../partials/Header';
|
|
import JobListItem from '../../partials/job/JobListItem';
|
|
|
|
import Image03 from '../../images/company-icon-03.svg';
|
|
import Image04 from '../../images/company-icon-07.svg';
|
|
import Image05 from '../../images/company-icon-08.svg';
|
|
import Image06 from '../../images/company-icon-01.svg';
|
|
|
|
function JobPost() {
|
|
|
|
const items = [
|
|
{
|
|
id: 3,
|
|
image: Image03,
|
|
company: 'Company 04',
|
|
role: 'Senior Software Engineer Backend',
|
|
link: '/job/job-post',
|
|
details: 'Full-time / Remote / Anywhere',
|
|
date: 'Jan 7',
|
|
type: 'New',
|
|
fav: false,
|
|
},
|
|
{
|
|
id: 4,
|
|
image: Image04,
|
|
company: 'Company 05',
|
|
role: 'React.js Software Developer',
|
|
link: '/job/job-post',
|
|
details: 'Full-time / Remote / London, UK',
|
|
date: 'Jan 6',
|
|
type: 'New',
|
|
fav: true,
|
|
},
|
|
{
|
|
id: 5,
|
|
image: Image05,
|
|
company: 'Company 06',
|
|
role: 'Senior Full Stack Rails Developer',
|
|
link: '/job/job-post',
|
|
details: 'Part-time / Remote / Milan, IT',
|
|
date: 'Jan 6',
|
|
type: 'New',
|
|
fav: false,
|
|
},
|
|
];
|
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Sidebar */}
|
|
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
{/* Content area */}
|
|
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
|
{/* Site header */}
|
|
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
|
|
<main>
|
|
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full">
|
|
{/* Page content */}
|
|
<div className="max-w-5xl mx-auto flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
|
|
{/* Content */}
|
|
<div>
|
|
<div className="mb-6">
|
|
<Link className="btn-sm px-3 bg-white border-slate-200 hover:border-slate-300 text-slate-600" to="/job/job-listing">
|
|
<svg className="fill-current text-slate-400 mr-2" width="7" height="12" viewBox="0 0 7 12">
|
|
<path d="M5.4.6 6.8 2l-4 4 4 4-1.4 1.4L0 6z" />
|
|
</svg>
|
|
<span>Back To Jobs</span>
|
|
</Link>
|
|
</div>
|
|
<div className="text-sm text-slate-500 italic mb-2">Posted Jan 6, 2022</div>
|
|
<header className="mb-4">
|
|
{/* Title */}
|
|
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Senior Client Engineer (React & React Native)</h1>
|
|
</header>
|
|
|
|
{/* Company information (mobile) */}
|
|
<div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 mb-6 lg:hidden">
|
|
<div className="text-center mb-6">
|
|
<div className="inline-flex mb-3">
|
|
<img className="w-16 h-16 rounded-full" src={Image06} width="64" height="64" alt="Company 01" />
|
|
</div>
|
|
<div className="text-lg font-bold text-slate-800 mb-1">Revolut Ltd</div>
|
|
<div className="text-sm text-slate-500 italic">179 Jobs Posted</div>
|
|
</div>
|
|
<div className="space-y-2 sm:flex sm:space-y-0 sm:space-x-2">
|
|
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Apply Today -></button>
|
|
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">Company Profile</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div className="mb-6">
|
|
<div className="flex flex-wrap items-center -m-1">
|
|
<div className="m-1">
|
|
<a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
|
|
Full-time
|
|
</a>
|
|
</div>
|
|
<div className="m-1">
|
|
<a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
|
|
Senior Engineer
|
|
</a>
|
|
</div>
|
|
<div className="m-1">
|
|
<a className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1" href="#0">
|
|
Remote
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="my-6 border-t border-slate-200" />
|
|
|
|
{/* The Role */}
|
|
<div>
|
|
<h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">The Role</h2>
|
|
<div className="space-y-6">
|
|
<p>In the world of AI, behavioural predictions are leading the charge to better machine learning.</p>
|
|
<p>
|
|
There is so much happening in the AI space. Advances in the economic sectors have seen automated business practices rapidly
|
|
increasing economic value. While the realm of the human sciences has used the power afforded by computational capabilities to
|
|
solve many human based dilemmas. Even the art scene has adopted carefully selected ML applications to usher in the technological
|
|
movement.
|
|
</p>
|
|
<p>
|
|
Join us every second Wednesday as we host an open discussion about the amazing things happening in the world of AI and machine
|
|
learning. Feel free to share your experiences, ask questions, ponder the possibilities, or just listen as we explore new topics
|
|
and revisit old ones.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="my-6 border-t border-slate-200" />
|
|
|
|
{/* About You */}
|
|
<div>
|
|
<h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">About You</h2>
|
|
<div className="space-y-6">
|
|
<p>
|
|
You love building great software. Your work could be supporting new feature development, migrating existing features, and
|
|
creating other mobile and web solutions for customers. You'll have a primary focus on frontend development using Javascript. Our
|
|
client's tech stack is JavaScript, primarily using React. A strong understanding of JS core (ES2019+) is required, with some
|
|
exposure in Java as back-end technology. We use modern tools, which means you'll have the opportunity to work with Webpack,
|
|
Redux, Apollo, Styled Components, and much more.
|
|
</p>
|
|
<p>
|
|
You love learning. Engineering is an ever-evolving world. You enjoy playing with new tech and exploring areas that you might not
|
|
have experience with yet. You are self-driven, self-learner willing to share knowledge and participate actively in your
|
|
community.
|
|
</p>
|
|
<p>
|
|
Having overlap with your team is critical when working in a global remote team. Modus requires all team members to overlap with
|
|
EST morning hours daily. In addition, reliable high speed internet is a must.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="my-6 border-t border-slate-200" />
|
|
|
|
{/* Things You Might Do */}
|
|
<div>
|
|
<h2 className="text-xl leading-snug text-slate-800 font-bold mb-2">Things You Might Do</h2>
|
|
<div className="space-y-6">
|
|
<p>
|
|
We are a fast-growing, and remote-first company, so you'll likely get experience on many different projects across the
|
|
organization. That said, here are some things you'll probably do:
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-1">
|
|
<li>Give back to the community via open source and blog posts</li>
|
|
<li>
|
|
Travel and meet great people- as part of our remote-first lifestyle, it's important that we come together as needed to work
|
|
together, meet each other in person and have fun together. Please keep that in mind when you apply.
|
|
</li>
|
|
<li>
|
|
Teach and be taught: Modus creates active teams that work in internal and external projects together, giving opportunities to
|
|
stay relevant with the latest technologies and learning from experts worldwide
|
|
</li>
|
|
<li>Interact directly with internal and external clients to represent Modus and its values</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Apply section */}
|
|
<div className="mt-6">
|
|
<p className="font-medium text-slate-800 italic mb-6">Do you have what it takes?</p>
|
|
<div className="flex justify-between items-center">
|
|
{/* Apply button */}
|
|
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Apply Today -></button>
|
|
{/* Share */}
|
|
<div className="flex items-center">
|
|
<div className="text-sm text-slate-500 italic mr-4">Share:</div>
|
|
<div className="flex items-center space-x-3">
|
|
<button className="text-slate-400 hover:text-indigo-500">
|
|
<span className="sr-only">Share on Twitter</span>
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 3.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8Z" />
|
|
</svg>
|
|
</button>
|
|
<button className="text-slate-400 hover:text-indigo-500">
|
|
<span className="sr-only">Share on Facebook</span>
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6.023 16 6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023Z" />
|
|
</svg>
|
|
</button>
|
|
<button className="text-slate-400 hover:text-indigo-500">
|
|
<span className="sr-only">Share on Linkedin</span>
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 1.146C0 .514.53 0 1.182 0h13.635C15.471 0 16 .513 16 1.146v13.708c0 .633-.53 1.146-1.183 1.146H1.182C.53 16 0 15.487 0 14.854V1.146ZM4.862 13.39V6.187H2.468v7.203h2.394ZM3.666 5.203c.834 0 1.354-.553 1.354-1.244-.016-.707-.52-1.245-1.338-1.245-.82 0-1.355.538-1.355 1.245 0 .691.52 1.244 1.323 1.244h.015Zm2.522 8.187h2.394V9.368c0-.215.015-.43.078-.584.173-.43.567-.876 1.229-.876.866 0 1.213.66 1.213 1.629v3.853h2.394V9.26c0-2.213-1.181-3.242-2.756-3.242-1.292 0-1.86.722-2.174 1.213h.016V6.187H6.188c.03.676 0 7.203 0 7.203Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="my-6 border-t border-slate-200" />
|
|
|
|
{/* Related Jobs */}
|
|
<div>
|
|
<h2 className="text-xl leading-snug text-slate-800 font-bold mb-6">Related Jobs</h2>
|
|
<div className="space-y-2 mt-6">
|
|
{items.map((item) => {
|
|
return (
|
|
<JobListItem
|
|
key={item.id}
|
|
id={item.id}
|
|
image={item.image}
|
|
role={item.role}
|
|
link={item.link}
|
|
details={item.details}
|
|
date={item.date}
|
|
type={item.type}
|
|
fav={item.fav}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="hidden lg:block space-y-4">
|
|
|
|
{/* Company information (desktop) */}
|
|
<div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
|
|
<div className="text-center mb-6">
|
|
<div className="inline-flex mb-3">
|
|
<img className="w-16 h-16 rounded-full" src={Image06} width="64" height="64" alt="Company 01" />
|
|
</div>
|
|
<div className="text-lg font-bold text-slate-800 mb-1">Revolut Ltd</div>
|
|
<div className="text-sm text-slate-500 italic">179 Jobs Posted</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<button className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white">Apply Today -></button>
|
|
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600">Company Profile</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default JobPost; |