fix(app-about): add mobile custom banner for team-photo section

Author: PaulPaulDevelops

src/assets/i18n/en.ts

@@ -83,6 +83,9 @@ export const translations = {
           },
         },
       },
+      mission: {
+        statement: 'Our mission is to forge a bond between people and technology through digital experiences.'
+      }
     },
 
     contact: {

src/pages/app-about/app-about.scss

@@ -1,5 +1,6 @@
 .about {
   font-family: 'Muli', sans-serif;
+  overflow-x: hidden;
 
   .hero {
     background: url('/assets/svg/about-graphic-header.svg') right top no-repeat;
@@ -39,9 +40,8 @@
     height: 100%;
     min-height: 540px;
 
-    @include media-breakpoint-down(xs) {
-      background-image: none;
-      min-height: 100px;
+    @include media-breakpoint-down(sm) {
+      min-height: 240px;
     }
 
     app-img {
@@ -50,16 +50,27 @@
       transform: translate(-50%, -50%);
       width: 100%;
 
-      @include media-breakpoint-down(xs) {
-        align-content: center;
-        display: flex;
-        position: relative;
-        top: 0;
-        transform: none;
+      @include media-breakpoint-down(sm) {
+        display: none;
       }
     }
   }
 
+  .mission-statement {
+    background: linear-gradient(-160deg, #f99a2a 0%, #f9902a 100%);
+    display: none;
+    height: 100px;
+
+    p {
+      line-height: 24px;
+      margin: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      display: block;
+    }
+  }
+
   .values, .members {
     padding: 5rem 0;
 
@@ -69,7 +80,9 @@
     }
   }
 
+
   .value-text {
     font-size: 24px;
   }
+
 }

src/pages/app-about/app-about.tsx

@@ -271,6 +271,15 @@ export class AppAbout {
           </div>
         </section>
 
+        {/* section - mission statement */ }
+        <section id="mission-statement" class="mission-statement">
+          <div class="mission-statement d-flex text-center">
+            <p class="text-white align-self-center">
+              <app-translate key="about.mission.statement" />
+            </p>
+          </div>
+        </section>
+
         {/* section - values */}
         <section id="values" class="values">
           <div class="container text-center">