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 2024-07-02 14:52:45 -04:00 committed by GitHub
parent 1a5b7348e5
commit 41a3c8e8fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 286 additions and 235 deletions

View File

@ -493,8 +493,8 @@ a.material-card:hover {
padding: 8px 12px 12px; padding: 8px 12px 12px;
background-color: rgba(0, 0, 0, 0.54); background-color: rgba(0, 0, 0, 0.54);
color: white; color: white;
border-bottom-left-radius: 8px; border-bottom-left-radius: 16px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -542,26 +542,37 @@ a.material-card:hover {
margin-top: 24px; margin-top: 24px;
} }
.sponsored-by { .seen-press {
img { display: grid;
border: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
border-radius: 0; column-gap: 24px;
box-shadow: none; row-gap: 24px;
margin: 15px; margin: 48px 0;
max-width: 40%;
max-height: 80px; h2 {
grid-column: 1/-1;
margin: 0;
text-align: center;
} }
} a {
aspect-ratio: 1;
.seen-press { }
img { img {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
margin: 15px; margin: 24px;
max-width: 40%; width: calc(100% - 48px);
max-height: 70px; max-height: 128px;
border-radius: 0;
}
.material-card {
height: 100%;
align-content: center;
text-align: center;
margin: 0;
} }
.square { .square {
@ -572,6 +583,18 @@ a.material-card:hover {
border-radius: 50%; 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) { @media screen and (max-width: 700px) {

View File

@ -26,11 +26,11 @@
} }
.card-content { .card-content {
padding-left: 24px; padding-bottom: 24px;
p:last-of-type, p:last-of-type,
ul { ul {
margin-bottom: 12px; margin-bottom: 32px;
} }
} }
} }

View File

@ -62,7 +62,7 @@
background-color: $link-color; background-color: $link-color;
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
padding: 8px 24px; padding: 8px 20px 8px 28px;
margin-bottom: 16px; margin-bottom: 16px;
} }
} }

View File

@ -1,119 +1,128 @@
<div class="feature-cards"> <section class="grid features">
<div class="card"> <div class="grid__item one-whole">
<div class="card-header"> <h2 class="sub-title">Features</h2>
<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>
<p> <div class="feature-cards">
Once started, Home Assistant will automatically scan your network for <div class="card">
known devices and allow you to easily set them up. <div class="card-header">
</p> <iconify-icon inline icon="mdi:lightbulb-variant-outline"></iconify-icon>
<a class="button" href="/integrations">EXPLORE INTEGRATIONS</a> Works with over 1000 brands
</div> </div>
</div> <div class="card-content">
<div class="card"> <p>
<div class="card-header"> Home Assistant integrates with over a thousand different devices
<iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon> and services.
Powerful automations </p>
</div>
<div class="card-content">
<p>
Once you have integrated all your devices at home, you can unleash Home
Assistants advanced automation engine to make your home work for you.
</p>
<ul> <p>
<li>Turn on the light when the sun sets or when coming home</li> Once started, Home Assistant will automatically scan your network for
<li>Alert you when you leave your garage door open.</li> known devices and allow you to easily set them up.
</ul> </p>
<a class="button" href="/docs/automation">EXPLORE AUTOMATIONS</a> <a class="button" href="/integrations">EXPLORE INTEGRATIONS</a>
</div> </div>
</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>
<ul> <div class="card">
<li>Run AdGuard, a DNS-based ad blocker</li> <div class="card-header">
<li>Run third party automation engines like NodeRed</li> <iconify-icon inline icon="mdi:robot-happy-outline"></iconify-icon>
<li>Turn Home Assistant into a Spotify Connect target</li> Powerful automations
</ul> </div>
<a class="button" href="/addons">EXPLORE ADD-ONS</a> <div class="card-content">
</div> <p>
</div> Once you have integrated all your devices at home, you can unleash Home
<div class="card"> Assistants advanced automation engine to make your home work for you.
<div class="card-header"> </p>
<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>
<p> <ul>
Home Assistant communicates with your devices locally, and will fallback <li>Turn on the light when the sun sets or when coming home</li>
to pulling in data from the cloud if there is no other option. No data <li>Alert you when you leave your garage door open.</li>
is stored in the cloud, and everything is processed locally. </ul>
</p> <a class="button" href="/docs/automation">EXPLORE AUTOMATIONS</a>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<iconify-icon inline icon="mdi:cellphone"></iconify-icon> <iconify-icon inline icon="mdi:puzzle"></iconify-icon>
Companion Mobile Apps Extend your system with add-ons
</div> </div>
<div class="card-content"> <div class="card-content">
<p> <p>
Use the official Home Assistant apps, a convenient companion to quickly Home Assistant is not just limited to Home Assistant. Easily install
control your devices and be notified when things happen in your home, other applications that will help you manage your home.
even on your wrist using the Apple Watch. </p>
</p>
<p> <ul>
The apps can also be used to send your location home to use presence <li>Run AdGuard, a DNS-based ad blocker</li>
detection as part of your automations. Data is sent directly to your <li>Run third party automation engines like NodeRed</li>
home, no access by third-parties. <li>Turn Home Assistant into a Spotify Connect target</li>
</p> </ul>
<a <a class="button" href="/addons">EXPLORE ADD-ONS</a>
class="button" </div>
href="https://companion.home-assistant.io/" </div>
target="_blank" <div class="card">
> <div class="card-header">
DOWNLOAD APPS <iconify-icon inline icon="mdi:shield-home-outline"></iconify-icon>
</a> All your smart home data stays local
</div> </div>
</div> <div class="card-content">
<div class="card"> <p>Home Assistant keeps your data local, no need for a cloud.</p>
<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 <p>
class="button" Home Assistant communicates with your devices locally, and will fallback
href="/home-energy-management/" to pulling in data from the cloud if there is no other option. No data
aria-label="Learn more about Home Energy Management" is stored in the cloud, and everything is processed locally.
> </p>
LEARN MORE </div>
</a> </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> </div>
</div> </section>

