diff --git a/sass/custom/_landingpage.scss b/sass/custom/_landingpage.scss
index 494a2b1d6c6..ccb1bee7680 100644
--- a/sass/custom/_landingpage.scss
+++ b/sass/custom/_landingpage.scss
@@ -5,26 +5,31 @@ $ha__primary_color: #03a9f4;
 #landingpage {
   $landingpage__hero_height: 670px;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
   .site-header {
     .grid-wrapper {
       max-width: 1100px !important;
       padding: 0 25px !important;
     }
   }
+
   .grid-wrapper {
     max-width: 1500px;
     padding: 0;
     width: 100%;
   }
+
   .page-content {
     overflow-x: hidden;
   }
+
   .banner {
     height: $landingpage__hero_height;
     margin-bottom: 16px;
     margin-top: -42px;
     width: 100%;
     text-align: center;
+
     .title {
       position: relative;
       width: 550px;
@@ -37,11 +42,13 @@ $ha__primary_color: #03a9f4;
       color: #ffffff;
       text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
       bottom: 226px;
+
       svg {
         stroke: $ha__primary_color;
       }
 
     }
+
     .wide {
       position: relative;
       width: 700px;
@@ -50,6 +57,7 @@ $ha__primary_color: #03a9f4;
       line-height: 52px;
       bottom: 390px;
     }
+
     img {
       width: 100%;
       object-fit: cover;
@@ -66,6 +74,7 @@ $ha__primary_color: #03a9f4;
     position: absolute;
     bottom: 8px;
   }
+
   .right {
     position: absolute;
     right: 8px;
@@ -175,6 +184,7 @@ $ha__primary_color: #03a9f4;
         .title {
           margin-bottom: 4px;
         }
+
         .button {
           font-size: small;
           font-weight: 600;
@@ -199,6 +209,7 @@ $ha__primary_color: #03a9f4;
 
   .section-content:nth-child(even) {
     background-color: #F5F5F5;
+
     .section-inner:nth-child(odd) {
       flex-direction: row-reverse;
     }
@@ -263,6 +274,7 @@ $ha__primary_color: #03a9f4;
           width: 100%;
           text-align: right;
         }
+
         .banner-overlay-price {
           width: calc(100% - 6px);
           text-align: right;
@@ -314,6 +326,7 @@ $ha__primary_color: #03a9f4;
           }
         }
       }
+
       .banner-overlay-button {
         background-color: $ha__primary_color;
         margin-top: 12px;
@@ -331,16 +344,19 @@ $ha__primary_color: #03a9f4;
           color: #ffffff;
         }
       }
+
       .banner-overlay-button.disabled {
         background-color: #bdbdbd;
         cursor: initial;
-       }
+      }
+
       .below-button {
         margin-top: 8px;
         text-align: center;
         font-size: .8em;
       }
     }
+
     .banner-overlay-disclaimer {
       font-size: 12px;
       line-height: 14px;
@@ -355,9 +371,11 @@ $ha__primary_color: #03a9f4;
       display: grid;
       gap: 32px;
       grid-template-columns: repeat(2, 1fr);
+
       .item {
         display: grid;
         text-align: center;
+
         span:nth-of-type(1) {
           color: rgba(0, 0, 0, 0.87);
           font-size: 24px;
@@ -367,12 +385,14 @@ $ha__primary_color: #03a9f4;
           opacity: 0.66;
           text-transform: uppercase;
         }
+
         span:nth-of-type(2) {
           color: rgba(0, 0, 0, 0.87);
           font-size: 48px;
           letter-spacing: -2px;
           line-height: 56px;
         }
+
         span:nth-of-type(3) {
           color: rgba(0, 0, 0, 0.87);
           font-size: 14px;
@@ -400,6 +420,7 @@ $ha__primary_color: #03a9f4;
           z-index: 0;
         }
       }
+
       .vision-content {
         z-index: 1;
         position: relative;
@@ -411,6 +432,7 @@ $ha__primary_color: #03a9f4;
           line-height: 80px;
           color: $landingpage__deep_color;
         }
+
         .vision-statement {
           font-size: 18px;
           line-height: 21px;
@@ -434,6 +456,7 @@ $ha__primary_color: #03a9f4;
               line-height: 56px;
               font-weight: bold;
             }
+
             .vision-block-content {
               font-size: 18px;
               line-height: 133%;
@@ -442,6 +465,7 @@ $ha__primary_color: #03a9f4;
         }
       }
     }
