From 0c2630a76edd40f1c4f43fac47e9280a87fb0493 Mon Sep 17 00:00:00 2001
From: Vlad-Stefan Harbuz <vlad@vlad.website>
Date: Thu, 1 May 2025 16:33:37 +0100
Subject: [PATCH] Jobs: add first Job of the Week

---
 src/pages/jobs.astro  | 68 +++++++++++++++++++++++++++++++++++++++++++
 src/styles/common.css | 30 +++++++++++++++++++
 2 files changed, 98 insertions(+)

diff --git a/src/pages/jobs.astro b/src/pages/jobs.astro
index 2c8faf80..f63a4347 100644
--- a/src/pages/jobs.astro
+++ b/src/pages/jobs.astro
@@ -32,6 +32,38 @@ const memberMap = await getMembersAsMap();
           matches your values.
         </p>
       </section>
+      <section>
+        <div class="featured-job badge-heading-container">
+          <div class="badge-heading">
+            <h2>Job of the week</h2>
+          </div>
+          <div class="flex-center flex-column">
+            <div class="featured-job-head">
+              <img src=`/images/members/astral/logo.webp` alt=`The Astral logo`>
+              <h2><a href=`/members/astral`>Astral</a></h2>
+            </div>
+            <h2 class="job-title">
+              <a href="https://jobs.ashbyhq.com/Astral/84cf53c0-d584-47c6-bff0-07ec97c85093">
+                Software Engineer, Build Systems & Linkers
+              </a>
+            </h2>
+          </div>
+          <p>
+            Astral have built
+            <a href="https://github.com/astral-sh/ruff">Ruff</a>,
+            an extremely fast Python linter and formatter;
+            and
+            <a href="https://github.com/astral-sh/uv">uv</a>,
+            a comprehensive Python package manager — two of the fastest-growing developer tools ever.
+          </p>
+          <p>
+            Now, Astral is looking for a developer to work on build systems and linkers, as part of a remote, highly
+            distributed team with competitive pay. And best of all —
+            <em>you'd be getting paid to be an Open Source maintainer</em>.
+            <a href="https://jobs.ashbyhq.com/Astral/84cf53c0-d584-47c6-bff0-07ec97c85093">Apply now →</a>
+          </p>
+        </div>
+      </section>
       <section>
         {Object.keys(jobSet.companies).map((memberId) =>
           jobSet.companies[memberId].length > 0 && (
@@ -54,6 +86,42 @@ const memberMap = await getMembersAsMap();
 </Layout>
 
 <style>
+  .featured-job {
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border: 3px solid transparent;
+    border-radius: 0.5rem;
+    background-color: var(--color-light-bg);
+    &.badge-heading-container {
+      padding-top: 2.5rem;
+    }
+    .featured-job-head {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      margin-bottom: 1rem;
+      img {
+        align-self: center;
+        max-width: 4.5rem;
+        border-radius: 0.5rem;
+        @media (max-width: 450px) {
+          max-width: 3.0rem;
+        }
+      }
+      h2 {
+        margin: 0;
+        font-size: 1.2rem;
+        line-height: 1.3;
+        a:not(:hover) {
+          color: var(--color-text);
+          text-decoration: none;
+        }
+      }
+    }
+    .job-title {
+      font-size: 1.2rem;
+    }
+  }
   .job-set {
     margin-bottom: 1rem;
     padding: 1rem;
diff --git a/src/styles/common.css b/src/styles/common.css
index a929d337..fc0a7591 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -541,6 +541,12 @@ footer {
   align-items: center;
   justify-content: center;
 }
+.flex-row {
+  flex-direction: row;
+}
+.flex-column {
+  flex-direction: column;
+}
 .text-center {
   text-align: center;
 }
@@ -593,6 +599,30 @@ footer {
   font-weight: bold;
   font-size: 1.2rem;
 }
+.badge-heading {
+  text-align: center;
+  h1, h2, h3, h4, h5, h6 {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    transform: rotate(3deg);
+    position: relative;
+    z-index: 20;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 1.3rem;
+    background-color: var(--color-primary);
+    color: black;
+  }
+}
+.badge-heading-container {
+  position: relative;
+  .badge-heading {
+    position: absolute;
+    top: -1.3rem;
+    left: 0;
+    right: 0;
+  }
+}
 
 hr {
   margin: 1.5rem auto;