View File

@ -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> <a class="external-link" href="https://community.home-assistant.io">Community Forum <iconify-icon inline icon="tabler:external-link"></iconify-icon></a>
</li> </li>
<li><a href="/help/reporting_issues/">Reporting issues</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> </ul>
<h4>System status</h4> <h4>System status</h4>
<ul> <ul>
@ -47,6 +48,12 @@
</div> </div>
<div class="grid__item one-quarter lap-one-half palm-one-whole"> <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> <h4>Governance</h4>
<ul> <ul>
<li><a href="/privacy/">Privacy Notices</a></li> <li><a href="/privacy/">Privacy Notices</a></li>

View File

@ -7,10 +7,10 @@ regenerate: true
feedback: false feedback: false
--- ---
{% assign recent_release_post = site.categories['Core'].first %}
<div class="frontpage"> <div class="frontpage">
<div class="grid"> <div class="grid">
<!-- Left sidebar begins -->
<div class="grid__item one-third lap-one-third palm-one-whole"> <div class="grid__item one-third lap-one-third palm-one-whole">
<div class="recent-posts material-card text"> <div class="recent-posts material-card text">
@ -91,6 +91,9 @@ feedback: false
</div> </div>
</a> </a>
</div> </div>
<!-- Left sidebar ends -->
<!-- Right content begins -->
<div class="grid__item two-thirds lap-two-thirds palm-one-whole"> <div class="grid__item two-thirds lap-two-thirds palm-one-whole">
<!-- State of the Open Home --> <!-- State of the Open Home -->
<a <a
@ -214,117 +217,126 @@ feedback: false
</div> </div>
</a> </a>
</div> </div>
<!-- Right content ends -->
<div class="sub-title">Features</div>
<!-- Features section -->
{% include custom/features.html %} {% 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" <a href="https://www.nabucasa.com"
><img alt="Nabu Casa logo" src="/images/sponsors/nabu_casa.svg" ><img alt="Nabu Casa logo" src="/images/sponsors/nabu_casa.svg"
/></a> /></a>
</div> </div>
</div> </div>
<div class="seen-press grid__item one-half lap-one-half palm-one-whole"> </section>
<div class="material-card text">
<h1>Home Assistant in the press</h1>
<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>
</div> </div>