feat: redesign careers page

content/careers/_index.md

 ---
 title: Careers
 date: 2004-02-02T18:54:43.927Z
+headline: ""
+links: [[href: "#current", text: "Current Positions"]]
 layout: single
+hide_page_title: true
 hide_sidebar: true
 lastmod: 2022-05-24T13:16:59.860Z
 description: Join the Eclipse Foundation team to make a difference in the open source community.
@@ -12,26 +15,47 @@ keywords:
   - open source jobs 
   - developer jobs
   - remote jobs
+container: container-fluid
+page_css_file: /public/css/careers.css 
 ---
 
-{{< grid/div class="row" isMarkdown="false">}}
-  {{< grid/div class="col-md-13 margin-top-10" isMarkdown="false" >}}
-    <h2>Current Openings</h2>
-    {{< pages/careers/jazz-hr-basic-job-widget >}}
-  {{</ grid/div >}}
-
-{{< grid/div class="col-md-10 col-md-offset-1" >}}
+{{< pages/careers/why-join >}}
 ## Why you should join the team
-Join a collaborative team built around the core values of service, respect, professionalism, and collegiality. We work together to make a difference for our members and open source communities.
 
-The Eclipse Foundation is global and offers *fully remote positions*, with staff located in Europe, Canada, and the United States.
+Join a collaborative team built around the core values of service, respect,
+professionalism, and collegiality. We work together to make a difference for
+our members and open source communities.
+
+The Eclipse Foundation is global and offers fully remote positions, with staff
+located in Europe, Canada, and the United States.
 
-We understand the importance of work-life balance and support this with many worker-based programs, including **Friday flex-time**, a **right-to-disconnect policy**, and **"Corporate Recharge" days**.
+We understand the importance of work-life balance and support this with many
+worker-based programs, including **Friday flex-time**, a **right-to-disconnect
+policy**, and **"Corporate Recharge"** days. And of course, we offer highly
+competitive compensation along with a comprehensive benefits package. 
 
-And of course, we offer highly competitive compensation along with a comprehensive benefits package.
+{{</ pages/careers/why-join >}}
 
+{{< grid/split image_class="bg-what-we-do" >}}
 ## What we do at the Eclipse Foundation
 
-Open source is one of the key drivers of innovation today. It touches all sectors of the economy and has a major impact on the software systems that each of us interact with every day. As a Belgian international nonprofit association, the Eclipse Foundation is one of the largest open source foundations in the world and acts as the steward for some of the most interesting and important projects in a wide range of technology areas. Each of our team members plays a direct and proactive role in the success of Eclipse and its projects and initiatives, and as captured by our most recent employee survey, the work done by our team is "dynamic, challenging, and impactful". Come be a part of our highly motivated and effective team!
-{{</ grid/div >}}
-{{</ grid/div >}}
+Open source is one of the key drivers of innovation today. It touches all
+sectors of the economy and has a major impact on the software systems that each
+of us interact with every day.
+
+As a Belgian international nonprofit association, the Eclipse Foundation is one
+of the largest open source foundations in the world and acts as a steward for
+some of the most interesting and important projects in a wide range of
+technology areas. Each of our team members plays a direct and proactive role in
+the success of Eclipse and its projects and initiatives, and as our team is
+"dynamic, challenging, and impactful". Come be a part of our highly motivated
+and effective team!
+
+{{</ grid/split >}}
+
+{{< grid/split image_class="bg-current-positions" reverse="true" is_markdown="false" >}}
+  <h2 class="margin-bottom-30" id="current">Current Positions</h2>
+  {{< pages/careers/jazz-hr-basic-job-widget >}}
+{{</ grid/split >}}
+
+{{< pages/careers/testimonials >}}

layouts/shortcodes/grid/split.html

+{{/*
+  Copyright (c) 2024 Eclipse Foundation, Inc.
+  This program and the accompanying materials are made available under the
+  terms of the Eclipse Public License v. 2.0 which is available at
+  http://www.eclipse.org/legal/epl-2.0.
+  Contributors:
+    Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+
+  SPDX-License-Identifier: EPL-2.0
+*/}}
+
+{{ $reverse := .Get "reverse" | default false }}
+{{ $image_class := .Get "image_class" | default "bg-primary" }}
+{{ $content_class := .Get "content_class" | default "padding-60" }}
+{{ $is_markdown := .Get "is_markdown" | default true }}
+
+<section class="split row {{ if $reverse }}split-reverse{{ end }}"> 
+  <div class="split-col {{ $image_class }}"> 
+  </div>
+  <div class="split-col">
+    <div class="split-content {{ $content_class }}">
+      {{ if or (not $is_markdown) (eq $is_markdown "false") }}
+        {{ .Inner }}
+      {{ else }}
+        {{ .Inner | markdownify }}
+      {{ end }}
+    </div>
+  </div>
+</section>

layouts/shortcodes/pages/careers/testimonials.html

