Merge pull request #334 from openforge/fix/team-landing-cta

fix(app-team-landing): add separate CTA for app-team-landing

Author: Wholloran

src/assets/i18n/en.ts

@@ -83,6 +83,17 @@ export const translations = {
           },
         },
       },
+      landing: {
+        container: {
+          title1: 'What',
+          title2: 'Does',
+          skills: 'Skills'
+        },
+        cta: {
+          title: 'Meet The Team',
+          button: `Let's Go`
+        }
+      }
     },
 
     contact: {

src/components/app-cta/app-cta.scss

@@ -56,11 +56,4 @@
       margin: 2rem 0;
     }
   }
-
-  .btn {
-    margin-top: 4rem;
-    @include media-breakpoint-down(sm) {
-      margin-top: 2rem;
-    }
-  }
 }

src/components/app-cta/app-cta.tsx

@@ -41,7 +41,7 @@ export class AppCta {
             </h2>
 
             <stencil-route-link url="/contact">
-              <button class="btn btn-primary">
+              <button class="btn btn-primary mt-md-4 mt-sm-2">
                 <app-translate key="cta.link" />
               </button>
             </stencil-route-link>

src/pages/app-team-landing/app-team-landing.scss

@@ -1,5 +1,6 @@
 // section - team-landing
 section.team-landing {
+  font-family: 'Muli', sans-serif;
   // hero
   .hero {
     background-position: top center;
@@ -142,4 +143,27 @@ section.team-landing {
     color: $white;
     font-size: 12px;
   }
+
+  .cta {
+    background: linear-gradient(-160deg, #f99a2a 0%, #f9902a 100%);
+    height: 114px;
+
+    @include media-breakpoint-down(sm) {
+      height: 140px;
+    }
+
+    .cta-container {
+      height: inherit;
+      line-height: 2.5rem;
+    }
+
+    h3 {
+      font-size: 1.5rem;
+      margin: 0 4rem;
+      @include media-breakpoint-down(sm) {
+        margin-left: 0;
+        margin-right: 2rem;
+      }
+    }
+  }
 }

src/pages/app-team-landing/app-team-landing.tsx

@@ -472,15 +472,36 @@ export class AppTeamLanding {
                   />
                   <div class="text-img-container-text">
                     <h2>
-                      What {this.data[this.match.params.member].firstname} Does
+                      <app-translate key="about.landing.container.title1" /> 
+                      &nbsp;{this.data[this.match.params.member].firstname}&nbsp; 
+                      <app-translate key="about.landing.container.title2" /> 
                     </h2>
                     <p>{this.data[this.match.params.member].bodyText}</p>
-                    <h4>Skills</h4>
+                    <h4>
+                      <app-translate key="about.landing.container.skills" /> 
+                    </h4>
                     {this.chips}
                   </div>
                 </section>
               </div>,
-              <app-cta />,
+              
+              <aside class="cta text-white">
+                <div class="cta-container d-flex flex-row justify-content-center">
+                  <h3 class="align-self-center">
+                    <app-translate key="about.landing.cta.title" /> 
+                  </h3>
+
+                  <stencil-route-link url="/about" class="align-self-center">
+                    <button class="btn btn-primary">
+                      <app-translate key="about.landing.cta.button" /> 
+                    </button>
+                  </stencil-route-link>
+                </div>
+              </aside>,
+
+
+
+
               <app-footer />,
             ]
           : null}