Add energy landingpage (#18689)

Co-authored-by: Franck Nijhof <git@frenck.dev>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
Joakim Sørensen 2021-08-03 22:33:12 +02:00 committed by Franck Nijhof
parent 43f0acc563
commit 5ddc45ccf1
No known key found for this signature in database
GPG Key ID: D62583BA8AB11CA3
20 changed files with 495 additions and 119 deletions

View File

@ -1,9 +1,9 @@
$blue__deep_color: #161d61; $landingpage__deep_color: #161d61;
$blue__light_color: #18abfd; $landingpage__light_color: #18abfd;
$ha__primary_color: #03a9f4; $ha__primary_color: #03a9f4;
#blue { #landingpage {
$blue__hero_height: 670px; $landingpage__hero_height: 670px;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
.site-header { .site-header {
.grid-wrapper { .grid-wrapper {
@ -20,7 +20,7 @@ $ha__primary_color: #03a9f4;
overflow-x: hidden; overflow-x: hidden;
} }
.banner { .banner {
height: $blue__hero_height; height: $landingpage__hero_height;
margin-bottom: 16px; margin-bottom: 16px;
margin-top: -42px; margin-top: -42px;
width: 100%; width: 100%;
@ -39,6 +39,15 @@ $ha__primary_color: #03a9f4;
svg { svg {
stroke: $ha__primary_color; 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 { img {
width: 100%; width: 100%;
@ -46,36 +55,194 @@ $ha__primary_color: #03a9f4;
object-position: bottom; object-position: bottom;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
height: $blue__hero_height; height: $landingpage__hero_height;
box-shadow: none; 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 { .content {
max-width: 1000px; max-width: 1000px;
margin: auto; margin: auto;
.missing-piece { .banner-overlay {
z-index: 2; z-index: 2;
position: relative; position: relative;
display: flex;
width: 600px; width: 600px;
border-radius: 8px; border-radius: 8px;
margin: -36px auto 0; 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-weight: 900;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
} }
.missing-piece-content { .banner-overlay-content {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
margin-top: 16px; margin-top: 16px;
width: 420px;
} }
.missing-piece-overlay { .banner-overlay {
width: 210px; width: 210px;
border-radius: 8px; border-radius: 8px;
margin: -50px -50px 0 0; margin: -50px -50px 0 0;
@ -84,7 +251,7 @@ $ha__primary_color: #03a9f4;
flex-flow: wrap; flex-flow: wrap;
justify-content: space-between; justify-content: space-between;
.missing-piece-overlay-header { .banner-overlay-header {
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -94,7 +261,7 @@ $ha__primary_color: #03a9f4;
width: 100%; width: 100%;
text-align: right; text-align: right;
} }
.missing-piece-overlay-price { .banner-overlay-price {
width: calc(100% - 6px); width: calc(100% - 6px);
text-align: right; text-align: right;
font-weight: 900; font-weight: 900;
@ -114,7 +281,7 @@ $ha__primary_color: #03a9f4;
} }
} }
.missing-piece-overlay-images { .banner-overlay-images {
display: grid; display: grid;
grid-template-columns: 47px 47px 47px; grid-template-columns: 47px 47px 47px;
grid-template-rows: 47px 47px; grid-template-rows: 47px 47px;
@ -144,25 +311,27 @@ $ha__primary_color: #03a9f4;
width: 96px; 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; font-size: 12px;
line-height: 14px; line-height: 14px;
color: #0c0c0c; color: #0c0c0c;
@ -230,7 +399,7 @@ $ha__primary_color: #03a9f4;
font-weight: 900; font-weight: 900;
font-size: 68px; font-size: 68px;
line-height: 80px; line-height: 80px;
color: $blue__deep_color; color: $landingpage__deep_color;
} }
.vision-statement { .vision-statement {
font-size: 18px; font-size: 18px;
@ -249,7 +418,7 @@ $ha__primary_color: #03a9f4;
.vision-block-title { .vision-block-title {
text-transform: uppercase; text-transform: uppercase;
color: $blue__deep_color; color: $landingpage__deep_color;
letter-spacing: -2px; letter-spacing: -2px;
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
@ -539,7 +708,7 @@ $ha__primary_color: #03a9f4;
} }
} }
.blue-buy-fab { .fab {
background-color: $ha__primary_color; background-color: $ha__primary_color;
border-radius: 62px; border-radius: 62px;
bottom: 16px; bottom: 16px;
@ -693,8 +862,8 @@ $ha__primary_color: #03a9f4;
} }
@media only screen and (max-width: $palm-end) { @media only screen and (max-width: $palm-end) {
$blue__hero_height: 500px; $landingpage__hero_height: 500px;
#blue { #landingpage {
.site-header { .site-header {
background-color: #ffffff66; background-color: #ffffff66;
transition: background 0.5s; transition: background 0.5s;
@ -714,9 +883,9 @@ $ha__primary_color: #03a9f4;
} }
.banner { .banner {
margin-bottom: 8px; margin-bottom: 8px;
height: $blue__hero_height; height: $landingpage__hero_height;
img { img {
height: $blue__hero_height; height: $landingpage__hero_height;
} }
.title { .title {
width: 100%; 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 { .content {
margin: 0 8px; margin: 0 8px;
@ -742,41 +949,47 @@ $ha__primary_color: #03a9f4;
line-height: 28px; line-height: 28px;
} }
.missing-piece { .banner-overlay {
margin: -116px auto 0; margin: -116px auto 0;
display: block; display: block;
width: 100%; width: 100%;
padding: 0; 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-left: 8px;
padding-top: 8px; padding-top: 8px;
} }
.missing-piece-content { .banner-overlay-content {
padding-left: 8px; padding-left: 8px;
}
.missing-piece-content {
width: 100%; width: 100%;
} }
.secondary { .secondary {
display: none; display: none;
} }
.missing-piece-overlay { .banner-overlay {
margin: 0; margin: 0;
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;
.missing-piece-overlay-images { .banner-overlay-images {
margin-top: -42px; margin-top: -42px;
margin-left: -8px; margin-left: -8px;
} }
} }
} }
.missing-piece-disclaimer { .banner-overlay-disclaimer {
margin: 12px auto 12px; margin: 12px auto 12px;
} }
@ -907,7 +1120,7 @@ $ha__primary_color: #03a9f4;
} }
} }
.blue-buy-fab { .fab {
bottom: 12px; bottom: 12px;
right: 12px; right: 12px;
display: none; display: none;
@ -945,7 +1158,7 @@ $ha__primary_color: #03a9f4;
} }
@media only screen and (max-width: $lap-end) { @media only screen and (max-width: $lap-end) {
#blue { #landingpage {
.page-content { .page-content {
.content { .content {
.bullet-points { .bullet-points {

View File

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

View File

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

View File

@ -102,14 +102,14 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<p> <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. optimize your solar panel production, plan energy usage and save money.
</p> </p>
<a <a
class="button" class="button"
href="/docs/energy/" href="/home-energy-management/"
> >
LEARN MORE LEARN MORE
</a> </a>

View File

@ -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"> <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> <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. Suggest an edit to this page, or provide/view feedback for this page.

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -1,17 +1,9 @@
--- ---
layout: landingpage
title: "Home Assistant Blue!" title: "Home Assistant Blue!"
description: "Where style and performance meet privacy" 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 Home Assistant
<svg <svg
width="212" width="212"
@ -28,41 +20,42 @@ og_image: /images/blue/blue_hero.jpg
/> />
<text x="40" y="78" stroke="white" fill="white">Blue</text> <text x="40" y="78" stroke="white" fill="white">Blue</text>
</svg> </svg>
</div> tagline_wide: false
</div> og_image: /images/blue/blue_hero.jpg
---
<div class="content"> <div class="content">
<div class="material-card text missing-piece"> <div class="material-card text banner-overlay with-box">
<div> <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 We challenged ourselves: what would the perfect home automation hub look
like. Not just software, but also hardware and looks. like. Not just software, but also hardware and looks.
</div> </div>
<div class="missing-piece-content secondary"> <div class="banner-overlay-content secondary">
The result is the limited edition Home Assistant Blue bundle. Hardware The result is the limited edition Home Assistant Blue bundle. Hardware
that is affordable and fast, packed in a gorgeous case and powered by that is affordable and fast, packed in a gorgeous case and powered by
the most powerful home automation software on the planet: Home the most powerful home automation software on the planet: Home
Assistant. Assistant.
</div> </div>
</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 $140
<div>*</div> <div>*</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/blue1.png" /></div>
<div class="img-container"><img src="/images/blue/blue2.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 class="img-container"><img src="/images/blue/blue3.png" /></div>
</div> </div>
<div class="missing-piece-overlay-button" onclick="showBuyDialog()"> <div class="banner-overlay-button" onclick="showBuyDialog()">
<div>BUY NOW</div> <div>BUY NOW</div>
</div> </div>
</div> </div>
</div> </div>
<div class="missing-piece-disclaimer"> <div class="banner-overlay-disclaimer">
* Price does not include taxes and import fees * Price does not include taxes and import fees
</div> </div>
@ -731,7 +724,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
</div> </div>
</div> </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"> <svg style="width: 32px; height: 32px" viewBox="0 0 32 32">
<path <path
fill="currentColor" fill="currentColor"
@ -742,7 +735,7 @@ Nope! We are committed to keep supporting all platforms that are currently avail
</div> </div>
<script> <script>
const buyDialog = document.getElementById("buy-dialog"); const buyDialog = document.getElementById("buy-dialog");
const buyFab = document.querySelector(".blue-buy-fab"); const buyFab = document.querySelector(".fab");
function showBuyDialog() { function showBuyDialog() {
buyDialog.style.display = "flex"; buyDialog.style.display = "flex";
@ -759,23 +752,5 @@ Nope! We are committed to keep supporting all platforms that are currently avail
closeDialog(); 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> </script>
</div> </div>

View File

@ -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: "Its 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 840 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 856 B

View File

@ -88,26 +88,30 @@ feedback: false
</a> </a>
</div> </div>
<div class="grid__item two-thirds lap-two-thirds palm-one-whole"> <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> </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> </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 <a
class="material-card picture-promo" class="material-card picture-promo"