From bc90610d1af4fa5e90bb4e8765fe4c20a3e1573f Mon Sep 17 00:00:00 2001
From: maxichrome <maxichrome@users.noreply.github.com>
Date: Mon, 18 Jul 2022 06:46:32 -0500
Subject: [PATCH] refactor careers for when no positions open

---
 apps/landing/src/pages/careers.page.tsx | 90 +++++++++++--------------
 1 file changed, 41 insertions(+), 49 deletions(-)

diff --git a/apps/landing/src/pages/careers.page.tsx b/apps/landing/src/pages/careers.page.tsx
index 7c3a5ae60..28e1a569c 100644
--- a/apps/landing/src/pages/careers.page.tsx
+++ b/apps/landing/src/pages/careers.page.tsx
@@ -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>