diff --git a/sass/homeassistant/_overrides.scss b/sass/homeassistant/_overrides.scss index a186fb45e2e..d7ecf1f4585 100644 --- a/sass/homeassistant/_overrides.scss +++ b/sass/homeassistant/_overrides.scss @@ -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 diff --git a/sass/homeassistant/homepage/_features.scss b/sass/homeassistant/homepage/_features.scss index bc8e51dfbcc..d1f89e4a0c8 100644 --- a/sass/homeassistant/homepage/_features.scss +++ b/sass/homeassistant/homepage/_features.scss @@ -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%; diff --git a/sass/homeassistant/homepage/_hero_unit.scss b/sass/homeassistant/homepage/_hero_unit.scss index e288652a7c6..45cf9b4a780 100644 --- a/sass/homeassistant/homepage/_hero_unit.scss +++ b/sass/homeassistant/homepage/_hero_unit.scss @@ -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; - } - - } -} diff --git a/source/_includes/custom/features.html b/source/_includes/custom/features.html index 5a89e8f991b..f4d118a27e2 100644 --- a/source/_includes/custom/features.html +++ b/source/_includes/custom/features.html @@ -40,6 +40,43 @@ EXPLORE AUTOMATIONS + +
+
+ {% icon "mdi:view-dashboard" %} + Versatile dashboards +
+
+

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

+ + + EXPLORE DASHBOARDS +
+
+ +
+
+ {% icon "mdi:microphone" %} + Assist, our voice assistant +
+
+

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

+ + + EXPLORE ASSIST +
+
+
{% icon "mdi:puzzle" %} @@ -59,6 +96,7 @@ EXPLORE ADD-ONS
+
{% icon "mdi:shield-home-outline" %} @@ -74,6 +112,7 @@

+
{% icon "mdi:cellphone" %} @@ -122,6 +161,46 @@
+ +
+
+ {% icon "mdi:cast-connected" %} + Home Assistant Cast +
+
+

+ Take over all the screens. Home Assistant Cast makes every TV a display for dashboards. +

+ + + LEARN MORE + +
+
+ +
+
+ {% icon "mdi:nfc-variant" %} + NFC Tags +
+
+

+ Use NFC to bring music to your life or automate the mundane. +

+ + + LEARN MORE + +
+
diff --git a/source/_includes/custom/getting-started.html b/source/_includes/custom/getting-started.html new file mode 100644 index 00000000000..fa92e799978 --- /dev/null +++ b/source/_includes/custom/getting-started.html @@ -0,0 +1,52 @@ +
+
+

Let's get started.

+

A variety of options for pragmatists and tinkerers alike.

+
+ +
+ +
+
+
Easy
+ Raspberry Pi +
+

Raspberry Pi

+

A low-cost DIY solution to get started with Home Assistant

+
+ Learn more +
+
+ +
+
+
Easiest
+ Home Assistant Green +
+

Home Assistant Green

+

The easiest way to get started with Home Assistant

+
+ Learn more +
+
+ +
+
+
Intermediate
+ Home Assistant Yellow +
+

Home Assistant Yellow

+

The powerful way to run and customize Home Assistant to your needs

+
+ Learn more +
+
+
+ +
+

Need more options?

+

Home Assistant can repurpose and be installed on various hardware, such as an Odroid or a generic x86-64 machine.

+

The Home Assistant Operating System allows you to install Home Assistant on these devices even if you have little to no Linux experience.

+ Get started +
+
\ No newline at end of file diff --git a/source/_includes/custom/news.html b/source/_includes/custom/news.html new file mode 100644 index 00000000000..f04939719e5 --- /dev/null +++ b/source/_includes/custom/news.html @@ -0,0 +1,170 @@ + + +
+ + +
+

{% icon "mdi:newspaper-variant-multiple" %} Recent Blog Posts

+ +
    + {% for post in site.posts limit: 4 %} +
  1. + {{ post.title }} + {{ post.date_formatted }} +
    2. + {% endfor %} +
