blm banner

public/assets/css/startup.css

+.blm-banner {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: 40px 1fr auto;
+  grid-gap: 15px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  margin-bottom: 50px;
+  align-items: center;
+}
+.blm-banner .icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.blm-banner .icon img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.blm-banner .text h1 {
+  margin: 0;
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.blm-banner .text .copy {
+  opacity: 0.6;
+  line-height: 1.5;
+}
 .staff-promos {
   display: grid;
   grid-template-columns: 1fr 1fr;

public/assets/css/startup.less

+.blm-banner {
+    background: rgba(255,255,255,0.1);
+    padding: 20px;
+    border-radius: 4px;
+    display: grid;
+    grid-template-columns: 40px 1fr auto;
+    grid-gap: 15px;
+    border: 2px solid rgba(255,255,255,0.4);
+    margin-bottom: 50px;
+    align-items: center;
+
+    & .icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        & img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    & .text {
+        h1 {
+            margin: 0;
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & .copy {
+            opacity: 0.6;
+            line-height: 1.5;
+        }
+    }
+}
 .staff-promos {
     display: grid;
     grid-template-columns: 1fr 1fr;

templates/index/index.html.twig

@@ -4,6 +4,17 @@
 
 {% block content %}
     <section class="section-startup">
+        <div class="blm-banner">
+            <div class="icon">
+                <img src="{{ asset('assets/img/blmfist.svg') }}" />
+            </div>
+            <div class="text">
+                <h1>Music connects people! &dash; Black Lives Matter!</h1>
+                <div class="copy">We openly denounce the systemic racism and violence against the black community in our society!<br />This is why the SpinShare team stands in solidarity with the Black Lives Matter movement.</div>
+            </div>
+            <a href="https://blacklivesmatters.carrd.co/" target="_blank" class="button">How you can help</a>
+        </div>
+
         <div class="staff-promos">
             {% for promo in promos %}
                 <div class="staff-promo" style="background-image: url({{ asset('uploads/promo/' ~ promo.imagePath) }});">