better clarification of the purpose of this website

css/jpeg-xl-test.webflow.css

@@ -307,6 +307,11 @@ img {
   height: 100%;
   display: inline-block;
 }
+img.side_image {
+  width: 6em;
+  padding: 0 1em;
+  float: right;
+}
 
 strong {
   letter-spacing: .01em;
@@ -786,6 +791,29 @@ blockquote {
   display: flex;
 }
 
+.navbar_headertext {
+  color: var(--brand--teal-bright--P3--700);
+  background-image: linear-gradient(90deg, var(--brand--teal-bright--P3--500), var(--brand--blue--P3--500));
+  letter-spacing: -.02em;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  text-align: center;
+  letter-spacing: .01em;
+  flex-flow: wrap;
+  justify-content: center;
+  width: auto;
+  min-width: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: var(--font--font-family--barlow);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1em;
+  display: block;
+}
+
+
 .display-l-bold {
   color: var(--white);
   text-align: center;
@@ -953,7 +981,7 @@ blockquote {
 .container-content-fullspan {
   z-index: 0;
   grid-column-gap: 16px;
-  grid-row-gap: 16px;
+  grid-row-gap: 32px;
   flex-flow: column;
   flex: 0 auto;
   grid-template-rows: auto auto;
@@ -1505,6 +1533,7 @@ blockquote {
   background-position: 0 0, 50% 0;
   background-size: auto, cover;
   overflow: hidden;
+  padding-top: 12rem;
 }
 
 .image-wave-2560 {
@@ -4278,6 +4307,7 @@ blockquote {
 
   .section-jpeg-xl-hero.gradient-bottom {
     background-size: 100%;
+    padding-top: 12rem;
   }
 
   .image-wave-2560 {
@@ -4961,7 +4991,7 @@ blockquote {
 
   .container-content-fullspan {
     grid-column-gap: 0px;
-    grid-row-gap: 0px;
+    grid-row-gap: 32px;
     width: 100%;
     min-width: auto;
     height: auto;
@@ -5795,6 +5825,12 @@ blockquote {
     height: 80px;
   }
 
+  .navbar_headertext {
+    font-size: 4vw;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
   .display-xl-bold.fill-gradient {
     letter-spacing: 0;
     margin-bottom: 0;
@@ -5921,7 +5957,6 @@ blockquote {
 
   .container-content-fullspan {
     width: 100%;
-    min-width: 568px;
     height: auto;
   }
 
@@ -6887,8 +6922,8 @@ blockquote {
 
   .navbar-container-menu-top {
     height: 5rem;
-    padding-left: 1.5rem;
-    padding-right: 1rem;
+    padding-left: 0.7rem;
+    padding-right: 0.5rem;
   }
 
   .navbar-icon-main {

css/navbar.css

@@ -86,7 +86,7 @@ nav.visible {
   padding: 2em;
   display: flex;
   flex-direction: row;
-  gap: 3em;
+  gap: 2em;
   flex-wrap: wrap;
   justify-content: center;
 }

index.html

@@ -1362,6 +1362,7 @@
       object-fit: cover;
       /* Maintain aspect ratio while scaling */
     }
+
   </style>
   <link href="/css/navbar.css" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -1374,7 +1375,7 @@
       <div class="navbar-2-container">
         <a href="/index.html" aria-current="page" class="navbar_logo-link w-nav-brand w--current"><img width="63"
             loading="lazy" alt="" src="/images/Logo-JPEG_XL-horizontal-square-full_color.svg" class="navbar_logo"></a>
-        <!--  <p class="display-l-bold">Community website</p>  -->
+        <p class="navbar_headertext">Community website</p>
         <div class="navbar_menu-items">
           <label for="navbar-dropdown"
             class="navbar-toggle navbar_link navbar-top w-inline-block material-icons button"></label>
@@ -1465,6 +1466,15 @@ <h2 class="text-xxl-regular centered teal">Smaller Files, Higher Quality, Faster
             Unmatched in quality-per-byte, JPEG&nbsp;XL delivers best-of-breed image
             compression from web quality through lossless.</p>
         </div>
+        <div class="wrapper-text centered width-rem">
+          <p class="text-xl-light is-centered">
+            <a href="https://jpeg.org/jpegxl/"><img src="images/JPEG-Committee-logos/jpegxl-logo.svg" class="side_image"></a>
+             JPEG&nbsp;XL is a new international standard&ensp;(<a href="https://www.iso.org/standard/85066.html?browse=tc">ISO/IEC 18181</a>)&ensp;created by
+             the <a href="https://jpeg.org/">JPEG committee</a>.
+             This website is a resource by and for the wider community of enthusiasts who want to promote this new standard.
+             More information can also be found on <a href="https://jpeg.org/jpegxl">the official JPEG XL page</a>.
+          </p>
+        </div>
       </div>
     </section>
     <section class="section-jpeg-comparison">
@@ -2778,11 +2788,10 @@ <h3 class="text-xxl-regular centered teal">Building the Future of Image Standard
         <div data-figma-id="73:4015" class="size-60px"></div>
         <div class="wrapper-text centered width-rem">
           <p class="text-xl-light is-centered">
-            JPEG&nbsp;XL is a new international standard&ensp;(<a
-              href="https://www.iso.org/standard/85066.html?browse=tc">ISO/IEC 18181</a>)&ensp;created by the <a
-              href="https://jpeg.org/jpegxl/">JPEG committee</a>. The committee’s work ensures that JPEG XL meets the highest standards 
+            JPEG&nbsp;XL was created by the <a href="https://jpeg.org/jpegxl/">JPEG committee</a>.
+            The committee’s work ensures that JPEG XL meets the highest standards 
               of performance, efficiency, and compatibility, benefiting users across various industries and applications.
-              Learn more about the JPEG Committee’s work at the official website: <a href="https://jpeg.org/">jpeg.org</a>.</p>
+              Learn more about the JPEG Committee’s work and their other projects at their official website: <a href="https://jpeg.org/">jpeg.org</a>.</p>
         </div>
       </div>
       <div data-figma-id="73:4011" class="size-xxhuge-12rem-192px"></div>