Skip to content

Landing page hero section new design #11165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OlufunkeMoronfolu wants to merge 2 commits into
base: development
Choose a base branch
from
+70 −14
Open

Landing page hero section new design #11165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7bc023
feat: updating landing page hero section with new design
OlufunkeMoronfolu May 8, 2026
687bf60
style updates for hero section
OlufunkeMoronfolu May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 43 additions & 2 deletions assets/scss/_front-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,56 @@

.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;
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we should push back on this spec, or do you like it as is? I think some of the Portal pages (like https://marketplace.mendix.com/link/components) have shorter hero heights, and it might be nice if it weren't quite so big so that more of the story cards fit on smaller screens by default.

margin-left: -2.5rem;
margin-right: -2.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
Comment on lines +27 to +28
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding-left: 2.5rem;
padding-right: 2.5rem;

Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest removing these because they conflict with line 29

padding: 2rem 2.5rem;

@media (max-width: 767px) {
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@media (max-width: 767px) {
@include media-breakpoint-down(md) {

Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adjusted to use Bootstrap's mixin (and match when the image disappears)

min-height: unset;
}
}

.hero-text {
flex: 0 0 60%;
}
Comment on lines +36 to +38
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.hero-text {
flex: 0 0 60%;
}
.hero-text {
flex: 0 0 100%;
// Stretch out text once image disappears (smaller viewports)
@include media-breakpoint-up(lg) {
flex: 0 0 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;
}

img.card-icon {
Expand Down Expand Up @@ -99,3 +124,19 @@ p.rn-date {
font-weight: 400;
margin-bottom: 0rem;
}

// Mobile hamburger bar on landing page — matches hero background
.lp-mobile-bar {
background-color: #0A1324;
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should double-check this with Amit. It's very similar to

docs/assets/scss/_variables_project.scss

Line 14 in 4cbc0f9

$secondary: #0A1325; // Gray-10 from PDS (MxDock color)
(from https://designsystem.mendix.com/doc/p/Utilities/Colors-and-Backgrounds/d49d94a9-4f75-463e-bf0b-f7151d090a39), so I wonder if this hex code is correct or if we can just use $secondary.

Copy link
Copy Markdown
Collaborator Author

@OlufunkeMoronfolu OlufunkeMoronfolu May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There appears to be a mismatch between the color we were given and what PDS is using now. I also checked the community and marketplace backgrounds, and they’re all still referencing #0A1324. Might be something we want to confirm with design.

I also saw the PDS release updated the BG, so the ...24 might be obsolete. But let's confirm that before we substitute the variable.

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;
}
}
4 changes: 2 additions & 2 deletions content/en/docs/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should workshop these front matter changes with the group. I like the longer description but I wonder if we should change it more to highlight AI. I personally tend prefer keeping "Welcome to" in the title, since it feels friendly and aligns better with the other Portal pages like https://marketplace.mendix.com/link/components and https://community.mendix.com/link/home.

aliases:
- /docs/index.html
- /docs/Overview.html
Expand Down
21 changes: 11 additions & 10 deletions layouts/landingpage/landingpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Copy Markdown
Collaborator

@dbreseman dbreseman May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="hero-image">
<div class="hero-image d-none d-lg-block">

<img src="/images/lp-hero-image.svg" alt="" class="img-fluid">
</div>
</div>

Expand Down
14 changes: 14 additions & 0 deletions static/images/lp-hero-image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.