Fix promo page on narrow screens and update content

Fixes https://github.com/turt2live/matrix-dimension/issues/219

web/app/home/home.component.html

@@ -12,16 +12,18 @@
     </div>
 
     <div class="wrapper">
-        <div class="info-box try-dimension shadowed">
-            <h3>Try it out or <a href="https://github.com/turt2live/matrix-dimension#running-your-own" target="_blank">run your own</a></h3>
-            <p>
-                Visit <a href="https://t2bot.io/riot" target="_blank">t2bot.io/riot</a> and log in with your Matrix account
-                or point your Riot <code>config.json</code> at our servers:
-            </p>
-            <pre>{{ integrationsConfig }}</pre>
-        </div>
-        <div class="screenshot shadowed">
-            <img src="/img/screenshot.png">
+        <div class="subhero-wrapper">
+            <div class="info-box try-dimension shadowed">
+                <h3>Try it out or <a href="https://github.com/turt2live/matrix-dimension#running-your-own" target="_blank">run your own</a></h3>
+                <p>
+                    Visit <a href="https://t2bot.io/riot" target="_blank">t2bot.io/riot</a> and log in with your Matrix account
+                    or point your Riot <code>config.json</code> at our servers:
+                </p>
+                <pre>{{ integrationsConfig }}</pre>
+            </div>
+            <div class="screenshot shadowed">
+                <img src="/img/screenshot.png">
+            </div>
         </div>
 
         <hr class="spacer">
@@ -78,7 +80,7 @@
 
         <div class="integrations">
             <h3 class="title">Bots</h3>
-            <p class="intro">Add some bots for fun or productivity. They're here to help at your command.</p>
+            <p class="intro">Bots bring entertainment or productivity to the room. They're here to help at your command.</p>
 
             <div class="integration-list">
                 <!--<div class="integration">-->
@@ -125,6 +127,10 @@
                     <img src="/img/avatars/echo.png">
                     <span>Echo</span>
                 </div>
+                <div class="integration">
+                    <img src="/img/avatars/custombots.png">
+                    <span>Custom Bots</span>
+                </div>
             </div>
         </div>
 

web/app/home/home.component.scss

@@ -103,13 +103,22 @@
 
     .screenshot {
       display: inline-block;
-      margin: 0 70px;
+      width: 597px;
+      margin: 20px 70px 0;
+      border: 1px solid themed(promoInfoBorderColor);
 
       img {
         width: 595px;
       }
     }
 
+    .subhero-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+    }
+
     .integrations {
       display: block;
       width: 100%;