+
     .mood {
       text-align: center;
       margin-bottom: 32px;
@@ -508,6 +532,7 @@ $ha__primary_color: #03a9f4;
                 }
               }
             }
+
             .outline {
               display: flex;
               place-self: flex-end;
@@ -585,6 +610,7 @@ $ha__primary_color: #03a9f4;
           text-transform: uppercase;
           opacity: 0.4;
         }
+
         .spec-content {
           grid-column: 2 / span 4;
           font-weight: bold;
@@ -600,6 +626,7 @@ $ha__primary_color: #03a9f4;
               li {
                 margin-bottom: 0;
               }
+
               li::marker {
                 content: "- ";
               }
@@ -607,6 +634,7 @@ $ha__primary_color: #03a9f4;
           }
         }
       }
+
       .specifications-form-factor {
         grid-column: 4 / span 2;
 
@@ -636,6 +664,7 @@ $ha__primary_color: #03a9f4;
           .sff-width {
             grid-column: 1 / span 2;
           }
+
           svg#zen {
             grid-column: 1;
             height: 100px;
@@ -672,6 +701,7 @@ $ha__primary_color: #03a9f4;
             margin-top: -24px;
           }
         }
+
         img {
           box-shadow: none;
           border: 0;
@@ -679,6 +709,7 @@ $ha__primary_color: #03a9f4;
         }
       }
     }
+
     .faq-list {
       margin: 0 72px;
     }
@@ -716,6 +747,10 @@ $ha__primary_color: #03a9f4;
         }
       }
     }
+
+    .material-card>p:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .fab {
@@ -827,9 +862,11 @@ $ha__primary_color: #03a9f4;
                 grid-row: 1 / span 2;
                 margin-right: 8px;
               }
+
               div:nth-of-type(2) {
                 grid-column: 2;
               }
+
               div:nth-of-type(3) {
                 grid-column: 2;
                 color: darkslategrey;
@@ -837,6 +874,7 @@ $ha__primary_color: #03a9f4;
               }
             }
           }
+
           .distributor:hover {
             border-color: $ha__primary_color;
           }
@@ -845,6 +883,7 @@ $ha__primary_color: #03a9f4;
 
       .box-contents {
         margin: 0 16px 32px;
+
         ul {
           margin: 12px 0 12px 24px;
           color: darkslategrey;
@@ -854,6 +893,7 @@ $ha__primary_color: #03a9f4;
             margin-bottom: 4px;
           }
         }
+
         .ul-sub {
           margin: 0 0 0 16px;
         }
@@ -873,6 +913,7 @@ $ha__primary_color: #03a9f4;
 
 @media only screen and (max-width: $palm-end) {
   $landingpage__hero_height: 500px;
+
   #landingpage {
     .site-header {
       background-color: #ffffffe8;
@@ -883,20 +924,25 @@ $ha__primary_color: #03a9f4;
         width: calc(100% - 8px);
       }
     }
+
     .page-content {
       margin-top: 0;
       height: 100%;
     }
+
     .grid-wrapper {
       margin-left: 0;
       width: 100%;
     }
