Add energy landingpage (#18689)

Co-authored-by: Franck Nijhof <git@frenck.dev>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

sass/custom/_landingpage.scss

@@ -1,9 +1,9 @@
-$blue__deep_color: #161d61;
+$landingpage__deep_color: #161d61;
-$blue__light_color: #18abfd;
+$landingpage__light_color: #18abfd;
 $ha__primary_color: #03a9f4;
 
-#blue {
+#landingpage {
-  $blue__hero_height: 670px;
+  $landingpage__hero_height: 670px;
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
   .site-header {
     .grid-wrapper {
@@ -20,7 +20,7 @@ $ha__primary_color: #03a9f4;
     overflow-x: hidden;
   }
   .banner {
-    height: $blue__hero_height;
+    height: $landingpage__hero_height;
     margin-bottom: 16px;
     margin-top: -42px;
     width: 100%;
@@ -39,6 +39,15 @@ $ha__primary_color: #03a9f4;
       svg {
         stroke: $ha__primary_color;
       }
+
+    }
+    .wide {
+      position: relative;
+      width: 700px;
+      left: calc(50% - 700px / 2 - 0.5px);
+      font-size: 52px;
+      line-height: 52px;
+      bottom: 390px;
     }
     img {
       width: 100%;
@@ -46,36 +55,194 @@ $ha__primary_color: #03a9f4;
       object-position: bottom;
       border-radius: 0;
       border: 0;
-      height: $blue__hero_height;
+      height: $landingpage__hero_height;
       box-shadow: none;
     }
   }
+
+
+  .bottom {
+    position: absolute;
+    bottom: 8px;
+  }
+  .right {
+    position: absolute;
+    right: 8px;
+  }
+
+  .spacer {
+    height: 24px;
+  }
+
+  .button-row-with-icon {
+    display: flex;
+    justify-content: space-evenly;
+
+    a {
+      display: block;
+      text-decoration: none;
+      color: #0c0c0c;
+    }
+
+    .button-icon {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 32px;
+      text-align: center;
+      background: #FFFFFF;
+      width: 242px;
+      height: 176px;
+      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+
+      .icon {
+        padding: 12px;
+        height: 56px;
+        width: auto;
+        display: flex;
+        align-items: center;
+
+        img {
+          box-shadow: none;
+          border: none;
+        }
+      }
+
+      .text {
+        width: 164px;
+        font-size: 20px;
+        line-height: 20px;
+        text-align: center;
+        margin: auto;
+      }
+    }
+  }
+
+  .section-content {
+    background-color: #FAFAFA;
+    width: 100%;
+    display: grid;
+    justify-items: center;
+    padding: 64px;
+
+
+    .title {
+      font-size: 24px;
+      line-height: 28px;
+    }
+
+    .description {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .header {
+      width: 507px;
+      display: grid;
+      text-align: center;
+      place-items: center;
+
+      .title {
+        font-size: 32px;
+        line-height: 48px;
+      }
+    }
+
+    img {
+      box-shadow: none;
+      border: none;
+    }
+
+    .section-inner {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      padding: 32px 128px;
+      justify-content: space-evenly;
+
+      .section-inner-content {
+        align-self: center;
+        padding: 0;
+
+
+        div {
+          width: 330px;
+        }
+
+        .title {
+          margin-bottom: 4px;
+        }
+        .button {
+          font-size: small;
+          font-weight: 600;
+          text-decoration: none;
+        }
+      }
+
+      img {
+        max-width: 500px;
+        max-height: 400px;
+      }
+    }
+  }
+
+  .section-inner:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+
+  .section-inner:nth-child(odd) {
+    flex-direction: row;
+  }
+
+  .section-content:nth-child(even) {
+    background-color: #F5F5F5;
+    .section-inner:nth-child(odd) {
+      flex-direction: row-reverse;
+    }
+
+    .section-inner:nth-child(even) {
+      flex-direction: row;
+    }
+  }
+
   .content {
     max-width: 1000px;
     margin: auto;
 
-    .missing-piece {
+    .banner-overlay {
       z-index: 2;
       position: relative;
-      display: flex;
       width: 600px;
       border-radius: 8px;
       margin: -36px auto 0;
 
-      .missing-piece-header {
+      &.with-box {
+        display: flex;
+
+        .banner-overlay-content {
+          width: 420px;
+        }
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .banner-overlay-header {
         font-weight: 900;
         font-size: 24px;
         line-height: 28px;
       }
 
-      .missing-piece-content {
+      .banner-overlay-content {
         font-size: 16px;
         line-height: 19px;
         margin-top: 16px;
-        width: 420px;
       }
 
-      .missing-piece-overlay {
+      .banner-overlay {
         width: 210px;
         border-radius: 8px;
         margin: -50px -50px 0 0;
@@ -84,7 +251,7 @@ $ha__primary_color: #03a9f4;
         flex-flow: wrap;
         justify-content: space-between;
 
-        .missing-piece-overlay-header {
+        .banner-overlay-header {
           font-weight: 500;
           font-size: 12px;
           line-height: 14px;
@@ -94,7 +261,7 @@ $ha__primary_color: #03a9f4;
           width: 100%;
           text-align: right;
         }
-        .missing-piece-overlay-price {
+        .banner-overlay-price {
           width: calc(100% - 6px);
           text-align: right;
           font-weight: 900;
@@ -114,7 +281,7 @@ $ha__primary_color: #03a9f4;
           }
         }
 
-        .missing-piece-overlay-images {
+        .banner-overlay-images {
           display: grid;
           grid-template-columns: 47px 47px 47px;
           grid-template-rows: 47px 47px;
@@ -144,25 +311,27 @@ $ha__primary_color: #03a9f4;
             width: 96px;
           }
         }
-        .missing-piece-overlay-button {
+      }
-          background-color: $ha__primary_color;
+      .banner-overlay-button {
-          margin-top: 12px;
+        background-color: $ha__primary_color;
-          border-radius: 4px;
+        margin-top: 12px;
-          width: 154px;
+        border-radius: 4px;
-          height: 46px;
+        width: 154px;
-          display: flex;
+        height: 46px;
-          cursor: pointer;
+        display: flex;
+        cursor: pointer;
+        text-transform: capitalize;
 
-          div {
+        div {
-            margin: auto;
+          margin: auto;
-            font-weight: 900;
+          font-weight: 900;
-            font-size: 18px;
+          font-size: 18px;
-            color: #ffffff;
+          color: #ffffff;
-          }
         }
       }
+
     }
-    .missing-piece-disclaimer {
+    .banner-overlay-disclaimer {
       font-size: 12px;
       line-height: 14px;
       color: #0c0c0c;
@@ -230,7 +399,7 @@ $ha__primary_color: #03a9f4;
           font-weight: 900;
           font-size: 68px;
           line-height: 80px;
-          color: $blue__deep_color;
+          color: $landingpage__deep_color;
         }
         .vision-statement {
           font-size: 18px;
@@ -249,7 +418,7 @@ $ha__primary_color: #03a9f4;
 
             .vision-block-title {
               text-transform: uppercase;
-              color: $blue__deep_color;
+              color: $landingpage__deep_color;
               letter-spacing: -2px;
               font-size: 48px;
               line-height: 56px;
@@ -539,7 +708,7 @@ $ha__primary_color: #03a9f4;
     }
   }
 
-  .blue-buy-fab {
+  .fab {
     background-color: $ha__primary_color;
     border-radius: 62px;
     bottom: 16px;
@@ -693,8 +862,8 @@ $ha__primary_color: #03a9f4;
 }
 
 @media only screen and (max-width: $palm-end) {
-  $blue__hero_height: 500px;
+  $landingpage__hero_height: 500px;
-  #blue {
+  #landingpage {
     .site-header {
       background-color: #ffffff66;
       transition: background 0.5s;
@@ -714,9 +883,9 @@ $ha__primary_color: #03a9f4;
     }
     .banner {
       margin-bottom: 8px;
-      height: $blue__hero_height;
+      height: $landingpage__hero_height;
       img {
-        height: $blue__hero_height;
+        height: $landingpage__hero_height;
       }
       .title {
         width: 100%;
@@ -733,7 +902,45 @@ $ha__primary_color: #03a9f4;
           }
         }
       }
+
+      .wide {
+        line-height: 1em;
+      }
+
     }
+
+    .section-content {
+      width: 100%;
+      padding: 32px 4px;
+
+      .header {
+        width: 100%;
+      }
+
+      .section-inner {
+        flex-direction: column-reverse !important;
+        padding: 32px 0;
+
+        img {
+          max-width: 100%;
+        }
+
+        .section-inner-content {
+          margin-bottom: 16px;
+          width: 100%;
+        }
+      }
+    }
+
+    .button-row-with-icon {
+      display: flex;
+      flex-direction: column;
+      .button-icon {
+        width: calc(100% - 8px);
+        margin: 2px 4px;
+      }
+    }
+
     .content {
       margin: 0 8px;
 
@@ -742,41 +949,47 @@ $ha__primary_color: #03a9f4;
         line-height: 28px;
       }
 
-      .missing-piece {
+      .banner-overlay {
         margin: -116px auto 0;
         display: block;
         width: 100%;
         padding: 0;
+        padding-bottom: 2px;
 
-        .missing-piece-header {
+        .energy-button-getting-started {
+          .banner-overlay-button {
+            margin: 8px;
+            position: unset;
+            width: calc(100% - 16px);
+          }
+        }
+
+        .banner-overlay-header {
           padding-left: 8px;
           padding-top: 8px;
         }
 
-        .missing-piece-content {
+        .banner-overlay-content {
           padding-left: 8px;
-        }
-
-        .missing-piece-content {
           width: 100%;
         }
         .secondary {
           display: none;
         }
 
-        .missing-piece-overlay {
+        .banner-overlay {
           margin: 0;
           margin-top: 12px;
           width: 100%;
 
-          .missing-piece-overlay-images {
+          .banner-overlay-images {
             margin-top: -42px;
             margin-left: -8px;
           }
         }
       }
 
-      .missing-piece-disclaimer {
+      .banner-overlay-disclaimer {
         margin: 12px auto 12px;
       }
 
@@ -907,7 +1120,7 @@ $ha__primary_color: #03a9f4;
       }
     }
 
-    .blue-buy-fab {
+    .fab {
       bottom: 12px;
       right: 12px;
       display: none;
@@ -945,7 +1158,7 @@ $ha__primary_color: #03a9f4;
 }
 
 @media only screen and (max-width: $lap-end) {
-  #blue {
+  #landingpage {
     .page-content {
       .content {
         .bullet-points {

sass/custom/_paulus.scss

@@ -120,6 +120,12 @@ $primary-color: #049cdb;
       margin: 0 8px;
     }
   }
+
+  @media screen and (max-width: 480px) {
+    .links {
+      margin-left: 0;
+    }
+  }
 }
 
 .feedback {

sass/screen.scss

@@ -1,6 +1,6 @@
 @import 'oscailte/oscailte';
 @import 'custom/paulus';
-@import 'custom/blue';
+@import 'custom/landingpage';
 @import 'custom/features';
 @import 'custom/component_page';
 @import 'custom/syntax';

source/_includes/custom/features.html

@@ -102,14 +102,14 @@
     </div>
     <div class="card-content">
       <p>
-        Home Assistant allows you to get on top of your energy use with its 
+        Home Assistant allows you to get on top of your energy use with its
-        home energy management feature. Gain new insights, 
+        home energy management feature. Gain new insights,
         optimize your solar panel production, plan energy usage and save money.
       </p>
 
       <a
         class="button"
-        href="/docs/energy/"
+        href="/home-energy-management/"
       >
         LEARN MORE
       </a>

source/_includes/feedback.html

@@ -1,4 +1,4 @@
-{% unless page.feedback == false %}
+{% unless page.feedback == false  or page.layout == "landingpage"  %}
 <div class="material-card text feedback" id="feedback_section">
   <h4><a href="#feedback_section" class="title-link"><b> Help us to improve our documentation</b></a></h4>
   Suggest an edit to this page, or provide/view feedback for this page.

source/_layouts/default.html

@@ -1,5 +1,5 @@
 {% include site/head.html %}
-  <body {% if page.body_id %} id="{{ page.body_id }}"{% endif %}>
+  <body {% if page.body_id %} id="{{ page.body_id }}"{% elsif page.layout == "landingpage" %} id="landingpage"{% endif %}>
     <header class='site-header'>
       {% include site/header.html %}
     </header>
@@ -14,20 +14,20 @@
       <div class="grid grid-center">
         {% if page.is_post and page.sidebar == false %}
         <div class="grid__item four-fifths lap-one-whole palm-one-whole">
-        {% elsif page.is_homepage %}
+        {% elsif page.is_homepage or page.layout == "landingpage" %}
         <div class="grid__item one-whole">
         {% else %}
         <div class="grid__item two-thirds lap-one-whole palm-one-whole">
         {% endif %}
 
-          {% if page.is_homepage %}
+          {% if page.is_homepage or page.layout == "landingpage"  %}
             {{ content }}
           {% else %}
             {{ content | output_modder }}
           {% endif %}
         </div>
 
-        {% unless page.sidebar == false %}
+        {% unless page.sidebar == false or page.layout == "landingpage"  %}
         <aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
           {% include site/sidebar.html %}
         </aside>

source/_layouts/landingpage.html

@@ -0,0 +1,100 @@
+---
+layout: page
+---
+
+{% if page.og_image %}
+  <div class="banner">
+    <img src="{{ page.hero_image | default:page.og_image }}"></i>
+    {% if page.tagline %}
+      <div class="title {% if page.tagline_wide != false %}wide{% endif %}">
+      {{ page.tagline }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
+
+{% if page.content %}
+<div class="content">{{ content }}</div>
+<div class="spacer"></div><div class="spacer"></div>
+{% endif %}
+
+
+{% if page.sections and page.button_row != false %}
+  <div class="button-row-with-icon">
+  {% for section in page.sections %}
+        <a href="#{{section.title | downcase | strip | replace: " ", "_"}}">
+            <div class="button-icon">
+                <div class="icon"><img src="{{section.image}}"></div>
+                <div class="text">{{section.title}}</div>
+            </div>
+        </a>
+  {% endfor %}
+  </div>
+  <div class="spacer"></div><div class="spacer"></div>
+{% endif %}
+
+
+{% if page.sections %}
+  {% for section in page.sections %}
+    <div class="section-content" id="{{section.title | downcase | strip | replace: " ", "_"}}">
+        <div class="header">
+            <img src="{{section.image}}">
+            <div class="title">{{section.title}}</div>
+            <div class="description">{{section.description}}</div>
+        </div>
+
+        {% for entry in section.entries %}
+          <div class="section-inner">
+              <div class="section-inner-content">
+                <img {% if entry.image_description %} alt="{{ entry.image_description }}" title="{{ entry.image_description }}" {% endif %} src="{{entry.image}}">
+              </div>
+              <div class="section-inner-content">
+                  <div class="title">{{entry.title}}</div>
+                  <div class="description">{{entry.description}}</div>
+                  {% if entry.read_more %}
+                    {% assign first_char = entry.read_more | slice: 0, 1 %}
+                    <a class="button" href="{{entry.read_more}}" {% if first_char != "/" %}target="_blank"{% endif %}>READ MORE</a>
+                  {% endif %}
+              </div>
+          </div>
+        {% endfor %}
+    </div>
+  {% endfor %}
+{% endif %}
+
+
+
+
+
+<script>
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+          e.preventDefault();
+
+          document.querySelector(this.getAttribute('href')).scrollIntoView({
+              behavior: 'smooth'
+          });
+      });
+  });
+  if (document.documentElement.clientWidth < 480) {
+    document.querySelector(".page-content").addEventListener(
+      "scroll",
+      function (e) {
+        const header = document.querySelector(".site-header");
+        const fab = document.querySelector(".fab");
+        if (e.currentTarget.scrollTop > 180) {
+          header.style.backgroundColor = "#ffffff";
+          if (fab) {
+            fab.style.display = "flex";
+          }
+        } else {
+          header.style.backgroundColor = "#ffffff66";
+          if (fab) {
+            fab.style.display = "none";
+          }
+        }
+      },
+      { passive: true, capture: true }
+    );
+  }
+</script>

source/_layouts/page.html

@@ -3,7 +3,7 @@ layout: default
 ---
 
 <article class="page">
-  {% if page.title and page.show_title != false %}
+  {% if page.title and page.show_title != false and page.layout != "landingpage"  %}
   <header>
     <h1 class="title indent">
       {% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title

source/_redirects

@@ -7,6 +7,9 @@
 /get-blueprints https://community.home-assistant.io/c/blueprints-exchange/53
 /latest-security-alert /blog/2021/01/23/security-disclosure2/
 
+# Redirect for Energy
+/energy /home-energy-management
+
 # Older development pages
 /developers https://developers.home-assistant.io
 /developers/add_new_platform https://developers.home-assistant.io/docs/creating_platform_index/

source/blue/index.html

@@ -1,17 +1,9 @@
 ---
+layout: landingpage
 title: "Home Assistant Blue!"
 description: "Where style and performance meet privacy"
-sidebar: false
+date: 2020-12-12
-is_homepage: true
+tagline: >-
-feedback: false
-body_id: blue
-show_title: false
-og_image: /images/blue/blue_hero.jpg
----
-
-<div class="banner">
-  <img src="/images/blue/blue_hero.jpg" />
-  <div class="title">
     Home Assistant
     <svg
       width="212"
@@ -28,41 +20,42 @@ og_image: /images/blue/blue_hero.jpg
       />
       <text x="40" y="78" stroke="white" fill="white">Blue</text>
     </svg>
-  </div>
+tagline_wide: false
-</div>
+og_image: /images/blue/blue_hero.jpg
+---
 
 <div class="content">
-  <div class="material-card text missing-piece">
+  <div class="material-card text banner-overlay with-box">
     <div>
-      <div class="missing-piece-header">The missing piece</div>
+      <div class="banner-overlay-header">The missing piece</div>
-      <div class="missing-piece-content">
+      <div class="banner-overlay-content">
         We challenged ourselves: what would the perfect home automation hub look
         like. Not just software, but also hardware and looks.
       </div>
-      <div class="missing-piece-content secondary">
+      <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 missing-piece-overlay">
+    <div class="material-card text banner-overlay">
-      <div class="missing-piece-overlay-header">LIMITED EDITION</div>
+      <div class="banner-overlay-header">LIMITED EDITION</div>
-      <div class="missing-piece-overlay-price">
+      <div class="banner-overlay-price">
         $140
         <div>*</div>
       </div>
-      <div class="missing-piece-overlay-images">
+      <div class="banner-overlay-images">
         <div class="img-container"><img src="/images/blue/blue1.png" /></div>
         <div class="img-container"><img src="/images/blue/blue2.png" /></div>
         <div class="img-container"><img src="/images/blue/blue3.png" /></div>
       </div>
-      <div class="missing-piece-overlay-button" onclick="showBuyDialog()">
+      <div class="banner-overlay-button" onclick="showBuyDialog()">
         <div>BUY NOW</div>
       </div>
     </div>
   </div>
-  <div class="missing-piece-disclaimer">
+  <div class="banner-overlay-disclaimer">
     * Price does not include taxes and import fees
   </div>
 
@@ -731,7 +724,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
       </div>
     </div>
   </div>
-  <div class="blue-buy-fab" onclick="showBuyDialog()" title="buy blue">
+  <div class="fab" onclick="showBuyDialog()" title="buy blue">
     <svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
       <path
         fill="currentColor"
@@ -742,7 +735,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
   </div>
   <script>
     const buyDialog = document.getElementById("buy-dialog");
-    const buyFab = document.querySelector(".blue-buy-fab");
+    const buyFab = document.querySelector(".fab");
 
     function showBuyDialog() {
       buyDialog.style.display = "flex";
@@ -759,23 +752,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
         closeDialog();
       }
     };
-
-    if (document.documentElement.clientWidth < 480) {
-      document.querySelector(".page-content").addEventListener(
-        "scroll",
-        function (e) {
-          const header = document.querySelector(".site-header");
-          const fab = document.querySelector(".blue-buy-fab");
-          if (e.currentTarget.scrollTop > 180) {
-            header.style.backgroundColor = "#ffffff";
-            fab.style.display = "flex";
-          } else {
-            header.style.backgroundColor = "#ffffff66";
-            fab.style.display = "none";
-          }
-        },
-        { passive: true, capture: true }
-      );
-    }
   </script>
 </div>

source/home-energy-management/index.html

@@ -0,0 +1,75 @@
+---
+layout: landingpage
+title: "Home Energy Management"
+date: 2021-07-28
+description: "Monitor your energy usage, transition to sustainable energy and save money"
+hero_image: /images/energy/hero.jpg
+og_image: /images/blog/2021-08-energy/social.png
+tagline: The world is heating up. Together we can fix that.
+sections:
+  - title: "Monitor usage"
+    description: "Monitor the energy usage, transition to sustainable energy and save money."
+    image: /images/energy/vector-graph.png
+    entries:
+      - title: "Know where it goes."
+        description: "Home Assistant shows at a glance how much you're consuming, producing and where this energy is going."
+        image: /images/energy/distribution.png
+      - title: "Keep an eye on your devices."
+        description: "Track the energy use of individual devices to see their impact on your energy consumption."
+        image: /images/energy/individual_devices.png
+
+  - title: "Track your costs"
+    description: "Home Assistant helps you keep track of the costs and compensation for your energy consumption and production."
+    image: /images/energy/vector-money.png
+    entries:
+      - title: "Consumption overview."
+        description: "Get an overview of your energy consumption."
+        image: /images/energy/cost.png
+
+  - title: "Use any hardware"
+    description: ""
+    image: /images/energy/vector-connect.png
+    entries:
+      - title: "Bring your own hardware"
+        description: "Home Assistant is vendor agnostic and there is no vendor lock-in: we work with any device or service that allows us to retrieve the data."
+        image: /images/blue/blue_hero.jpg
+        read_more: /integrations/#energy
+      - title: "SlimmeLezer"
+        description: >
+          We created SlimmeLezer, a device that connects to electricity meters with P1 ports and makes the data locally available in Home Assistant.
+        image: /images/docs/energy/slimmelezer.jpg
+        read_more: /docs/energy/electricity-grid/#connect-using-a-p1-port
+      - title: "Home Assistant Glow."
+        description: "We created Home Assistant Glow, a device that reads the consumption LED on your electricity meter and make it locally available in Home Assistant."
+        image: /images/docs/energy/home-assistant-glow.jpg
+        image_description: "Home Assistant Glow attached to an energy meter"
+        read_more: /docs/energy/electricity-grid/#reading-the-meter-via-a-pulse-counter
+
+  - title: "Supercharge your solar panels"
+    description: "Schedule power usage based on solar production predictions."
+    image: /images/energy/vector-sun.png
+    entries:
+      - title: "Time your usage."
+        description: "It’s cheaper to consume the energy you produce than to give it back to the grid. Home Assistant helps you turn on the power-hungry things when your usage needs a boost."
+        image: /images/blog/2021-08-energy/solar-production.png
+
+---
+
+<div class="material-card text banner-overlay">
+    <div>
+        <div class="banner-overlay-header">Home Energy Management</div>
+        <div class="banner-overlay-content">
+          With Home Assistant we want to do our part to help take on the climate crisis, and help you do the same. One part of fighting the climate crisis is making sure our homes are energy efficient and use low-carbon energy sources.
+          <br><br>
+          Home Assistant helps you to monitor your energy usage, transition to sustainable energy and save money.
+        </div>
+    </div>
+    <div class="links">
+      <a href="/getting-started">
+        Get started
+      </a>
+      <a href="https://demo.home-assistant.io/#/energy" target="_blank">
+        View Demo
+      </a>
+    </div>
+</div>

source/index.html

@@ -88,26 +88,30 @@ feedback: false
       </a>
     </div>
     <div class="grid__item two-thirds lap-two-thirds palm-one-whole">
-
+    {% assign pages_by_date = site.pages | sort: "date" | reverse %}
-      <a
+    {% for page in pages_by_date %}
-        class="material-card picture-promo"
+      {% if page.layout == "landingpage" and page.frontpage != false %}
-        href="/blue"
+        <a
-        style="
+          class="material-card picture-promo"
-          background-image: url(/images/blue/blue_narrow.jpg);
+          href="{{page.url}}"
-          background-size: cover;
+          style="
-          background-color: #41bdf5;
+            background-image: url({{page.hero_image | default:page.og_image}});
-        "
+            background-size: cover;
-      >
+            background-color: #41bdf5;
-        <div class="caption">
+          "
-          <div class="title">
+        >
-            Home Assistant Blue!
+          <div class="caption">
-            <div class="subtitle">
+            <div class="title">
-              Where style and performance meet privacy
+              {{page.title}}
+              <div class="subtitle">
+                {{page.description}}
+              </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" /></svg>
           </div>
-          <svg viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>
+        </a>
-        </div>
+      {% endif %}
-      </a>
+    {% endfor %}
 
       <a
         class="material-card picture-promo"