Landing page hero section new design

assets/scss/_front-page.scss

@@ -2,31 +2,55 @@
 
 .td-main main.lp {
     padding: 2rem 2.5rem;
-    padding-top:5.25rem !important;
+    padding-top: 0 !important; // top clearance handled by lp-mobile-bar (mobile) and lp-hero (desktop)
+
+    @include media-breakpoint-up(md) {
+        padding-top: 0 !important;
+    }
 }
 
 div.lp-container {
     padding: 0;
     margin: 0;
+    max-width: none;
 }
 
 .lp-row{
     margin-bottom: 2rem !important;
 }
 
+.lp-hero {
+    background-color: #0A1324;
+    min-height: 400px;
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding: 2rem 2.5rem;
+
+    @media (max-width: 767px) {
+        min-height: unset;
+    }
+}
+
+.hero-text  {
+    flex: 0 0 60%;
+}
 h1.page-title {
     font-weight: $font-weight-normal;
     font-size: 2rem;
     margin-bottom: 0.75rem;
 }
 
-h5.lp-description {
+.lp-description {
     font-size: 1rem;
     font-weight: 400;
 }
 
 .lp-container img {
     border-style: none;
+    max-width: 100%;
+    height: auto;
 }
 
 img.card-icon {
@@ -93,9 +117,18 @@ li.lp-panel-list {
 
 }
 
-p.rn-date {
-    color: #FFFFFFD4;
-    font-size: 0.75rem;
-    font-weight: 400;
-    margin-bottom: 0rem;
+// Mobile hamburger bar on landing page — matches hero background
+.lp-mobile-bar {
+    background-color: #0A1324;
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+    padding: 4rem 2.5rem 0.75rem;
+    color: white;
+
+    .btn {
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 400;
+        margin-bottom: 0rem;
+    }
 }

content/en/docs/_index.md

@@ -1,10 +1,10 @@
 ---
-title: "Welcome to Mendix Docs"
+title: "Mendix Docs"
 linktitle: "Docs"
 url: /
 type: landingpage
 layout: landingpage
-description: Learn how to create, deploy, and manage your app landscape. 
+description: Browse the documentation for Mendix products, read about latest releases, and make contributions for the Mendix community. Learn how to create, deploy, and manage your app landscape. 
 aliases:
     - /docs/index.html
     - /docs/Overview.html

layouts/landingpage/landingpage.html

@@ -17,23 +17,24 @@
                     <!-- Main page content (everything except the left sidebar, top dock, and footer) -->
                     <main class="col lp" role="main" style="border-right: none;">
                         <!-- Olu - Mobile header row: hamburger (mobile only) -->
-                        <div class="d-flex d-md-none align-items-start">
+                        <div class="d-flex d-md-none align-items-start lp-mobile-bar">
                             <button id="td-mobile-sidebar-btn" class="btn btn-link p-0 me-2 align-items-center" aria-label="Open sidebar">
-                                <span class="fas fa-bars text-dark fs-4 fa-fw" aria-hidden="true"></span>
+                                <span class="fas fa-bars fs-4 fa-fw" aria-hidden="true"></span>
                                 <span class="sr-only">Menu</span>
                             </button>
                         </div>
                         <div class="container lp-container">
 
                             <!-- Title, Description, and Illustration -->
-                            <div class="row">
-                                <div class="col-lg-auto d-flex">
-                                    <!-- Title and description from https://github.com/mendix/docs/blob/development/content/en/docs/_index.md -->
-                                    <div class="flex-grow-1">
-                                        <h1 class="page-title">{{ .Page.Title}}</h1>
-                                        <h5 class="lp-description">{{ .Page.Description}}</h5>
-                                    </div>
-                                    <img src="/images/woman-stack-of-books-laptop.svg" alt="" class="d-none d-lg-block ms-4" style="margin-top: -.5rem;">
+                           <div class="lp-hero d-flex align-items-center text-white">
+
+                                <div class="hero-text">
+                                    <h1>{{ .Page.Title }}</h1>
+                                    <h5>{{ .Page.Description }}</h5>
+                                </div>
+
+                                <div class="hero-image">
+                                    <img src="/images/lp-hero-image.svg" alt="" class="img-fluid">
                                 </div>
                             </div>