Adds Umbrel banner

src/components/HomePageHeader.js

@@ -44,6 +44,15 @@ export default function HomepageHeader() {
         <span className={styles.keepReading} onClick={() => setShowMore(!showMore)}>
           {!showMore ? 'Keep Reading...' : 'Show Less'}
         </span>
+        <div className={styles.sponsor}>
+          <span>
+            Dashy is kindly sponsored by <a href="https://umbrel.com?ref=dashy" target="_blank">Umbrel</a> -
+            the personal home cloud and OS for self-hosting
+          </span>
+          <a href="https://umbrel.com?ref=dashy" target="_blank">
+            <img src="/umbrel-banner.jpg" />
+          </a>
+        </div>
       </div>
       <CarbonAd />
       {(!showMore) &&

src/styles/Colors.scss

@@ -5,7 +5,7 @@
   --white: #f7f7f7;
   --pale-grey: #e9e9e8;
   --mid-grey: #a9a9a9;
-  --dark-grey: ##18191a;
+  --dark-grey: #18191a;
   --black: #121212;
   --pitch-black: #000000;
 

src/styles/Header.module.scss

@@ -73,7 +73,7 @@ header.heroBanner {
   cursor: pointer;
   margin: 2rem auto;
   position: absolute;
-  bottom: 2rem;
+  bottom: 0;
   left: 42%;
   @media (max-width: 966px) {
    display: none;
@@ -90,4 +90,26 @@ header.heroBanner {
 .scrollDownIcon {
   width: 2rem;
   path { fill:  var(--text-color); }
-}
+}
+
+.sponsor {
+  margin: 1rem auto;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+  background: var(--background);
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: var(--text-color);
+  img {
+    border-radius: 6px;
+  }
+  span {
+    font-size: 1rem;
+    text-align: center;
+    a {
+      font-size: 1rem;
+      color: var(--text-color);
+    }
+  }
+}

src/utils/ui-helpers.ts

@@ -15,4 +15,4 @@ const getColor = (index: number): string => {
   }
 };
 
-export default getColor;
+export default getColor;