Update green landing page (#28971)

source/green/index.html

@@ -63,7 +63,14 @@ frontpage_image: /images/frontpage/green-frontpage.png
         id="w-node-f82aa316-050e-d74a-ecac-5099737262df-3f61e7c1"
         class="menu-button w-nav-button"
       >
-        <div class="menu-mobile">
+        <div class="menu-mobile buy">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z"
+            />
+          </svg>
+        </div>
+        <div class="menu-mobile" id="open-mobile-menu">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <path
               d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
@@ -863,9 +870,11 @@ frontpage_image: /images/frontpage/green-frontpage.png
         <div class="content-wrapper-page b-padding">
           <div class="tag-wrapper">
             <div class="bullet-icon-purple"></div>
-            <div>Switch from other smart home ecosystems at your own pace.</div>
+            <div>SIMPLE MIGRATION</div>
           </div>
-          <h3 class="heading-medium">Switch over at your own pace.</h3>
+          <h3 class="heading-medium">
+            Switch from other smart home ecosystems at your own pace.
+          </h3>
           <p>
             Home Assistant works with your existing Apple HomeKit, Google Home*,
             Samsung SmartThings**, and Amazon Alexa* setup, allowing a seamless
@@ -1062,10 +1071,16 @@ frontpage_image: /images/frontpage/green-frontpage.png
       </div>
       <div id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea1-3f61e7c1">
         <img
-          src="/images/green/Diagram.svg"
+          src="/images/green/ha-green-exploded-view.png"
           loading="lazy"
           width="640"
-          alt=""
+          sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
+          alt="Exploded view of Home Assistant Green"
+          srcset="
+            /images/green/ha-green-exploded-view-p-500.png 500w,
+            /images/green/ha-green-exploded-view-p-800.png 800w,
+            /images/green/ha-green-exploded-view.png       961w
+          "
           class="image-product-mobile"
         />
       </div>
@@ -1760,14 +1775,302 @@ frontpage_image: /images/frontpage/green-frontpage.png
         </div>
         <div
           id="w-node-_69907ac9-cc3c-f202-afac-c92986c4430e-3f61e7c1"
-          class="grid-image-wrapper box"
+          class="block-wrapper-content bg-color"
         >
-          <img
+          <div class="circular-ticker-wrapper">
-            src="/images/green/paulus.png"
+            <div class="circular-inner-reverse">
-            loading="lazy"
+              <div class="circular-wrap">
-            alt=""
+                <img
-            class="cover-image"
+                  src="/images/green/avatars/jr.jpg"
-          />
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/gs.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/rr.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/al.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/bk.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/fn.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/sa.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/kb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mm.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mdb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/em.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mh.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/ps.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pv.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/md.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mvi.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pc.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+            </div>
+            <div class="circular-inner-reverse">
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/jr.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/gs.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/rr.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/al.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/bk.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/fn.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/sa.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/kb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mm.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mdb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/em.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mh.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/ps.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pv.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pb.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/md.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/mvi.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+              <div class="circular-wrap">
+                <img
+                  src="/images/green/avatars/pc.jpg"
+                  loading="lazy"
+                  alt=""
+                  class="cover-image-2"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

source/green/script.js

@@ -95,7 +95,7 @@ if (document.location.search === "?order") {
     showBuyDialog();
 }
 
-const menuMobileBtn = document.querySelector(".menu-mobile");
+const menuMobileBtn = document.getElementById("open-mobile-menu");
 const mobileMenu = document.querySelector(".w-nav-overlay");
 const mobileMenuLinks = document.querySelectorAll(".w-nav-overlay a");
 

source/green/styles.css

@@ -1081,7 +1081,7 @@ button,
 .brand {
   height: 42px;
   padding-bottom: 0;
-  padding-right: 35px;
+  padding-right: 20px;
 }
 
 .topnav-button {
@@ -1719,6 +1719,10 @@ button,
   grid-template-columns: 1fr 1fr 1fr;
 }
 
+.grid-3-col.specs {
+  grid-template-columns: 1fr 1.5fr 1fr;
+}
+
 .header-ticker-inner {
   grid-column-gap: 24px;
   align-items: center;
@@ -1914,7 +1918,7 @@ button,
 }
 
 .block-wrapper-content {
-  height: 45em;
+  min-height: 45em;
   border-radius: 48px;
   align-items: center;
   display: flex;
@@ -2498,6 +2502,7 @@ button,
   }
 
   .block-wrapper-content {
+    min-height: unset;
     height: 25em;
   }
 
@@ -2680,8 +2685,8 @@ button,
   }
 
   .menu-button {
-    padding-left: 5px;
+    padding-left: 0;
-    padding-right: 10px;
+    padding-right: 0;
   }
 
   .button {
@@ -3373,6 +3378,8 @@ button,
   }
 
   #w-node-f82aa316-050e-d74a-ecac-5099737262df-3f61e7c1 {
+    display: flex;
+    flex-direction: row;
     grid-area: 1 / 3 / 2 / 4;
     justify-self: end;
   }