From 9ac8ab203a1661b053dddfad818184750bf58ada Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 1 Feb 2024 17:17:13 -0600
Subject: [PATCH] Website: Update endpoints box on homepage, center hero image
 on /endpoint-ops (#16555)

Closes: #16548

Changes:
- Updated the styles of the "An open interface for every endpoint"
callout box on the homepage to resolve a browser compatibility issue
- Removed the left padding from the hero image on /endpoint-ops on
smaller screen sizes to keep the image centered.
---
 website/assets/styles/pages/endpoint-ops.less |  7 ++++---
 website/assets/styles/pages/homepage.less     | 11 +++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/website/assets/styles/pages/endpoint-ops.less b/website/assets/styles/pages/endpoint-ops.less
index bfaf1d4c58..da33ce37b2 100644
--- a/website/assets/styles/pages/endpoint-ops.less
+++ b/website/assets/styles/pages/endpoint-ops.less
@@ -488,6 +488,10 @@
     }
     [purpose='hero-image'] {
       margin-right: unset;
+      margin-bottom: 60px;
+      img {
+        padding-left: 0px;
+      }
     }
     [purpose='hero-text'] {
       width: unset;
@@ -521,9 +525,6 @@
         margin-right: auto;
       }
     }
-    [purpose='hero-image'] {
-      margin-bottom: 60px;
-    }
     [purpose='testimonials'] {
       margin-bottom: 120px;
     }
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index f1038600db..561a520c18 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -484,7 +484,6 @@
     padding: 0px 0px 0px 80px;
     align-items: center;
     justify-content: space-between;
-    gap: 24px;
     align-self: stretch;
     border-radius: 24px;
     border: 2px solid #E2E4EA;
@@ -500,6 +499,7 @@
       }
     }
     [purpose='endpoints-images'] {
+      margin-left: 24px;
       overflow: hidden;
       max-width: 410px;
       width: 50%;
@@ -1063,7 +1063,7 @@
         padding-left: 40px;
         padding-right: 40px;
         margin-top: 0px;
-        margin-bottom: auto;
+        margin-bottom: 40px;
       }
       [purpose='endpoints-images'] {
         width: 110%;
@@ -1071,7 +1071,9 @@
         align-items: center;
         display: flex;
         flex-direction: column;
+        margin-left: 0px;
         [purpose='endpoint-images-row'] {
+          min-height: 80px;
           [purpose='endpoint-image-box'] {
             display: flex;
             width: 80px;
@@ -1333,6 +1335,7 @@
     [purpose='endpoints-banner'] {
       [purpose='endpoints-images'] {
         [purpose='endpoint-images-row'] {
+          min-height: 60px;
           margin-bottom: 12px;
           [purpose='endpoint-image-box'] {
             width: 60px;
@@ -1422,8 +1425,12 @@
       }
     }
     [purpose='endpoints-banner'] {
+      [purpose='endpoint-banner-text'] {
+        margin-bottom: 32px;
+      }
       [purpose='endpoints-images'] {
         [purpose='endpoint-images-row'] {
+          min-height: 54.427px;
           margin-bottom: 12px;
           [purpose='endpoint-image-box'] {
             width: 54.427px;