+
     .banner {
       margin-bottom: 8px;
       height: $landingpage__hero_height;
+
       img {
         height: $landingpage__hero_height;
       }
+
       .title {
         width: 100%;
         left: unset;
@@ -945,6 +991,7 @@ $ha__primary_color: #03a9f4;
     .button-row-with-icon {
       display: flex;
       flex-direction: column;
+
       .button-icon {
         width: calc(100% - 8px);
         margin: 2px 4px;
@@ -983,6 +1030,7 @@ $ha__primary_color: #03a9f4;
           padding-left: 8px;
           width: 100%;
         }
+
         .secondary {
           display: none;
         }
@@ -1004,16 +1052,19 @@ $ha__primary_color: #03a9f4;
       }
 
       .bullet-points {
-        margin: 24px 0;
+        margin: 48px 0 24px;
+
         .item {
           span:nth-of-type(1) {
             font-size: 16px;
             line-height: 16px;
           }
+
           span:nth-of-type(2) {
             font-size: 32px;
             line-height: 32px;
           }
+
           span:nth-of-type(3) {
             font-size: 12px;
             line-height: 12px;
@@ -1023,28 +1074,35 @@ $ha__primary_color: #03a9f4;
 
       .vision {
         margin-bottom: 0;
+
         svg {
           display: none;
         }
+
         .vision-content {
           margin-top: 28px;
+
           .vision-header {
             font-size: 34px;
             line-height: 40px;
             margin-top: 8px;
           }
+
           .vision-statement {
             font-size: 12px;
             line-height: 14px;
           }
+
           .vision-blocks {
             .vision-block {
               width: 100%;
               margin: 9px;
+
               .vision-block-title {
                 font-size: 24px;
                 line-height: 28px;
               }
+
               .vision-block-content {
                 display: none;
               }
@@ -1076,6 +1134,7 @@ $ha__primary_color: #03a9f4;
               }
             }
           }
+
           .mood-separator {
             margin: -80px calc((100% / 2) - 120px);
 
@@ -1113,6 +1172,7 @@ $ha__primary_color: #03a9f4;
             margin-top: -4px;
           }
         }
+
         .specifications-form-factor {
           .specifications-form-factor-grid {
             margin-left: 0;
@@ -1120,6 +1180,7 @@ $ha__primary_color: #03a9f4;
             .sff-width {
               margin-left: 50px;
             }
+
             .sff-description {
               span:last-of-type {
                 font-size: 16px;
@@ -1151,6 +1212,7 @@ $ha__primary_color: #03a9f4;
         }
       }
     }
+
     .blue3d {
       .blue3d-container {
         width: 100% !important;
@@ -1181,8 +1243,9 @@ $ha__primary_color: #03a9f4;
     .page-content {
       .content {
         .bullet-points {
-          margin: 24px 0;
+          margin: 48px 0 24px;
         }
+
         .vision {
           margin-top: -200px;
 
@@ -1202,10 +1265,12 @@ $ha__primary_color: #03a9f4;
             }
           }
         }
+
         .mood {
           .mood-cards {
             margin: 0;
             width: inherit;
+
             .material-card {
               height: 300px;
               width: 230px;
@@ -1213,6 +1278,7 @@ $ha__primary_color: #03a9f4;
             }
           }
         }
+
         .specifications {
           margin: 0 16px;
         }
diff --git a/source/blue/index.html b/source/blue/index.html
index 88594605c92..3042895b314 100644
--- a/source/blue/index.html
+++ b/source/blue/index.html
@@ -29,7 +29,7 @@ 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">Available today</div>
+      <div class="banner-overlay-header">Limited Edition</div>
       <div class="banner-overlay-content">
         The limited edition Home Assistant Blue bundle is hardware that is affordable
         and fast, packed in a custom-designed and gorgeous case, and powered by the most powerful home
@@ -613,5 +613,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
     </div>
   </div>
 </a>
-  
+
 </div>
diff --git a/source/images/yellow/home-assistant-yellow-exploded-and-labeled.png b/source/images/yellow/home-assistant-yellow-exploded-and-labeled.png
new file mode 100644
index 00000000000..e621183ac6e
Binary files /dev/null and b/source/images/yellow/home-assistant-yellow-exploded-and-labeled.png differ
diff --git a/source/images/yellow/yellow-2d.jpg b/source/images/yellow/yellow-2d.jpg
new file mode 100644
index 00000000000..dbd235ba2ca
Binary files /dev/null and b/source/images/yellow/yellow-2d.jpg differ
diff --git a/source/images/yellow/yellow-kit-2d.jpg b/source/images/yellow/yellow-kit-2d.jpg
new file mode 100644
index 00000000000..2a260b34748
Binary files /dev/null and b/source/images/yellow/yellow-kit-2d.jpg differ
diff --git a/source/images/yellow/yellow-kit-poe-2d.jpg b/source/images/yellow/yellow-kit-poe-2d.jpg
new file mode 100644
index 00000000000..51b487c5a16
Binary files /dev/null and b/source/images/yellow/yellow-kit-poe-2d.jpg differ
diff --git a/source/images/yellow/yellow-pcb-preview.jpg b/source/images/yellow/yellow-pcb-preview.jpg
new file mode 100644
index 00000000000..ed9171d88d9
Binary files /dev/null and b/source/images/yellow/yellow-pcb-preview.jpg differ
diff --git a/source/images/yellow/yellow-poe-box-preview.jpg b/source/images/yellow/yellow-poe-box-preview.jpg
new file mode 100644
index 00000000000..c6c3886b5e1
Binary files /dev/null and b/source/images/yellow/yellow-poe-box-preview.jpg differ
diff --git a/source/images/yellow/yellow-preview.jpg b/source/images/yellow/yellow-preview.jpg
new file mode 100644
index 00000000000..4cc44a6e263
Binary files /dev/null and b/source/images/yellow/yellow-preview.jpg differ
diff --git a/source/images/yellow/yellow_hero.jpg b/source/images/yellow/yellow_hero.jpg
new file mode 100644
index 00000000000..a2f474f0a42
Binary files /dev/null and b/source/images/yellow/yellow_hero.jpg differ
diff --git a/source/index.html b/source/index.html
index 17236ce995c..1d341c6d87a 100644
--- a/source/index.html
+++ b/source/index.html
@@ -101,45 +101,6 @@ feedback: false
         "
       ></a>
 
-      <!-- SkyConnect -->
-      <a class="material-card picture-promo" href="/skyconnect/" style="
-          background-image: url(/images/skyconnect/skyconnect-cover.png);
-          background-size: cover;
-          background-color: #41bdf5;
-        ">
-        <div class="caption">
-          <div class="title">
-            Home Assistant SkyConnect
-            <div class="subtitle">
-              Best way to add Zigbee and Matter to Home Assistant
-            </div>
-          </div>
-          <svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>
-        </div>
-      </a>
-
-      <!-- Home Assistant Yellow -->
-      <a
-        class="material-card picture-promo"
-        href="https://yellow.home-assistant.io"
-        style="
-          background-image: url(/images/frontpage/yellow-frontpage.jpg);
-          background-size: cover;
-          background-color: #41bdf5;
-        "
-      >
-        <div class="caption">
-          <div class="title">
-            Home Assistant Yellow
-            <div class="subtitle">
-              The easiest way to run Home Assistant. Now available for pre-order.
-            </div>
-          </div>
-          <svg width="24" height="24" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>
-        </div>
-      </a>
-
-
     {% assign pages_by_date = site.pages | sort: "date" | reverse %}
     {% for page in pages_by_date %}
       {% if page.layout == "landingpage" and page.frontpage != false %}
diff --git a/source/skyconnect/index.html b/source/skyconnect/index.html
index 74e37c5acde..fe2665e7261 100644
--- a/source/skyconnect/index.html
+++ b/source/skyconnect/index.html
@@ -7,7 +7,7 @@ tagline: Home Assistant SkyConnect
 tagline_wide: false
 og_image: /images/skyconnect/skyconnect-cover.png
 hero_image: /images/skyconnect/skyconnect_horizontal.png
-frontpage: false
+frontpage: true
 frontpage_image: /images/skyconnect/skyconnect-cover.png
 ---
 
@@ -167,7 +167,9 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
   wireless devices. This includes Zigbee and Thread. If you do not use the
   extension cable, it may not work at all, and if it does, it could be flaky at
   best with intermittent problems (issues with pairing, device dropouts, unreachable
-  devices, timeout errors, etc). {% enddetails %}
+  devices, timeout errors, etc).
+  <br><br>
+  <a href="https://www.youtube.com/watch?v=tHqZhNcFEvA">See demo on YouTube.</a> {% enddetails %}
 </div>
 
 <div style="margin-top: 24px; text-align: center; font-size: .8rem;">
@@ -386,7 +388,7 @@ frontpage_image: /images/skyconnect/skyconnect-cover.png
       d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"
     />
   </svg>
-  ORDER SKYCONNECT
+  ORDER
 </div>
 
 <script>
diff --git a/source/yellow/index.html b/source/yellow/index.html
new file mode 100644
index 00000000000..a34f859a72d
--- /dev/null
+++ b/source/yellow/index.html
@@ -0,0 +1,343 @@
+---
+layout: landingpage
+title: "Home Assistant Yellow"
+description: "The easiest way to run Home Assistant. Now available for pre-order."
+date: 2022-10-05
+tagline: Home Assistant Yellow
+tagline_wide: false
+og_image: /images/yellow/yellow_hero.jpg
+hero_image: /images/yellow/yellow_hero.jpg
+frontpage: true
+frontpage_image: /images/frontpage/yellow-frontpage.jpg
+---
+
+<style>
+  #landingpage .banner .title {
+    text-shadow: 0px 0px 10px rgba(0, 0, 0), 0px 0px 10px rgba(0, 0, 0);
+  }
+  #landingpage .content .bullet-points,
+  #landingpage .sub-title {
+    margin-top: 100px;
+  }
+  #landingpage #buy-dialog {
+    overflow-y: auto;
+  }
+  .spaced-card {
+    max-width: 750px;
+    margin: 100px auto;
+  }
+  #landingpage .content .bullet-points .item.rpi span:nth-of-type(2) {
+    font-size: 39px;
+  }
+  #landingpage .yellow-variant {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+  }
+  #landingpage .yellow-variant:last-child {
+    margin-bottom: 0;
+  }
+  #landingpage .yellow-variant div:first-child {
+    width: 100px;
+    margin-right: 16px;
+  }
+  #landingpage .yellow-variant img {
+    height: auto;
+    box-shadow: none;
+    border: none;
+    max-width: initial;
+    width: 100px;
+  }
+
+  @media only screen and (max-width: 480px) {
+    #landingpage .content .bullet-points .item.rpi span:nth-of-type(2) {
+      font-size: 32px;
+    }
+    #landingpage .yellow-variant {
+      flex-direction: column;
+    }
+  }
+
+</style>
+
+<div class="content">
+  <div class="material-card text banner-overlay with-box">
+    <div>
+      <div class="banner-overlay-header">Our take on Home Automation</div>
+      <div class="banner-overlay-content">
+        The foundation of your smart home needs to be local and private. Home Assistant Yellow is that foundation.
+        <br><br>
+        On top of that, it's Matter-ready, upgradable and extendable. You won't need anything else.
+      </div>
+    </div>
+    <div class="material-card text box">
+      <div class="banner-overlay-images">
+        <a
+          href="/images/yellow/yellow-pcb-preview.jpg"
+          target="_blank" class="img-container">
+          <img src="/images/yellow/yellow-pcb-preview.jpg" />
+        </a>
+        <a
+          href="/images/yellow/yellow-poe-box-preview.jpg"
+          target="_blank" class="img-container">
+          <img src="/images/yellow/yellow-poe-box-preview.jpg" />
+        </a>
+        <a
+          href="/images/yellow/yellow-preview.jpg"
+          target="_blank" class="img-container">
+          <img src="/images/yellow/yellow-preview.jpg" />
+        </a>
+      </div>
+      <div class="banner-overlay-button" onclick="showBuyDialog()">
+        <div>Order now</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bullet-points">
+    <div class="item rpi">
+      <span>Fast</span>
+      <span>Compute Module 4</span>
+      <span>Powered by the powerful Raspberry Pi Compute Module 4. Swap it out for a better one if you need more power in the future.</span>
+    </div>
+    <div class="item">
+      <span>Expandable</span>
+      <span>M.2 Slot</span>
+      <span>Add a hard drive with terabytes of extra space</span>
+    </div>
+    <div class="item">
+      <span>Connected</span>
+      <span>Zigbee & Thread</span>
+      <span>Comes with Zigbee out of the box. Thread to power your Matter network is coming soon</span>
+    </div>
+    <div class="item">
+      <span>Ready</span>
+      <span>Zero Setup</span>
+      <span>Comes with Home Assistant</span>
+    </div>
+  </div>
+</div>
+
+<div class="material-card spaced-card">
+  <img src="/images/yellow/home-assistant-yellow-exploded-and-labeled.png">
+</div>
+
+<div class="material-card text spaced-card">
+  <h1>Pick your flavor</h1>
+  <div class="yellow-variant">
+    <div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow"></div>
+    <div>
+      <b>Home Assistant Yellow</b><br>
+      This flagship version of Home Assistant Yellow is ready to go out of the box.
+      <br><br>
+      It comes pre-assembled in a custom enclosure with a Raspberry Pi Compute Module 4 (CM4) and a custom heat sink for fanless, silent operation. The CM4 is a version without wireless and has 2 GB RAM and 16 GB eMMC storage, pre-installed with Home Assistant.
+      <br><br>
+      All you need to get started is to plug in the power supply and the Ethernet cable, both of which are included. This variant does not have Power-over-Ethernet.
+    </div>
+  </div>
+  <div class="yellow-variant">
+    <div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow Kit Power-over-Ethernet variant"></div>
+    <div>
+      <b>Yellow Kit with Power-over-Ethernet</b><br>
+      <a href="https://yellow.home-assistant.io/poe/">Some assembly required!</a> This kit supports Power-over-Ethernet (PoE) and includes everything in the flagship version except the Raspberry Pi Compute Module 4.
+      <br><br>
+      Custom enclosure, custom heat sink, and Ethernet cable included. You must provide your own Raspberry Pi Compute Module 4 and install Home Assistant on it. The kit does not include a power supply (because power comes from PoE).
+    </div>
+  </div>
+  <div class="yellow-variant">
+    <div><img src="/images/yellow/yellow-2d.jpg" alt="2D overview of the content of the Home Assistant Yellow Kit"></div>
+    <div>
+      <b>Yellow Kit with Power Supply</b><br>
+      <a href="https://yellow.home-assistant.io/power-supply/">Some assembly required!</a> This kit includes everything in the flagship version except the Raspberry Pi Compute Module 4.
+      <br><br>
+      This option allows you to pick the compute module with the memory and eMMC storage to fit your needs. You will need to install Home Assistant on the compute module you provide. Custom enclosure, custom heat sink, and Ethernet cable included. This version comes with a power supply, but does not support Power-over-Ethernet.
+    </div>
+  </div>
+</div>
+
+
+<div class="material-card text spaced-card">
+  <h1>Open Hardware</h1>
+  <p>
+    We spend a lot of time and resources on getting our products to work great. We want to make it possible for other people to study our work and be able to learn how to make great products for the smart home, so we've released the schematics of Yellow as open-source.
+    <a href="https://yellow.home-assistant.io/yellow-v1.2-standard/">Explore the board</a> and <a href="https://github.com/NabuCasa/yellow/">view the source.</a>
+  </p>
+</div>
+
+<div class="sub-title">Features & Specifications</div>
+<div class="flex">
+  <ul>
+    <li>
+      Carrier board for Raspberry Pi Compute Module 4 (CM4)
+      <ul>
+        <li>CM4 board-to-board connector</li>
+        <li>Supports direct boot from NVMe devices (e.g., for CM4 Lite)</li>
+        <li>12 cm x 12 cm</li>
+        <li>Compatible with all 32 variants of CM4
+          <ul>
+            <li>Quad-core Cortex-A72 (ARMv8) 64-bit / 1.5 GHz</li>
+            <li>Up to 8 GB RAM</li>
+            <li>Up to 32 GB eMMC</li>
+            <li>Regulatory approval does not cover wireless variants</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>
+      Integrated smart-home wireless (<a href="https://www.mouser.com/new/silicon-labs/silicon-labs-mgm210p-mighty-gecko-lighting-module/">Silicon Labs MGM210P Mighty Gecko Module</a>)
+      <ul>
+        <li>Supports Zigbee 3.0, OpenThread, and Matter</li>
+        <li>2.4 GHz radio with TX power up to +20 dBm</li>
+        <li>1024 KB flash program memory, 96 KB RAM data memory</li>
+        <li>Pre-installed with Zigbee 3.0 firmware (EZSP), can be upgraded</li>
+      </ul>
+    </li>
+    <li>Expansion slot
+      <ul>
+        <li>For NVMe SSDs (M-Key)</li>
+        <li>M.2 socket M-Key</li>
+        <li>Supports 2230, 2242, 2260, and 2280 modules</li>
+        <li>PCIe x1</li>
+        <li>Note: Google Coral AI Accelerator not working, details in this <a href="https://github.com/google-coral/edgetpu/issues/280#issuecomment-818202094">issue</a></li>
+      </ul>
+    </li>
+    <li>Gigabit Ethernet</li>
+    <li>2 x USB 2.0 Type-A host port</li>
+    <li>1 x USB-C 2.0 device port (<a href="https://www.mouser.com/new/silicon-labs/silabs-cp2102n-usbxpress-usb-uart-bridge-controllers/">Silicon Labs CP2102N USBXpress USB bridge</a>)
+      <ul>
+        <li>UART mode (default): debug USB-to-serial adapter</li>
+        <li>USB mode: CM4 USB 2.0 interface for USB recovery</li>
+      </ul>
+    </li>
+  </ul>
+  <ul>
+    <li>High-quality stereo audio DAC
+      <ul>
+        <li>2 V RMS line-out on 3.5 mm audio jack</li>
+        <li>SNR 106 dB</li>
+      </ul>
+    </li>
+    <li>2 x Push button
+      <ul>
+        <li>Red: Factory reset</li>
+        <li>Blue: To be determined</li>
+      </ul>
+    </li>
+    <li>RTC backed by CR2032 battery</li>
+    <li>Status LEDs (can be powered off during regular operation)
+      <ul>
+        <li>Green: Power</li>
+        <li>Red: Disk usage</li>
+        <li>Yellow: Home Assistant system state</li>
+      </ul>
+    </li>
+    <li>Power
+      <ul>
+        <li>12 V / 2 A through barrel DC power jack (5.5 mm x 2.1 mm)</li>
+        <li>Ethernet: PoE+ IEEE 802.3at-2009 Class 3 or 4 (selectable via jumper)</li>
+        <li>Typical power usage
+          <ul>
+            <li>Idle ~1.5 W</li>
+            <li>Idle with NVMe ~2.5 W</li>
+            <li>Load ~5-9 W</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Enclosure
+      <ul>
+        <li>123 mm x 123 mm x 36 mm</li>
+        <li>Translucent injection-molded polycarbonate plastic</li>
+        <li>Tool-free assembly</li>
+        <li>Accommodates custom heat sink (included)</li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+<div id="buy-dialog" class="dialog">
+  <div class="material-card text dialog-content">
+    <div class="close-container"></div>
+    <div class="dialog-header">
+      <span>Home Assistant Yellow</span>
+      <span class="dialog-close" onclick="closeDialog()" title="close">
+        <svg width="24" height="24" viewBox="0 0 24 24">
+          <path
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div class="distributors">
+<!--
+      <a href="https://www.crowdsupply.com/nabu-casa/home-assistant-yellow#products" target="_blank">
+        <div class="distributor">
+          <div>
+            <div>🇺🇸</div>
+            <div>Crowd Supply</div>
+            <div>Located in USA</div>
+          </div>
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            />
+          </svg>
+        </div>
+      </a>
+ -->
+      <a
+        href="https://raspberrypi.dk/en?s=home+assistant+yellow&post_type=product"
+        target="_blank"
+      >
+        <div class="distributor">
+          <div>
+            <div>🇩🇰</div>
+            <div>RaspberryPi.dk</div>
+            <div>Located in Denmark</div>
+          </div>
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            />
+          </svg>
+        </div>
+      </a>
+
+    </div>
+  </div>
+</div>
+
+<div
+  class="fab"
+  onclick="showBuyDialog()"
+  title="pre-order Home Assistant Yellow"
+>
+  <svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
+    <path
+      fill="currentColor"
+      d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z"
+    />
+  </svg>
+  ORDER
+</div>
+
+<script>
+  const buyDialog = document.getElementById("buy-dialog");
+  const buyFab = document.querySelector(".fab");
+
+  function showBuyDialog() {
+    buyDialog.style.display = "flex";
+    buyFab.style.display = "none";
+  }
+
+  function closeDialog() {
+    buyDialog.style.display = "none";
+    buyFab.style.display = "flex";
+  }
+
+  window.onclick = function (event) {
+    if (event.target === buyDialog) {
+      closeDialog();
+    }
+  };
+</script>