Add events to Home Page (#22927)

* Add events to Home Page

* squoosh image

* Link to Blog

* Mobile Style

* Update image size

sass/custom/_paulus.scss

@@ -186,6 +186,47 @@ $primary-color: #049cdb;
       background-color: lighten(#038fc7, 10%);
     }
   }
+  .events {
+    padding: 16px;
+    
+    h3 {
+      margin-top: 8px;
+    } 
+
+    .event {
+      display: flex;
+      flex-wrap: wrap-reverse;
+      align-items: center;
+      text-decoration: none;
+      color: inherit;
+  
+      .caption {
+        padding: 0 12px;
+        max-width: 450px;
+      }
+  
+      .title {
+        font-size: 20px;
+        font-weight: 400;
+      }
+  
+      .secondary {
+        color: rgba(0, 0, 0, 0.54);
+        font-size: 14px;
+        font-weight: 500;
+      }
+  
+      .subtitle {
+        font-size: 12px;
+        font-weight: initial;
+      }
+  
+      img {
+        width: 200px;
+        height: 100%;
+      }
+    }
+  }
 
   .picture-promo {
     display: block;
@@ -276,6 +317,19 @@ $primary-color: #049cdb;
   }
 }
 
+@media screen and (max-width: 700px) {
+  .frontpage .events .event {
+    .caption {
+      padding-top: 4px;
+    }
+
+    img {
+       width: 100%;
+   }
+  }
+ }
+
+
 // https://fortawesome.github.io/Font-Awesome/3.2.1/icons/
 
 h1:hover a.title-link,

source/blue/index.html

@@ -1,5 +1,6 @@
 ---
 layout: landingpage
+frontpage: false
 title: "Home Assistant Blue!"
 description: "Where style and performance meet privacy"
 date: 2020-12-12

source/index.html

@@ -89,17 +89,34 @@ feedback: false
       </a>
     </div>
     <div class="grid__item two-thirds lap-two-thirds palm-one-whole">
-      <a
-        class="material-card picture-promo"
-        href="/state-of-the-open-home/"
-        aria-label="Learn more about State of the Open Home"
-        style="
-          padding-top: 56%;
-          background: center/contain no-repeat url(/images/state-of-the-open-home/promo.png) #fff;
-        "
-      >
-      </a>
 
+      <div class="material-card events">
+        <h3>Upcoming Events</h3>
+        <a href="/blog/2022/05/29/matter-in-home-assistant-workshop-announcement/" class="event">
+          <div class="caption">
+            <div class="title">Matter in Home Assistant Workshop</div>
+            <div class="secondary">Wed June 15th - 12:00 PM PDT / 21:00 CET</div>
+            <p class="subtitle">We will be hosting our free Matter in Home Assistant workshop. The workshop will contain two
+              parts. In the first part we will talk about what Matter is and how it will work in Home Assistant. In the second
+              part we will
+              walk you through how to add experimental Matter support to your Home Assistant installation and integrate your
+              first Wi-Fi based Matter device.</p>
+          </div>
+          <img src="images/blog/2022-05-matter-in-home-assistant-workshop-announcement/social.png" />
+        </a>
+        <a href="https://www.youtube.com/watch?v=SEH-DxOsywg" class="event" target="_blank">
+          <div class="caption">
+            <div class="title">Let's get loud! - Audio in the Open Home</div>
+            <div class="secondary">Thu June 16th - 12:00 PM PDT / 21:00 CET</div>
+            <p class="subtitle">We've been working on some exciting open audio stuff for the smart home we would like to
+              share. Featuring Home Assistant, ESPHome, Raspiaudio and a special guest.
+            </p>
+          </div>
+          <img src="/images/events/lets-get-loud.jpg" />
+        </a>
+      </div>
+
+      <!-- Home Assistant Yellow -->
       <a
         class="material-card picture-promo"
         href="https://www.crowdsupply.com/nabu-casa/home-assistant-yellow"