Merge pull request #335 from openforge/fix/about-banner-mobile

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

Author: Wholloran

src/assets/i18n/en.ts

@@ -56,6 +56,9 @@ export const translations = {
           "We believe that your success is our success. We're here to challenge your assumptions and help you discover your web or mobile applications full potential.",
         action: "LEARN MORE"
       },
+      mission: {
+        statement: 'Our mission is to forge a bond between people and technology through digital experiences.'
+      }, 
       values: {
         title: 'Our Values',
         text: 'While we specialize in user experience design and application development, our true strength lies in our team values. We believe that transparency, honesty, and integrity, and a desire to help others is paramount to a happy and successful lifestyle. We love working with our partners who share similar beliefs; and hope to collaborate on impactful projects worldwide!',

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">