Merge branch 'webdev/bs-3.4.x/redesign' into 'main'

feat: Redesign

See merge request !74

layouts/shortcodes/pages/org/governance/tile.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+{{ $class := .Get "class" }}
+{{ $title := .Get "title" }}
+{{ $url := .Get "url" }}
+
+<div class="governance-tile {{ $class }}">
+  <a href="{{ $url }}">
+  <h2 class="h4">{{ $title }}</h2>
+  <div>
+     {{ .Inner | markdownify }}
+  </div>
+  </a>
+</div>

layouts/shortcodes/pages/os4biz/ospo.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+<div class="row margin-top-60 margin-bottom-60">
+  <div class="container">
+    <div class="col-md-6 display-flex align-items-center justify-content-center match-height-item-by-row">
+      <img class="img" src="images/orbit.png" alt="" />
+    </div>
+    <div class="col-md-18 match-height-item-by-row">
+      <hgroup>
+        <h1>Open Source Program Offices</h1>
+        <div class="h2 text-primary-light">
+          Managing Open Source for Your Organization
+        </div>
+      </hgroup>
+    </div>
+  </div>
+</div>
+<div class="row bg-neutral-flat padding-top-60 padding-bottom-60">
+  <div class="container">
+    <div class="col-sm-12 match-height-item-by-row">
+      {{ .Inner | markdownify }}
+    </div>
+    <div class="col-sm-10 col-sm-offset-2 display-flex align-items-center justify-content-center match-height-item-by-row">
+      <img class="img img-responsive" src="images/ospo-alliance.svg" alt="OSPO Alliance" /> 
+    </div>
+  </div>
+</div>

layouts/shortcodes/pages/projects/resources.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+<div class="row margin-top-60 margin-bottom-60">
+  <div class="container">
+    <div class="col-md-6 display-flex align-items-center justify-content-center match-height-item-by-row">
+      <img class="img img-responsive hidden-xs hidden-sm" src="images/orbit.png" alt="" />
+    </div>
+    <div class="col-md-18 match-height-item-by-row">
+      <h1>Project Resources</h1>
+      <div class="h2 text-primary-light">
+        Get involved in Eclipse projects to help<br aria-hidden="true"/> contribute to their
+        success
+      </div>
+    </div>
+  </div>
+</div>
+<div class="row">
+
+  <div class="col-md-12 bg-neutral-tinted bg-hover-darker">
+    <section class="tile-section padding-40 match-height-item-by-row">
+      <div class="tile-section-content">
+        <h2 class="h3 text-center">Eclipse Foundation Development Process</h2>
+        <p>
+          This document describes the development process for the Eclipse
+          Foundation. In particular, it describes how the Membership at Large,
+          the Board of Directors, other constituents of the Ecosystem, and the
+          Eclipse Management Organization (EMO) lead, influence, and collaborate
+          with Eclipse Projects.
+        </p>
+      </div>
+      <div class="tile-section-end display-flex justify-content-center">
+        <a class="btn btn-primary" href="/projects/dev_process/">Learn More</a>
+      </div>
+    </section>
+  </div>
+
+  <div class="col-md-12 bg-neutral-flat-dark bg-hover-darker">
+    <section class="tile-section padding-40 match-height-item-by-row">
+      <div class="tile-section-content">
+        <h2 class="h3 text-center">Eclipse Foundation Project Handbook</h2>
+        <p>This document provides you with the information that you need to create a new Eclipse open source project or
+          become a committer on an existing one.</p>
+      </div>
+      <div class="tile-section-end display-flex justify-content-center">
+        <a class="btn btn-primary" href="/projects/handbook/">Learn More</a>
+      </div>
+    </section>
+  </div>
+</div>
+
+<div class="row padding-top-30 padding-bottom-30">
+  <div class="col-md-12 bg-neutral-tinted bg-hover-darker">
+    <section class="tile-section padding-40 match-height-item-by-row">
+      <div class="tile-section-content">
+        <h2 class="h3 text-center">Committer Training</h2>
+        <p>Eclipse projects must be transparent, open and meritocratic. Check out these training videos to learn more.
+        </p>
+      </div>
+      <div class="tile-section-end display-flex justify-content-center">
+        <a class="btn btn-primary" href="/projects/training/">Learn More</a>
+      </div>
+    </section>
+  </div>
+  <div class="col-md-12 bg-neutral-flat-dark bg-hover-darker">
+    <section class="tile-section padding-40 match-height-item-by-row">
+      <div class="tile-section-content">
+        <h2 class="h3 text-center">EMO Office Hours</h2>
+        <p>The Eclipse Foundation Projects Team schedules events to discuss the <a href="/projects/dev_process">Eclipse
+          Foundation Development Process</a>, the <a href="/org/documents/Eclipse_IP_Policy.pdf">Eclipse Foundation
+          Intellectual Property
+          Policy</a> Policy and <a href="/projects/handbook/#ip">Eclipse Foundation Due
+          Diligence
+          Process</a>, and other related topics.
+        </p>
+      </div>
+      <div class="tile-section-end padding-top-20 display-flex justify-content-center">
+        <div class="btn-group">
+          <a class="btn btn-neutral" href="/projects/calendar/">
+            See the calendar
+          </a>
+          <a class="btn btn-primary" href="https://youtube.com/playlist?list=PLg5j2ehoN9bZiqraXU7BeYLLc0VW6jysC">
+            Watch previous recordings
+          </a>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

