Update blue page (#19516)

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
Co-authored-by: Franck Nijhof <git@frenck.dev>

sass/custom/_details.scss

@@ -20,7 +20,7 @@ div.details-block {
       align-items: center;
     }
     .details-block-content {
-      margin: 4px 32px 0 0;
+      margin: 4px 32px 12px 0;
     }
   }
 }

sass/custom/_landingpage.scss

@@ -220,10 +220,9 @@ $ha__primary_color: #03a9f4;
       margin: -36px auto 0;
 
       &.with-box {
-        display: flex;
 
         .banner-overlay-content {
-          width: 420px;
+          max-width: 416px;
         }
       }
 
@@ -243,14 +242,16 @@ $ha__primary_color: #03a9f4;
         margin-top: 16px;
       }
 
-      .banner-overlay {
+      .box {
+        position: absolute;
+        right: 0;
+        top: 0;
         width: 210px;
         border-radius: 8px;
-        margin: -50px -50px 0 0;
+        margin: -50px -50px 0 4px;
         padding: 22px;
         display: flex;
-        flex-flow: wrap;
+        flex-direction: column;
-        justify-content: space-between;
 
         .banner-overlay-header {
           font-weight: 500;
@@ -330,7 +331,11 @@ $ha__primary_color: #03a9f4;
           color: #ffffff;
         }
       }
-
+      .below-button {
+        margin-top: 8px;
+        text-align: center;
+        font-size: .8em;
+      }
     }
     .banner-overlay-disclaimer {
       font-size: 12px;
@@ -1160,6 +1165,15 @@ $ha__primary_color: #03a9f4;
 
 @media only screen and (max-width: $lap-end) {
   #landingpage {
+    .banner-overlay {
+      display: block !important;
+
+      .box {
+        position: relative !important;
+        margin: 10px auto -22px !important;
+      }
+    }
+
     .page-content {
       .content {
         .bullet-points {

source/blue/index.html

@@ -28,19 +28,14 @@ frontpage_image: /images/frontpage/blue-frontpage.jpg
 <div class="content">
   <div class="material-card text banner-overlay with-box">
     <div>
-      <div class="banner-overlay-header">The missing piece</div>
+      <div class="banner-overlay-header">Available today</div>
       <div class="banner-overlay-content">
-        We challenged ourselves: what would the perfect home automation hub look
+        The limited edition Home Assistant Blue bundle is hardware that is affordable
-        like. Not just software, but also hardware and looks.
+        and fast, packed in a custom-designed and gorgeous case, and powered by the most powerful home
-      </div>
+        automation software on the planet: Home Assistant.
-      <div class="banner-overlay-content secondary">
-        The result is the limited edition Home Assistant Blue bundle. Hardware
-        that is affordable and fast, packed in a gorgeous case and powered by
-        the most powerful home automation software on the planet: Home
-        Assistant.
       </div>
     </div>
-    <div class="material-card text banner-overlay">
+    <div class="material-card text box">
       <div class="banner-overlay-header">LIMITED EDITION</div>
       <div class="banner-overlay-price">
         $146
@@ -54,6 +49,7 @@ frontpage_image: /images/frontpage/blue-frontpage.jpg
       <div class="banner-overlay-button" onclick="showBuyDialog()">
         <div>BUY NOW</div>
       </div>
+      <div class='below-button'>Limited stock left</div>
     </div>
   </div>
   <div class="banner-overlay-disclaimer">
@@ -589,6 +585,14 @@ All other parts of the bundle will remain available for purchase.
 
 {% enddetails %}
 
+{% details "What is the difference with Home Assistant Amber?" %}
+
+We partnered with a single-board computer (SBC) manufacturer to introduce Home Assistant Blue, our first foray into creating hardware that runs Home Assistant. Home Assistant Blue was always meant to be a limited edition and its production has been discontinued.
+<br><br>
+Though Blue has been limited, we will continue to support it and, just like Amber, it is able to run the latest version of Home Assistant.
+
+{% enddetails %}
+
 {% details "I already own an ODROID-N2+. Do I run the same software?" %}
 
 Yes! Home Assistant Blue runs the exact same software as that you're
@@ -596,6 +600,12 @@ currently using and you're benefitting from all the improvements.
 
 {% enddetails %}
 
+{% details "Will Home Assistant keep supporting the Blue even when it's limited?" %}
+
+Yes! We are committed to keep supporting all platforms that are currently available.
+
+{% enddetails %}
+
 {% details "Will Home Assistant drop support for the Raspberry Pi?" %}
 
 Nope! We are committed to keep supporting all platforms that are currently available.