New design for the docs landing page hero section (#11165)

* feat: updating landing page hero section with new design

* style updates for hero section

* feat: hero section updates based on suggestions

* Reduce hero size and image for better UX

* Fixed hero image width and alignment display

Author: OlufunkeMoronfolu

assets/scss/_front-page.scss

@@ -2,31 +2,68 @@
 
 .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: $dark;
+    min-height: 350px;
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+    padding: 2rem 2.5rem;
+
+    @include media-breakpoint-down(md) {
+        min-height: unset;
+    }
+}
+
+.hero-text  {
+    flex: 0 0 100%;
+    // Stretch out text once image disappears (smaller viewports)
+    @include media-breakpoint-up(lg) {
+        flex: 0 0 auto;
+        max-width: 60%;
+    }
+}
+
 h1.page-title {
     font-weight: $font-weight-normal;
     font-size: 2rem;
-    margin-bottom: 0.75rem;
+    margin-bottom: 1rem;
 }
 
 h5.lp-description {
     font-size: 1rem;
     font-weight: 400;
+    line-height: 1.5;
 }
 
 .lp-container img {
     border-style: none;
+    max-width: 100%;
+    height: auto;
+}
+
+.lp-container .hero-image img {
+    height: 220px;
+    width: auto;
+    max-width: unset;
+    flex-shrink: 0;
+
 }
 
 img.card-icon {
@@ -99,3 +136,19 @@ p.rn-date {
     font-weight: 400;
     margin-bottom: 0rem;
 }
+
+// Mobile hamburger bar on landing page — matches hero background
+.lp-mobile-bar {
+    background-color: $dark;
+    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;
+    }
+}

assets/scss/_variables_project.scss

@@ -11,14 +11,14 @@ $enable-shadows: true; //TODO: consider removing this duplicate variable from th
 
 $primary: #146FF4; // MX Blue (Blue-7 from PDS) YL - updated the Mendix Blue color to its latest version in MX 10
 $primary-light: #47A9FF; // DB - Blue-5 from PDS
-$secondary: #0A1325; // Gray-10 from PDS (MxDock color)
+$secondary: #0A1324; // Gray-10 from PDS (MxDock color)
 $success: #0D990D; // DB - Green-8 from PDS
 $info: #146FF4; // MX Blue YL - updated the Mendix Blue color to its latest version in MX 10
 $warning: #C97800; // DB - Yellow-8 from PDS
 $danger:  #D31E23; // DB - Red-7 PDS
 $white: #fff; // YL - Override the default color defined in _variables_forward.scss
 $light: #99D0FF; // DB - Blue-3 from PDS
-$dark: #0A1325; // Gray-10 from PDS (MxDock color)
+$dark: #0A1324; // Gray-10 from PDS (MxDock color)
 $blue: #146FF4; // YL - Mendix Blue in SP 10; Override the default color defined in _variables_forward.scss
 $company-approved: #E0FAE1; // NC - Company approved Marketplace label
 $gray-100: #f7f7f7;

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 class="page-title">{{ .Page.Title }}</h1>
+                                    <h5 class="lp-description">{{ .Page.Description }}</h5>
+                                </div>
+
+                                <div class="hero-image d-none d-lg-block">
+                                    <img src="/images/lp-hero-image.svg" alt="Person sitting on a stack of books while using a laptop">
                                 </div>
                             </div>
 

layouts/shortcodes/icon.html

@@ -13,7 +13,7 @@
         "blue" "#146ff4"
         "gray" "#9ea2a9"
         "black" "#000000"
-        "dark" "#0a1325"
+        "dark" "#0a1324"
     -}}
 
     {{- if ne $color nil -}}