layouts/shortcodes/pages/resources/marketplaces.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+<div class="row row-no-gutters margin-top-60 margin-bottom-60 text-center">
+  <div class="col-md-6">
+    <div class="marketplace-tile padding-30 match-height-item-by-row text-left">
+      <p class="h3">
+        Find the open source extensions you need through one of our marketplaces.
+      </p>
+    </div>
+  </div>
+  <div class="col-sm-16 col-sm-offset-4 col-md-6 col-md-offset-0 match-height-item-by-row">
+    <a class="marketplace-tile padding-30 bg-neutral-tinted bg-hover-darker match-height-item-by-row" href="https://marketplace.eclipse.org/">
+      <div class="marketplace-tile-logo">
+        <img src="images/eclipse-ide.png" alt="" />
+      </div>
+      <p class="h3">Eclipse IDE Marketplace</p>
+    </a>
+  </div>
+  <div class="col-sm-16 col-sm-offset-4 col-md-6 col-md-offset-0 match-height-item-by-row">
+    <a class="marketplace-tile padding-30 bg-neutral-tinted-dark bg-hover-darker match-height-item-by-row" href="https://open-vsx.org/">
+      <div class="marketplace-tile-logo">
+        <img src="images/open-vsx.png" alt="" />
+      </div>
+      <p class="h3">Open VSX Registry</p>
+    </a>
+  </div>
+  <div class="col-sm-16 col-sm-offset-4 col-md-6 col-md-offset-0 match-height-item-by-row">
+    <a class="marketplace-tile padding-30 bg-primary-light bg-hover-darker match-height-item-by-row" href="https://adoptium.net/marketplace/">
+      <div class="marketplace-tile-logo">
+        <img src="images/adoptium.png" alt="" />
+      </div>
+      <p class="h3">Adoptium Marketplace</p>
+    </a>
+  </div>
+</div>

layouts/shortcodes/pages/sponsor/collaboration.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+<!-- close default .container div -->
+</div>
+
+<div class="container-fluid sponsor-collaboration">
+  <div class="row">
+
+    <div class="col-md-6 match-height-item-by-row col-md-offset-6">
+      <h2>Sponsor as an Organization</h2>
+      <p>Complete the <a href="/org/workinggroups/sponsorship/working-group-sponsorship-agreement.pdf">sponsorship
+          agreement form</a>, to sponsor any of the <a href="/org/workinggroups/explore.php">Eclipse Foundation Working
+          Groups</a>. </p>
+    </div>
+
+    <div class="col-md-6 match-height-item-by-row">
+      <h2>Sponsor as an Individual</h2>
+      <p>Individuals can also <a href="/sponsor/">sponsor to the Eclipse Foundation</a>.</p>
+    </div>
+  </div>
+</div>
+
+<!-- re-open default .container div -->
+<div class="container padding-bottom-20">

layouts/shortcodes/pages/topics/card.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+{{ $title := .Get "title" }}
+{{ $image := .Get "image" }}
+
+<div class="card">
+  <div class="card-logo">
+    <img class="img img-responsive" src="{{ $image }}" alt="{{ $title }}" aria-role="heading">
+  </div>
+  <div class="card-content">
+    <p>
+{{ .Inner | markdownify }}
+    </p>
+  </div>
+</div>

layouts/shortcodes/pages/topics/communities.html

