mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-04-22 23:48:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

refactor careers for when no positions open

Browse Source
This commit is contained in:
maxichrome
2022-07-18 06:46:32 -05:00
parent 9961c49759
commit bc90610d1a
1 changed files with 41 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
apps/landing/src/pages/careers.page.tsx
View File

@@ -15,26 +15,14 @@ import React from 'react';
import { Helmet } from 'react-helmet';
import { ReactComponent as Content } from '~/docs/changelog/index.md';
export const positions = [
{
name: 'TypeScript React UI/UX Engineer',
type: 'Full-time',
salary: '$80k - $120k',
description: `You'll build the primary desktop interface for Spacedrive in React, with TypeScript and Tailwind. You'll need an eye for design as well as a solid understanding of the React ecosystem.`
},
{
name: 'Rust Backend Engineer',
type: 'Full-time',
salary: '$80k - $120k',
description: `You'll build out our Rust core, the decentralized backend that powers our app. From the virtual filesystem to encryption and search. You'll need to live and breathe Rust, not be afraid to get low-level.`
},
{
name: 'TypeScript React Native Engineer',
type: 'Full-time',
salary: '$80k - $120k',
description: `You'll build out the majority of our mobile app in TypeScript and React Native. Developing a mobile first component library based on the design of our desktop application. You'll need to be passionate for building React Native apps that look and feel native.`
}
];
interface PositionPosting {
name: string;
type: string;
salary: string;
description: string;
}
export const positions: PositionPosting[] = [];
const values = [
{
title: 'Async',
@@ -129,21 +117,21 @@ function Page() {
See Open Positions
</Button>
<hr className="w-full my-24 border-gray-200 opacity-10 border-1" />
<h1 className="px-2 mb-0 text-4xl font-black leading-tight text-center">Our Values</h1>
<h2 className="px-2 mb-0 text-4xl font-black leading-tight text-center">Our Values</h2>
<p className="mt-2 mb-4">What drives us daily.</p>
<div className="grid w-full grid-cols-1 gap-4 mt-5 sm:grid-cols-2">
{values.map((value) => (
<div className="flex flex-col p-10 bg-opacity-50 border border-gray-500 rounded-md bg-gray-550">
<value.icon className="w-8 m-0" />
<h2 className="mt-4 mb-1">{value.title}</h2>
<h3 className="mt-4 mb-1 leading-snug text-2xl font-bold">{value.title}</h3>
<p className="mt-1 mb-0 text-gray-350">{value.desc}</p>
</div>
))}
</div>
<hr className="w-full my-24 border-gray-200 opacity-10 border-1" />
<h1 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
<h2 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
Perks and Benefits
</h1>
</h2>
<p className="mt-2 mb-4">We're behind you 100%.</p>
<div className="grid w-full grid-cols-1 gap-4 mt-5 sm:grid-cols-3">
{perks.map((value) => (
@@ -158,37 +146,41 @@ function Page() {
))}
</div>
<hr className="w-full my-24 border-gray-200 opacity-10 border-1" ref={openPositionsRef} />
<h1 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
<h2 className="px-2 mb-0 text-4xl font-black leading-tight text-center text-white">
Open Positions
</h1>
<p className="mt-2 mb-4">Any of these suit you? Apply now!</p>
</h2>
<p className="mt-2 mb-4">If any open positions suit you, apply now!</p>
<div className="grid w-full grid-cols-1 gap-4 mt-5">
{positions.map((value) => (
<div className="flex flex-col p-10 bg-opacity-50 border border-gray-500 rounded-md bg-gray-550">
<div className="flex flex-col sm:flex-row">
<h2 className="m-0">{value.name}</h2>
<div className="mt-3 sm:mt-0.5">
<span className="text-sm font-semibold text-gray-300 sm:ml-4">
<CurrencyDollarIcon className="inline w-4 mr-1 -mt-1" />
{value.salary}
</span>
<span className="ml-4 text-sm font-semibold text-gray-300">
<ClockIcon className="inline w-4 mr-1 -mt-1" />
{value.type}
</span>
{positions.length === 0 ? (
<p className="m-0 text-gray-350 text-center">
There are no positions open at this time. Please check back later!
</p>
) : (
positions.map((value) => (
<div className="flex flex-col p-10 bg-opacity-50 border border-gray-500 rounded-md bg-gray-550">
<div className="flex flex-col sm:flex-row">
<h3 className="m-0 text-2xl leading-tight">{value.name}</h3>
<div className="mt-3 sm:mt-0.5">
<span className="text-sm font-semibold text-gray-300 sm:ml-4">
<CurrencyDollarIcon className="inline w-4 mr-1 -mt-1" />
{value.salary}
</span>
<span className="ml-4 text-sm font-semibold text-gray-300">
<ClockIcon className="inline w-4 mr-1 -mt-1" />
{value.type}
</span>
</div>
</div>
<p className="mt-3 mb-0 text-gray-350">{value.description}</p>
</div>
<p className="mt-3 mb-0 text-gray-350">{value.description}</p>
</div>
))}
))
)}
</div>
<hr className="w-full my-24 border-gray-200 opacity-10 border-1" />
<h1 className="px-2 mb-0 text-3xl font-black leading-tight text-center text-white">
How to apply?
</h1>
<p>
Send your cover letter and resume to <b>careers at spacedrive dot com</b> and we'll get
back to you shortly!
<h2 className="px-2 mb-0 text-3xl font-black text-center text-white">How to apply?</h2>
<p className="mt-2">
Send your cover letter and resume to <strong>careers at spacedrive dot com</strong> and
we'll get back to you shortly!
</p>
</div>
</div>