Add GitHub's top public project by contributors in 2024 badge (#35458)

* Add GitHub's "Top open source project by contributors in 2024" badge 🎉

* Added fragment identifier

sass/homeassistant/_overrides.scss

@@ -888,6 +888,35 @@ dt:hover a.title-link {
   }
 }
 
+.hero-github-badge .desktop {
+  display: none;
+  max-width: 658px;
+  width: 100%;
+}
+
+.hero-github-badge .mobile {
+  display: block;
+  max-width: 420px;
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+// after 768px, show desktop, hide mobile
+@media only screen and (min-width: 1025px) {
+  .hero-github-badge .mobile {
+    display: none;
+    max-width: 385px;
+  }
+
+  .hero-github-badge .desktop {
+    display: block;
+  }
+}
+
+.hero-buttons {
+  margin-bottom: 0;
+}
+
 .hero-buttons a {
   margin: 0 30px 10px 0;
 
@@ -896,7 +925,6 @@ dt:hover a.title-link {
   }
 }
 
-
 // Article formatting
 
 article.post,

sass/homeassistant/homepage/_hero_unit.scss

@@ -14,7 +14,7 @@
   max-height: 1080px;
   height: 100vh;
   align-content: center;
-  min-height: 720px;
+  min-height: 840px;
   // scroll-snap-align: start;
   color: $white;
 
@@ -86,11 +86,11 @@
     // animation-iteration-count: infinite;
     // animation-direction: alternate;
 
-    @media only screen and (max-height: 720px) {
+    @media only screen and (max-height: 840px) {
       border-bottom: 0;
       margin-bottom: -8px;
       border-radius: 48px 48px 0 0;
-      height: 640px;
+      height: 750px;
 
     }
 
@@ -126,6 +126,7 @@
 
 @media only screen and (max-width: 760px) {
   .hero {
+    min-height: 940px;
     .flex {
       flex-direction: column;
     }

source/_includes/custom/welcome.html

@@ -19,3 +19,15 @@
   <a href='https://demo.home-assistant.io' target='_blank'>View live demos</a>
   <a href='/integrations/'>Browse {{ tot | minus: 1 | divided_by: 100 | round | times: 100 }}+ integrations</a>
 </p>
+<a href="https://github.blog/news-insights/octoverse/octoverse-2024/#the-state-of-open-source" target="_blank" class="hero-github-badge">
+  <img
+    src="/images/github-top-project-2024-mobile.png"
+    class="mobile"
+    alt="GitHub's top open source project by contributors in 2024"
+    >
+  <img
+    src="/images/github-top-project-2024-desktop.png"
+    class="desktop"
+    alt="GitHub's top open source project by contributors in 2024"
+    >
+</a>