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;
$blue__light_color: #18abfd;
$landingpage__deep_color: #161d61;
$landingpage__light_color: #18abfd;
$ha__primary_color: #03a9f4;
#blue {
$blue__hero_height: 670px;
#landingpage {
$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;
margin-top: 12px;
border-radius: 4px;
width: 154px;
height: 46px;
display: flex;
cursor: pointer;
}
.banner-overlay-button {
background-color: $ha__primary_color;
margin-top: 12px;
border-radius: 4px;
width: 154px;
height: 46px;
display: flex;
cursor: pointer;
text-transform: capitalize;
div {
margin: auto;
font-weight: 900;
font-size: 18px;
color: #ffffff;
}
div {
margin: auto;
font-weight: 900;
font-size: 18px;
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;
#blue {
$landingpage__hero_height: 500px;
#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 {

View File

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

View File

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

View File

@ -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 energy management feature. Gain new insights,
Home Assistant allows you to get on top of your energy use with its
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>

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">
<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.

View File

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

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">
{% 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

View File

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

View File

@ -1,17 +1,9 @@
---
layout: landingpage
title: "Home Assistant Blue!"
description: "Where style and performance meet privacy"
sidebar: false
is_homepage: true
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">
date: 2020-12-12
tagline: >-
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>
</div>
tagline_wide: false
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="missing-piece-content">
<div class="banner-overlay-header">The missing piece</div>
<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="missing-piece-overlay-header">LIMITED EDITION</div>
<div class="missing-piece-overlay-price">
<div class="material-card text banner-overlay">
<div class="banner-overlay-header">LIMITED EDITION</div>
<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>

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>
</div>
<div class="grid__item two-thirds lap-two-thirds palm-one-whole">
<a
class="material-card picture-promo"
href="/blue"
style="
background-image: url(/images/blue/blue_narrow.jpg);
background-size: cover;
background-color: #41bdf5;
"
>
<div class="caption">
<div class="title">
Home Assistant Blue!
<div class="subtitle">
Where style and performance meet privacy
{% assign pages_by_date = site.pages | sort: "date" | reverse %}
{% for page in pages_by_date %}
{% if page.layout == "landingpage" and page.frontpage != false %}
<a
class="material-card picture-promo"
href="{{page.url}}"
style="
background-image: url({{page.hero_image | default:page.og_image}});
background-size: cover;
background-color: #41bdf5;
"
>
<div class="caption">
<div class="title">
{{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>
</div>
</a>
</a>
{% endif %}
{% endfor %}
<a
class="material-card picture-promo"