<NME> about.component.scss
<BEF> @import "~src/theme.scss";

div.mindmapp-about {
    div.mindmapp-about-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;

        nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 12px 16px;

            span.toolbar-spacer {
                flex: 1 1 auto;
            padding: 20px 15px 40px 15px;

            h1 {
                color: mat-color($app-primary);
            }

            div.cards {
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                mat-card {
                    flex: 1;
                    min-width: 200px;
                    margin: 10px;

                    fa-icon {
                        color: #565656;
                    }

                    ::ng-deep mat-card-header > div {
                        margin-left: 0 !important;
            }

            a.page {
                margin-right: 10px;
            }

            a.page.active {
                border-radius: 0;
                border-bottom: 2px solid mat-color($app-primary, .8);
            }

            .mobile {

                    a {
                        color: mat-color($app-primary);
                        text-decoration: none;
                        padding-left: 10px;
                    }
                }
            }
        }
    }
}
            }
        }
    }
}

<MSG> [style] add intro section to about page

<DFF> @@ -2,17 +2,18 @@
 
 div.mindmapp-about {
     div.mindmapp-about-header {
+        z-index: 999;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
-        z-index: 2;
 
         nav {
+            background-color: white;
             display: flex;
             flex-wrap: wrap;
             align-items: center;
-            padding: 12px 16px;
+            padding: 16px;
 
             span.toolbar-spacer {
                 flex: 1 1 auto;
@@ -41,12 +42,9 @@ div.mindmapp-about {
             }
 
             a.page {
-                margin-right: 10px;
-            }
-
-            a.page.active {
-                border-radius: 0;
-                border-bottom: 2px solid mat-color($app-primary, .8);
+                font-size: 16px;
+                margin-top: 2px;
+                margin-left: 5px;
             }
 
             .mobile {
@@ -64,4 +62,32 @@ div.mindmapp-about {
             }
         }
     }
+
+    div.mindmapp-about-content {
+        section.intro-section {
+            z-index: 2;
+            background: url('../../../../../assets/images/about-bg.jpg') center center/cover no-repeat;
+            padding: 180px 0 100px 0;
+            color: #fff;
+            text-align: center;
+
+            h1 {
+                margin: 0 0 24px;
+                font-size: 42px;
+                font-weight: 900;
+                line-height: 54px;
+                text-shadow: 0 4px 4px rgba(0, 0, 0, .22);
+            }
+
+            p {
+                margin-bottom: 30px;
+            }
+        }
+
+        @media only screen and (max-width: 600px) {
+            section.intro-section {
+                padding: 120px 0 50px 0;
+            }
+        }
+    }
 }

[style] add intro section to about page