Skip to content

Commit 589320f

Browse files
reininkadamwathan
reinink
authored and
adamwathan
committed
Add careers section
1 parent ca698ac commit 589320f

File tree

11 files changed

+335
-6
lines changed

11 files changed

+335
-6
lines changed

‎next.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const fallbackLayouts = {
3939
const fallbackDefaultExports = {
4040
'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'],
4141
'src/pages/blog/**/*': ['@/layouts/BlogPostLayout', 'BlogPostLayout'],
42+
'src/pages/careers/**/*': ['@/layouts/JobPostingLayout', 'JobPostingLayout'],
4243
'src/pages/showcase/**/*': ['@/layouts/ShowcaseLayout', 'ShowcaseLayout'],
4344
}
4445

‎src/css/fonts.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
font-display: block;
55
font-style: normal;
66
font-named-instance: 'Regular';
7-
src: url('../fonts/Inter-roman-latin.var.woff2') format('woff2');
7+
src: url('../fonts/InterVariable.woff2') format('woff2');
88
}
99

1010
@font-face {
@@ -13,7 +13,7 @@
1313
font-display: block;
1414
font-style: italic;
1515
font-named-instance: 'Italic';
16-
src: url('../fonts/Inter-italic-latin.var.woff2') format('woff2');
16+
src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
1717
}
1818