+{{/*
+  Copyright (c) 2024 Eclipse Foundation, Inc.
+  This program and the accompanying materials are made available under the
+  terms of the Eclipse Public License v. 2.0 which is available at
+  http://www.eclipse.org/legal/epl-2.0.
+  Contributors:
+    Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+
+  SPDX-License-Identifier: EPL-2.0
+*/}}
+
+<section class="careers-testimonials row margin-y-40">
+  <div class="container">
+    <h2 class="margin-bottom-30 text-center">Hear it from our Team</h2>
+    <div class="testimonial col-sm-8 padding-y-30 padding-x-60 bg-neutral-tinted-dark match-height-item">
+      <img src="./images/quote-icon-beige.png" alt="">
+      <p class="margin-bottom-30">
+        Working at the Eclipse Foundation has given me a better understanding
+        of how open source projects and communities work. It is also a safe and
+        comfortable work environment that aligns with my values and helps me
+        achieve work-life balance.
+      </p>
+      <p>
+        <i>
+          Carmen Delgado, Community Manager
+        </i>
+      </p>
+    </div>
+    <div class="testimonial col-sm-8 padding-y-30 padding-x-60 bg-primary-light match-height-item">
+      <img src="./images/quote-icon-primary.png" alt="">
+      <p class="margin-bottom-30">
+        The collborative environment here is not just about technology, but
+        also about making a positive impact. It's fulfilling to be with an
+        organisation that values progress and diverse ideas. 
+      </p>
+      <p>
+        <i>
+          Christopher Guindon, Manager, Web Development
+        </i>
+      </p>
+    </div>
+    <div class="testimonial col-sm-8 padding-y-30 padding-x-60 bg-neutral-flat match-height-item">
+      <img src="./images/quote-icon-neutral.png" alt="">
+      <p class="margin-bottom-30">
+        The Eclipse Foundation is a progressive global organisation where
+        employees from around the globe are valued and heard. The Foundation
+        has provided me opportunities to grow over the past 4 years and it has
+        been a wonderful ride.
+      </p>
+      <p>
+        <i>
+          Zahra Fazli, Membership Coordinator
+        </i>
+      </p>
+    </div>
+  </div>
+</section>

layouts/shortcodes/pages/careers/why-join.html

+{{/*
+  Copyright (c) 2024 Eclipse Foundation, Inc.
+  This program and the accompanying materials are made available under the
+  terms of the Eclipse Public License v. 2.0 which is available at
+  http://www.eclipse.org/legal/epl-2.0.
+  Contributors:
+    Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+
+  SPDX-License-Identifier: EPL-2.0
+*/}}
+
+<section class="why-join-section split row split-reverse"> 
+  <div class="split-col"> 
+    <a class="eclipsefdn-video why-join-video" href="https://www.youtube.com/watch?v=SnQ9xk9EROw" data-thumbnail-resolution="max">
+    </a>
+  </div>
+  <div class="split-col">
+    <div class="split-content padding-60">
+      {{ .Inner | markdownify }}
+    </div>
+  </div>
+</section>
+

less/base/_containers.less

+/*!
+ * Copyright (c) 2024 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+.split {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .split-col {
+    width: 100%;
+  }
+
+  @media (min-width: @screen-md-min) {
+    flex-direction: row;
+
+    &.split-reverse {
+      flex-direction: row-reverse;
+
+      .split-content {
+        margin-left: auto;
+      }
+    }
+  }
+
+  @media (min-width: @screen-lg-min) {
+    .split-content {
+      max-width: calc(@container-lg / 2); 
+    }
+  }
+}
+

less/page_css_file/careers.less

+/*!
+ * Copyright (c) 2024 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+@import (reference) '../styles.less';
+
+//== Jumbotron
+
+.featured-jumbotron {
+  padding-top: 24rem;
+  padding-bottom: 4rem;
+  background: url('../images/careers/jumbotron.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 45% 35%;
+  
+  // Links container
+  .list-inline {
+    text-align: center;
+  }
+
+  .btn {
+    padding: 1.5rem 2rem;
+    border-radius: 9999px;
+    font-weight: bold;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    padding-top: 36rem;
+  }
+}
+
+.bg-what-we-do {
+  background: url('../images/careers/what-we-do.jpg');
+  background-size: cover;
+  background-position: center 25%;
+  background-repeat: no-repeat;
+  min-height: 24rem;
+}
+
+.bg-current-positions {
+  background: url('../images/careers/current-positions.jpg');
+  background-size: cover;
+  background-position: center 25%;
+  background-repeat: no-repeat;
+  min-height: 24rem;
+}
+
+@media (min-width: @screen-sm-min) {
+  .split-col.bg-what-we-do + .split-col,
+  .split-col.bg-current-positions + .split-col {
+    min-height: 60rem; 
+  }
+}
+
+.eclipsefdn-video-with-js,
+.eclipsefdn-video-with-js img {
+  max-height: 47.9rem;
+}
+
+.eclipsefdn-video-with-js img {
+  object-fit: cover;
+}
+
+.split .split-col {
+  max-width: 128rem;
+  @media (min-width: @screen-sm-min) {
+    min-height: 32rem;
+  }
+}
+
+.eclipsefdn-video-with-js {
+  aspect-ratio: 16/9;
+
+  &,
+  img {
+    max-height: unset;
+  }
+}
+
+//== Testimonials
+
+.careers-testimonials {
+  color: @black;
+
+  .testimonial img {
+    display: block;
+    margin: 4rem auto;
+  }
+}

less/styles.less

@@ -15,6 +15,7 @@
 @import '~eclipsefdn-solstice-assets/less/astro/main.less';
 @import '_variables.less';
 
+@import 'base/_containers.less';
 @import 'components/_cards.less';
 @import 'layout/_jumbotron.less';
 

webpack.mix.js

@@ -35,6 +35,7 @@ mix.less('./less/page_css_file/sponsor/collaboration.less', 'static/public/css/c
 mix.less('./less/page_css_file/blogs-and-videos.less', 'static/public/css/blogs-and-videos.css');
 mix.less('./less/page_css_file/topics.less', 'static/public/css/topics.css');
 mix.less('./less/page_css_file/resources/marketplaces.less', 'static/public/css/resources/marketplaces.css');
+mix.less('./less/page_css_file/careers.less', 'static/public/css/careers.css');
 
 // eclipse.org/research
 mix.less('./less/page_css_file/research/styles.less', 'static/public/css/research-styles.css');