Add new logo, and green landingpage (#28935)

sass/base/_theme.scss

@@ -2,7 +2,7 @@ $noise-bg: image-url('noise.png') top left !default;
 $img-border: inline-image('dotted-border.png') !default;
 
 // Main Link Colors
-$link-color: lighten(#165b94, 3) !default;
+$link-color: #1abcf2 !default;
 $link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default;
 $link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
 $link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;

sass/custom/_colors.scss

@@ -43,7 +43,7 @@ $footer-bg-back: #fff;
 
 $main-bg: #fff;
 $page-bg: #fff;
-$link-color: #268bd2;
+$link-color: #1abcf2;
 $nav-color: $link-color;
 $link-color-visited:darken($nav-color, 25);
 $title-color: $link-color;

sass/custom/_landingpage.scss

@@ -824,7 +824,7 @@ $ha__primary_color: #03a9f4;
       .dialog-header {
         display: flex;
         justify-content: space-between;
-        padding: 8px 16px;
+        padding: 24px 24px 0px;
         font-weight: bold;
         font-size: 24px;
 
@@ -843,7 +843,7 @@ $ha__primary_color: #03a9f4;
             width: 100%;
             display: flex;
             justify-content: space-between;
-            padding: 8px 16px;
+            padding: 16px 24px;
             color: #222222;
             margin: auto;
 

sass/custom/_paulus.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-$primary-color: #049cdb;
+$primary-color: #1abcf2;
 
 .site-header {
   position: relative;
@@ -459,7 +459,7 @@ dt:hover a.title-link {
 
   img {
     border-radius: 3px;
-    width: 36px;
+    height: 36px;
     margin-right: 10px;
   }
 
@@ -636,12 +636,24 @@ div.note {
 
     img {
       vertical-align: middle;
+      height: 120px;
     }
 
     i {
       font-size: 2em;
       padding: 0 5px;
     }
+
+    .icons {
+      display: flex;
+      align-items: center;
+
+      svg {
+        height: 48px;
+        padding: 10px 4px;
+        fill: currentColor;
+      }
+    }
   }
 
   ul {

sass/oscailte/_variables.scss

@@ -19,7 +19,7 @@ $white:             #fff !default;
 
 // Accent colors
 // -------------------------
-$blue:              #049cdb !default;
+$blue:              #1abcf2 !default;
 $blueDark:          #0064cd !default;
 $green:             #46a546 !default;
 $red:               #9d261d !default;

sass/oscailte/base/_global.scss

@@ -8,9 +8,6 @@ body, html {
 a {
   color: $link-color;
   text-decoration: none;
-  &:visited {
-    color: darken($link-color, 10%);
-  }
   .menu & {
     color: $link-color;
   }

sass/partials/_header.scss

@@ -3,7 +3,7 @@ body > header {
   h1 {
     display: inline-block;
     margin: 0;
-    a, a:visited, a:hover {
+    a, a:hover {
       color: $title_color;
       text-decoration: none;
     }

source/_includes/site/footer.html

@@ -2,36 +2,92 @@
   <div class="grid">
     <div class="grid__item">
       <div class="copyright grid">
-        <div class='company grid__item one-third lap-one-half palm-one-whole'>
+        <div class="company grid__item one-third lap-one-half palm-one-whole">
           <div class="title">
-            <img width="40" src="/images/favicon-192x192-full.png" alt="Home Assistant"> Home Assistant
+            <img
+              src="/images/home-assistant-logo-vertical.svg"
+              height="120"
+              alt="Home Assistant"
+            />
           </div>
           <div class="icons">
-            <a rel="me" href='https://twitter.com/home_assistant' title="Twitter"><i class="icon-twitter"></i></a>
+            <a
-            <a rel="me" href='https://www.facebook.com/homeassistantio' title="Facebook"><i class="icon-facebook"></i></a>
+              rel="me"
-            <a rel="me" href='https://github.com/home-assistant/core' title="GitHub"><i class="icon-github"></i></a>
+              href="https://twitter.com/home_assistant"
+              title="Twitter"
+              target="_blank"
+              ><i class="icon-twitter"></i
+            ></a>
+            <a
+              rel="me"
+              href="https://fosstodon.org/@homeassistant"
+              title="Mastodon"
+              target="_blank"
+              ><svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 216.4144 232.00976"
+                alt="Mastodon"
+              >
+                <path
+                  d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"
+                />
+                <path
+                  fill="#fff"
+                  d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"
+                />
+              </svg>
+            </a>
+            <a
+              rel="me"
+              href="https://www.facebook.com/homeassistantio"
+              title="Facebook"
+              target="_blank"
+              ><i class="icon-facebook"></i
+            ></a>
+            <a
+              rel="me"
+              href="https://github.com/home-assistant/home-assistant"
+              title="GitHub"
+              target="_blank"
+              ><i class="icon-github"></i
+            ></a>
           </div>
         </div>
 
-        <div class='grid__item one-third lap-one-half palm-one-whole'>
+        <div class="grid__item one-third lap-one-half palm-one-whole">
           <ul>
-            <li><a href='https://alerts.home-assistant.io'>Home Assistant Alerts</a></li>
+            <li>
-            <li><a href='https://developers.home-assistant.io'>Developers</a></li>
+              <a href="https://alerts.home-assistant.io"
-            <li><a href='https://data.home-assistant.io'>Data Science</a></li>
+                >Home Assistant Alerts</a
-            <li><a href='https://community.home-assistant.io'>Community Forum</a></li>
+              >
-            <li><a href='mailto:hello@home-assistant.io'>Contact</a> (no support!)</li>
+            </li>
-            <li><a href='/security/'>Security Vulnerabilities</a></li>
+            <li>
-            <li><a href='/privacy/'>Privacy</a></li>
+              <a href="https://developers.home-assistant.io">Developers</a>
-            <li><a href='https://status.home-assistant.io'>System Status</a></li>
+            </li>
+            <li><a href="https://data.home-assistant.io">Data Science</a></li>
+            <li>
+              <a href="https://community.home-assistant.io">Community Forum</a>
+            </li>
+            <li>
+              <a href="mailto:hello@home-assistant.io">Contact</a> (no support!)
+            </li>
+            <li><a href="/security/">Security Vulnerabilities</a></li>
+            <li><a href="/privacy/">Privacy</a></li>
+            <li>
+              <a href="https://status.home-assistant.io">System Status</a>
+            </li>
           </ul>
         </div>
 
-        <div class='grid__item one-third lap-one-half palm-one-whole'>
+        <div class="grid__item one-third lap-one-half palm-one-whole">
-          Website powered by <a href='https://jekyllrb.com/'>Jekyll</a> and the
+          Website powered by <a href="https://jekyllrb.com/">Jekyll</a> and the
-          <a href='https://github.com/coogie/oscailte'>Oscailte theme</a>.<br />
+          <a href="https://github.com/coogie/oscailte">Oscailte theme</a>.<br />
           <br />
           <a href="https://www.netlify.com">
-            <img src="/images/frontpage/netlify.svg" alt="Deploys by Netlify Badge"/>
+            <img
+              src="/images/frontpage/netlify.svg"
+              alt="Deploys by Netlify Badge"
+            />
           </a>
         </div>
       </div>

source/_includes/site/header.html

@@ -4,11 +4,9 @@
       <a href="/" class="site-title">
         <img
           src="/images/home-assistant-logo.svg"
-          width="36"
           height="36"
           alt="Home Assistant"
         />
-        <span>{{ site.title }}</span>
       </a>
     </div>
 

source/_layouts/landingpage.html

@@ -2,9 +2,9 @@
 layout: page
 ---
 
-{% if page.og_image %}
+{% if page.hero_image %}
   <div class="banner">
-    <img src="{{ page.hero_image | default:page.og_image }}"></i>
+    <img src="{{ page.hero_image }}"></i>
     {% if page.tagline %}
       <div class="title {% if page.tagline_wide != false %}wide{% endif %}">
       {{ page.tagline }}
@@ -70,10 +70,16 @@ layout: page
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
       anchor.addEventListener('click', function (e) {
           e.preventDefault();
-
+          const href = this.getAttribute('href');
-          document.querySelector(this.getAttribute('href')).scrollIntoView({
+          if (href === "#") {
-              behavior: 'smooth'
+            return;
-          });
+          }
+          const target = document.querySelector(href);
+          if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+            });
+          }
       });
   });
   if (document.documentElement.clientWidth < 480) {

source/_posts/2023-09-17-10-years-home-assistant.markdown

@@ -0,0 +1,130 @@
+---
+layout: post
+title: "10 years Home Assistant"
+description: ""
+date: 2023-09-17 00:00:03
+date_formatted: "September 17, 2023"
+author: Paulus Schoutsen
+comments: true
+categories: Announcements
+og_image: /images/frontpage/HA10_-_Website_banner.png
+---
+
+TL; DR:
+
+- Home Assistant is 10 years old and the second most active open source project on GitHub.
+- Nabu Casa is 5 years old. There are no investors and development of Home Assistant is sustainable.
+- Home Assistant Cloud now supports custom domains for remote connections.
+- The Open Home vision is updated and is now about privacy, choice and sustainability.
+- The Home Assistant logo has been streamlined and refined, yet remains familiar. [Learn more here.][logo-blog]
+- Home Assistant Green is a new $99 hub and the easiest way to get started for people new to the Home Assistant ecosystem. [Learn more here.][green-blog]
+
+[![Home Assistant Green](/images/blog/2023-09-ha10/green-intro.png)][green-blog]
+
+<!--more-->
+<hr>
+
+It’s 2012 and I was a visiting scholar at the University of California, San Diego working on finishing my Master thesis. It’s back then when the first Philips Hue product hit the market: a hub and 3 light bulbs for around $200. The hub had something that would change my life: it had a local API that allowed local control.
+
+I’ve always been really into programming and so I immediately started toying with the Hue API in Python, my language of choice. There is something very satisfying about making things change in the real world from your code. On September 17, 2013 I decided that this playground had evolved into something that others could use too, and pushed the first version of Home Assistant to GitHub.
+
+I wasn’t planning on changing the world. It was a playground, a place where I could use the latest technology and explore all the possibilities with Python. But bit by bit Home Assistant gained traction, more contributors joined and we slowly started to build a community.
+
+
+
+<p class='img'>
+<img src='/images/blog/2023-09-ha10/gitter-ha.png' alt='3 people chatting about how great the Home Assistant community is.'>
+Home Assistant channel on Gitter, December 3, 2015
+</p>
+
+
+Building a community is hard and the early years are the most important, it’s when the foundation is set and adjusting its course later is very hard. Luckily we’ve had a great group of people both working on the code as well as helping people solve their problems using Home Assistant.
+
+<p class='img'>
+<img src='/images/blog/2023-09-ha10/hackernews-ha.png' alt="davidu: This project is far and away becoming the standard for Home Automation. Incredible to watch over the last couple years. Klathmon responds: Not only that, but Home Assistant is by far my favorite example of a well run 'crowd run' open source project. There's no big company bankrolling it (well there kinda is since ubiquiti hired the creator, but not to the same extent something like Chromium is just google), there are a HUGE number of committers, and the structure encourages people to maintain and improve their own contributions via 3rd party packages. There's no fighting, there's not much gatekeeping, it's not overly complicated, and they are EXTREMELY welcoming to new contributions, no matter how 'unique' the use case is (look at some of the integrations! There's integrations for local bus schedule systems!). And on top of that, there's world-class documentation! That's rare enough in paid products, but to see it from a project like this, and the fact that it's almost always up to date is simply amazing. They held my hand through creating 2 new integrations, and I haven't developed in python for almost 10 years, and they were extremely helpful, responsive, and at the end of the day the product got better for everyone. I really don't have enough good things to say about Home Assistant.">
+<a href="https://news.ycombinator.com/item?id=17827128">HackerNews, August 23, 2018</a>
+</p>
+
+## The Improvement Beat
+
+There are many things that have led to our success: our architecture, the quality of the documentation and an amazing community willing to help one another. But the one thing underlying the success of all of these has been our frequent release schedule. It creates a rhythm that synchronizes the community in publishing their work.
+
+We used to do a release every two weeks and it set the schedule for everything else. Every two weeks we had to make sure the contributions that were almost done got finished, the documentation was updated and extensive release notes were written. Every release is an opportunity for users to try out new features and provide feedback, feedback we could incorporate and let them try again two weeks later. Our schedule got adopted across our community, and every project started to do a release every two weeks, like for example the [Home Assistant Podcast](https://hasspodcast.io/).
+
+<p class='img'>
+<img src='/images/blog/2023-09-ha10/release-beat.png' alt='A list of blog posts with release notes.'>
+At the start of 2019, we still did a release every 2 weeks
+</p>
+
+The downside of a two week schedule is that the developers and community burned themselves out. Every release finishes in a small sprint to wrap things up, and then a period of quick turnaround for inevitable bugs that popped up. We were sprinting while we had to run a marathon; it wasn’t sustainable. We decided to move it to a monthly release and adopted date-based version numbers in [Home Assistant 2022.12](/blog/2020/12/13/release-202012/).
+
+Still, even with 12 releases per year there is no other smart home platform that evolves as fast as Home Assistant. Every month many new features arrive to allow users to get even more out of their smart home.
+
+## The Operating System
+
+The original audience of Home Assistant was die-hard tech nerds. You had to install Python, Home Assistant and all of its dependencies manually. When Pascal Vizeli [introduced the Home Assistant Operating System](/blog/2017/07/25/introducing-hassio/) (then called hass.io) the first step was made to bring Home Assistant to non-technical users. Now users could install Home Assistant on an SD card, put it into a Raspberry Pi and have a fully working home automation hub that can update via the user interface. Users could fully focus on automating their home.
+
+## Thinking Big
+
+When Home Assistant turned five, [we launched Nabu Casa](/blog/2018/09/17/thinking-big/). The goal of Nabu Casa is to make the development of Home Assistant sustainable. Nabu Casa came just in time, as it gave our developers some time to breathe. We had to grow to around 10 people before both Pascal and I felt like all our day-to-day tasks could be shared.
+
+Home Assistant is the 2nd most active open source project on GitHub ([source](https://octoverse.github.com/2022/state-of-open-source)). Running a project this large requires a lot of administration, processes, structure and maintenance. This is provided by full-time Nabu Casa employees so that contributors can focus on the fun part: building Home Assistant.
+
+Nabu Casa offers a service called [Home Assistant Cloud](https://www.nabucasa.com). It’s a cloud extension for your local Home Assistant instance that allows you to access it remotely via an end-to-end encrypted connection, use state of the art text-to-speech system for notifications and integrate with voice assistants.
+
+Today we’re launching an often requested feature for Home Assistant Cloud: support for custom domains. [Check out the docs on how to get started.](https://www.nabucasa.com/config/remote/#using-a-custom-domain)
+
+## The Open Home
+
+While building Home Assistant, we realized that our focus was too narrow. We can make the most epic smart home platform (for the record: we do), but if all your devices still communicate via the cloud, you cannot have privacy and local control.
+
+And so the Open Home was born. It is our vision for a smart home that is built around privacy, choice and durability. Today, we’re going to make a small adjustment to this vision, and we’re replacing durability with sustainability. Sustainability includes the previous definition of durability (things need to keep working) but expands it with saving energy. Overall the term needs less explanation.
+
+For the Open Home, sustainability means:
+
+- Ensure durability and longevity of our supported devices to reduce e-waste and eliminate corporate planned obsolesce.
+- Upgrade existing devices with smart plugs or other technology.
+- Switch to renewable energy sources by supporting solar energy hardware and support for electricity data sources.
+- Consume energy meaningfully by providing data-driven insights.
+- Reduce reliance on cloud computing data centers. Being local is greener than depending on the cloud.
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/open-home-values.png' alt='The Open Home values: privacy, choice and sustainability'>
+
+## Competing with Big Tech
+
+Home Assistant is not only big in the open source world, we’re also big in the real world. Earlier this year the Verge [named us](https://www.theverge.com/23749376/smart-home-explained-voice-assistant-tv-gadgets) among the 5 big smart home platforms among Apple, Amazon, Google and Samsung.
+
+We are not afraid that our competition will take away our audience. None of them run fully local and none allow users to access their own data outside of their own apps. This means that none of those platforms have the core values to ever become the foundation of the home of the future. With open source we will keep creating more value on our open ecosystem while the competitors will continue to focus to find places to monetize their user base.
+
+## Refreshing the Home Assistant logo
+
+<p class='img'>
+<img src='/images/blog/2023-09-ha10/logo-cover.png' alt='Beautiful new Home Assistant logo. It is a refined version of the old logo. Feels very familiar.'>
+The new Home Assistant logo. Designed by Madelena Mak.
+</p>
+
+Today we’re introducing a refreshed and refined logo for Home Assistant that feels familiar. We will be rolling it out in the next couple of weeks. [Learn more about the new Home Assistant logo.][logo-blog]
+
+## Share the love
+
+<p class='img'>
+<img src='/images/blog/2023-09-ha10/share-the-love.jpg' alt='Photo of Paulus Schoutsen speaking to a crowd. The slide behind him shows the text "Share the love".'>
+Paulus Schoutsen, State of the Union, 2018
+</p>
+
+Home Assistant is made by people that love home automation and want to make the best platform. It’s a product of love and you feel that as soon as you open the app. It runs fully local and nothing is hidden behind paywalls or held back for future monetization opportunities. Home Assistant is your platform and you can use it, and your data, the way you want.
+
+Historically, it has been difficult to get started with Home Assistant because you had to bring your own hardware; a Raspberry Pi or similar. We’ve solved this by introducing [Home Assistant Yellow](/yellow), our own smart home hub powered by Home Assistant. The Home Assistant Yellow is the power user dream. It’s powered by a Raspberry Pi Compute Module 4, includes Zigbee and Thread, and can be extended using an SSD.
+
+Since the release of the Home Assistant Yellow the price of components, including the Compute Module 4, have increased significantly. This caused the Home Assistant Yellow to become more expensive and no longer a good fit for users who are just starting out with Home Assistant.
+
+Today we are introducing an affordable way for new users to start their smart home with Home Assistant: the Home Assistant Green – and it costs only $99 (MSRP). [Learn more about Home Assistant Green.][green-blog]
+
+[![Home Assistant Green](/images/blog/2023-09-ha10/green-intro.png)][green-blog]
+
+[green-blog]: /blog/2023/09/17/home-assistant-green-your-entry-to-home-assistant/
+[logo-blog]: /blog/2023/09/17/a-refreshed-logo-for-home-assistant/
+
+## Thank You! 🙏
+
+A big thank you for all the people who have contributed to Home Assistant and its community over the last 10 years. Code, bug reports, helping others figuring out things or moderating our community: thank you so much. This wouldn’t have been possible without you.

source/_posts/2023-09-17-a-refreshed-logo-for-home-assistant.markdown

@@ -0,0 +1,89 @@
+---
+layout: post
+title: "A refreshed logo for Home Assistant!"
+description: "We’re introducing a refreshed and refined logo for Home Assistant that feels familiar. We will be rolling it out in the next couple of weeks."
+date: 2023-09-17 00:00:01
+date_formatted: "September 17, 2023"
+author: Madelena Mak
+comments: true
+categories: Announcements
+og_image: /images/frontpage/HA10_-_Website_banner.png
+---
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/logo-cover.png' alt='The new Home Assistant logo on a blue background.'>
+
+Hello all, this is Madelena. You may know me from [some](https://www.reddit.com/r/homeassistant/comments/uc79cv/a_maximalist_approach_on_designing_the_ha/) of [my](https://www.reddit.com/r/homeassistant/comments/vncni6/eink_displays_are_great_for_blending_in_with_the/) [previous](https://madelenamak.com/design/) [projects](https://github.com/Madelena). 🙂
+
+As you may have heard from our celebration for [the 10th anniversary of Home Assistant](/blog/2023/09/17/10-years-home-assistant/), we are making some tweaks to our logo! This is no small feat, as the logo is a big part of the identity of Home Assistant, and by extension a representation of the contributions of our community. This logo has served us well for 8 years. When we see the logo, it represents the culmination of work that we are all proud of.
+
+<!--more-->
+
+## Humble beginnings
+
+As Paulus had mentioned here, Home Assistant started as his solo project while working on his Master thesis, and on September 17, 2013, it was first published on GitHub. Home Assistant has always been engineered as a direct solution to the state of the Open Home, and its name and its first logo reflected its no-frills get-it-done attitude.
+
+The logo was simply a house with blue doors, and the name was simply Home Assistant. No fancy startup names. No following Big Tech trends. Home Assistant is exactly what it is!
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/logo 1.png' alt='The original Home Assistant logo.'>
+
+## It’s a Material Design world.
+
+As Home Assistant became more and more robust, its user base also began to expand. Users from all walks of life started building their smart home with Home Assistant, people started buzzing about it, and contributors coalesced around it. The identity of the project formed organically. The families and housemates of our users started to use Home Assistant, and a more friendly and memorable user experience was needed.
+
+In 2015, [Jeremy Geltman came to the rescue](/blog/2015/03/08/new-logo/) and contributed a brand new logo for Home Assistant. The new logo follows Google’s Material Design language. Home Assistant grew up with Material Design - It adopted the first version upon release, and so the same design language was also applied to our logo. It used the blue color that Home Assistant used in the interface and it came in two versions: a high detailed version (for homescreen icon etc) and a simple version (for favicon etc).
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/logo 2.png' alt='The material design Home Assistant logo.'>
+
+## Iteration, not revolution
+
+The Geltman design has served us well - It was used everywhere from our website to the loading screen to the app icon. It was used on big desktop screens, small mobile screens, and most recently, in print, such as our “Works with Home Assistant” partnership program and our hardware products Home Assistant Yellow, Home Assistant SkyConnect, and the newest Home Assistant Green. However, the logo was not designed to handle all these different usages, and it was time for a new iteration.
+
+We started this iteration with three goals in mind:
+
+### Familiar
+
+Home Assistant serves both power users who have been using the project for many years, as well as home automation users who are outgrowing their previous setup from other companies. We want it to feel instantly familiar to our fans old and new.
+
+### Refined
+
+Home Assistant is an established brand with ten years of history. We want to refine our logo by executing it with even more rigor and craftsmanship, which reflects the growth and maturity of the project as a whole. We also want it to feel friendly and modern to all users.
+
+### Unified
+
+Home Assistant has spawned out so many projects and initiatives over the past decade. We want to create a unified identity across all Home Assistant related projects to increase awareness. We also want to make sure that the logo is versatile across all media where it will be applied.
+
+## The blue house with antenna
+
+At the core of the Home Assistant logo is what we call the Blue House with Antenna, its three most recognizable and distinct features.
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/home-assistant-logo-new.png' alt='The new Home Assistant logo on a gray background.'>
+
+### Blue
+
+Blue feels stable and essential. A bright sky blue is joyful, clear, and free of clouds.
+
+### House
+
+Of all possible combinations of shapes, a home is best abstracted in the shape of a structure with a pitched roof. With the vast amount of logos based on this shape, the best we can do is to make it more iconic. The house is further simplified - there is no gable and there is no chimney - to an orthogonal shape with an elegant and deliberate proportion.
+
+### Antenna
+
+Call it a tree, a set of nodes, a PCB, or an antenna. The antenna is the most recognizable and memorable part of the Home Assistant logo that stands out from the rest of other home automation brands, and is an easily understandable symbol that conveys technologies that are smart, connected, and growing evergreen. The three nodes of the antenna represent our three core values: Privacy, Choice, and Sustainability.
+
+## And for those design nerds who are interested…
+
+The elements within the logo were laid out with better proportions, and they were designed to be legible at small or large sizes.
+
+<img class='no-shadow' src='/images/blog/2023-09-ha10/home-assistant-logo-spec.png' alt='Measurements of various parts of the Home Assistant logo.'>
+
+We have also changed our logotype to something more cozy and modern like a home. Gone was the all-business no-play Roboto typeface (to its credit, the United Nations used it as its logotype), and replaced by a geometric sans serif Biotif typeface. Figtree serves as the free open-source fallback.
+
+We have also toned the blue color to be slightly more saturated to make it feel brighter and more utopian, and expanded the palette to a wider gamut.
+
+For those who want to use our logo and for more details, the latest brand guidelines can be found [at our design repository.](https://design.home-assistant.io/)
+
+## There’s more to come!
+
+The new logo will roll out gradually in the next few weeks. You will start seeing it on our website, our updated onboarding experience, app icons, and more. For those who love our old logo, fear not! You can still change the app icon to our classic logos on our iOS phone companion.
+
+And while you are here, why not [grab some new merch with the new logo?](https://home-assistant-store.creator-spring.com/)

source/_posts/2023-09-17-home-assistant-green-your-entry-to-home-assistant.markdown

@@ -0,0 +1,53 @@
+---
+layout: post
+title: "Introducing Home Assistant Green: Your entry to Home Assistant"
+description: "For $99 (MSRP) the Home Assistant Green is the way for new users to start their smart home with Home Assistant."
+date: 2023-09-17 00:00:02
+date_formatted: "September 17, 2023"
+author: Guy Sie
+comments: true
+categories: Announcements
+og_image: /images/blog/2023-09-ha10/green-intro.png
+---
+
+Back in 2021, we launched a crowdfunding campaign for Home Assistant Yellow. Home Assistant Yellow was our take on what a smart home hub should look like, with all the features we enthusiasts want. We're very proud of Home Assistant Yellow, but at the same time, it has become clear that people just starting their smart home journey don't need all the features Yellow offers. With the global component shortages making the required Compute Module 4 more expensive and harder to find, Home Assistant Yellow is no longer a good fit for beginners.
+
+We've taken that to heart, and today, we are introducing an affordable way for new users to upgrade their smart homes to Home Assistant. It's the Home Assistant Green – and it costs only $99 (MSRP).
+
+
+![Photo of Home Assistant Green](/images/blog/2023-09-ha10/home-assistant-green.jpeg)
+
+<!--more-->
+Home Assistant Green contains everything you need for Home Assistant in one box. Just plug the included power and network cables into the hub, and you'll be up and running. Home Assistant Green will then automatically install the latest version of Home Assistant, the app (mobile or web) will guide you through the setup process, and it will detect your smart devices immediately. This is the easiest way to start using Home Assistant, and it is perfect for you or your friends and family who want to take their first step in home automation.
+
+<p class='img'>
+<img src="/images/blog/2023-09-ha10/green-with-yellow-and-blue.jpeg">
+Home Assistant Green alongside Home Assistant Yellow and Home Assistant Blue
+</p>
+
+On the inside, Home Assistant Green runs on a powerful 1.8 GHz quad-core CPU. Memory and storage are amply provided with 4 GB of RAM and 32 GB of eMMC, more than enough to keep you running Home Assistant on the device for a long time. When your smart home grows, you can use Home Assistant SkyConnect (link to product) to add Zigbee and Matter support or one of many third-party USB devices available to expand Home Assistant Green with other smart standards like Z-Wave or Bluetooth.
+
+On the outside, Home Assistant Green has a stunning translucent enclosure design revealing the hub's inner hardware. Unlike some other smart home devices, it looks great in your home decor. The bottom of the case also functions as the hub's heat sink and is made of a solid piece of black, anodized aluminum. And, of course, this case features [the new Home Assistant logo][logo-blog] on top as a nice subtle mosaic pattern.
+
+
+<p class='img'>
+<img src="/images/blog/2023-09-ha10/green-specs.jpeg" alt="Home Assistant Green has 1.8 GHz quad-code CPU, 4 GB of RAM and 32 GB of eMMC storage.">
+Home Assistant Green specifications
+</p>
+
+For more information about Home Assistant Green, [visit our product page](/green) or watch the team at Nabu Casa talk about Home Assistant Green's development and features in our anniversary video.
+
+<lite-youtube videoid="EmLV6lJLzSU" videotitle="Home Assistant 10th Anniversary Event #HA10" videoStartAt="4462">
+<a class="lite-youtube-fallback" href="https://www.youtube.com/watch?v=EmLV6lJLzSU" rel="external nofollow">Watch on YouTube: Home Assistant 10th Anniversary Event #HA10</a>
+</lite-youtube>
+
+<br>
+
+To celebrate [the 10th anniversary of Home Assistant][10ha-blog], we are making an anniversary batch of 1000 Home Assistant Green hubs available for sale via our partner Seeed Studio. You can order your Home Assistant Green right now:
+
+<a href="https://www.seeedstudio.com/Home-Assistant-Green-p-5792.html" class="btn">Order at Seeed Studio</a>
+
+If this anniversary batch sells out before you can get one, don't worry! At the end of October, the Home Assistant Green will become widely available through our existing distributor network. Keep an eye on the Home Assistant Green website (link to Green marketing landing page) or our social media (links to social media) for availability!
+
+[logo-blog]: /blog/2023/09/17/a-refreshed-logo-for-home-assistant/
+[10ha-blog]: /blog/2023/09/17/10-years-home-assistant/

source/blue/index.html

@@ -22,6 +22,7 @@ tagline: >-
       <text x="40" y="78" stroke="white" fill="white">Blue</text>
     </svg>
 tagline_wide: false
+hero_image: /images/blue/blue_hero.jpg
 og_image: /images/blue/blue_hero.jpg
 frontpage_image: /images/frontpage/blue-frontpage.jpg
 ---

source/green/script.js

@@ -0,0 +1,118 @@
+function createObserver(elements) {
+    let observer;
+
+    let options = {
+        threshold: .3,
+    };
+
+    observer = new IntersectionObserver(handleIntersect, options);
+    elements.forEach((el) => {
+        observer.observe(el);
+    });
+}
+
+function handleIntersect(entries, _observer) {
+    entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+            entry.target.classList.add("show");
+        } else {
+            entry.target.classList.remove("show");
+        }
+    });
+}
+
+window.addEventListener(
+    "load",
+    () => {
+        const elements = document.querySelectorAll(".animate-in");
+
+        if ("IntersectionObserver" in window) {
+            createObserver(elements);
+        } else {
+            elements.forEach((el) => {
+                el.classList.add("show");
+            });
+        }
+
+        const faqLinks = document.querySelectorAll(".faq-link");
+        faqLinks.forEach((link) =>
+            link.addEventListener("click", (e) => {
+                e.preventDefault();
+                const container = link.nextElementSibling;
+                const icon = link.querySelector(".faq-icon");
+                if (container.classList.contains("open")) {
+                    container.classList.remove("open");
+                    icon.classList.remove("open");
+                } else {
+                    container.classList.add("open");
+                    icon.classList.add("open");
+                }
+            })
+        );
+
+        const wrappernav = document.querySelector(".wrappernav");
+        if (document.documentElement.scrollTop > 68) {
+            wrappernav.classList.add("scrolled");
+        }
+        window.addEventListener(
+            "scroll",
+            () => {
+                if (document.documentElement.scrollTop > 68) {
+                    wrappernav.classList.add("scrolled");
+                } else {
+                    wrappernav.classList.remove("scrolled");
+                }
+            },
+            { passive: true }
+        );
+    },
+    false
+);
+
+const buyDialog = document.getElementById("buy-dialog");
+const buyFabs = document.querySelectorAll(".buy");
+
+buyFabs.forEach(btn => btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    showBuyDialog();
+}));
+
+function showBuyDialog() {
+    buyDialog.style.display = "flex";
+}
+
+function closeDialog() {
+    buyDialog.style.display = "none";
+}
+
+window.onclick = function (event) {
+    if (event.target === buyDialog) {
+        closeDialog();
+    }
+};
+
+if (document.location.search === "?order") {
+    showBuyDialog();
+}
+
+const menuMobileBtn = document.querySelector(".menu-mobile");
+const mobileMenu = document.querySelector(".w-nav-overlay");
+const mobileMenuLinks = document.querySelectorAll(".w-nav-overlay a");
+
+menuMobileBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    if (mobileMenu.classList.contains("open")) {
+        mobileMenu.classList.remove("open");
+        menuMobileBtn.classList.remove("open");
+    } else {
+        mobileMenu.classList.add("open");
+        menuMobileBtn.classList.add("open");
+    }
+});
+
+mobileMenuLinks.forEach((link) =>
+    link.addEventListener("click", () => {
+        mobileMenu.classList.remove("open");
+        menuMobileBtn.classList.remove("open");
+    })
+);

source/images/green/HA Green Logo.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318.79 24.2">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1d2126;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <path class="cls-1" d="m0,.42h3.97v9.77l10.3.03V.42h4v23.36h-4v-10.05l-10.3-.03v10.08H0V.42Z"/>
+      <path class="cls-1" d="m29.88,7.56c2.42,0,4.39.78,5.91,2.33,1.52,1.55,2.28,3.55,2.28,5.98s-.76,4.42-2.28,5.97c-1.52,1.55-3.49,2.33-5.91,2.33s-4.42-.78-5.94-2.33c-1.52-1.55-2.28-3.54-2.28-5.97s.76-4.45,2.28-5.99c1.52-1.55,3.5-2.32,5.94-2.32Zm0,13.2c1.29,0,2.34-.46,3.15-1.37.81-.91,1.21-2.1,1.21-3.55s-.4-2.64-1.21-3.54c-.81-.9-1.86-1.35-3.15-1.35s-2.39.45-3.2,1.35c-.81.9-1.22,2.08-1.22,3.54s.41,2.64,1.22,3.55c.81.91,1.88,1.37,3.2,1.37Z"/>
+      <path class="cls-1" d="m65.06,13.73v10.05h-3.67v-9.47c0-1.09-.28-1.95-.84-2.56-.56-.61-1.33-.92-2.3-.92-1.03,0-1.85.34-2.47,1.01-.61.67-.92,1.61-.92,2.82v9.12h-3.72v-9.47c0-1.09-.27-1.95-.82-2.56-.55-.61-1.3-.92-2.27-.92-1.03,0-1.86.34-2.48,1.01s-.94,1.61-.94,2.82v9.12h-3.78v-15.78h3.52l.12,1.52c.92-1.34,2.41-2.02,4.48-2.02,1.21,0,2.25.25,3.14.75.89.5,1.56,1.23,2.02,2.19.39-.92,1.02-1.64,1.91-2.16.89-.52,1.95-.78,3.18-.78,1.79,0,3.21.55,4.27,1.66,1.05,1.1,1.58,2.63,1.58,4.58Z"/>
+      <path class="cls-1" d="m83.4,17.28h-12.09c.12,1.19.57,2.09,1.34,2.72.77.62,1.75.94,2.94.94,1.93,0,3.28-.8,4.05-2.41l3.16,1.25c-.59,1.39-1.53,2.47-2.8,3.25-1.28.78-2.74,1.17-4.4,1.17-2.33,0-4.23-.76-5.68-2.29-1.45-1.53-2.18-3.53-2.18-6.01s.73-4.49,2.2-6.05c1.46-1.55,3.38-2.33,5.74-2.33s4.19.77,5.61,2.3c1.42,1.53,2.12,3.55,2.12,6.05v1.41Zm-12.03-2.66h8.19c-.07-1.28-.46-2.26-1.16-2.93s-1.65-1.01-2.84-1.01-2.14.34-2.88,1.02c-.74.68-1.18,1.65-1.31,2.91Z"/>
+      <path class="cls-1" d="m107.76,18.34h-8.89l-1.92,5.44h-4.09L101.29.42h4.09l8.45,23.36h-4.19l-1.89-5.44Zm-1.16-3.36l-3.27-9.34-3.3,9.34h6.56Z"/>
+      <path class="cls-1" d="m121.25,21.16c.78,0,1.4-.15,1.85-.46.45-.31.68-.76.68-1.37,0-.84-.57-1.41-1.7-1.69l-2.17-.58c-2.99-.81-4.48-2.35-4.48-4.61,0-1.45.53-2.63,1.58-3.55,1.05-.92,2.47-1.38,4.25-1.38,1.59,0,2.93.36,4.01,1.09,1.08.73,1.74,1.73,1.98,3l-3.39.8c-.07-.57-.34-1.03-.79-1.36-.45-.33-1.01-.5-1.68-.5s-1.22.17-1.64.51c-.42.34-.62.78-.62,1.32,0,.44.16.8.47,1.09.31.29.8.53,1.45.7l2.14.53c1.43.39,2.52.97,3.27,1.75s1.12,1.75,1.12,2.89c0,1.48-.56,2.66-1.67,3.53-1.11.88-2.65,1.31-4.61,1.31-1.81,0-3.27-.4-4.36-1.2s-1.74-1.87-1.94-3.23l3.45-.61c.06.62.34,1.11.84,1.46.49.35,1.15.52,1.98.52Z"/>
+      <path class="cls-1" d="m135.59,21.16c.78,0,1.4-.15,1.85-.46.45-.31.68-.76.68-1.37,0-.84-.57-1.41-1.7-1.69l-2.17-.58c-2.99-.81-4.48-2.35-4.48-4.61,0-1.45.53-2.63,1.58-3.55,1.05-.92,2.47-1.38,4.25-1.38,1.59,0,2.93.36,4.01,1.09,1.08.73,1.74,1.73,1.98,3l-3.39.8c-.07-.57-.34-1.03-.79-1.36-.45-.33-1.01-.5-1.68-.5s-1.22.17-1.64.51c-.42.34-.62.78-.62,1.32,0,.44.16.8.47,1.09.31.29.8.53,1.45.7l2.14.53c1.43.39,2.52.97,3.27,1.75s1.12,1.75,1.12,2.89c0,1.48-.56,2.66-1.67,3.53-1.11.88-2.65,1.31-4.61,1.31-1.81,0-3.27-.4-4.36-1.2s-1.74-1.87-1.94-3.23l3.45-.61c.06.62.34,1.11.84,1.46.49.35,1.15.52,1.98.52Z"/>
+      <path class="cls-1" d="m144.3,2.53c0-.68.23-1.24.7-1.7.46-.46,1.03-.69,1.7-.69s1.22.23,1.68.7c.46.47.7,1.03.7,1.69s-.23,1.22-.7,1.7c-.46.47-1.02.71-1.68.71s-1.22-.24-1.69-.71c-.47-.47-.7-1.04-.7-1.7Zm4.28,5.47v15.78h-3.78v-15.78h3.78Z"/>
+      <path class="cls-1" d="m157.73,21.16c.78,0,1.4-.15,1.85-.46.45-.31.68-.76.68-1.37,0-.84-.57-1.41-1.7-1.69l-2.17-.58c-2.99-.81-4.48-2.35-4.48-4.61,0-1.45.53-2.63,1.58-3.55,1.05-.92,2.47-1.38,4.25-1.38,1.59,0,2.93.36,4.01,1.09,1.08.73,1.74,1.73,1.98,3l-3.39.8c-.07-.57-.34-1.03-.79-1.36-.45-.33-1.01-.5-1.68-.5s-1.22.17-1.64.51c-.42.34-.62.78-.62,1.32,0,.44.16.8.47,1.09.31.29.8.53,1.45.7l2.14.53c1.43.39,2.52.97,3.27,1.75s1.12,1.75,1.12,2.89c0,1.48-.56,2.66-1.67,3.53-1.11.88-2.65,1.31-4.61,1.31-1.81,0-3.27-.4-4.36-1.2s-1.74-1.87-1.94-3.23l3.45-.61c.06.62.34,1.11.84,1.46.49.35,1.15.52,1.98.52Z"/>
+      <path class="cls-1" d="m175.33,23.78c-1.08.24-2,.36-2.75.36-1.59,0-2.84-.44-3.73-1.31s-1.34-2.18-1.34-3.91v-7.72h-2.42v-3.2h2.42V3.08h3.75v4.92h3.64v3.2h-3.64v7.05c0,1.71.66,2.56,1.98,2.56.43,0,.96-.11,1.59-.33l.48,3.3Z"/>
+      <path class="cls-1" d="m188,23.78c-.12-.51-.21-1.11-.27-1.8-.46.68-1.11,1.22-1.95,1.62-.84.4-1.81.6-2.91.6-1.73,0-3.11-.46-4.16-1.38-1.04-.92-1.56-2.17-1.56-3.74s.51-2.75,1.54-3.62c1.03-.87,2.43-1.3,4.21-1.3h4.73v-.61c0-.99-.29-1.73-.87-2.22-.58-.49-1.39-.73-2.43-.73-1.84,0-3.17.77-3.97,2.31l-2.75-1.61c1.33-2.51,3.64-3.77,6.92-3.77,1.99,0,3.62.51,4.89,1.53,1.28,1.03,1.92,2.69,1.92,4.98v6.28c0,1.78.09,2.93.28,3.45h-3.64Zm-.33-7.02h-3.89c-.89,0-1.57.2-2.06.61-.49.41-.73.96-.73,1.67s.25,1.3.75,1.69c.5.39,1.21.58,2.14.58,1.11,0,2.03-.35,2.73-1.05.71-.7,1.06-1.75,1.06-3.13v-.36Z"/>
+      <path class="cls-1" d="m209.52,14.05v9.73h-3.77v-8.92c0-1.5-.35-2.53-1.06-3.08-.68-.55-1.47-.83-2.38-.83-1.09,0-2.01.35-2.73,1.05-.73.7-1.09,1.69-1.09,2.98v8.8h-3.78v-15.78h3.55l.12,1.7c.45-.67,1.1-1.2,1.95-1.59.85-.39,1.79-.59,2.8-.59,2.04,0,3.62.57,4.73,1.7,1.11,1.13,1.66,2.74,1.66,4.82Z"/>
+      <path class="cls-1" d="m221.59,23.78c-1.08.24-2,.36-2.75.36-1.59,0-2.84-.44-3.73-1.31s-1.34-2.18-1.34-3.91v-7.72h-2.42v-3.2h2.42V3.08h3.75v4.92h3.64v3.2h-3.64v7.05c0,1.71.66,2.56,1.98,2.56.43,0,.96-.11,1.59-.33l.48,3.3Z"/>
+      <path class="cls-1" d="m253.83,10.41v13.38h-3.44l-.19-2.62c-.71.94-1.71,1.67-3.01,2.2s-2.7.79-4.2.79c-2.14,0-4.03-.51-5.7-1.54-1.66-1.03-2.95-2.45-3.85-4.27-.91-1.82-1.36-3.87-1.36-6.16s.47-4.44,1.42-6.28c.95-1.84,2.29-3.29,4.04-4.33,1.74-1.04,3.75-1.56,6.02-1.56,2.47,0,4.58.58,6.34,1.73,1.8,1.16,3.04,2.7,3.7,4.64l-3.55,1.47c-.5-1.35-1.32-2.38-2.46-3.08-1.14-.7-2.48-1.05-4.01-1.05-2.29,0-4.11.78-5.46,2.33-1.35,1.55-2.02,3.62-2.02,6.22s.67,4.55,2,5.99c1.33,1.44,3.08,2.16,5.23,2.16,1.6,0,3.07-.41,4.41-1.22,1.36-.81,2.16-2.18,2.38-4.09v-1.22h-7.17v-3.48h10.86Z"/>
+      <path class="cls-1" d="m265.24,7.78c.7,0,1.32.07,1.86.22v3.5c-.6-.16-1.19-.23-1.77-.23-1.33,0-2.37.41-3.11,1.24-.74.83-1.11,1.98-1.11,3.46v7.81h-3.84v-15.78h3.52l.22,1.86c.31-.67.85-1.18,1.61-1.54.76-.36,1.64-.54,2.62-.54Z"/>
+      <path class="cls-1" d="m283.62,17.28h-12.09c.12,1.19.57,2.09,1.34,2.72.77.62,1.75.94,2.94.94,1.93,0,3.28-.8,4.05-2.41l3.16,1.25c-.59,1.39-1.53,2.47-2.8,3.25-1.28.78-2.74,1.17-4.4,1.17-2.33,0-4.23-.76-5.68-2.29-1.45-1.53-2.18-3.53-2.18-6.01s.73-4.49,2.2-6.05c1.46-1.55,3.38-2.33,5.74-2.33s4.19.77,5.61,2.3c1.42,1.53,2.12,3.55,2.12,6.05v1.41Zm-12.03-2.66h8.19c-.07-1.28-.46-2.26-1.16-2.93s-1.65-1.01-2.84-1.01-2.14.34-2.88,1.02c-.74.68-1.18,1.65-1.31,2.91Z"/>
+      <path class="cls-1" d="m301.21,17.28h-12.09c.12,1.19.57,2.09,1.34,2.72.77.62,1.75.94,2.94.94,1.93,0,3.28-.8,4.05-2.41l3.16,1.25c-.59,1.39-1.53,2.47-2.8,3.25-1.28.78-2.74,1.17-4.4,1.17-2.33,0-4.23-.76-5.68-2.29-1.45-1.53-2.18-3.53-2.18-6.01s.73-4.49,2.2-6.05c1.46-1.55,3.38-2.33,5.74-2.33s4.19.77,5.61,2.3c1.42,1.53,2.12,3.55,2.12,6.05v1.41Zm-12.03-2.66h8.19c-.07-1.28-.46-2.26-1.16-2.93s-1.65-1.01-2.84-1.01-2.14.34-2.88,1.02c-.74.68-1.18,1.65-1.31,2.91Z"/>
+      <path class="cls-1" d="m318.79,14.05v9.73h-3.77v-8.92c0-1.5-.35-2.53-1.06-3.08-.68-.55-1.47-.83-2.38-.83-1.09,0-2.01.35-2.73,1.05-.73.7-1.09,1.69-1.09,2.98v8.8h-3.78v-15.78h3.55l.12,1.7c.45-.67,1.1-1.2,1.95-1.59.85-.39,1.79-.59,2.8-.59,2.04,0,3.62.57,4.73,1.7,1.11,1.13,1.66,2.74,1.66,4.82Z"/>
+    </g>
+  </g>
+</svg>

source/images/green/arrow-faq.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="63px" height="63px" viewBox="0 0 63 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Combined Shape</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M35,-2.1431319e-16 L35,28 L63,28 L63,35 L35,35 L35,63 L28,63 L28,35 L0,35 L0,28 L28,28 L28,2.1431319e-16 L35,-2.1431319e-16 Z" id="Combined-Shape" fill="#0A1953"></path>
+    </g>
+</svg>

source/images/green/cta-arrow-white.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="24" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 10.5C1.17157 10.5 0.5 11.1716 0.5 12C0.5 12.8284 1.17157 13.5 2 13.5L2 10.5ZM33.0607 13.0607C33.6464 12.4749 33.6464 11.5251 33.0607 10.9393L23.5147 1.3934C22.9289 0.807614 21.9792 0.807614 21.3934 1.3934C20.8076 1.97919 20.8076 2.92893 21.3934 3.51472L29.8787 12L21.3934 20.4853C20.8076 21.0711 20.8076 22.0208 21.3934 22.6066C21.9792 23.1924 22.9289 23.1924 23.5147 22.6066L33.0607 13.0607ZM2 13.5L32 13.5L32 10.5L2 10.5L2 13.5Z" fill="white"/>
+</svg>

source/images/green/diagram-migration-alexa.svg

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 320">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+
+      .cls-3 {
+        fill: #01caff;
+      }
+
+      .cls-4 {
+        fill: #fdffff;
+      }
+
+      .cls-5 {
+        fill: #7dddf6;
+      }
+
+      .cls-6 {
+        fill: #86eefe;
+      }
+
+      .cls-7 {
+        fill: #d4feff;
+      }
+
+      .cls-8 {
+        fill: #15c1f2;
+      }
+
+      .cls-9 {
+        fill: #3ec2e2;
+      }
+
+      .cls-10 {
+        fill: #77ecff;
+      }
+
+      .cls-11 {
+        fill: #18bcf2;
+        stroke-width: 4px;
+      }
+
+      .cls-11, .cls-12 {
+        stroke: #f2f4f9;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-12 {
+        fill: none;
+        stroke-width: 8px;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0" y1="0" x2="320" y2="320" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#46c9f5"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <rect class="cls-1" width="320" height="320"/>
+      <g>
+        <path class="cls-2" d="m253.17,157.17l-26.34-26.34c-1.56-1.56-4.1-1.56-5.66,0l-26.34,26.34c-1.56,1.56-2.83,4.63-2.83,6.83v24c0,2.2,1.8,4,4,4h24.61l-10.83-10.83c-.56.19-1.15.3-1.77.3-3.01,0-5.47-2.45-5.47-5.47s2.45-5.47,5.47-5.47,5.47,2.45,5.47,5.47c0,.62-.11,1.22-.3,1.77l8.43,8.43v-30.9c-1.81-.89-3.07-2.75-3.07-4.9,0-3.01,2.45-5.47,5.47-5.47s5.47,2.45,5.47,5.47c0,2.15-1.25,4.01-3.07,4.9v21.67l8.39-8.39c-.17-.52-.26-1.08-.26-1.65,0-3.01,2.45-5.47,5.47-5.47s5.47,2.45,5.47,5.47-2.45,5.47-5.47,5.47c-.67,0-1.3-.13-1.89-.34l-11.71,11.71v8.24h25.6c2.2,0,4-1.8,4-4v-24c0-2.2-1.27-5.27-2.83-6.83Z"/>
+        <g id="_9q14xt" data-name="9q14xt">
+          <g>
+            <path class="cls-3" d="m64,128h64v64h-64v-64Zm29.63,53.11c.17,0,.33,0,.5-.01.2.01.41.03.61.04.09.03.17.06.26.09,4.96-.29,9.73-.95,13.71-4.23,3.43-2.82,6.48-6.44,7.55-10.82,1.1-4.49,1.31-8.91-.24-13.35-1.38-3.95-4.28-7.54-7.6-10.03-6.56-4.91-16.06-5.4-23.04-1.14-7.52,4.59-11.95,13.04-10.38,21.91.77,4.34,2.87,7.94,5.76,11.22,2.85,3.22,6.85,4.8,10.85,6.05.13,0,.26,0,.39,0,.04,0,.07.02.11.02.05,0,.1.02.16.03.07.01.14.02.22.03.17.01.34.03.51.04.11.03.23.06.34.09.1.01.19.02.29.03Z"/>
+            <path class="cls-4" d="m91.61,180.85c-3.99-1.25-8-2.84-10.85-6.05-2.9-3.28-4.99-6.88-5.76-11.22-1.57-8.87,2.86-17.32,10.38-21.91,6.98-4.26,16.48-3.77,23.04,1.14,3.32,2.49,6.22,6.08,7.6,10.03,1.55,4.43,1.34,8.85.24,13.35-1.07,4.38-4.12,8-7.55,10.82-3.98,3.27-8.75,3.94-13.71,4.23-.09-.03-.17-.06-.26-.09-.2-.01-.41-.03-.61-.04,0-.19,0-.39,0-.58,3.96-1.57,7.72-3.57,10.66-6.74,3.14-3.39,4.52-7.09,5.47-11.52.03-.34.06-.67.1-1.01.91-7.82-5.37-14.9-13.07-15.6-3.74-.34-7.64.82-10.54,3.22-2.72,2.25-5.21,6.26-5.1,9.89,0,.29,0,.58,0,.87,0,.25,0,.5,0,.75,0,.29,0,.58,0,.87.26,3.36,1.75,6.72,4.16,9.12,2.16,2.14,6.15,2.63,6.83,5.87.01.05.02.1.03.16,0,.57.01,1.14.02,1.7,0,.68,0,1.37,0,2.05,0,.11,0,.22,0,.32-.07.16-.13.32-.2.47-.07-.01-.14-.02-.22-.03-.05,0-.1-.02-.16-.03-.04,0-.07-.01-.11-.02-.13,0-.26,0-.39,0Z"/>
+            <path class="cls-7" d="m94.13,180.52c0,.19,0,.39,0,.58-.17,0-.33,0-.5.01-.1-.01-.19-.02-.29-.03-.11-.03-.23-.06-.34-.09,0-.04,0-.07,0-.11.38-.12.75-.24,1.13-.36Z"/>
+            <path class="cls-5" d="m93,180.88s0,.07,0,.11c-.17-.01-.34-.03-.51-.04.07-.16.13-.32.2-.47.1.14.21.27.31.41Z"/>
+            <path class="cls-7" d="m94.75,181.14c.09.03.17.06.26.09-.09-.03-.17-.06-.26-.09Z"/>
+            <path class="cls-6" d="m91.61,180.85c.13,0,.26,0,.39,0-.13,0-.26,0-.39,0Z"/>
+            <path class="cls-10" d="m93.34,181.08c.1.01.19.02.29.03-.1-.01-.19-.02-.29-.03Z"/>
+            <path class="cls-5" d="m92.12,180.89c.05,0,.1.02.16.03-.05,0-.1-.02-.16-.03Z"/>
+            <path class="cls-3" d="m93,180.88c-.1-.14-.21-.27-.31-.41,0-.11,0-.22,0-.32,0-.68,0-1.37,0-2.05,0-.57-.01-1.14-.02-1.7-.01-.05-.02-.1-.03-.16-.67-3.25-4.67-3.74-6.83-5.87-2.42-2.4-3.9-5.76-4.16-9.12,0-.29,0-.58,0-.87,0-.25,0-.5,0-.75,0-.29,0-.58,0-.87-.11-3.63,2.38-7.64,5.1-9.89,2.9-2.4,6.81-3.56,10.54-3.22,7.69.7,13.98,7.78,13.07,15.6-.03.34-.06.67-.1,1.01-.95,4.43-2.33,8.13-5.47,11.52-2.94,3.17-6.7,5.17-10.66,6.74-.38.12-.75.24-1.13.36Z"/>
+            <path class="cls-5" d="m92.69,178.1c0,.68,0,1.37,0,2.05,0-.68,0-1.37,0-2.05Z"/>
+            <path class="cls-8" d="m81.64,158.75c0,.29,0,.58,0,.87,0-.29,0-.58,0-.87Z"/>
+            <path class="cls-8" d="m81.65,160.38v.87c0-.29,0-.58,0-.87Z"/>
+            <path class="cls-9" d="m110.26,162.25c.03-.34.06-.67.1-1.01-.03.34-.06.67-.1,1.01Z"/>
+            <path class="cls-5" d="m92.64,176.24c.01.05.02.1.03.16-.01-.05-.02-.1-.03-.16Z"/>
+          </g>
+        </g>
+      </g>
+      <g>
+        <path class="cls-12" d="m110,203c1,9,11.29,17.86,19.27,17.86,11.62,0,11.62-12,23.24-12,11.62,0,11.62,12,23.24,12s11.62-12,23.24-12"/>
+        <polygon class="cls-11" points="198.52 226.86 194.52 226.72 195.21 207.01 175.5 207.76 175.36 203.76 199.36 202.85 198.52 226.86"/>
+      </g>
+    </g>
+  </g>
+</svg>

source/images/green/ha-green-inthebox-booklet.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3 {
+        fill: none;
+      }
+
+      .cls-2 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: #14cc9e;
+      }
+
+      .cls-3 {
+        stroke-linejoin: round;
+        stroke-width: 4px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <g>
+        <rect class="cls-3" x="2.11" y="20.31" width="56.69" height="56.69"/>
+        <polyline class="cls-3" points="2.11 20.31 47.47 8.97 47.47 20.31"/>
+        <line class="cls-2" x1="10.62" y1="28.81" x2="44.63" y2="28.81"/>
+        <line class="cls-2" x1="10.62" y1="34.48" x2="44.63" y2="34.48"/>
+      </g>
+      <rect class="cls-1" width="80" height="80"/>
+    </g>
+  </g>
+</svg>

source/images/green/ha-green-inthebox-ethernet.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80.5">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        fill: #14cc9e;
+      }
+
+      .cls-2 {
+        stroke-width: 4px;
+      }
+
+      .cls-2, .cls-3 {
+        stroke: #14cc9e;
+        stroke-miterlimit: 10;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <g>
+        <g>
+          <path class="cls-2" d="m5.98,23.61v47.89c0,3.12,2.55,5.67,5.67,5.67s5.67-2.55,5.67-5.67V26.14c0-3.12,2.55-5.67,5.67-5.67h0c3.12,0,5.67,2.55,5.67,5.67v45.35c0,3.12,2.55,5.67,5.67,5.67s5.67-2.55,5.67-5.67V26.14c0-3.12,2.55-5.67,5.67-5.67h0c3.12,0,5.67,2.55,5.67,5.67v45.35c0,3.12,2.55,5.67,5.67,5.67s5.67-2.55,5.67-5.67V26.14c0-3.12,2.55-5.67,5.67-5.67h0c3.12,0,5.67,2.55,5.67,5.67v47.89"/>
+          <rect class="cls-4" x="2.68" y="20.47" width="6.6" height="6.6"/>
+          <rect class="cls-4" x="70.71" y="70.56" width="6.6" height="6.6"/>
+        </g>
+        <rect class="cls-3" x="3.15" y="17.64" width="5.67" height="5.67"/>
+        <rect class="cls-3" x="71.18" y="74.33" width="5.67" height="5.67"/>
+      </g>
+      <rect class="cls-1" width="80" height="80"/>
+    </g>
+  </g>
+</svg>

source/images/green/ha-green-inthebox-hub.svg

@@ -0,0 +1,246 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #14cc9e;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <g>
+        <circle class="cls-1" cx="17.32" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="65.51" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="62.68" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="59.84" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="57.01" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="54.17" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="51.34" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="48.5" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="45.67" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="42.83" r=".71"/>
+        <circle class="cls-1" cx="14.49" cy="40" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="40" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="40" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="40" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="40" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="40" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="40" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="40" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="40" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="40" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="40" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="40" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="40" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="40" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="40" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="40" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="40" r=".71"/>
+        <circle class="cls-1" cx="65.51" cy="40" r=".71"/>
+        <circle class="cls-1" cx="17.32" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="62.68" cy="37.17" r=".71"/>
+        <circle class="cls-1" cx="20.16" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="34.33" r=".71"/>
+        <path class="cls-1" d="m25.83,52.76c-.78,0-1.42.64-1.42,1.42s.64,1.42,1.42,1.42,1.42-.64,1.42-1.42-.64-1.42-1.42-1.42Zm0,2.13c-.39,0-.71-.32-.71-.71s.32-.71.71-.71.71.32.71.71-.32.71-.71.71Z"/>
+        <path class="cls-1" d="m54.17,47.09c-.78,0-1.42.64-1.42,1.42s.64,1.42,1.42,1.42,1.42-.64,1.42-1.42-.64-1.42-1.42-1.42Zm0,2.13c-.39,0-.71-.32-.71-.71s.32-.71.71-.71.71.32.71.71-.32.71-.71.71Z"/>
+        <path class="cls-1" d="m40,32.91c-.78,0-1.42.64-1.42,1.42s.64,1.42,1.42,1.42,1.42-.64,1.42-1.42-.64-1.42-1.42-1.42Zm0,2.13c-.39,0-.71-.32-.71-.71s.32-.71.71-.71.71.32.71.71-.32.71-.71.71Z"/>
+        <circle class="cls-1" cx="45.67" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="59.84" cy="34.33" r=".71"/>
+        <circle class="cls-1" cx="22.99" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="57.01" cy="31.5" r=".71"/>
+        <circle class="cls-1" cx="25.83" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="40" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="54.17" cy="28.66" r=".71"/>
+        <circle class="cls-1" cx="28.66" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="40" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="51.34" cy="25.83" r=".71"/>
+        <circle class="cls-1" cx="31.5" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="40" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="48.5" cy="22.99" r=".71"/>
+        <circle class="cls-1" cx="34.33" cy="20.16" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="20.16" r=".71"/>
+        <circle class="cls-1" cx="40" cy="20.16" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="20.16" r=".71"/>
+        <circle class="cls-1" cx="45.67" cy="20.16" r=".71"/>
+        <circle class="cls-1" cx="37.17" cy="17.32" r=".71"/>
+        <circle class="cls-1" cx="40" cy="17.32" r=".71"/>
+        <circle class="cls-1" cx="42.83" cy="17.32" r=".71"/>
+        <circle class="cls-1" cx="40" cy="14.49" r=".71"/>
+      </g>
+      <path class="cls-1" d="m72,5c1.65,0,3,1.35,3,3v64c0,1.65-1.35,3-3,3H8c-1.65,0-3-1.35-3-3V8c0-1.65,1.35-3,3-3h64m0-5H8C3.58,0,0,3.58,0,8v64c0,4.42,3.58,8,8,8h64c4.42,0,8-3.58,8-8V8c0-4.42-3.58-8-8-8h0Z"/>
+    </g>
+  </g>
+</svg>

source/images/green/ha-green-inthebox-power.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.28 80">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: none;
+      }
+
+      .cls-3 {
+        fill: #14cc9e;
+      }
+
+      .cls-2 {
+        stroke: #14cc9e;
+        stroke-miterlimit: 10;
+        stroke-width: 4px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <g>
+        <g>
+          <path class="cls-2" d="m69.8,65.95c-1.09,7-6.05,11.05-14.75,11.05-15.66,0-24.7-7.37-24.7-23.02,0-7.59-2.26-10.21-7.95-10.21-5.08,0-9.06,3.8-9.06,10.55,0,6.26,5.08,11.34,11.34,11.34,9.39,0,17.01-7.61,17.01-17.01s-7.61-17.01-17.01-17.01c-12.52,0-22.68,10.15-22.68,22.68s10.15,22.68,22.68,22.68c15.66,0,28.35-12.69,28.35-28.35s-12.69-28.35-28.35-28.35h-2.55"/>
+          <rect class="cls-3" x="66.47" y="62.82" width="6.6" height="6.6" transform="translate(-1.67 130.42) rotate(-85.45)"/>
+          <rect class="cls-3" x="18.99" y="17.01" width="6.6" height="6.6"/>
+        </g>
+        <rect class="cls-3" x="61.56" y="34.48" width="17.01" height="28.35" rx="5.67" ry="5.67"/>
+        <path class="cls-3" d="m18.99,18.89v2.83h-5.67v-2.83h5.67m1-1h-7.67v4.83h7.67v-4.83h0Z"/>
+      </g>
+      <rect class="cls-1" x=".28" width="80" height="80"/>
+    </g>
+  </g>
+</svg>

source/images/green/icons-apps-android.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="7.03" y1="7.03" x2="120.97" y2="120.97" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#98d14f"/>
+      <stop offset="1" stop-color="#8ac43f"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <rect class="cls-1" width="128" height="128" rx="24" ry="24"/>
+      <path class="cls-2" d="m40,80.26v-3.45c0-4.14.94-7.87,2.83-11.22,1.89-3.34,4.38-6.13,7.46-8.36l-6.41-6.41,3.08-3.08,7.18,7.22c1.45-.7,3.02-1.23,4.72-1.58,1.69-.35,3.4-.53,5.13-.53s3.43.18,5.11.53,3.24.88,4.7,1.58l7.22-7.22,3.16,3.11-6.49,6.38c3.09,2.23,5.57,5.03,7.46,8.39,1.89,3.36,2.83,7.1,2.83,11.21v3.43h-48Zm34.25-6.89c.95,0,1.76-.32,2.44-.97.68-.64,1.01-1.44,1.01-2.39s-.33-1.76-1-2.44-1.47-1.01-2.42-1.01-1.75.33-2.41,1c-.65.67-.98,1.47-.98,2.42s.32,1.75.97,2.41c.64.65,1.44.98,2.39.98Zm-20.54,0c.97,0,1.79-.32,2.46-.97.68-.64,1.01-1.44,1.01-2.39s-.33-1.76-1-2.44-1.48-1.01-2.45-1.01-1.78.33-2.45,1-1,1.47-1,2.42.33,1.75.98,2.41c.65.65,1.47.98,2.43.98Z"/>
+    </g>
+  </g>
+</svg>

source/images/green/icons-apps-phonewatch.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="7.03" y1="7.03" x2="120.97" y2="120.97" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#43d6b1"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <rect class="cls-1" width="128" height="128" rx="24" ry="24"/>
+      <path class="cls-2" d="m46.27,48.97h16.85v-1.5h-16.85v1.5Zm0,36.3c-1.32,0-2.44-.46-3.36-1.37-.93-.92-1.39-2.02-1.39-3.33v-33.1c0-1.32.46-2.44,1.39-3.36.93-.93,2.05-1.39,3.36-1.39h16.85c1.32,0,2.44.46,3.36,1.39.93.93,1.39,2.05,1.39,3.36v8.55c-.99.51-1.89,1.12-2.68,1.83-.79.71-1.48,1.5-2.07,2.37v-8.25h-16.85v24.08h14.85c.23.54.49,1.07.78,1.57s.66.98,1.13,1.43h-16.75v1.52h16.85v-1.2c.53.77,1.12,1.46,1.76,2.08.64.62,1.35,1.18,2.14,1.67-.4.63-.95,1.15-1.65,1.55s-1.45.6-2.25.6h-16.85Zm28.67-8.35c1.98,0,3.68-.69,5.08-2.06,1.4-1.38,2.1-3.06,2.1-5.04s-.69-3.67-2.08-5.06c-1.39-1.39-3.08-2.08-5.08-2.08s-3.68.69-5.07,2.07c-1.38,1.38-2.08,3.07-2.08,5.05s.69,3.67,2.07,5.05c1.38,1.38,3.07,2.08,5.05,2.08Zm-4.07,8.35v-4.75c-2.2-.83-3.98-2.21-5.35-4.12-1.37-1.91-2.05-4.1-2.05-6.57s.68-4.72,2.05-6.63c1.37-1.92,3.14-3.29,5.33-4.13v-4.75h8.22v4.75c2.17.85,3.95,2.22,5.33,4.13,1.38,1.9,2.07,4.1,2.07,6.59s-.69,4.69-2.08,6.6c-1.39,1.91-3.17,3.29-5.35,4.13v4.75h-8.18Zm-24.25-6.2v1.5-1.5Zm-.35-30.1v-1.5,1.5Z"/>
+    </g>
+  </g>
+</svg>

source/images/green/icons-apps-web.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="7.03" y1="7.03" x2="120.97" y2="120.97" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#46c9f5"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <rect class="cls-1" width="128" height="128" rx="24" ry="24"/>
+      <path class="cls-2" d="m47.42,81.28c-1.3,0-2.41-.46-3.33-1.37s-1.37-2.02-1.37-3.33v-25.1c0-1.32.46-2.44,1.37-3.36.92-.93,2.02-1.39,3.33-1.39h33.1c1.32,0,2.44.46,3.36,1.39.93.93,1.39,2.05,1.39,3.36v25.1c0,1.3-.46,2.41-1.39,3.33-.93.92-2.05,1.37-3.36,1.37h-33.1Zm0-4.7h22.15v-8.15h-22.15v8.15Zm25.15,0h7.95v-19.3h-7.95v19.3Zm-25.15-11.15h22.15v-8.15h-22.15v8.15Z"/>
+    </g>
+  </g>
+</svg>

source/images/green/icons-devices-blinds.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#98d14f"/>
+      <stop offset="1" stop-color="#8ac43f"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m42.3,83.7v-4.75h4v-34.65h35.4v34.65h4v4.75h-43.4Zm8.75-30.15h17.45v-4.5h-17.45v4.5Zm0,8.45h17.45v-4.5h-17.45v4.5Zm0,16.95h25.9v-12.95h-4.5v3.8c.4.27.72.63.95,1.08s.35.95.35,1.49c0,.92-.31,1.71-.93,2.36-.62.65-1.4.98-2.33.98-.99,0-1.82-.33-2.49-.99-.67-.66-1.01-1.45-1.01-2.39,0-.58.13-1.14.4-1.65s.63-.91,1.1-1.18v-3.5h-17.45v12.95Zm21.4-25.4h4.5v-4.5h-4.5v4.5Zm0,8.45h4.5v-4.5h-4.5v4.5Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-bulb.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#46c9f5"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m63.97,86.73c-1.23,0-2.29-.48-3.17-1.43s-1.33-2.13-1.33-3.53h9c0,1.4-.44,2.58-1.33,3.53-.88.95-1.94,1.43-3.18,1.43Zm-8.45-8.35v-3.6h16.9v3.6h-16.9Zm.25-6.95c-2.4-1.57-4.34-3.53-5.83-5.89-1.48-2.36-2.23-5.03-2.23-8.01,0-4.39,1.6-8.2,4.81-11.42s7.02-4.83,11.43-4.83,8.23,1.61,11.46,4.83,4.85,7.03,4.85,11.42c0,2.97-.73,5.63-2.2,8s-3.43,4.33-5.9,5.9h-16.4Zm1.67-4.7h13.13c1.53-1.03,2.74-2.34,3.62-3.94.88-1.6,1.33-3.35,1.33-5.25,0-3.17-1.13-5.89-3.4-8.14s-4.98-3.38-8.15-3.38-5.88,1.13-8.15,3.38-3.4,4.96-3.4,8.14c0,1.89.45,3.64,1.35,5.24s2.12,2.92,3.67,3.95Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-chip.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#98d14f"/>
+      <stop offset="1" stop-color="#8ac43f"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m51.62,70.35h4.7v-12.7h-4.7v12.7Zm10,0h4.7v-12.7h-4.7v12.7Zm10,0h4.7v-12.7h-4.7v12.7Zm-24.2,4.2h33.1v-21.1h-33.1v21.1Zm0,0v-21.1,21.1Zm2.2,10.45v-5.75h-2.2c-1.3,0-2.41-.46-3.33-1.37-.92-.92-1.37-2.02-1.37-3.33v-21.1c0-1.32.46-2.44,1.37-3.36.92-.93,2.02-1.39,3.33-1.39h2.2v-5.7h4.7v5.7h7.3v-5.7h4.7v5.7h7.3v-5.7h4.7v5.7h2.2c1.32,0,2.44.46,3.36,1.39.93.93,1.39,2.05,1.39,3.36v21.1c0,1.3-.46,2.41-1.39,3.33-.93.92-2.05,1.37-3.36,1.37h-2.2v5.75h-4.7v-5.75h-7.3v5.75h-4.7v-5.75h-7.3v5.75h-4.7Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-climate.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#46c9f5"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m63.97,85.28c-3.13,0-5.78-1.09-7.97-3.27s-3.28-4.85-3.28-8c0-1.75.38-3.43,1.13-5.03s1.89-2.82,3.43-3.65v-15.85c0-1.88.64-3.47,1.93-4.78,1.29-1.31,2.87-1.97,4.75-1.97s3.47.66,4.79,1.97c1.32,1.31,1.98,2.91,1.98,4.78v15.85c1.5.84,2.63,2.06,3.4,3.66.77,1.6,1.15,3.28,1.15,5.04,0,3.14-1.1,5.8-3.31,7.98-2.2,2.18-4.87,3.27-8,3.27Zm-1.99-22.9h4v-2.55h-2v-2.35h2v-3.95h-2v-2.33h2v-1.73c0-.56-.19-1.03-.58-1.42-.39-.39-.86-.58-1.43-.58s-1.04.19-1.42.58c-.38.39-.58.86-.58,1.42v12.9Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-energy.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#43d6b1"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m64.35,82.5c-2.15,0-4.21-.36-6.16-1.08-1.96-.72-3.74-1.71-5.34-2.98l-4.75,4.75-3.3-3.3,4.75-4.75c-1.27-1.6-2.26-3.38-2.98-5.34-.72-1.96-1.08-4.01-1.08-6.16,0-5.24,1.84-9.69,5.52-13.35,3.68-3.67,8.12-5.5,13.33-5.5h18.85v18.85c0,5.2-1.83,9.64-5.5,13.33-3.67,3.68-8.12,5.52-13.35,5.52Zm.02-4.7c3.93,0,7.27-1.38,10.02-4.13,2.74-2.75,4.12-6.09,4.12-10.02v-14.15h-14.15c-3.93,0-7.27,1.37-10.02,4.12-2.75,2.75-4.13,6.09-4.13,10.01s1.38,7.27,4.13,10.03c2.75,2.76,6.1,4.14,10.04,4.14Zm-2.87-3.69l11.11-9.91c.33-.33.42-.72.28-1.17-.15-.45-.46-.71-.93-.78l-8.65-.85,5.2-7.12c.1-.2.15-.39.15-.59s-.08-.38-.25-.54c-.17-.16-.37-.25-.6-.25s-.43.08-.59.24l-11.07,9.92c-.36.32-.46.71-.31,1.16s.48.69.98.73l8.7.9-5.25,7.12c-.13.2-.19.39-.17.59.02.2.11.36.28.49.13.2.32.3.55.3s.43-.08.6-.24Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-lock.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#43d6b1"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m63.98,87.43c-4.3,0-7.95-1.49-10.93-4.48-2.98-2.99-4.48-6.63-4.48-10.92v-16c0-4.3,1.5-7.95,4.49-10.95,2.99-3,6.63-4.5,10.93-4.5s7.94,1.5,10.94,4.5c3,3,4.5,6.65,4.5,10.95v16c0,4.29-1.5,7.93-4.5,10.92-3,2.99-6.65,4.48-10.95,4.48Zm.01-4.7c2.99,0,5.52-1.04,7.58-3.11,2.07-2.07,3.1-4.6,3.1-7.59v-16c0-2.98-1.04-5.51-3.12-7.59-2.08-2.07-4.61-3.11-7.6-3.11s-5.52,1.04-7.58,3.11c-2.07,2.07-3.1,4.6-3.1,7.59v16c0,2.98,1.04,5.51,3.12,7.59,2.08,2.07,4.61,3.11,7.6,3.11Zm-.01-27.2c.7,0,1.29-.24,1.77-.73.48-.49.73-1.08.73-1.78s-.24-1.29-.73-1.77c-.49-.48-1.08-.73-1.78-.73s-1.29.24-1.77.73c-.48.49-.73,1.08-.73,1.78s.24,1.29.73,1.77c.49.48,1.08.73,1.78.73Zm-6,8c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm6,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm6,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm-12,6c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm12,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm-6,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm-6,6c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm12,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Zm-6,0c.43,0,.78-.14,1.07-.43.28-.29.43-.65.43-1.08s-.14-.78-.43-1.07c-.29-.28-.65-.43-1.08-.43s-.78.14-1.07.43c-.28.29-.43.65-.43,1.08s.14.78.43,1.07c.29.28.65.43,1.08.43Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-plug.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#46c9f5"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m76.88,70v-3.55h5.65c.51,0,.94.16,1.28.48.34.32.51.73.51,1.25,0,.48-.17.91-.51,1.27-.34.37-.76.55-1.28.55h-5.67Zm0,8.55v-3.55h5.65c.51,0,.94.16,1.28.49.34.33.51.76.51,1.28,0,.48-.17.9-.51,1.25-.34.35-.76.53-1.28.53h-5.67Zm-8.6,2.3c-1.06,0-1.98-.38-2.77-1.13-.79-.75-1.28-1.71-1.48-2.88h-4.85v-8.7h4.85c.2-1.17.69-2.13,1.48-2.88.79-.75,1.71-1.13,2.77-1.13h7.1v16.7h-7.1Zm-15.95-6c-2.48,0-4.54-.81-6.19-2.42-1.64-1.62-2.46-3.67-2.46-6.18s.82-4.56,2.46-6.18c1.64-1.62,3.7-2.43,6.19-2.43h3.25c.87,0,1.56-.27,2.08-.8.52-.54.77-1.24.77-2.1s-.26-1.56-.77-2.1c-.52-.53-1.21-.8-2.08-.8h-7.5c-.63,0-1.19-.23-1.67-.7-.49-.47-.73-1.02-.73-1.65,0-.67.24-1.23.73-1.68.49-.45,1.04-.68,1.67-.68h7.5c2.15,0,3.96.72,5.41,2.17,1.46,1.45,2.19,3.26,2.19,5.43s-.73,3.98-2.19,5.43c-1.46,1.45-3.26,2.18-5.41,2.18h-3.25c-1.17,0-2.11.35-2.83,1.05-.72.7-1.08,1.65-1.08,2.85s.36,2.15,1.08,2.85,1.66,1.05,2.83,1.05h5.35v4.7h-5.35Z"/>
+  </g>
+</svg>

source/images/green/icons-devices-speaker.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-2 {
+        fill: #f2f4f9;
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="18.75" y1="18.75" x2="109.25" y2="109.25" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#43d6b1"/>
+      <stop offset="1" stop-color="#14cc9e"/>
+      <stop offset="1" stop-color="#18bcf2"/>
+      <stop offset="1" stop-color="#231f20"/>
+    </linearGradient>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <circle class="cls-1" cx="64" cy="64" r="64"/>
+    <path class="cls-2" d="m74.53,85.28h-21.1c-1.29,0-2.4-.46-3.32-1.38-.92-.92-1.38-2.03-1.38-3.32v-33.1c0-1.31.46-2.42,1.38-3.35.92-.93,2.03-1.4,3.32-1.4h21.1c1.31,0,2.42.47,3.35,1.4s1.4,2.05,1.4,3.35v33.1c0,1.29-.47,2.4-1.4,3.32-.93.92-2.05,1.38-3.35,1.38Zm0-4.7v-33.1h-21.1v33.1h21.1Zm-10.5-22.3c1.07,0,1.97-.37,2.7-1.1s1.1-1.63,1.1-2.7-.37-1.97-1.1-2.7-1.63-1.1-2.7-1.1-1.97.37-2.7,1.1-1.1,1.63-1.1,2.7.37,1.97,1.1,2.7,1.63,1.1,2.7,1.1Zm-.05,19.95c2.3,0,4.24-.79,5.83-2.38,1.58-1.58,2.38-3.53,2.38-5.83s-.79-4.24-2.38-5.83-3.53-2.38-5.83-2.38-4.24.79-5.83,2.38-2.38,3.53-2.38,5.83.79,4.24,2.38,5.83c1.58,1.58,3.53,2.38,5.83,2.38Zm0-3c-1.43,0-2.65-.51-3.67-1.53s-1.53-2.24-1.53-3.68.51-2.65,1.53-3.67,2.24-1.53,3.68-1.53,2.65.51,3.67,1.53,1.53,2.24,1.53,3.68-.51,2.65-1.53,3.67c-1.02,1.02-2.24,1.53-3.68,1.53Zm-10.55-27.75v33.1-33.1Z"/>
+  </g>
+</svg>

source/images/green/icons-integrations-bluetooth.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #18bcf2;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <circle class="cls-2" cx="64" cy="64" r="64"/>
+      <g id="_6o0rvm.tif" data-name="6o0rvm.tif">
+        <g>
+          <path class="cls-1" d="m63.22,87.96s-.01-.08-.02-.12c.49-.02.97-.03,1.46-.05.11.02.23.03.34.05.09.02.19.03.28.05,0,.02,0,.04,0,.06-.56,0-1.12,0-1.68.01-.1,0-.19.03-.29.05h-.11s.01-.03.01-.04Z"/>
+          <path class="cls-1" d="m63.32,88c.1-.02.19-.05.29-.05.56,0,1.12,0,1.68-.01.02.02.04.04.05.06h-2.02Z"/>
+          <path class="cls-1" d="m65.34,88s-.04-.04-.05-.06c0-.02,0-.04,0-.06.06,0,.11,0,.17.01,0,.04,0,.07,0,.11h-.11Z"/>
+          <path class="cls-1" d="m63.22,87.96s0,.03-.01.04h-.06s.04-.03.07-.04Z"/>
+          <path class="cls-1" d="m65.46,87.89c-.06,0-.11,0-.17-.01-.09-.02-.19-.03-.28-.05-.11-.02-.23-.03-.34-.05-.49.02-.97.03-1.46.05-.02-.37-.04-.74-.05-1.1,0-.12,0-.24.01-.36.01-.1.04-.2.04-.3,0-4.84,0-9.68,0-14.51,0-.1-.03-.2-.04-.3,0-.06,0-.11,0-.17,0-.04,0-.08,0-.11,0-.07,0-.15,0-.22,0,0,.02-.01.02-.02,0-.01-.01-.03-.02-.04,0-.04,0-.07,0-.11,0-.04,0-.08,0-.11v-.58c-.12.04-.22.04-.27.09-1.02,1.03-2.02,2.08-3.04,3.1-2.47,2.49-4.95,4.96-7.42,7.45-.18.18-.29.2-.47.01-.99-1.01-1.98-2.01-2.98-3-.14-.14-.14-.21,0-.36,4.31-4.31,8.62-8.63,12.92-12.94.08-.08.16-.18.28-.31-.46-.45-.92-.88-1.36-1.33-3.87-3.88-7.74-7.75-11.61-11.63-.38-.38-.38-.38,0-.77.83-.84,1.68-1.65,2.49-2.51.6-.64.52-.48,1,0,1.91,1.9,3.82,3.81,5.72,5.71.91.91,1.81,1.83,2.71,2.74.6.6,1.2,1.2,1.8,1.8.05.05.11.09.22.18,0-.44,0-.81,0-1.18,0,0,.02-.01.02-.02,0-.01-.01-.03-.02-.04,0-.06,0-.11,0-.17.01-.1.04-.2.04-.3,0-4.95,0-9.9,0-14.85,0-.1-.03-.2-.04-.3,0-.04,0-.07,0-.11,0,0,.02-.01.02-.02,0-.01-.01-.03-.02-.04v-1.05c.11,0,.22-.02.32-.03.19,0,.38,0,.57-.01.41,0,.82-.01,1.23.02.17.01.37.09.49.2,2.21,2.19,4.42,4.38,6.62,6.58.79.79,1.56,1.6,2.35,2.39,1.17,1.17,2.34,2.33,3.51,3.49.22.22.43.43.65.65.29.37.28.37-.02.67-2.36,2.36-4.71,4.73-7.07,7.09-.88.89-1.78,1.76-2.67,2.65-.23.23-.21.24.03.47.65.63,1.29,1.27,1.94,1.91,2.14,2.14,4.28,4.29,6.41,6.43.49.49.97.99,1.47,1.46.19.18.12.31,0,.45-.33.34-.67.68-1,1.01-.66.66-1.31,1.33-1.96,1.99-.63.63-1.28,1.26-1.91,1.89-.56.56-1.11,1.14-1.67,1.7-.56.56-1.13,1.11-1.7,1.68-.63.63-1.26,1.28-1.89,1.91-.55.55-1.09,1.1-1.65,1.65-.46.46-.92.91-1.39,1.35-.1.1-.24.17-.36.25Zm2.68-38.54c-.06-.05-.11-.09-.17-.14v.13c0,.06,0,.11-.01.17,0,0-.02.01-.02.02,0,.01.01.03.02.04,0,.02,0,.04,0,.06,0,2.55,0,5.09,0,7.64,0,.25-.04.51-.06.85.14-.09.21-.12.26-.17.33-.33.66-.66,1-.99,1.04-1.03,2.08-2.06,3.13-3.09.13-.13.14-.21,0-.34-.35-.33-.68-.67-1.02-1.01-1.05-1.05-2.09-2.11-3.14-3.17Zm-.22,20.66s.02.04.03.06c0,.09.01.19.01.28,0,2.08,0,4.16,0,6.23,0,.55-.03,1.1-.05,1.65,0,.13.01.27.02.42,1.5-1.5,2.97-2.96,4.45-4.44-.03-.04-.06-.08-.1-.12-.99-.99-1.98-1.99-2.96-2.98-.38-.38-.76-.77-1.15-1.15-.09-.09-.22-.25-.26.05Z"/>
+          <path class="cls-1" d="m63.17,41.26c.01.1.04.2.04.3,0,4.95,0,9.9,0,14.85,0,.1-.03.2-.04.3,0-1.54-.01-3.08-.01-4.63,0-3.51,0-7.03,0-10.54,0-.09,0-.19.01-.28Z"/>
+          <path class="cls-1" d="m63.17,71.26c.01.1.04.2.04.3,0,4.84,0,9.68,0,14.51,0,.1-.03.2-.04.3,0-.44-.01-.88-.01-1.32,0-4.49,0-8.97,0-13.46,0-.11,0-.22.01-.34Z"/>
+          <path class="cls-1" d="m64.06,40c-.19,0-.38,0-.57.01.19,0,.38,0,.57-.01Z"/>
+          <path class="cls-1" d="m63.17,70.47s0,.08,0,.11c0-.04,0-.08,0-.11Z"/>
+          <path class="cls-1" d="m63.17,70.98s0,.08,0,.11c0-.04,0-.08,0-.11Z"/>
+          <path class="cls-1" d="m63.17,41.09s.01.03.02.04c0,0-.01.01-.02.02,0-.02,0-.04,0-.06Z"/>
+          <path class="cls-1" d="m63.17,56.88s.01.03.02.04c0,0-.01.01-.02.02v-.06Z"/>
+          <path class="cls-1" d="m63.17,70.7s.01.03.02.04c0,0-.01.01-.02.02,0-.02,0-.04,0-.06Z"/>
+          <path class="cls-1" d="m64.66,87.79c.11.02.23.03.34.05-.11-.02-.23-.03-.34-.05Z"/>
+          <path class="cls-1" d="m68.14,49.36c-.05,0-.11,0-.16,0,0-.04,0-.09,0-.13.06.05.11.09.17.14Z"/>
+          <path class="cls-1" d="m67.96,49.52s0,.04,0,.06c0-.01-.01-.03-.02-.04,0,0,.01-.01.02-.02Z"/>
+          <path class="cls-1" d="m67.92,70.02s.02.04.03.06c-.01-.02-.02-.04-.03-.06Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

source/images/green/icons-integrations-dlna.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #0cb14b;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer 2">
+    <g>
+      <circle class="cls-2" cx="64" cy="64" r="64"/>
+      <g id="sJzaZB.tif">
+        <g>
+          <path class="cls-1" d="m40,62.43c.06-.38.13-.75.18-1.13.19-1.62.54-3.19,1.28-4.65.44-.88,1.13-1.5,2.03-1.86.3-.12.65-.19.97-.2,1.11-.05,2.22-.07,3.33-.09,1.75-.03,3.49-.06,5.24-.06,1.66,0,3.32.02,4.98.06,1.06.03,2.14.03,3.18.19,1.16.17,2.16.78,3.02,1.59.64.61,1.26,1.23,1.92,1.82,1.38,1.24,3.06,1.75,4.83,1.47,2.44-.38,4.24-1.78,5.19-4.1.43-1.06.44-2.2.28-3.34-.32-2.19-1.57-3.71-3.47-4.67-2.37-1.2-5.26-.78-7.26,1.2-.77.76-1.57,1.5-2.42,2.18-.84.67-1.82,1-2.91,1.01-4.08.02-8.16.05-12.23.06-.77,0-1.54-.05-2.29-.16-.55-.08-.7-.45-.43-.94.15-.28.37-.53.59-.76,2.36-2.36,5.11-4.14,8.22-5.32,1.53-.58,3.13-1.02,4.72-1.4.94-.22,1.93-.24,2.9-.29,1.29-.07,2.58-.18,3.86-.09,1.55.11,3.11.3,4.62.63,3.73.82,7.12,2.4,10.11,4.8,2.81,2.26,5.01,4.99,6.37,8.34.49,1.2.87,2.45,1.13,3.71.3,1.45-.41,2.31-1.81,2.32-4.82.05-9.64.05-14.46.07-1.35,0-2.7.06-4.05.02-1.12-.03-2.25-.07-3.34-.28-1.22-.23-2.25-.93-3.14-1.81-.68-.67-1.37-1.33-2.11-1.93-.85-.71-1.86-1-2.97-1.09-1.07-.09-2.11-.03-3.1.37-1.66.67-2.78,1.92-3.5,3.54-.37.82-.58,1.68-.53,2.56.09,1.48.63,2.82,1.61,3.97.89,1.04,2.01,1.76,3.3,2.07,2.24.54,4.24-.02,5.93-1.62.6-.57,1.17-1.16,1.79-1.7,1.07-.95,2.31-1.49,3.76-1.5.96,0,1.93-.07,2.89-.08,5.06-.04,10.13-.07,15.19-.08,1.12,0,2.24.1,3.36.16.69.04,1.25.6,1.19,1.32-.06.78-.2,1.57-.42,2.32-1.91,6.59-6.36,10.91-12.43,13.76-1.89.89-3.89,1.44-5.92,1.88-.85.19-1.73.19-2.6.29-.11.01-.21.06-.31.09h-1.06c-.09-.03-.18-.09-.27-.09-.62,0-1.23,0-1.85,0-.09,0-.18.06-.27.09h-1.06c-.09-.03-.17-.08-.26-.09-1.13-.15-2.29-.18-3.38-.48-1.61-.44-3.2-.99-4.74-1.62-2.78-1.13-5.22-2.8-7.35-4.91-.18-.18-.36-.35-.51-.55-.43-.58-.17-1.19.54-1.25.87-.07,1.75-.16,2.62-.15,3.8.03,7.6.1,11.39.15,1.53.02,2.85.56,3.98,1.58.57.51,1.1,1.06,1.67,1.57.82.75,1.68,1.43,2.8,1.72.84.21,1.66.18,2.5.08,1.48-.18,2.73-.83,3.75-1.89,1.46-1.53,1.94-3.37,1.64-5.45-.33-2.28-1.62-3.83-3.66-4.8-.99-.47-2.08-.47-3.16-.49-1.04-.01-1.97.28-2.77.91-.81.63-1.56,1.33-2.29,2.05-1.37,1.35-3,2.06-4.91,2.07-4.95.02-9.9,0-14.85.02-1.15,0-2.08-.49-2.74-1.34-1.14-1.48-1.62-3.25-1.87-5.08-.05-.36-.12-.73-.18-1.09,0-1.21,0-2.41,0-3.62Z"/>
+          <path class="cls-1" d="m62.84,85.09c.09-.03.18-.09.27-.09.62,0,1.23,0,1.85,0,.09,0,.18.06.27.09h-2.38Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>