feat(about): improve responsive layout and add release butler section

src/app/static/about/about.component.html

@@ -55,3 +55,16 @@ <h2>Getting started</h2>
     </div>
   </div>
 </div>
+<div class="container">
+  <div class="follow-releases" [ngClass]="animateOnRouteEnter">
+    <h2>Get notified about new releases</h2>
+    <p>
+      Follow <a href="https://www.twitter.com/releasebutler" target="_blank">Release
+      Butler</a>
+      a Twitter bot that helps you to stay up to date with releases of popular frontend
+      frameworks & libraries!
+    </p>
+
+    <img [src]="releaseButler" alt="Release Butler tweet example">
+  </div>
+</div>

src/app/static/about/about.component.scss

@@ -1,15 +1,20 @@
 @import '../../../styles-variables';
 
+h1 {
+  text-align: center;
+  font-size: 3em;
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: 1.5em;
+  text-transform: uppercase;
+}
+
 .background {
-  padding: 100px 0;
+  padding: 80px 0 0 0;
   position: relative;
 
-  h1 {
-    text-align: center;
-    font-size: 3em;
-    text-transform: uppercase;
-  }
-
   .actions {
     text-align: center;
     margin: 50px;
@@ -38,15 +43,14 @@
 
   .get-started {
     max-width: 700px;
-    margin: 50px auto 0 auto;
-    padding-bottom: 50px;
-    font-size: 0.9em;
+    margin: 50px auto;
     letter-spacing: 0.01px;
     overflow-wrap: break-word;
     z-index: 1;
     overflow: hidden;
 
     code {
+      font-size: 0.9em;
       display: inline-block;
       word-wrap: break-word;
       white-space: normal;
@@ -70,7 +74,7 @@
   .gradient {
     &::before {
       position: absolute;
-      top: 60%;
+      top: 50%;
       left: 0;
       bottom: 0;
       right: 0;
@@ -84,17 +88,49 @@
   }
 }
 
+.follow-releases {
+  max-width: 700px;
+  margin: 0 auto 80px auto;
+
+  p {
+    line-height: 40px;
+
+    a {
+      border-bottom: 3px solid;
+    }
+  }
+
+  img {
+    display: block;
+    max-width: 80%;
+    margin: 20px auto 0 auto;
+    border-radius: 5px;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+}
+
 @media (max-width: map-get($grid-breakpoints, md)) {
   .background {
+    .actions {
+      margin: 50px 0;
+    }
     .get-started {
       width: auto;
     }
   }
+  .follow-releases {
+    width: auto;
+
+    img {
+      max-width: 100%;
+    }
+  }
 }
 
 @media (max-width: map-get($grid-breakpoints, sm)) {
   .background {
-    padding: 40px 0;
+    padding: 40px 0 0 0;
 
     h1 {
       line-height: 1em;
@@ -114,8 +150,11 @@
 
     .get-started {
       width: auto;
-      margin: 40px auto 0 auto;
-      padding-bottom: 40px;
+      margin: 40px auto 40px auto;
     }
   }
+
+  .follow-releases {
+    margin: 0 auto 40px auto;
+  }
 }

src/app/static/about/about.component.scss-theme.scss

@@ -21,5 +21,19 @@
         }
       }
     }
+
+    .follow-releases {
+      p {
+        background-color: mat-color($background, background);
+
+        a {
+          color: mat-color($accent);
+
+          &:hover {
+            color: mat-color($accent, darker);
+          }
+        }
+      }
+    }
   }
 }

src/app/static/about/about.component.ts

@@ -9,6 +9,7 @@ import { ANIMATE_ON_ROUTE_ENTER } from '@app/core';
 })
 export class AboutComponent implements OnInit {
   animateOnRouteEnter = ANIMATE_ON_ROUTE_ENTER;
+  releaseButler = require('../../../assets/release-butler.png');
 
   constructor() {}