+
+ + + +
+

We are a non-profit and can't be sold or acquired.

+

Home Assistant is a project by the Open Home Foundation.

+
+ + + + +

Read our founder's vision for the perfect home automation

+ + + +
+

{% icon "simple-icons:amazonalexa" %} Alexa, turn on the lights

+ + Use Alexa to control Home Assistant. + +
+ Learn more +
+
+ +
+

{% icon "simple-icons:googleassistant" %} Ok Google, turn off the AC

+ + Use Google Assistant to control Home Assistant. + +
+ Learn more +
+
+ +
+

{% icon "mdi:people-group-outline" %} Join The Community

+ + Our vibrant community is very active and super friendly. We love to talk and share our passion for home automation. + +
+ {% icon "simple-icons:discourse" %} Forums + {% icon "simple-icons:discord" %} Chat + {% icon "mdi:email-newsletter" %} Newsletter +
+
+ +
+ + + + +
+ + + {% assign pages_by_date = site.pages | sort: "date" | reverse %} {% for + page in pages_by_date %} {% if page.layout == "landingpage" and + page.frontpage != false %} + +
+
+
+ {{page.title}} +
+
{{page.description}}
+
+
+ + {% endif %} {% endfor %} + +
+ + + + +
+ + + +
+
+
+ State of the Open Home 2024 +
+
+ Learn about our progress so far and also the roadmap for this year. +
+
+
+ + + + +
+
+
+ Control your home with Assist +
+
+ Our private, insanely fast, voice assistant running on affordable + hardware. Now supporting wake words. +
+
+
+ + + + +
+
+
+ Join the Home Assistant t-shirt revolution! +
+
+ Look sharp in blue, black or gray. Wearing a HA t-shirt is okay. +
+
+
+ + +
+ diff --git a/source/_includes/custom/press.html b/source/_includes/custom/press.html new file mode 100644 index 00000000000..d95164b0122 --- /dev/null +++ b/source/_includes/custom/press.html @@ -0,0 +1,101 @@ +
+
+

In the press

+

Trusted by home automation experts and more than a million households.

+
+ +
+
The Verge logo
 + +
ArsTechnica.com logo
 + +
Tweakers.net logo
 + +
Linus Tech Tips logo
 + +
Troy Hunt logo
 + +
Tom's Hardware logo
 + +
ProductHunt.com logo
 + +
Linux.com logo
 + +
OpenSource.com logo
 + +
Linux Magazine logo
 + +
Ct logo
 +
+
\ No newline at end of file diff --git a/source/_includes/custom/welcome.html b/source/_includes/custom/welcome.html index b6e3a3ebe08..6c432c0dcb3 100644 --- a/source/_includes/custom/welcome.html +++ b/source/_includes/custom/welcome.html @@ -1,6 +1,6 @@

Awaken
your home

- {{ site.description }} + Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts.

{%- assign tot = 0 -%} @@ -14,20 +14,33 @@ {%- endif %} {%- endfor -%} -

- Get started
- View live demos - Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations -

- - GitHub's top open source project by contributors in 2024 - GitHub's top open source project by contributors in 2024 - \ No newline at end of file +
+ Get started +
+ View live demos + Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations +
+
+ +
+ +
+ GitHub logo + Top open source project trophy +

Top open source project by contributors in 2024

+
+ + + +
+ diff --git a/source/_includes/site/hero_unit.html b/source/_includes/site/hero_unit.html index 02b3eea513c..d509fb9821e 100644 --- a/source/_includes/site/hero_unit.html +++ b/source/_includes/site/hero_unit.html @@ -1,17 +1,32 @@
-
- {% include custom/welcome.html %} +
+ {% include custom/welcome.html %}
-
+
- Home Assistant screenshot + Home Assistant screenshot + +
diff --git a/source/connectzbt1/index.html b/source/connectzbt1/index.html index 1cbf81be443..970d60e3fa7 100644 --- a/source/connectzbt1/index.html +++ b/source/connectzbt1/index.html @@ -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 ---