mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-19 07:17:14 +00:00
Fancy homepage (#35945)
This commit is contained in:
Madelena Mak
GitHub
parent
4e1f62d90a
commit
fc815e95d9
@ -444,16 +444,21 @@ header .breadcrumbs {
|
||||
h1 {
|
||||
font-family: $heading-font;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 1.33rem;
|
||||
font-size: 1.3125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.012em;
|
||||
line-height: 40px;
|
||||
color: #212121;
|
||||
margin: -8px 0 0;
|
||||
|
||||
iconify-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
padding: 24px;
|
||||
font-size: 1rem;
|
||||
|
||||
h1 {
|
||||
padding: 0px 0px 12px;
|
||||
@ -517,7 +522,7 @@ a.material-card:hover {
|
||||
.img {
|
||||
background-color: $grayLighter;
|
||||
width: calc(100%-8px);
|
||||
aspect-ratio: 120/63;
|
||||
// aspect-ratio: 120/63;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 8px;
|
||||
@ -656,21 +661,34 @@ a.material-card:hover {
|
||||
.blog-date {
|
||||
white-space: nowrap;
|
||||
}
|
||||
ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-blog-post {
|
||||
font-size: 2rem;
|
||||
line-height: 1.15;
|
||||
padding: 15px;
|
||||
display: block;
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: background-color 0.5s;
|
||||
background-color: #038fc7;
|
||||
transition: background-color 0.5s, box-shadow 0.5s;
|
||||
background-color: $primary-color;
|
||||
display: flex;
|
||||
padding: 20px 12px 20px 24px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin: 10px 0 0 0;
|
||||
|
||||
&.large {
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.33333;
|
||||
&.lead {
|
||||
font-family: $heading-font;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -682,6 +700,71 @@ a.material-card:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-detail-post {
|
||||
padding: 24px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: background-color 0.5s, box-shadow 0.5s;
|
||||
background-color: #006895;
|
||||
box-shadow: inset 0 0 64px #038fc7;
|
||||
font-size: 1.5rem;
|
||||
|
||||
.caption {
|
||||
padding-bottom: 24px;
|
||||
|
||||
p {
|
||||
font-family: $heading-font;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
|
||||
strong {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
|
||||
&.lead {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
iconify-icon {
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
animation-name: box-shadow-color;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
|
||||
@keyframes box-shadow-color {
|
||||
from {
|
||||
box-shadow: inset 0 0 64px hsl(197, 97%, 40%);
|
||||
}
|
||||
to {
|
||||
box-shadow: inset 0 0 64px hsl(159, 100%, 35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.events {
|
||||
padding: 16px;
|
||||
|
||||
@ -726,15 +809,16 @@ a.material-card:hover {
|
||||
|
||||
.picture-promo {
|
||||
display: block;
|
||||
padding-top: 30%;
|
||||
padding-top: 33%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
|
||||
.caption {
|
||||
padding: 8px 12px 12px;
|
||||
background-color: rgba(0, 0, 0, 0.54);
|
||||
padding: 48px 24px 24px 24px;
|
||||
background: rgb(0,0,0);
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
|
||||
color: white;
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
@ -743,16 +827,19 @@ a.material-card:hover {
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
font-family: $heading-font;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 4px;
|
||||
line-height: 1.4em;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: initial;
|
||||
text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.33);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
svg {
|
||||
@ -762,6 +849,21 @@ a.material-card:hover {
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.picture-top {
|
||||
padding-top: 0;
|
||||
padding-bottom: 33%;
|
||||
|
||||
.caption {
|
||||
padding: 24px 24px 48px 24px;
|
||||
background: rgb(0,0,0);
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.supported-brands {
|
||||
@ -781,8 +883,101 @@ a.material-card:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
text-align: center;
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
padding: 2px 8px 2px 8px;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
background: #E8E6F0;
|
||||
font-family: $heading-font;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.getting-started-grid {
|
||||
display: flex;
|
||||
padding: 48px 0 48px 24px;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.getting-started-device {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
img {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
line-height: 133%;
|
||||
text-transform: none;
|
||||
letter-spacing: -.75px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
opacity: .9;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 6px 20px;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#HA_Yellow, #Raspberry_Pi {
|
||||
padding-top: 96px;
|
||||
}
|
||||
|
||||
#HA_Yellow .badge {
|
||||
color: $orange;
|
||||
}
|
||||
#HA_Green .badge {
|
||||
color: $green;
|
||||
}
|
||||
#Raspberry_Pi .badge {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $palm-end) {
|
||||
.getting-started-grid {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.getting-started-device {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
#HA_Yellow, #Raspberry_Pi {
|
||||
padding-top: 0;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sponsors-and-press {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seen-press {
|
||||
@ -791,12 +986,6 @@ a.material-card:hover {
|
||||
gap: 24px;
|
||||
margin: 48px 0;
|
||||
|
||||
h2 {
|
||||
grid-column: 1/-1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
@ -913,17 +1102,6 @@ dt:hover a.title-link {
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero-buttons a {
|
||||
margin: 0 30px 10px 0;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Article formatting
|
||||
|
||||
|
||||
@ -1,50 +1,85 @@
|
||||
.feature-cards {
|
||||
display: grid;
|
||||
letter-spacing: normal;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin: auto;
|
||||
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
border-radius: 24px;
|
||||
background: white;
|
||||
padding: 24px;
|
||||
display: inline-block;
|
||||
width: calc(100% - 16px);
|
||||
vertical-align: top;
|
||||
|
||||
.card-header {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.6;
|
||||
font-family: $heading-font;
|
||||
font-size: 1.3125rem;
|
||||
line-height: 1.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
height: 62px;
|
||||
flex-direction: column;
|
||||
padding-bottom: 16px;
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
|
||||
iconify-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-right: 8px;
|
||||
border-radius: 64px;
|
||||
background: var(--Light-primary-container, #CCEFFE);
|
||||
align-self: flex-start;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
color: rgba(0, 127, 168, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding-bottom: 24px;
|
||||
font-size: 1rem;
|
||||
|
||||
p:last-of-type,
|
||||
ul {
|
||||
margin-bottom: 32px;
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
p:last-of-type {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
float: right;
|
||||
font-size: 1rem;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
letter-spacing: normal;
|
||||
font-weight: bold;
|
||||
font-size: 42px;
|
||||
line-height: 49px;
|
||||
margin: 32px;
|
||||
font-family: $heading-font;
|
||||
font-size: 6rem;
|
||||
font-weight: 800;
|
||||
line-height: normal;
|
||||
letter-spacing: -1.92px;
|
||||
margin: 96px 0 24px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-title + p {
|
||||
margin: -24px 0 48px 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
.feature-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 4rem;
|
||||
line-height: 1.1 !important;
|
||||
margin-bottom: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $palm-end) {
|
||||
.feature-cards {
|
||||
width: 95%;
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
.hero {
|
||||
position: relative;
|
||||
background: rgb(24,188,242);
|
||||
background: linear-gradient(0deg, hsl(195, 89%, 52%) 0%, hsla(195, 89%, 52%, 0.8) 100%);
|
||||
background: linear-gradient(340deg, hsl(200deg, 100%, 50%) 0%, hsl(195deg, 100%, 50%) 50%, hsl(185deg, 100%, 50%) 100%);
|
||||
padding-bottom: 0;
|
||||
margin-top: -88px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 48px;
|
||||
padding-top: 88px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
@ -24,14 +24,20 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 6em;
|
||||
line-height: .8;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, hsl(174.86, 100%, 75%) 100%);
|
||||
font-size: 8rem;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: -2.56px;
|
||||
background: linear-gradient(125deg, #FFF 29.3%, #80FFF4 89.99%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
.line2 {
|
||||
line-height: 1.25;
|
||||
margin-top: -1.75rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,30 +46,103 @@
|
||||
color: $grayLighter;
|
||||
font-size: .65em;
|
||||
}
|
||||
.lead {
|
||||
font-size: 1.25rem;
|
||||
&.lead {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 24px;
|
||||
line-height: 2.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons a {
|
||||
font-family: $heading-font;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding: 8px 24px 8px 0;
|
||||
margin: 0 4px 0 0;
|
||||
border-radius: 32px;
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
margin: 8px 0px 24px 0px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
&.primary {
|
||||
background-color: $link-color;
|
||||
font-size: 2rem;
|
||||
a {
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding: 8px 0 8px 0;
|
||||
margin: 0 12px 0 12px;
|
||||
border-radius: 32px;
|
||||
|
||||
&.primary {
|
||||
font-family: $heading-font;
|
||||
background-color: $link-color;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
padding: 8px 16px 8px 24px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-welcome {
|
||||
padding-left: 64px;
|
||||
}
|
||||
|
||||
.hero-socialproof {
|
||||
display: flex;
|
||||
padding-top: 48px;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
|
||||
a {
|
||||
opacity: 0.75;
|
||||
transition: .5s opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.hero-github-top-project {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #F2F4F9;
|
||||
width: 330px;
|
||||
|
||||
p {
|
||||
color: #FFF;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
margin: 0;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-socialproof-asseenon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
p {
|
||||
margin: 8px 0 0 0;
|
||||
align-self: stretch;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
padding: 8px 20px 8px 28px;
|
||||
margin-bottom: 16px;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
.logos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,10 +160,12 @@
|
||||
border-radius: 48px;
|
||||
border: 12px double white;
|
||||
box-shadow: 24px 64px 64px hsla(220, 100%, 25%, .5);
|
||||
// animation-name: box-shadow-color;
|
||||
// animation-duration: 3s;
|
||||
// animation-name: floaty-demo;
|
||||
// animation-duration: 4s;
|
||||
// animation-iteration-count: infinite;
|
||||
// animation-direction: alternate;
|
||||
// animation-timing-function: linear;
|
||||
// transform: rotateY(346deg) skewY(3deg);
|
||||
|
||||
@media only screen and (max-height: 840px) {
|
||||
border-bottom: 0;
|
||||
@ -97,6 +178,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floaty-demo {
|
||||
from {
|
||||
transform: translateY(-25px) rotateY(346deg) skewY(3deg);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) rotateY(346deg) skewY(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box-shadow-color {
|
||||
from {
|
||||
box-shadow: 24px 64px 64px hsla(240, 100%, 25%, .5);
|
||||
@ -106,10 +196,85 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.hero .hero-socialproof, .hero .hero-buttons {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1240px) {
|
||||
.hero {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-size: 6rem;
|
||||
letter-spacing: -1.92px;
|
||||
|
||||
.line2 {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
p.lead {
|
||||
font-size: 1.25rem !important;
|
||||
line-height: 1.75rem !important;
|
||||
}
|
||||
|
||||
.hero-buttons a {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.hero .hero-welcome {
|
||||
padding-left: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.hero .hero-welcome {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 760px) {
|
||||
.hero {
|
||||
text-align: center;
|
||||
|
||||
.hero-socialproof, .hero-buttons {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
min-height: 940px;
|
||||
.flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#HAdemo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#HAdemoScreenshot {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
.hero {
|
||||
img {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
letter-spacing: -1.92px;
|
||||
|
||||
.line2 {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
@ -123,21 +288,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 760px) {
|
||||
.hero {
|
||||
min-height: 940px;
|
||||
.flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#HAdemo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#HAdemoScreenshot {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,6 +40,43 @@
|
||||
<a class="button" href="/docs/automation">EXPLORE AUTOMATIONS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:view-dashboard" %}
|
||||
Versatile dashboards
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Home Assistant dashboards allow you to display information about your smart home. Dashboards are customizable and provide a powerful way to manage your home from your mobile or desktop.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Easily create and customize your dashboards with drag-and-drop.</li>
|
||||
<li>Different card types to visualize your data and control your smart home devices.</li>
|
||||
</ul>
|
||||
<a class="button" href="/dashboards">EXPLORE DASHBOARDS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:microphone" %}
|
||||
Assist, our voice assistant
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Assist allows you to control Home Assistant using natural language. It is built on top of an open voice foundation and powered by knowledge provided by our community.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Customize your voice assistant and experiment with AI conversations.</li>
|
||||
<li>Use Assist everywhere on your mobile phone, tablets, smartwatches, and even old-school telephones.</li>
|
||||
</ul>
|
||||
<a class="button" href="/voice_control/">EXPLORE ASSIST</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:puzzle" %}
|
||||
@ -59,6 +96,7 @@
|
||||
<a class="button" href="/addons">EXPLORE ADD-ONS</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:shield-home-outline" %}
|
||||
@ -74,6 +112,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:cellphone" %}
|
||||
@ -122,6 +161,46 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:cast-connected" %}
|
||||
Home Assistant Cast
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Take over all the screens. Home Assistant Cast makes every TV a display for dashboards.
|
||||
</p>
|
||||
|
||||
<a
|
||||
class="button"
|
||||
href="/blog/2019/08/06/home-assistant-cast/"
|
||||
aria-label="Learn more about Home Assistant Cast"
|
||||
>
|
||||
LEARN MORE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{% icon "mdi:nfc-variant" %}
|
||||
NFC Tags
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
Use NFC to bring music to your life or automate the mundane.
|
||||
</p>
|
||||
|
||||
<a
|
||||
class="button"
|
||||
href="/blog/2020/09/15/home-assistant-tags/"
|
||||
aria-label="Learn more about Home Assistant Tags"
|
||||
>
|
||||
LEARN MORE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
52
source/_includes/custom/getting-started.html
Normal file
52
source/_includes/custom/getting-started.html
Normal file
@ -0,0 +1,52 @@
|
||||
<section class="grid getting-started">
|
||||
<div class="grid__item one-whole">
|
||||
<h2 class="sub-title">Let's get started.</h2>
|
||||
<p class="lead">A variety of options for pragmatists and tinkerers alike.</p>
|
||||
</div>
|
||||
|
||||
<div class="getting-started-grid grid__item one-whole">
|
||||
|
||||
<div class="getting-started-device" id="Raspberry_Pi">
|
||||
<div class="content">
|
||||
<div class="badge">Easy</div>
|
||||
<img src="/images/frontpage/raspberry-pi.png" alt="Raspberry Pi"/>
|
||||
<div>
|
||||
<h3>Raspberry Pi</h3>
|
||||
<p>A low-cost DIY solution to get started with Home Assistant</p>
|
||||
</div>
|
||||
<a class="button" aria-label="Learn more about installing Home Assistant on Raspberry Pi" href="/installation/raspberrypi">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="getting-started-device" id="HA_Green">
|
||||
<div class="content">
|
||||
<div class="badge">Easiest</div>
|
||||
<img src="/images/frontpage/ha-green.png" alt="Home Assistant Green"/>
|
||||
<div>
|
||||
<h3>Home Assistant Green</h3>
|
||||
<p>The easiest way to get started with Home Assistant</p>
|
||||
</div>
|
||||
<a class="button" aria-label="Learn more about Home Assistant Green" href="/green">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="getting-started-device" id="HA_Yellow">
|
||||
<div class="content">
|
||||
<div class="badge">Intermediate</div>
|
||||
<img src="/images/frontpage/ha-yellow.png" alt="Home Assistant Yellow"/>
|
||||
<div>
|
||||
<h3>Home Assistant Yellow</h3>
|
||||
<p>The powerful way to run and customize Home Assistant to your needs</p>
|
||||
</div>
|
||||
<a class="button" aria-label="Learn more about Home Assistant Yellow" href="/yellow">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid__item one-half palm-one-whole">
|
||||
<h2>Need more options?</h2>
|
||||
<p>Home Assistant can repurpose and be installed on various hardware, such as an Odroid or a generic x86-64 machine.</p>
|
||||
<p>The Home Assistant Operating System allows you to install Home Assistant on these devices even if you have little to no Linux experience.</p>
|
||||
<a class="button" href="/installation#install-on-other-hardware">Get started</a>
|
||||
</div>
|
||||
</section>
|
||||
170
source/_includes/custom/news.html
Normal file
170
source/_includes/custom/news.html
Normal file
@ -0,0 +1,170 @@
|
||||
|
||||
<!-- Left column begins -->
|
||||
<div class="grid__item one-third lap-one-half palm-one-whole">
|
||||
|
||||
<!-- Recent blog posts -->
|
||||
<div class="recent-posts material-card text">
|
||||
<h1>{% icon "mdi:newspaper-variant-multiple" %} Recent Blog Posts</h1>
|
||||
|
||||
<ol>
|
||||
{% for post in site.posts limit: 4 %}
|
||||
<li class="post" style="display: grid; font-size: 16px">
|
||||
<a href="{{ post.url }}">{{ post.title }}</a>
|
||||
<small class="blog-date">{{ post.date_formatted }}</small>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- OHF notice -->
|
||||
<a href="https://www.openhomefoundation.org/blog/announcing-the-open-home-foundation/" class="material-card highlight-blog-post">
|
||||
<div>
|
||||
<p class="lead">We are a non-profit and can't be sold or acquired.</p>
|
||||
<p>Home Assistant is a project by the Open Home Foundation.</p>
|
||||
</div>
|
||||
<iconify-icon icon="mdi:chevron-right"></iconify-icon>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="material-card highlight-blog-post"
|
||||
href="/blog/2016/01/19/perfect-home-automation/"
|
||||
>
|
||||
<p class="lead">Read our founder's vision for the perfect home automation</p>
|
||||
<iconify-icon icon="mdi:chevron-right"></iconify-icon>
|
||||
</a>
|
||||
|
||||
<div class="join-community material-card text">
|
||||
<h1>{% icon "simple-icons:amazonalexa" %} Alexa, turn on the lights</h1>
|
||||
|
||||
Use Alexa to control Home Assistant.
|
||||
|
||||
<div class="links">
|
||||
<a href="/cloud/">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join-community material-card text">
|
||||
<h1>{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC</h1>
|
||||
|
||||
Use Google Assistant to control Home Assistant.
|
||||
|
||||
<div class="links">
|
||||
<a href="/cloud/">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="join-community material-card text">
|
||||
<h1>{% icon "mdi:people-group-outline" %} Join The Community</h1>
|
||||
|
||||
Our vibrant community is very active and super friendly. We love to talk and share our passion for home automation.
|
||||
|
||||
<div class="links">
|
||||
<a href="https://community.home-assistant.io">{% icon "simple-icons:discourse" %} Forums</a>
|
||||
<a href="/join-chat/">{% icon "simple-icons:discord" %} Chat</a>
|
||||
<a href="/newsletter/">{% icon "mdi:email-newsletter" %} Newsletter</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Left column ends -->
|
||||
|
||||
|
||||
<!-- Center content begins -->
|
||||
<div class="grid__item one-third lap-one-half palm-one-whole">
|
||||
|
||||
<!-- All landing pages have a block. -->
|
||||
{% 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.frontpage_image | default:page.og_image}});
|
||||
background-size: cover;
|
||||
background-color: #41bdf5;
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
{{page.title}}
|
||||
</div>
|
||||
<div class="subtitle">{{page.description}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %} {% endfor %}
|
||||
|
||||
</div>
|
||||
<!-- Center sidebar ends -->
|
||||
|
||||
|
||||
<!-- Right content begins -->
|
||||
<div class="grid__item one-third lap-one-half palm-one-whole">
|
||||
|
||||
<!-- State of the Open Home -->
|
||||
<a
|
||||
href="/blog/2024/04/24/state-of-the-open-home-2024/"
|
||||
class="material-card picture-promo"
|
||||
style="
|
||||
background-image: url(/images/frontpage/feature-sotoh2024.jpg);
|
||||
background-size: cover;
|
||||
padding-top: 55%;
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
State of the Open Home 2024
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Learn about our progress so far and also the roadmap for this year.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Assist -->
|
||||
<a
|
||||
class="material-card picture-promo picture-top"
|
||||
href="/voice_control/"
|
||||
style="
|
||||
background-image: url(/images/frontpage/feature-voice.jpg);
|
||||
background-size: cover;
|
||||
padding-bottom: 35%;
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Control your home with Assist
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Our private, insanely fast, voice assistant running on affordable
|
||||
hardware. Now supporting wake words.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Merch store -->
|
||||
<a
|
||||
class="material-card picture-promo"
|
||||
href="https://home-assistant-store.creator-spring.com/"
|
||||
style="background-image: url(/images/merchandise/shirt-frontpage.jpg)"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Join the Home Assistant t-shirt revolution!
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Look sharp in blue, black or gray. Wearing a HA t-shirt is okay.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- Right content ends -->
|
||||
101
source/_includes/custom/press.html
Normal file
101
source/_includes/custom/press.html
Normal file
@ -0,0 +1,101 @@
|
||||
<section class="grid sponsors-and-press">
|
||||
<div class="grid__item one-whole">
|
||||
<h2 class="sub-title">In the press</h2>
|
||||
<p class="lead">Trusted by home automation experts and more than a million households.</p>
|
||||
</div>
|
||||
|
||||
<div class="seen-press grid__item one-whole">
|
||||
<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>
|
||||
@ -1,6 +1,6 @@
|
||||
<h1>Awaken<br><span class="line2">your home</span></h1>
|
||||
<p class="lead">
|
||||
{{ site.description }}
|
||||
Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts.
|
||||
</p>
|
||||
|
||||
{%- assign tot = 0 -%}
|
||||
@ -14,20 +14,33 @@
|
||||
{%- endif %}
|
||||
{%- endfor -%}
|
||||
|
||||
<p class='hero-buttons'>
|
||||
<a href='/installation/' class="primary">Get started <iconify-icon inline icon='mdi:arrow-right'></iconify-icon></a><br/>
|
||||
<a href='https://demo.home-assistant.io' target='_blank'>View live demos</a>
|
||||
<a href='/integrations/'>Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations</a>
|
||||
</p>
|
||||
<a href="https://github.blog/news-insights/octoverse/octoverse-2024/#the-state-of-open-source" target="_blank" class="hero-github-badge">
|
||||
<img
|
||||
src="/images/github-top-project-2024-mobile.png"
|
||||
class="mobile"
|
||||
alt="GitHub's top open source project by contributors in 2024"
|
||||
>
|
||||
<img
|
||||
src="/images/github-top-project-2024-desktop.png"
|
||||
class="desktop"
|
||||
alt="GitHub's top open source project by contributors in 2024"
|
||||
>
|
||||
</a>
|
||||
<div class='hero-buttons'>
|
||||
<a href='/installation/' class="primary">Get started <iconify-icon inline icon='mdi:arrow-right'></iconify-icon></a>
|
||||
<div>
|
||||
<a href='https://demo.home-assistant.io' target='_blank'>View live demos</a>
|
||||
<a href='/integrations/'>Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-socialproof">
|
||||
<a href="https://github.blog/news-insights/octoverse/octoverse-2024/#the-state-of-open-source" target="_blank" class="">
|
||||
<div class="hero-github-top-project">
|
||||
<img src="/images/frontpage/hero-github-logo.svg" alt="GitHub logo"/>
|
||||
<img src="/images/frontpage/hero-trophy.svg" alt="Top open source project trophy"/>
|
||||
<p><strong>Top open source project</strong> by contributors in 2024</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- <div class="hero-socialproof-asseenon">
|
||||
<p>As seen on</p>
|
||||
<div class="logos">
|
||||
<a href="https://www.theverge.com/23744526/smart-home-assistant-how-to-automation" target="_blank">
|
||||
<img src="/images/frontpage/hero-socialproof-theverge.svg" alt="The Verge"/>
|
||||
</a>
|
||||
<a href="https://arstechnica.com/information-technology/2021/03/how-to-achieve-smart-home-nirvana-or-home-automation-without-subscription/" target="_blank">
|
||||
<img src="/images/frontpage/hero-socialproof-arstechnica.svg" alt="ArsTechnica" height="48"/>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,17 +1,32 @@
|
||||
<div class="hero">
|
||||
<div class="grid-wrapper">
|
||||
<div class="grid flex">
|
||||
<div class="grid__item flex__item three-fifths lap-one-whole palm-one-whole">
|
||||
{% include custom/welcome.html %}
|
||||
<div class="hero-welcome grid__item flex__item three-fifths lap-one-whole palm-one-whole">
|
||||
{% include custom/welcome.html %}
|
||||
</div>
|
||||
<div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole" style="text-align: center;">
|
||||
<div class="hero-demo grid__item flex__item two-fifths lap-one-whole palm-one-whole" style="text-align: center;">
|
||||
<iframe id="HAdemo" title="Home Assistant Demo"
|
||||
src="https://demo.home-assistant.io/?frontpage">
|
||||
</iframe>
|
||||
|
||||
<a id="HAdemoScreenshot" href='https://demo.home-assistant.io/' target='_blank'>
|
||||
<img src="/images/hero_screenshot.png" alt="Home Assistant screenshot">
|
||||
<img src="/images/frontpage/hero_screenshot.png" alt="Home Assistant screenshot">
|
||||
</a>
|
||||
|
||||
<!-- <script>
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
const phone = document.querySelector('#HAdemo');
|
||||
const { innerWidth } = window;
|
||||
const mouseX = event.clientX;
|
||||
|
||||
// Calculate rotation angle (-30 to 30 degrees based on cursor position)
|
||||
const rotation = ((mouseX / innerWidth) - 0.8) * 30;
|
||||
const skew = -((mouseX / innerWidth) - 0.8) * 4;
|
||||
|
||||
// Apply rotation
|
||||
phone.style.transform = `rotateY(${rotation}deg) skewY(${skew}deg)`;
|
||||
});
|
||||
</script> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@ tagline_wide: false
|
||||
og_image: /images/connectzbt1/connectzbt1-cover.jpg
|
||||
hero_image: /images/connectzbt1/connectzbt1_horizontal.png
|
||||
frontpage: true
|
||||
frontpage_image: /images/connectzbt1/connectzbt1-cover.jpg
|
||||
frontpage_image: /images/frontpage/feature-zbt1.jpg
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@ -5,7 +5,7 @@ description: "The easy-to-use, versatile, and trustworthy smart home hub for eve
|
||||
date: 2023-09-17
|
||||
og_image: /images/blog/2023-09-ha10/green-intro.png
|
||||
frontpage: true
|
||||
frontpage_image: /images/frontpage/green-frontpage.png
|
||||
frontpage_image: /images/frontpage/green-frontpage.jpg
|
||||
dark_header: true
|
||||
---
|
||||
|
||||
|
||||
BIN
source/images/frontpage/feature-githubnnumberone.jpg
Normal file
BIN
source/images/frontpage/feature-githubnnumberone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
source/images/frontpage/feature-sotoh2024.jpg
Normal file
BIN
source/images/frontpage/feature-sotoh2024.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
BIN
source/images/frontpage/feature-voice.jpg
Normal file
BIN
source/images/frontpage/feature-voice.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
source/images/frontpage/feature-zbt1.jpg
Normal file
BIN
source/images/frontpage/feature-zbt1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
source/images/frontpage/green-frontpage.jpg
Normal file
BIN
source/images/frontpage/green-frontpage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
source/images/frontpage/ha-green.png
Normal file
BIN
source/images/frontpage/ha-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
source/images/frontpage/ha-yellow.png
Normal file
BIN
source/images/frontpage/ha-yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
23
source/images/frontpage/hero-github-logo.svg
Normal file
23
source/images/frontpage/hero-github-logo.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="akar-icons:github-fill" clip-path="url(#clip0_2_577)">
|
||||
<g id="Group">
|
||||
<g id="Clip path group">
|
||||
<mask id="mask0_2_577" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
|
||||
<g id="akarIconsGithubFill0">
|
||||
<path id="Vector" d="M0 0H48V48H0V0Z" fill="white"/>
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask0_2_577)">
|
||||
<g id="Group_2">
|
||||
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M24 0C10.74 0 0 10.74 0 24C0 34.62 6.87 43.59 16.41 46.77C17.61 46.98 18.06 46.26 18.06 45.63C18.06 45.06 18.03 43.17 18.03 41.16C12 42.27 10.44 39.69 9.96 38.34C9.69 37.65 8.52 35.52 7.5 34.95C6.66 34.5 5.46 33.39 7.47 33.36C9.36 33.33 10.71 35.1 11.16 35.82C13.32 39.45 16.77 38.43 18.15 37.8C18.36 36.24 18.99 35.19 19.68 34.59C14.34 33.99 8.76 31.92 8.76 22.74C8.76 20.13 9.69 17.97 11.22 16.29C10.98 15.69 10.14 13.23 11.46 9.93C11.46 9.93 13.47 9.3 18.06 12.39C19.98 11.85 22.02 11.58 24.06 11.58C26.1 11.58 28.14 11.85 30.06 12.39C34.65 9.27 36.66 9.93 36.66 9.93C37.98 13.23 37.14 15.69 36.9 16.29C38.43 17.97 39.36 20.1 39.36 22.74C39.36 31.95 33.75 33.99 28.41 34.59C29.28 35.34 30.03 36.78 30.03 39.03C30.03 42.24 30 44.82 30 45.63C30 46.26 30.45 47.01 31.65 46.77C36.4144 45.1614 40.5544 42.0994 43.4873 38.0147C46.4203 33.9301 47.9986 29.0286 48 24C48 10.74 37.26 0 24 0Z" fill="#F2F4F9"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_577">
|
||||
<rect width="48" height="48" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
33
source/images/frontpage/hero-socialproof-arstechnica.svg
Normal file
33
source/images/frontpage/hero-socialproof-arstechnica.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="146" height="48" viewBox="0 0 146 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="arslogo 1" clip-path="url(#clip0_2_554)">
|
||||
<g id="Clip path group">
|
||||
<mask id="mask0_2_554" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="146" height="48">
|
||||
<g id="ars-full-mono_svg__a">
|
||||
<path id="Vector" d="M0.47168 0H145.704V48H0.47168V0Z" fill="white"/>
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask0_2_554)">
|
||||
<g id="Group">
|
||||
<g id="Clip path group_2">
|
||||
<mask id="mask1_2_554" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="146" height="48">
|
||||
<g id="ars-full-mono_svg__b">
|
||||
<path id="Vector_2" d="M0.47168 0H145.704V48H0.47168V0Z" fill="white"/>
|
||||
</g>
|
||||
</mask>
|
||||
<g mask="url(#mask1_2_554)">
|
||||
<g id="Group_2">
|
||||
<path id="Vector_3" d="M73.3544 27.8806C71.8887 29.1131 70.5563 29.5461 69.0907 29.5461C66.5258 29.5461 64.8603 27.7807 64.5938 24.8827H72.8547L73.1545 23.0507H64.5938C64.8603 20.1527 66.4925 18.3539 68.8908 18.3539C71.2892 18.3539 71.8221 18.9202 73.1878 20.0527L73.521 18.0874C72.1885 17.1214 70.5897 16.6218 68.9575 16.6551C65.3933 16.6551 62.5619 19.2533 62.5619 23.95C62.5619 28.6468 65.3266 31.245 68.8575 31.245C70.5896 31.2783 72.2552 30.712 73.6209 29.6461L73.3544 27.8806ZM57.1323 18.7203V31.0118H55.2003V18.7203H50.7368V16.9549H61.4293L61.7291 18.7203H57.099H57.1323ZM81.9484 31.245C77.9845 31.245 75.4529 28.3137 75.4529 23.9833C75.4529 19.653 78.0511 16.6551 81.9817 16.6551C83.4141 16.6218 84.8131 17.0215 85.979 17.821L85.6792 19.7863C84.6132 18.9202 83.3141 18.4538 81.9484 18.4205C79.0837 18.4205 77.4182 20.5857 77.4182 23.95C77.4182 27.3144 79.1171 29.4795 81.9484 29.4795C83.3808 29.4795 84.7798 28.9466 85.9123 28.0805L86.2121 29.8792C84.9797 30.7453 83.4807 31.245 81.9484 31.245ZM97.7375 30.9785V24.483H90.6091V30.9785H88.6771V16.9549H90.6091V22.7842H97.7375V16.9549H99.6694V30.9785H97.7375ZM112.028 30.9785L104.3 20.0527V30.9785H102.534V16.9549H104.233L111.694 27.4476V16.9549H113.46V30.9785H112.028ZM116.491 16.9549H118.423V30.9785H116.491V16.9549ZM127.35 31.245C123.386 31.245 120.855 28.3137 120.855 23.9833C120.855 19.653 123.453 16.6551 127.384 16.6551C128.816 16.6218 130.215 17.0215 131.381 17.821L131.081 19.7863C130.015 18.9202 128.716 18.4538 127.35 18.4205C124.486 18.4205 122.82 20.5857 122.82 23.95C122.82 27.3144 124.519 29.4795 127.35 29.4795C128.783 29.4795 130.182 28.9466 131.314 28.0805L131.614 29.8792C130.381 30.7453 128.882 31.245 127.35 31.245ZM138.309 16.8883H140.241L145.671 30.712L143.805 31.1117L142.14 26.7481H136.344L134.745 30.9785H132.813L138.309 16.8883ZM136.977 25.0826H141.474L139.209 19.1201L136.977 25.0826ZM24.455 0C11.2309 0 0.47168 10.7592 0.47168 24.0167C0.47168 37.2741 11.2309 48.0333 24.455 48.0333C37.6792 48.0333 48.4717 37.2741 48.4717 24.0167C48.4717 10.7592 37.7125 0 24.455 0ZM18.1261 31.3116H15.9276L15.6278 29.3463C14.2954 30.8119 12.43 31.6114 10.4314 31.6114C7.76661 31.6114 6.1011 30.0125 6.1011 27.5142C6.1011 23.8501 9.23226 22.3845 15.3613 21.7516V21.1187C15.3613 19.2533 14.2621 18.6204 12.5633 18.6204C10.8645 18.6204 9.06571 19.1867 7.46682 19.8862L7.10041 17.5212C8.86585 16.8216 10.5314 16.2887 12.7965 16.2887C16.3606 16.2887 18.0928 17.721 18.0928 21.0187V31.2783L18.1261 31.3116ZM24.5216 22.6509V31.3116H21.7902V16.6551H23.9887L24.455 19.653C25.4876 17.9875 27.1865 16.4885 29.6181 16.3553L30.0511 18.9868C27.5862 19.0867 25.5209 20.7189 24.5216 22.6509ZM36.913 31.6114C35.0477 31.5781 33.2156 31.0784 31.5501 30.2123L31.9498 27.6142C33.4821 28.6801 35.2808 29.2797 37.1462 29.313C39.0116 29.313 40.1441 28.6135 40.1441 27.381C40.1441 26.1485 39.3114 25.5156 36.6466 24.8827C33.1823 24.0167 31.8166 22.984 31.8166 20.3525C31.8166 17.721 33.7819 16.2887 37.013 16.2887C38.6785 16.2887 40.3107 16.6218 41.8429 17.288L41.4099 19.8862C40.0442 19.0867 38.5119 18.6537 36.9463 18.6204C35.2808 18.6204 34.4148 19.2533 34.4148 20.3192C34.4148 21.3851 35.1476 21.8515 37.4793 22.4511C41.1101 23.3838 42.7423 24.4164 42.7423 27.2144C42.7423 30.0125 40.7104 31.6114 36.913 31.6114Z" fill="#F2F4F9"/>
|
||||
<path id="Vector_4" d="M8.86584 27.381C8.86584 28.9132 9.66529 29.3463 11.0643 29.3463C12.4633 29.3463 14.1955 28.5468 15.428 27.281V23.8501C9.99839 24.3831 8.86584 25.8487 8.86584 27.381Z" fill="#F2F4F9"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_554">
|
||||
<rect width="145.232" height="48" fill="white" transform="translate(0.47168)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
10
source/images/frontpage/hero-socialproof-theverge.svg
Normal file
10
source/images/frontpage/hero-socialproof-theverge.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="161" height="36" viewBox="0 0 161 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="a" clip-path="url(#clip0_2_551)">
|
||||
<path id="Layer" fill-rule="evenodd" clip-rule="evenodd" d="M120.46 9.18042L120.301 13.9139C114.782 13.5318 113.2 14.954 113.2 19.592V20.1863H108.478V9.46698H113.2V12.5236C114.623 10.0295 116.544 8.89387 120.46 9.18042ZM38.1545 17.2252V28.4222H33.421V18.9233C33.421 14.7311 32.3491 13.5637 29.9929 13.5637C27.2441 13.5637 25.0047 16.3019 25.0047 20.1863H20.4941V6.65448H0V2.23939H24.9092V12.3325C25.9811 10.6981 27.9976 9.21226 31.309 9.21226C35.4163 9.21226 38.1545 11.8656 38.1545 17.2252ZM7.88561 10.125H12.6085V28.4222H7.88561V10.125ZM54.0743 22.0436L58.0861 23.816C56.7913 26.809 54.2972 28.8042 49.8821 28.8042C44.1828 28.8042 40.8715 25.2382 40.4257 20.1863H44.8726C45.191 23.0625 47.0483 24.7925 49.9139 24.7925C52.3762 24.7925 53.48 23.8479 54.0743 22.0436ZM58.6167 18.796C58.6167 19.2736 58.5849 19.7193 58.5212 20.1863H49.5106V17.0342H54.0743C53.8939 14.763 52.5354 13.0224 49.8821 13.0224C48.9057 12.9906 47.9929 13.2134 47.1439 13.6592L44.8726 10.4434C45.2473 10.2449 45.6294 10.0751 46.0189 9.93396C46.4147 9.78538 46.818 9.6612 47.2288 9.5625C47.6395 9.47017 48.0534 9.4033 48.4705 9.36085C48.8876 9.31097 49.3058 9.29399 49.7229 9.30778C54.1061 9.30778 58.6486 11.9186 58.6167 18.796ZM100.719 22.0436L104.721 23.816C103.426 26.809 100.942 28.8042 96.5271 28.8042C90.8172 28.8042 87.5059 25.2382 87.0601 20.1863H91.5071C91.8255 23.0625 93.6828 24.7925 96.559 24.7925C98.9788 24.7925 100.083 23.8479 100.719 22.0436ZM105.294 18.796C105.294 19.2736 105.262 19.7193 105.198 20.1863H96.1769V17.0342H100.751C100.56 14.763 99.2017 13.0224 96.559 13.0224C95.5719 12.9906 94.6592 13.2134 93.8101 13.6592L91.5389 10.4434C91.9136 10.2449 92.2999 10.0751 92.6958 9.93396C93.0853 9.78538 93.4843 9.6612 93.8951 9.5625C94.3058 9.47017 94.7197 9.4033 95.1368 9.36085C95.5539 9.31097 95.9752 9.29399 96.3998 9.30778C100.783 9.30778 105.325 11.9186 105.294 18.796ZM155.993 22.0436L159.994 23.816C158.71 26.809 156.216 28.8042 151.801 28.8042C146.091 28.8042 142.779 25.2382 142.344 20.1863H146.791C147.099 23.0625 148.967 24.7925 151.833 24.7925C154.263 24.7925 155.367 23.8479 155.993 22.0436ZM160.472 18.796C160.472 19.2736 160.44 19.7193 160.376 20.1863H151.355V17.0342H155.929C155.738 14.763 154.39 13.0224 151.737 13.0224C150.761 12.9906 149.848 13.2134 148.988 13.6592L146.728 10.4434C147.096 10.2449 147.478 10.0751 147.874 9.93396C148.27 9.78538 148.673 9.6612 149.084 9.5625C149.487 9.47017 149.901 9.4033 150.325 9.36085C150.743 9.31097 151.161 9.29399 151.578 9.30778C155.961 9.30778 160.504 11.9186 160.472 18.796ZM61.0472 0L76.6274 0.0318396V4.12854H68.2323L74.7276 20.1863H69.559L61.0472 0ZM91.7193 0.0318396L80.0236 28.4222H75.0778L76.5212 24.7288L86.2748 0.0318396H91.7193ZM121.585 20.1863H126.223C126.722 22.2347 128.208 23.7842 130.797 23.7842C131.455 23.7842 132.124 23.6887 132.718 23.434L134.607 26.4375C133.44 27.4139 131.774 27.9764 129.757 27.9764C125.374 27.9764 122.222 24.5696 121.585 20.1863ZM135.584 9.49882H140.317V20.1863H135.371C135.52 19.6875 135.584 19.1462 135.584 18.6156C135.584 15.7712 133.504 13.3726 130.415 13.3726C128.239 13.3726 126.817 14.3809 126.096 15.8986L122.158 13.3726C123.601 10.7618 126.35 9.14859 129.311 9.18042C132.336 9.18042 134.512 10.4116 135.584 12.1097V9.49882ZM135.584 28.8361L139.84 30.3219C138.619 33.7288 135.647 36 131.105 36C124.397 36 122.19 32.3703 122.094 29.059H126.605C126.817 30.7889 127.953 32.2748 131.02 32.2748C133.344 32.2748 134.989 31.0436 135.584 28.8361Z" fill="#F2F4F9"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2_551">
|
||||
<rect width="160.472" height="36" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
6
source/images/frontpage/hero-trophy.svg
Normal file
6
source/images/frontpage/hero-trophy.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="solar:cup-first-bold">
|
||||
<path id="Vector" d="M44 16.324V16.47C44 18.19 44 19.052 43.586 19.756C43.172 20.46 42.418 20.878 40.914 21.716L39.328 22.596C40.42 18.9 40.786 14.928 40.92 11.532L40.94 11.09L40.944 10.986C42.246 11.438 42.978 11.776 43.434 12.408C44 13.194 44 14.238 44 16.324ZM4 16.324V16.47C4 18.19 4 19.052 4.414 19.756C4.828 20.46 5.582 20.878 7.086 21.716L8.674 22.596C7.58 18.9 7.214 14.928 7.08 11.532L7.06 11.09L7.058 10.986C5.754 11.438 5.022 11.776 4.566 12.408C4 13.194 4 14.24 4 16.324Z" fill="#F2F4F9"/>
|
||||
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M32.754 4.69403C29.8603 4.22002 26.9322 3.98788 24 4.00003C20.434 4.00003 17.494 4.31403 15.246 4.69403C12.968 5.07803 11.83 5.27003 10.878 6.44203C9.928 7.61403 9.978 8.88003 10.078 11.412C10.424 20.108 12.3 30.972 22.5 31.932V39H19.64C19.1778 39.0003 18.73 39.1607 18.3727 39.4538C18.0153 39.7469 17.7706 40.1548 17.68 40.608L17.3 42.5H12C11.6022 42.5 11.2206 42.6581 10.9393 42.9394C10.658 43.2207 10.5 43.6022 10.5 44C10.5 44.3979 10.658 44.7794 10.9393 45.0607C11.2206 45.342 11.6022 45.5 12 45.5H36C36.3978 45.5 36.7794 45.342 37.0607 45.0607C37.342 44.7794 37.5 44.3979 37.5 44C37.5 43.6022 37.342 43.2207 37.0607 42.9394C36.7794 42.6581 36.3978 42.5 36 42.5H30.7L30.32 40.608C30.2294 40.1548 29.9846 39.7469 29.6273 39.4538C29.27 39.1607 28.8222 39.0003 28.36 39H25.5V31.932C35.7 30.972 37.578 20.11 37.922 11.412C38.022 8.88003 38.074 7.61203 37.122 6.44203C36.17 5.27003 35.032 5.07803 32.754 4.69403ZM25.574 11.614C25.8481 11.7276 26.0824 11.9198 26.2472 12.1666C26.4121 12.4133 26.5 12.7033 26.5 13V21C26.5 21.3978 26.342 21.7794 26.0607 22.0607C25.7794 22.342 25.3978 22.5 25 22.5C24.6022 22.5 24.2206 22.342 23.9393 22.0607C23.658 21.7794 23.5 21.3978 23.5 21V16.62L23.06 17.06C22.9227 17.2074 22.7571 17.3256 22.5731 17.4076C22.3891 17.4896 22.1904 17.5337 21.989 17.5372C21.7876 17.5408 21.5876 17.5037 21.4008 17.4283C21.214 17.3528 21.0444 17.2405 20.9019 17.0981C20.7595 16.9557 20.6472 16.786 20.5718 16.5992C20.4963 16.4124 20.4593 16.2124 20.4628 16.011C20.4664 15.8096 20.5105 15.6109 20.5924 15.4269C20.6744 15.243 20.7926 15.0773 20.94 14.94L23.94 11.94C24.1496 11.7302 24.4167 11.5873 24.7076 11.5293C24.9984 11.4713 25.2999 11.5007 25.574 11.614Z" fill="#F2F4F9"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
source/images/frontpage/hero_screenshot.png
Normal file
BIN
source/images/frontpage/hero_screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
source/images/frontpage/raspberry-pi.png
Normal file
BIN
source/images/frontpage/raspberry-pi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@ -11,333 +11,16 @@ feedback: false
|
||||
<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">
|
||||
<h1>{% icon "mdi:newspaper-variant-multiple" %} Recent Blog Posts</h1>
|
||||
|
||||
<ol>
|
||||
{% for post in site.posts limit: 4 %}
|
||||
<li class="post" style="display: grid; font-size: 16px">
|
||||
<a href="{{ post.url }}">{{ post.title }}</a>
|
||||
<small class="blog-date">{{ post.date_formatted }}</small>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="join-community material-card text">
|
||||
<h1>{% icon "mdi:people-group-outline" %} Join The Community</h1>
|
||||
|
||||
Our vibrant community is very active and super friendly. We love to talk and share our passion for home automation.
|
||||
|
||||
<div class="links">
|
||||
<a href="https://community.home-assistant.io">{% icon "simple-icons:discourse" %} Forums</a>
|
||||
<a href="/join-chat/">{% icon "simple-icons:discord" %} Chat</a>
|
||||
<a href="/newsletter/">{% icon "mdi:email-newsletter" %} Newsletter</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="material-card highlight-blog-post"
|
||||
href="/blog/2016/01/19/perfect-home-automation/"
|
||||
>
|
||||
Read our founder's vision for the perfect home automation
|
||||
<iconify-icon icon="mdi:arrow-right-thick"></iconify-icon>
|
||||
</a>
|
||||
|
||||
<div class="material-card text">
|
||||
<h1>{% icon "simple-icons:amazonalexa" %} Alexa, turn on the lights</h1>
|
||||
Use Alexa to control Home Assistant.
|
||||
|
||||
<div class="links">
|
||||
<a
|
||||
href="/cloud/"
|
||||
aria-label="Learn more about use Alexa to control Home Assistant"
|
||||
>LEARN MORE</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material-card text">
|
||||
<h1>{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC</h1>
|
||||
Use Google Assistant to control Home Assistant.
|
||||
|
||||
<div class="links">
|
||||
<a
|
||||
href="/cloud/"
|
||||
aria-label="Learn more about use Google Assistant to control Home Assistant"
|
||||
>LEARN MORE</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="material-card highlight-blog-post"
|
||||
href="https://www.openhomefoundation.org/blog/announcing-the-open-home-foundation/"
|
||||
>
|
||||
We are a non-profit and can't be sold or acquired
|
||||
<iconify-icon icon="mdi:arrow-right-thick"></iconify-icon>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="material-card picture-promo"
|
||||
href="/blog/2019/08/06/home-assistant-cast/"
|
||||
style="background-image: url(/images/frontpage/cast-frontpage.png)"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Take over all the screens
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Home Assistant Cast makes every TV a display.
|
||||
</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>
|
||||
</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
|
||||
href="/blog/2024/04/24/state-of-the-open-home-2024/"
|
||||
class="material-card picture-promo"
|
||||
style="
|
||||
background-image: url(/images/frontpage/state-of-the-open-home-2024.png);
|
||||
background-size: cover;
|
||||
padding-top: 55%;
|
||||
"
|
||||
></a>
|
||||
|
||||
<a
|
||||
class="material-card picture-promo"
|
||||
href="/voice_control/"
|
||||
style="
|
||||
background-image: url(/images/frontpage/assist_wake_word.png);
|
||||
background-size: cover;
|
||||
padding-top: 35%;
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Control your home with Assist
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Our private, insanely fast, voice assistant running on affordable
|
||||
hardware. Now supporting wake words.
|
||||
</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>
|
||||
</a>
|
||||
|
||||
{% 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.frontpage_image | default:page.og_image}});
|
||||
background-size: cover;
|
||||
background-color: #41bdf5;
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
{{page.title}}
|
||||
</div>
|
||||
<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>
|
||||
</a>
|
||||
{% endif %} {% endfor %}
|
||||
<!-- Tutorial: setup private voice assistant over phone -->
|
||||
<a
|
||||
href="/voice_control/worlds-most-private-voice-assistant/"
|
||||
target="_blank"
|
||||
class="material-card picture-promo"
|
||||
style="
|
||||
background-image: url(/images/frontpage/promo-private-voice-assistant.png);
|
||||
background-size: cover;
|
||||
padding-top: 45%;
|
||||
"
|
||||
></a>
|
||||
<a
|
||||
class="material-card picture-promo"
|
||||
href="/blog/2020/09/15/home-assistant-tags/"
|
||||
style="
|
||||
background-image: url(/images/blog/2020-09-15-home-assistant-tags/tag-reader.jpg);
|
||||
"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Home Assistant Tags
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Use NFC to bring music to your life or automate the mundane.
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="material-card picture-promo"
|
||||
href="https://home-assistant-store.creator-spring.com/"
|
||||
style="background-image: url(/images/merchandise/shirt-frontpage.jpg)"
|
||||
>
|
||||
<div class="caption">
|
||||
<div>
|
||||
<div class="title">
|
||||
Join the Home Assistant t-shirt revolution!
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Look sharp in blue, black or gray. Wearing a HA t-shirt is okay.
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Right content ends -->
|
||||
|
||||
<!-- News section -->
|
||||
{% include custom/news.html %}
|
||||
|
||||
<!-- Features section -->
|
||||
{% include custom/features.html %}
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
||||
{% include custom/press.html %}
|
||||
|
||||
<!-- Sponsor section -->
|
||||
|
||||
<section class="sponsor">
|
||||
<div class="sponsored-by grid__item one-whole">
|
||||
<h2>The Home Assistant project is sponsored by</h2>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user