mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-22 16:56:50 +00:00
Beautify frontpage (#33503)
* Remove outdated content from the top * Add merch and companion app links * Align Get Started button better * Fix caption radius * Beautify press section * Beautify sponsor section * Fix feature Learn More button margins * Reorganize Features section * Revert content changes since it needs further discussion
This commit is contained in:
Madelena Mak
GitHub
parent
1a5b7348e5
commit
41a3c8e8fd
@ -493,8 +493,8 @@ a.material-card:hover {
|
||||
padding: 8px 12px 12px;
|
||||
background-color: rgba(0, 0, 0, 0.54);
|
||||
color: white;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -542,26 +542,37 @@ a.material-card:hover {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.sponsored-by {
|
||||
img {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: 15px;
|
||||
max-width: 40%;
|
||||
max-height: 80px;
|
||||
.seen-press {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
column-gap: 24px;
|
||||
row-gap: 24px;
|
||||
margin: 48px 0;
|
||||
|
||||
h2 {
|
||||
grid-column: 1/-1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.seen-press {
|
||||
a {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
margin: 15px;
|
||||
max-width: 40%;
|
||||
max-height: 70px;
|
||||
margin: 24px;
|
||||
width: calc(100% - 48px);
|
||||
max-height: 128px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.material-card {
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.square {
|
||||
@ -572,6 +583,18 @@ a.material-card:hover {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsored-by {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin: 24px;
|
||||
max-height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
||||
@ -26,11 +26,11 @@
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding-left: 24px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
p:last-of-type,
|
||||
ul {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
background-color: $link-color;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
padding: 8px 24px;
|
||||
padding: 8px 20px 8px 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,119 +1,128 @@
|
||||
<div class="feature-cards">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:lightbulb-variant-outline"></iconify-icon>
|
||||
Works with over 1000 brands
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Home Assistant integrates with over a thousand different devices
|
||||
and services.
|
||||
</p>
|
||||
<section class="grid features">
|
||||
<div class="grid__item one-whole">
|
||||
<h2 class="sub-title">Features</h2>
|
||||
|
||||
<p>
|
||||
Once started, Home Assistant will automatically scan your network for
|
||||
known devices and allow you to easily set them up.
|
||||
</p>
|
||||
<a class="button" href="/integrations">EXPLORE INTEGRATIONS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon>
|
||||
Powerful automations
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Once you have integrated all your devices at home, you can unleash Home
|
||||
Assistant’s advanced automation engine to make your home work for you.
|
||||
</p>
|
||||
<div class="feature-cards">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:lightbulb-variant-outline"></iconify-icon>
|
||||
Works with over 1000 brands
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Home Assistant integrates with over a thousand different devices
|
||||
and services.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Turn on the light when the sun sets or when coming home</li>
|
||||
<li>Alert you when you leave your garage door open.</li>
|
||||
</ul>
|
||||
<a class="button" href="/docs/automation">EXPLORE AUTOMATIONS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:puzzle"></iconify-icon>
|
||||
Extend your system with add-ons
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Home Assistant is not just limited to Home Assistant. Easily install
|
||||
other applications that will help you manage your home.
|
||||
</p>
|
||||
<p>
|
||||
Once started, Home Assistant will automatically scan your network for
|
||||
known devices and allow you to easily set them up.
|
||||
</p>
|
||||
<a class="button" href="/integrations">EXPLORE INTEGRATIONS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Run AdGuard, a DNS-based ad blocker</li>
|
||||
<li>Run third party automation engines like NodeRed</li>
|
||||
<li>Turn Home Assistant into a Spotify Connect target</li>
|
||||
</ul>
|
||||
<a class="button" href="/addons">EXPLORE ADD-ONS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:shield-home-outline"></iconify-icon>
|
||||
All your smart home data stays local
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Home Assistant keeps your data local, no need for a cloud.</p>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon>
|
||||
Powerful automations
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Once you have integrated all your devices at home, you can unleash Home
|
||||
Assistant’s advanced automation engine to make your home work for you.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Home Assistant communicates with your devices locally, and will fallback
|
||||
to pulling in data from the cloud if there is no other option. No data
|
||||
is stored in the cloud, and everything is processed locally.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:cellphone"></iconify-icon>
|
||||
Companion Mobile Apps
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Use the official Home Assistant apps, a convenient companion to quickly
|
||||
control your devices and be notified when things happen in your home,
|
||||
even on your wrist using the Apple Watch.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Turn on the light when the sun sets or when coming home</li>
|
||||
<li>Alert you when you leave your garage door open.</li>
|
||||
</ul>
|
||||
<a class="button" href="/docs/automation">EXPLORE AUTOMATIONS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:puzzle"></iconify-icon>
|
||||
Extend your system with add-ons
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Home Assistant is not just limited to Home Assistant. Easily install
|
||||
other applications that will help you manage your home.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The apps can also be used to send your location home to use presence
|
||||
detection as part of your automations. Data is sent directly to your
|
||||
home, no access by third-parties.
|
||||
</p>
|
||||
<a
|
||||
class="button"
|
||||
href="https://companion.home-assistant.io/"
|
||||
target="_blank"
|
||||
>
|
||||
DOWNLOAD APPS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:solar-power-variant"></iconify-icon>
|
||||
Home Energy Management
|
||||
</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,
|
||||
optimize your solar panel production, plan energy usage and save money.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Run AdGuard, a DNS-based ad blocker</li>
|
||||
<li>Run third party automation engines like NodeRed</li>
|
||||
<li>Turn Home Assistant into a Spotify Connect target</li>
|
||||
</ul>
|
||||
<a class="button" href="/addons">EXPLORE ADD-ONS</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:shield-home-outline"></iconify-icon>
|
||||
All your smart home data stays local
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Home Assistant keeps your data local, no need for a cloud.</p>
|
||||
|
||||
<a
|
||||
class="button"
|
||||
href="/home-energy-management/"
|
||||
aria-label="Learn more about Home Energy Management"
|
||||
>
|
||||
LEARN MORE
|
||||
</a>
|
||||
<p>
|
||||
Home Assistant communicates with your devices locally, and will fallback
|
||||
to pulling in data from the cloud if there is no other option. No data
|
||||
is stored in the cloud, and everything is processed locally.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:cellphone"></iconify-icon>
|
||||
Companion Mobile Apps
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Use the official Home Assistant apps, a convenient companion to quickly
|
||||
control your devices and be notified when things happen in your home,
|
||||
even on your wrist using the Apple Watch.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The apps can also be used to send your location home to use presence
|
||||
detection as part of your automations. Data is sent directly to your
|
||||
home, no access by third-parties.
|
||||
</p>
|
||||
<a
|
||||
class="button"
|
||||
href="https://companion.home-assistant.io/"
|
||||
target="_blank"
|
||||
>
|
||||
DOWNLOAD APPS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<iconify-icon inline icon="mdi:solar-power-variant"></iconify-icon>
|
||||
Home Energy Management
|
||||
</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,
|
||||
optimize your solar panel production, plan energy usage and save money.
|
||||
</p>
|
||||
|
||||
<a
|
||||
class="button"
|
||||
href="/home-energy-management/"
|
||||
aria-label="Learn more about Home Energy Management"
|
||||
>
|
||||
LEARN MORE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -33,6 +33,7 @@
|
||||
<a class="external-link" href="https://community.home-assistant.io">Community Forum <iconify-icon inline icon="tabler:external-link"></iconify-icon></a>
|
||||
</li>
|
||||
<li><a href="/help/reporting_issues/">Reporting issues</a></li>
|
||||
<li><a href="https://home-assistant-store.creator-spring.com/">Community Merch Store</a></li>
|
||||
</ul>
|
||||
<h4>System status</h4>
|
||||
<ul>
|
||||
@ -47,6 +48,12 @@
|
||||
</div>
|
||||
|
||||
<div class="grid__item one-quarter lap-one-half palm-one-whole">
|
||||
<h4>Companion apps</h4>
|
||||
<ul>
|
||||
<li><a class="external-link" href="https://apps.apple.com/us/app/home-assistant/id1099568401">iOS and Apple devices</a></li>
|
||||
<li><a class="external-link" href="https://play.google.com/store/apps/details?id=io.homeassistant.companion.android">Android and Wear OS</a></li>
|
||||
<li><a class="external-link" href="https://companion.home-assistant.io/">...and more!</a></li>
|
||||
</ul>
|
||||
<h4>Governance</h4>
|
||||
<ul>
|
||||
<li><a href="/privacy/">Privacy Notices</a></li>
|
||||
|
||||
@ -7,10 +7,10 @@ regenerate: true
|
||||
feedback: false
|
||||
---
|
||||
|
||||
{% assign recent_release_post = site.categories['Core'].first %}
|
||||
|
||||
<div class="frontpage">
|
||||
<div class="grid">
|
||||
|
||||
<!-- Left sidebar begins -->
|
||||
<div class="grid__item one-third lap-one-third palm-one-whole">
|
||||
|
||||
<div class="recent-posts material-card text">
|
||||
@ -91,6 +91,9 @@ feedback: false
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Left sidebar ends -->
|
||||
|
||||
<!-- Right content begins -->
|
||||
<div class="grid__item two-thirds lap-two-thirds palm-one-whole">
|
||||
<!-- State of the Open Home -->
|
||||
<a
|
||||
@ -214,117 +217,126 @@ feedback: false
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Right content ends -->
|
||||
|
||||
<div class="sub-title">Features</div>
|
||||
|
||||
<!-- Features section -->
|
||||
{% include custom/features.html %}
|
||||
<div class="grid sponsors-and-press">
|
||||
<div class="sponsored-by grid__item one-half lap-one-half palm-one-whole">
|
||||
<div class="material-card text">
|
||||
<h1>Home Assistant is sponsored by</h1>
|
||||
|
||||
|
||||
<!-- Press section -->
|
||||
<section class="grid sponsors-and-press">
|
||||
<div class="seen-press grid__item one-whole">
|
||||
<h2>Home Assistant in the press</h2>
|
||||
|
||||
<a
|
||||
href="https://www.theverge.com/2021/9/16/22678088/home-assistant-amber-smart-home-hub-specs-release-date-price"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img alt="The Verge logo" src="/images/press/theverge.svg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://arstechnica.com/information-technology/2021/03/how-to-achieve-smart-home-nirvana-or-home-automation-without-subscription/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="ArsTechnica.com logo"
|
||||
src="/images/press/arstechnica.svg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://tweakers.net/reviews/8704/paulus-schoutsen-home-assistant-concurreert-met-alles-wat-via-de-cloud-gaat.html"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img alt="Tweakers.net logo" src="/images/press/tweakers.png"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=x7pSkVarixU"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="Linus Tech Tips logo"
|
||||
class="square"
|
||||
src="/images/press/ltt.svg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.troyhunt.com/iot-unravelled-part-1-its-a-mess-but-then-theres-home-assistant/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
class="square round"
|
||||
alt="Troy Hunt logo"
|
||||
src="/images/press/troyhunt.jpg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.tomshardware.com/news/raspberry-pi-home-assistant-amber"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="Tom's Hardware logo"
|
||||
src="/images/press/tomshardware.svg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.producthunt.com/posts/home-assistant"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="ProductHunt.com logo"
|
||||
src="/images/press/producthunt.com.png"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.linux.com/news/home-assistant-python-approach-home-automation-video"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img alt="Linux.com logo" src="/images/press/linux.com.png"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://opensource.com/article/17/7/home-automation-primer"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="OpenSource.com logo"
|
||||
src="/images/press/opensource.com.svg"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="http://www.linux-magazine.com/Issues/2017/203/Home-Assistant"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img
|
||||
alt="Linux Magazine logo"
|
||||
src="/images/press/LinuxMagazine.png"
|
||||
/></div></a>
|
||||
|
||||
<a
|
||||
href="https://www.heise.de/select/ct/2017/26/1513910625909214"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><div class="material-card"><img alt="Ct logo" src="/images/press/ct.png"
|
||||
/></div></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Sponsor section -->
|
||||
|
||||
<section class="sponsor">
|
||||
<div class="sponsored-by grid__item one-whole">
|
||||
<h2>The Home Assistant project is sponsored by</h2>
|
||||
<div class="material-card text">
|
||||
<a href="https://www.nabucasa.com"
|
||||
><img alt="Nabu Casa logo" src="/images/sponsors/nabu_casa.svg"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seen-press grid__item one-half lap-one-half palm-one-whole">
|
||||
<div class="material-card text">
|
||||
<h1>Home Assistant in the press</h1>
|
||||
</section>
|
||||
|
||||
<a
|
||||
href="https://www.theverge.com/2021/9/16/22678088/home-assistant-amber-smart-home-hub-specs-release-date-price"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img alt="The Verge logo" src="/images/press/theverge.svg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://arstechnica.com/information-technology/2021/03/how-to-achieve-smart-home-nirvana-or-home-automation-without-subscription/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="ArsTechnica.com logo"
|
||||
src="/images/press/arstechnica.svg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://tweakers.net/reviews/8704/paulus-schoutsen-home-assistant-concurreert-met-alles-wat-via-de-cloud-gaat.html"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img alt="Tweakers.net logo" src="/images/press/tweakers.png"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=x7pSkVarixU"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="Linus Tech Tips logo"
|
||||
class="square"
|
||||
src="/images/press/ltt.svg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.troyhunt.com/iot-unravelled-part-1-its-a-mess-but-then-theres-home-assistant/"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
class="square round"
|
||||
alt="Troy Hunt logo"
|
||||
src="/images/press/troyhunt.jpg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.tomshardware.com/news/raspberry-pi-home-assistant-amber"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="Tom's Hardware logo"
|
||||
src="/images/press/tomshardware.svg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.producthunt.com/posts/home-assistant"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="ProductHunt.com logo"
|
||||
src="/images/press/producthunt.com.png"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.linux.com/news/home-assistant-python-approach-home-automation-video"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img alt="Linux.com logo" src="/images/press/linux.com.png"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://opensource.com/article/17/7/home-automation-primer"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="OpenSource.com logo"
|
||||
src="/images/press/opensource.com.svg"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="http://www.linux-magazine.com/Issues/2017/203/Home-Assistant"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img
|
||||
alt="Linux Magazine logo"
|
||||
src="/images/press/LinuxMagazine.png"
|
||||
/></a>
|
||||
|
||||
<a
|
||||
href="https://www.heise.de/select/ct/2017/26/1513910625909214"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
><img alt="Ct logo" src="/images/press/ct.png"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user