+<!--
+  Copyright (c) 2023 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
+-->
+
+<!-- Topic should correspond to the topic's key defined within the data file. --> 
+
+{{ $topic := .Get "topic" }}
+{{ $communities_data := $.Site.Data.topics.communities }}
+{{ $communities := index $communities_data.topics $topic }}
+
+<section>
+  <h2 class="margin-bottom-40" id="communities">Communities</h2>
+  <div class="communities-card-list card-list">
+    {{ range $communities }}
+      <div class="card">
+        <div class="card-logo">
+          <a class="link-unstyled" href="{{ .link }}">
+            <img class="img img-responsive" src="{{ .image_url }}" alt="{{ .name }}" aria-role="heading" />
+          </a>
+        </div>
+        <div class="card-content">
+          {{ .content | markdownify }}
+        </div>
+      </div>
+    {{ end }}
+    </div>
+</section>

less/_variables.less

 /*!
- * Copyright (c) 2021 Eclipse Foundation, Inc.
+ * Copyright (c) 2021, 2023 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
@@ -7,8 +7,14 @@
  * 
  * Contributors:
  *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
  * 
  * SPDX-License-Identifier: EPL-2.0
 */
 
-@header-dark-bg-img: url('images/jumbotron/home-jumbo-image.jpg');
+@header-dark-bg-img: url('images/jumbotron/home-jumbo-image.jpg');
\ No newline at end of file
+
+//@todo: Move to EFSA
+@neutral-tinted-dark: #c9c5c5;
+@neutral-tinted-dark-lighter: #c3c3c3;
+@neutral-tinted-dark-darker: #8b8686;

less/base/_utility-classes.less

+/*!
+ * Copyright (c) 2023 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
+*/
+
+//@todo: Move to EFSA
+
+//== Positioning
+// Flex
+.align-items-stretch {
+  align-items: stretch;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+//== Colors
+// Backgrounds
+.bg-neutral-tinted-dark {
+  background-color: @neutral-tinted-dark;
+
+  &.bg-hover-lighter:hover {
+    background-color: @neutral-tinted-dark-lighter;
+  }
+
+  &.bg-hover-darker:hover {
+    background-color: @neutral-tinted-dark-darker;
+  }
+}

less/components/_cards.less

+/*!
+ * Copyright (c) 2023 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
+*/
+
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4rem;
+}
+
+.card {
+  width: 100%;
+  padding: 4rem;
+  box-shadow: 0px 0px 10px darken(@white, 10%);
+  text-align: center;
+
+  .card-logo {
+    max-width: 26rem;
+    height: 8rem;
+    margin-bottom: 4rem;
+
+    img {
+      height: 100%;
+      margin: auto;
+      object-fit: contain;
+    }
+  }
+
+  @media (min-width: @screen-md-min) {
+    width: 28rem;
+  }
+}
+

less/layout/_jumbotron.less

+/*!
+ * Copyright (c) 2023 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
+*/
+
+// Remove shadow from jumbotron paragraphs at smaller screen sizes.
+@media (max-width: @screen-md-max) {
+  .jumbotron p {
+    text-shadow: unset;
+  }
+}
+
+
+// @todo: Move to EFSA 
+.featured-jumbotron-dark.featured-jumbotron-astro {
+    h2,
+    .h2,
+    h3,
+    .h3 {
+        color: @white;
+    }
+}
+
+.featured-jumbotron .featured-story-jumbotron {
+  .container;
+}
+
+.featured-jumbotron {
+    text-align: center;
+    font-weight: 400;
+
+    @media (min-width: @screen-md-min) {
+        text-align: left;
+    }
+}
+
+.featured-jumbotron.featured-jumbotron-astro h1 {
+  font-size: @font-size-3xl;
+  letter-spacing: normal;
+}
+
+
+//== Featured Story
+
+.featured-story-jumbotron .featured-story-jumbotron-content-title {
+  font-size: @font-size-xl;
+}
+
+// @todo: Move to EFSA
+.featured-story-jumbotron {
+    max-width: calc(100% + 30px);
+    margin-left: -15px;
+    margin-right: -15px;
+    text-align: center;
+
+    @media (min-width: @screen-md-min) {
+        text-align: left;
+    }
+}
+

less/page_css_file/blogs-and-videos.less

