Merge pull request #2979 from XRPLF/CLS-homepage-improvement

Improve home page performance

Author: mDuo13

index.page.tsx

@@ -76,7 +76,7 @@ const cards3 = [
     description: 'Access everything you need to get started working with the XRPL',
   },
   { href: '/docs/tutorials', title: 'Guided Tutorials', description: 'Follow step-by-step guides for frequent tasks' },
-  { href: '/docs/concepts', title: 'XRPL Fundamentals', description: 'Read about the XRPL’s foundational concepts' },
+  { href: '/docs/concepts', title: 'XRPL Fundamentals', description: 'Read about the XRPL\u2019s foundational concepts' },
   {
     href: '/docs/references/client-libraries/',
     title: 'Choose a Language',
@@ -112,7 +112,7 @@ export default function Index() {
       <div className="overflow-hidden">
         <section className="container-new pb-26-until-sm mt-10 mb-10-sm text-center">
           <div className="w-100">
-            <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" />
+            <img id="home-hero-graphic" alt="(stylized X graphic surrounded by a diverse mix of people)" width="856" height="469" loading="lazy" />
           </div>
           <div className="col-lg-6 mx-auto text-center pl-0 pr-0">
             <div className="d-flex flex-column-reverse">
@@ -129,8 +129,8 @@ export default function Index() {
           </div>
         </section>
         <div className="position-relative d-none-sm">
-          <img src={require('./static/img/backgrounds/home-purple.svg')} id="home-purple" />
-          <img src={require('./static/img/backgrounds/home-green.svg')} id="home-green" />
+          <img src={require('./static/img/backgrounds/home-purple.svg')} id="home-purple" loading="lazy" />
+          <img src={require('./static/img/backgrounds/home-green.svg')} id="home-green" loading="lazy" />
         </div>
         <section className="container-new py-26">
           <div className="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">

static/css/devportal2024-v1.css

@@ -23,13 +23,31 @@
 }
 
 .page-home {
+  #home-hero-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding-top: 54.8%;
+    overflow: hidden;
+  }
+
   #home-hero-graphic {
-    content: url("../img/home-hero.svg");
-    margin-left: auto;
     width: 856px;
-    margin-right: auto;
+    object-fit: cover;
+    content: url("../img/home-hero.svg");
     margin-bottom: 24px;
-    max-width: 100%;
+    @media (min-width: 992px) {
+      min-height: 470px;
+    }
+
+    @media (max-width: 991px) and (min-width: 540px) {
+      min-height: 250px;
+    }
+
+    @media (max-width: 539px) {
+      min-height: 170px;
+    }
   }
 
   #benefits-list {