1919
@font-face {

‎src/fonts/Inter-italic-latin.var.woff2‎

-55.2 KB
Binary file not shown.

‎src/fonts/Inter-roman-latin.var.woff2‎

-51.2 KB
Binary file not shown.

‎src/fonts/InterVariable-Italic.woff2‎

372 KB
Binary file not shown.

‎src/fonts/InterVariable.woff2‎

337 KB
Binary file not shown.

‎src/layouts/JobPostingLayout.js‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import { NavItems, NavPopover } from '@/components/Header'
2+
import { Logo } from '@/components/Logo'
3+
import { SearchButton } from '@/components/Search'
4+
import { ThemeToggle } from '@/components/ThemeToggle'
5+
import { formatDate } from '@/utils/formatDate'
6+
import { mdxComponents } from '@/utils/mdxComponents'
7+
import { MDXProvider } from '@mdx-js/react'
8+
import Link from 'next/link'
9+
10+
function Beams() {
11+
return (
12+
<div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center overflow-hidden">
13+
<div className="flex w-[108rem] flex-none justify-end">
14+
<picture>
15+
<source srcSet={require('@/img/beams/docs@30.avif').default.src} type="image/avif" />
16+
<img
17+
src={require('@/img/beams/docs@tinypng.png').default.src}
18+
alt=""
19+
className="w-[71.75rem] max-w-none flex-none dark:hidden"
20+
decoding="async"
21+
/>
22+
</picture>
23+
<picture>
24+
<source srcSet={require('@/img/beams/docs-dark@30.avif').default.src} type="image/avif" />
25+
<img
26+
src={require('@/img/beams/docs-dark@tinypng.png').default.src}
27+
alt=""
28+
className="hidden w-[90rem] max-w-none flex-none dark:block"
29+
decoding="async"
30+
/>
31+
</picture>
32+
</div>
33+
</div>
34+
)
35+
}
36+
37+
function Header() {
38+
return (
39+
<header className="mx-auto max-w-8xl px-4 lg:px-8">
40+
<div className="relative flex h-[60px] items-center justify-between text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
41+
<Link href="/">
42+
<span className="sr-only">Tailwind CSS home page</span>
43+
<Logo className="h-5 w-auto" />
44+
</Link>
45+
<div className="flex items-center">
46+
<SearchButton className="-my-1 flex h-8 w-8 items-center justify-center text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 lg:hidden">
47+
<span className="sr-only">Search</span>
48+
<svg
49+
width="24"
50+
height="24"
51+
fill="none"
52+
stroke="currentColor"
53+
strokeWidth="2"
54+
strokeLinecap="round"
55+
strokeLinejoin="round"
56+
aria-hidden="true"
57+
>
58+
<path d="m19 19-3.5-3.5" />
59+
<circle cx="11" cy="11" r="6" />
60+
</svg>
61+
</SearchButton>
62+
<NavPopover className="-my-1 ml-2" display="lg:hidden" />
63+
<div className="hidden items-center lg:flex">
64+
<nav>
65+
<ul className="flex items-center gap-x-8">
66+
<NavItems />
67+
</ul>
68+
</nav>
69+
<div className="ml-6 flex items-center border-l border-slate-200 pl-6 dark:border-slate-800">
70+
<ThemeToggle />
71+
<a
72+
href="https://github.com/tailwindlabs/tailwindcss"
73+
className="ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300"
74+
>
75+
<span className="sr-only">Tailwind CSS on GitHub</span>
76+
<svg viewBox="0 0 16 16" className="h-5 w-5" fill="currentColor" aria-hidden="true">
77+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
78+
</svg>
79+
</a>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</header>
85+
)
86+
}
87+
88+
function ApplyButton({ url }) {
89+
return (
90+
<a
91+
className="rounded-full bg-slate-950 px-3 py-2.5 text-sm/7 font-semibold text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950"
92+
href={url}
93+
>
94+
Apply for this job
95+
</a>
96+
)
97+
}
98+
99+
function LocationIcon() {
100+
return (
101+
<svg className="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
102+
<path className="fill-slate-500/35 dark:fill-slate-300/35" d="M4 11H12L14 15H2L4 11Z" />
103+
<path
104+
className="fill-slate-500/75 dark:fill-slate-300/75"
105+
fillRule="evenodd"
106+
clipRule="evenodd"
107+
d="M4.46447 2.46447C6.41709 0.511845 9.58291 0.511845 11.5355 2.46447C13.4882 4.41709 13.4882 7.58291 11.5355 9.53553L8 13.0711L4.46447 9.53553C2.51184 7.58291 2.51184 4.41709 4.46447 2.46447ZM8 8C9.10457 8 10 7.10457 10 6C10 4.89543 9.10457 4 8 4C6.89543 4 6 4.89543 6 6C6 7.10457 6.89543 8 8 8Z"
108+
/>
109+
</svg>
110+
)
111+
}
112+
113+
function CashIcon() {
114+
return (
115+
<svg className="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
116+
<path
117+
className="fill-slate-500/75 dark:fill-slate-300/75"
118+
fillRule="evenodd"
119+
clipRule="evenodd"
120+
d="M14 1H0V9H14V1ZM7 7C8.10457 7 9 6.10457 9 5C9 3.89543 8.10457 3 7 3C5.89543 3 5 3.89543 5 5C5 6.10457 5.89543 7 7 7Z"
121+
/>
122+
<path
123+
className="fill-slate-500/35 dark:fill-slate-300/35"
124+
fillRule="evenodd"
125+
clipRule="evenodd"
126+
d="M16 7H2V15H16V7ZM9 13C10.1046 13 11 12.1046 11 11C11 9.89543 10.1046 9 9 9C7.89543 9 7 9.89543 7 11C7 12.1046 7.89543 13 9 13Z"
127+
/>
128+
</svg>
129+
)
130+
}
131+
132+
export function JobPostingLayout({ children, meta }) {
133+
return (
134+
<>
135+
<Beams />
136+
<Header />
137+
<div className="mx-auto max-w-4xl overflow-hidden sm:overflow-visible sm:px-8 xl:max-w-8xl xl:px-8">
138+
<div className="mt-12 grid grid-cols-1 items-start border-slate-950/10 dark:border-white/10 sm:mt-16 sm:border-t xl:grid-cols-[34rem_minmax(0,1fr)]">
139+
<div className="relative top-0 border-b border-slate-950/10 px-8 pb-12 pt-8 dark:border-white/10 sm:border-x sm:px-12 sm:py-16 xl:sticky xl:border-r-0">
140+
<span className="absolute -left-px top-[-33px] h-8 w-px bg-gradient-to-t from-slate-950/10 to-transparent dark:from-white/10" />
141+
<span className="absolute -right-px top-[-33px] h-8 w-px bg-gradient-to-t from-slate-950/10 to-transparent dark:from-white/10" />
142+
<span className="absolute -left-px bottom-[-33px] h-8 w-px bg-gradient-to-b from-slate-950/10 to-transparent dark:from-white/10 max-xl:hidden" />
143+
<span className="absolute -top-px left-[-33px] h-px w-8 bg-gradient-to-l from-slate-950/10 to-transparent dark:from-white/10" />
144+
<span className="absolute -top-px right-[-33px] h-px w-8 bg-gradient-to-r from-slate-950/10 to-transparent dark:from-white/10 xl:hidden" />
145+
<span className="absolute -bottom-px left-[-33px] h-px w-8 bg-gradient-to-l from-slate-950/10 to-transparent dark:from-white/10" />
146+
<span className="absolute -bottom-px right-[-33px] h-px w-8 bg-gradient-to-r from-slate-950/10 to-transparent dark:from-white/10 max-xl:hidden" />
147+
<div className="absolute inset-x-0 -bottom-2 flex h-2 justify-center overflow-hidden">
148+
<div className="-mt-px flex h-[2px] w-full max-w-sm">
149+
<div className="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]" />
150+
<div className="-ml-[100%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]" />
151+
</div>
152+
</div>
153+
<p className="text-sm font-semibold leading-6 text-sky-500 dark:text-sky-400">
154+
We’re hiring
155+
</p>
156+
<p className="mt-2 text-[length:clamp(1rem,7vw,3.5rem)] font-semibold leading-none tracking-tighter text-black dark:text-white xl:text-6xl/none">
157+
{meta.title}
158+
</p>
159+
<div className="mt-8 flex gap-8 text-sm/7">
160+
<div className="flex items-center gap-2">
161+
<LocationIcon />
162+
<p className="text-slate-700 dark:text-slate-400">
163+
Remote <span className="text-slate-500">(ET – CET)</span>
164+
</p>
165+
</div>
166+
<div className="flex items-center gap-2">
167+
<CashIcon />
168+
<p className="text-slate-700 dark:text-slate-400">{meta.salary}</p>
169+
</div>
170+
</div>
171+
<p className="mt-7">
172+
<ApplyButton url={meta.applyUrl} />
173+
</p>
174+
<p className="mt-7 text-sm/7 text-slate-500">
175+
Closes on {formatDate(meta.dateCloses, '{MMMM} {Do} at {h}:{mm}{a} ET')}
176+
</p>
177+
</div>
178+
<div className="relative border-slate-950/10 px-8 pb-16 pt-12 dark:border-white/10 sm:mb-24 sm:border-x sm:border-b sm:px-12 sm:pt-16">
179+
<span className="absolute -right-px top-[-33px] h-8 w-px bg-gradient-to-t from-slate-950/10 to-transparent dark:from-white/10 max-xl:hidden" />
180+
<span className="absolute -top-px right-[-33px] h-px w-8 bg-gradient-to-r from-slate-950/10 to-transparent dark:from-white/10" />
181+
<span className="absolute -bottom-px right-[-33px] h-px w-8 bg-gradient-to-r from-slate-950/10 to-transparent dark:from-white/10" />
182+
<span className="absolute -bottom-px left-[-33px] h-px w-8 bg-gradient-to-l from-slate-950/10 to-transparent dark:from-white/10" />
183+
<span className="absolute -left-px bottom-[-33px] h-8 w-px bg-gradient-to-b from-slate-950/10 to-transparent dark:from-white/10" />
184+
<span className="absolute -right-px bottom-[-33px] h-8 w-px bg-gradient-to-b from-slate-950/10 to-transparent dark:from-white/10" />
185+
<div className="prose prose-slate leading-7 dark:prose-dark">
186+
<MDXProvider components={mdxComponents}>{children}</MDXProvider>
187+
</div>
188+
<div className="mt-12">
189+
<ApplyButton url={meta.applyUrl} />
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
</>
195+
)
196+
}

‎src/pages/_app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function App({ Component, pageProps, router }) {
4545
const layoutProps = Component.layoutProps?.Layout
4646
? { layoutProps: Component.layoutProps, navIsOpen, setNavIsOpen }
4747
: {}
48-
const showHeader = router.pathname !== '/'
48+
const showHeader = router.pathname !== '/' && router.pathname.startsWith('/careers') === false
4949
const meta = Component.layoutProps?.meta || {}
5050
const description =
5151
meta.metaDescription ||

‎src/pages/careers/staff-software-engineer/card.jpg‎

572 KB
Loading

0 commit comments

Comments
 (0)