+@import (reference) '../styles.less';
+
+.rss-blog-list .post {
+  display: flex;
+
+  &-head {
+    margin-bottom: 1.5rem;
+
+    &-title {
+      .link-unstyled;
+      display: inline-block;
+      margin-bottom: 0;
+      font-size: @font-size-lg;
+      
+      &:hover {
+        color: darken(@brand-primary-light, 15%);
+      }
+    }
+
+    &-title,
+    &-subtitle {
+      color: @brand-primary-light;
+    }
+  }
+}

less/page_css_file/collaborations/styles.less

@@ -20,7 +20,7 @@
 .section-dark {
   padding-top: 3em;
   padding-bottom: 3em;
-  background-color: #262525; 
+  background-color: #262525;
 
   th,
   td,
@@ -56,7 +56,7 @@
       border: 1px solid @section-dark-white;
       color: @section-dark-white;
     }
-    
+
     &:hover,
     &:active {
       border-color: darken(@section-dark-white, 50%);
@@ -95,18 +95,23 @@
     }
   }
 
+  .featured-jumbotron-subtitle {
+    margin-bottom: 2rem;
+  }
+
   .btn-primary {
     padding: @collaborations-btn-padding;
   }
 }
 
-.header-collaborations-bg-img {
-  background-image: url(../../images/collaborations/bg-header.jpg)
+.header-collaborations-bg-img .featured-jumbotron {
+  background-image: url(../../images/collaborations/bg-header.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 // Collaborating section
 .collaborations-collaborating {
-  padding-top: 2em;
 
   @media (min-width: @screen-md-min) {
     padding-bottom: 6em;
@@ -166,7 +171,7 @@
     position: relative;
     flex-shrink: 0;
     width: 5em;
-    margin: @collaborations-icon-wrapper-margin-top 2em 0 0; 
+    margin: @collaborations-icon-wrapper-margin-top 2em 0 0;
   }
 
   .item-icon {
@@ -196,7 +201,13 @@
 }
 
 // Join collaboration section
+.eclipsefdn-weighted-working-groups {
+  display: flex;
+  gap: 3rem;
+}
+
 .weighted-working-group-block-wrapper {
+  width: 100%;
   padding-bottom: 2em;
 }
 
@@ -474,7 +485,7 @@
     @media (min-width: @screen-md-min) {
       width: calc(100% - @section-quote-bar-width);
       padding: @section-content-padding-y @section-content-padding-x;
-    
+
       &:hover {
         background-color: @brand-primary-mid;
 
@@ -519,10 +530,10 @@
     width: 100%;
   }
 
-  .sections-content-quote-author {  
+  .sections-content-quote-author {
     font-weight: 400;
-      
-    p { 
+
+    p {
       margin-bottom: 0;
     }
   }
@@ -564,7 +575,7 @@
       color: @white;
     }
 
-    &:hover { 
+    &:hover {
       text-decoration: none;
       background-color: @table-of-contents-hover-background-color;
 
@@ -662,4 +673,4 @@
     width: 100%;
     object-fit: contain;
   }
-}
+}
\ No newline at end of file

less/page_css_file/homepage.less

+/*!
+ * Copyright (c) 2021, 2023 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:
+ *   Eric Poirier <eric.poirier@eclipse-foundation.org>
+ *   Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+@import (reference) '../styles.less';
+
+@jumbotron-gutter-size: 25%;
+
+.header-home-bg-img {
+    .featured-jumbotron {
+        background-image: url('../images/jumbotron/home.jpg');
+        background-size: cover;
+        background-position: 82%;
+
+        @media (min-width: @screen-sm-min) {
+            background-position: right top;
+        }
+    }
+}
+
+.header-anniversary-bg-img  {
+  min-height: 600px;
+  background-position: 65%;
+}
+
+.featured-jumbotron {
+  padding-top: 4.5rem;
+  padding-bottom: 0;
+}
+
+.featured-jumbotron h1:after {
+  border-color: #2c2255;
+  margin: 45px auto 0;
+}
+
+.featured-jumbotron .featured-story-jumbotron {
+  margin-bottom: unset;
+}
+
+.featured-jumbotron .featured-jumbotron-end-custom {
+    display: flex;
+    flex-direction: column;
+
+    .custom-jumbotron-end-lead-text {
+        max-width: 100%;
+        text-align: center;
+        padding: 2.5rem 0;
+        font-size: 1.6rem;
+    }
+
+    .custom-jumbotron-end-link-group {
+        width: 100%;
+    }
+
+    .custom-jumbotron-end-link-group {
+        width: calc(100% + 30px);
+        margin-left: -15px;
+        margin-right: -15px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        & > a {
+            width: 100%;
+            padding: 2rem;
+            text-align: center;
+            font-weight: 300;
+            font-size: 1.6rem;
+            cursor: pointer;
+            &,
+            &:hover,
+            &:visited,
+            &:active {
+                color: @black;
+            }
+        }
+
+        a:first-child {
+            background-color: darken(@white, 5%);
+        }
+
+        a:nth-child(2) {
+            background-color: darken(@white, 20%);
+        }
+
+        a:nth-child(3) {
+            background-color: darken(@white, 30%);
+        }
+
+        a:first-child:hover {
+            background-color: darken(@white, 7.5%);
+        }
+
+        a:nth-child(2):hover {
+            background-color: darken(@white, 22.5%);
+        }
+
+        a:nth-child(3):hover {
+            background-color: darken(@white, 32.5%);
+        }
+    }
+
+    .link-overlay {
+        display: none;
+    }
+
+    @media (min-width: @screen-md-min) {
+        margin-top: 1rem;
+        flex-direction: row;
+
+        .custom-jumbotron-end-link-group {
+            flex-direction: row;
+            align-items: stretch;
+            width: calc(100% - @jumbotron-gutter-size);
+            margin: unset;
+
+            a {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                font-size: @font-size-xl;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    .link-overlay {
+                        position: absolute;
+                        top: 0;
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 100%;
+                        min-height: 100%;
+                        padding: 2rem;
+                        color: @white;
+                        background-color: @black;
+                        animation-name: custom-jumbotron-end-link-overlay-animation;
+                        animation-duration: 0.2s;
+                        animation-timing-function: linear;
+
+                        &:hover {
+                            min-height: 150%;
+                        }
+                    }
+                }
+
+                &:focus .link-overlay {
+                    min-height: 150%;
+                }
+            }
+        }
+
+        .custom-jumbotron-end-lead-text {
+            max-width: @jumbotron-gutter-size;
+            padding: 1rem;
+            padding-left: 0;
+            font-size: @font-size-xl;
+            font-weight: 300;
+            text-align: right;
+        }
+    }
+}
+
+@keyframes custom-jumbotron-end-link-overlay-animation {
+    from {
+        min-height: 100%;
+        color: @black;
+    }
+
+    to {
+        min-height: 150%;
+        color: @white;
+    }
+}
+
+.featured-jumbotron {
+    @media (min-width: @screen-md-min) {
+        .featured-jumbotron-end {
+            margin-top: 6rem;
+        }
+
+        .featured-story-jumbotron {
+
+            margin-left: auto;
+            margin-right: unset;
+        }
+    }
+}
+
+.featured-jumbotron-anniversary {
+  position: relative;
+}
+
+.featured-jumbotron-anniversary h1 {
+  margin-bottom: 0;
+}
+
+@media (min-width: 992px) {
+  .featured-jumbotron-anniversary h1 {
+      margin-bottom: 45px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .jumbotron p {
+      text-shadow: 0px 0px 12px #000;
+  }
+  #body_solstice .header-anniversary-bg-img  {
+      background-position: left;
+  }
+}
+
+@media (max-width: 768px) {
+  #body_solstice .header-anniversary-bg-img  {
+      background-position: 20%;
+  }
+}
+
+@media (min-width: @screen-sm-min) {
+  .featured-jumbotron .featured-story-jumbotron{
+    width: auto;
+  }
+}
+
+.featured-jumbotron h1:after {
+  border-color: #f7941e;
+}
+
+.eclipsefdn-featured-project-committer {
+  h3,
+  .h3 {
+    white-space: nowrap;
+    text-align: center;
+
+    @media (min-width: @screen-lg-min) {
+      text-align: unset;
+    }
+  }
+}
+
+.featured-card {
+  max-width: 24rem;
+  margin: auto;
+
+    .featured-card-img-wrapper {
+        width: 100%;
+        aspect-ratio: 1;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .featured-card-details-item {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        padding: 1.5rem;
+        background-color: @white;
+        text-align: center;
+
+        &-highlighted {
+            height: 7rem; // @todo: Slice number of characters in JavaScript
+            background-color: @brand-primary;
+            text-overflow: ellipsis;
+        }
+    }
+
+    a.featured-card-details-item {
+        color: @black;
+        font-weight: bold;
+
+        &:hover,
+        &:active {
+            color: @black;
+            text-decoration: none;
+            background-color: darken(@white, 5%);
+            cursor: pointer;
+        }
+    }
+
+    @media (min-width: @screen-lg-min) {
+      margin: unset;
+      max-width: unset;
+    }
+}
+
+.featured-card.featured-project {
+    .featured-card-img-wrapper {
+        padding: 4rem;
+        background-color: #ccc7c2;
+
+        img {
+            object-fit: contain;
+        }
+    }
+}
+
+// Dark sections
+.featured-section-row-dark-bg {
+    @media (min-width: @screen-lg-min) {
+        background-image: url('../images/homepage/homepage-mid-banner.png');
+        background-repeat: no-repeat;
+        background-position-x: right;
+    }
+
+    @media (min-width: 1920px) {
+      background-position: unset;
+    }
+}
+
+// Stats
+.stats-row {
+    margin-top: 10rem;
+}
+
+.stats-row-circles {
+    display: flex;
+    gap: 6rem;
+
+    .circle {
+        width: 2.4rem;
+        height: 2.4rem;
+        background-color: @brand-primary-light;
+    }
+}
+
+.stats {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6rem;
+    text-align: center;
+
+    &-item {
+        flex-basis: 40%; // @todo: Try to make this work with 50%
+    }
+
+    &-item-stat {
+        display: block;
+        font-size: 4rem;
+    }
+
+    &-item-subject {
+        display: block;
+        color: @brand-primary-light;
+        font-size: 1.6rem;
+        font-weight: 500;
+    }
+}
+
+@media (min-width: @screen-sm-min) {
+    .stats {
+        justify-content: flex-start;
+        text-align: left;
+
+        &-item {
+            flex-basis: unset;
+        }
+    }
+}
+
+// Newsroom announcements
+
+@news-section-gap: 2rem;
+
+.news-section-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: @news-section-gap;
+
+    @media (min-width: @screen-sm-min) {
+        flex-direction: row;
+    }
+}
+
+.news-section-action {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 100%;
+
+    &-img-wrapper {
+        width: 100%;
+        height: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            filter: grayscale(100%);
+        }
+    }
+
+    @media (min-width: @screen-sm-min) {
+        width: 50%;
+    }
+
+    @media (min-width: @screen-md-min) {
+        width: 30%;
+    }
+}
+
+.news-section-action-links {
+    position: absolute;
+    bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    gap: 0.75rem;
+
+    // Reset btn-block and btn-group's adjacent btn styles
+    .btn-block,
+    .btn + .btn {
+        margin-top: 0;
+        margin-left: unset;
+    }
+
+    .btn-block {
+        width: 16rem;
+    }
+
+    @media (min-width: @screen-sm-min) {
+        position: relative;
+        bottom: unset;
+        gap: unset;
+        flex-direction: row;
+
+        .btn-block {
+            width: 100%;
+        }
+    }
+}
+
+.news-items {
+    width: 100%;
+}
+
+.news-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: @news-section-gap;
+
+    @media (min-width: @screen-sm-min) {
+        flex-direction: row;
+    }
+}
+
+.tpl-news-list-item-home.news-item-card {
+    width: 100%;
+    padding: 4rem 2rem 2rem 2rem;
+    background-color: @white;
+    box-shadow: 0px 0px 12px #eaeaea;
+
+    &:hover {
+        background-color: darken(@white, 1%);
+    }
+
+    .news-item-card-title {
+        font-weight: bold;
+    }
+
+    .news-item-card-date {
+        margin: 1rem 0;
+        color: @brand-primary;
+        font-weight: bold;
+    }
+
+    @media (min-width: @screen-lg-min) {
+        width: 30%;
+    }
+}
+
+// Move to solstice-assets
+.featured-story-jumbotron .featured-story-jumbotron-content-body {
+    font-weight: 500;
+    font-size:16px;
+}

less/page_css_file/org/governance.less

+/*!
+ * Copyright (c) 2023 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';
+
+h1 {
+  text-align: center;
+}
+
+.governance-tile-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  align-items: stretch;
+  max-width: 90rem;
+  margin: 6rem auto;
+  position: relative;
+}
+
+.governance-tile {
+  width: 100%;
+  color: @black;
+  a {
+    color:inherit;
+    display: block;
+    height: 100%;
+    text-decoration: none;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    width: calc(50% - 2rem);
+  }
+
+  @media (min-width: @screen-md-min) {
+    width: calc(33.33% - 2rem); // 2rem is gap
+    aspect-ratio: 1;
+  }
+}
+