Merge pull request #397 from openforge/fix/cta-size

Fix/cta size

Author: Wholloran

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

@@ -1,13 +1,17 @@
 .cta {
   height: 344px;
+  background: $blue-green;
 
   @include media-breakpoint-down(sm) {
     height: 780px;
   }
 
+  .container {
+    height: 100%;
+  }
+
   .row {
     height: 100%;
-    background: #008092;
   }
 
   .cta-image {

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

@@ -4,32 +4,33 @@ import { Component, h } from '@stencil/core';
   tag: 'app-cta',
   styleUrl: 'app-cta.scss',
 })
+
 export class AppCta {
   render() {
     return (
-      <section id="cta" class="cta">
-        <div class="row">
-          <div class="col-md-6 col-sm-12 text-center cta-image" />
-
-          <div class="col-md-6 col-sm-12 align-self-center text-center cta-text">
-            <h2>
-              <app-translate keyword="cta.title" />
-            </h2>
-            <h3>
-              <app-translate keyword="cta.subTitle" />
-            </h3>
-            {/* <h2>
-              <app-translate keyword="cta.text" />
-            </h2> */}
-
-            <stencil-route-link url="/contact">
-              <button class="btn btn-primary">
-                <app-translate keyword="cta.link" />
-              </button>
-            </stencil-route-link>
+      <div id="cta" class="cta">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-6 col-sm-12 text-center cta-image" />
+            <div class="col-md-6 col-sm-12 align-self-center text-center cta-text">
+              <h2>
+                <app-translate keyword="cta.title" />
+              </h2>
+              <p>
+                <app-translate keyword="cta.subTitle" />
+              </p>
+              <h2>
+                <app-translate keyword="cta.text" />
+              </h2>
+              <stencil-route-link url="/contact">
+                <button class="button">
+                  <app-translate keyword="cta.link" />
+                </button>
+              </stencil-route-link>
+            </div>
           </div>
         </div>
-      </section>
+      </div>
     );
   }
-}
+}

src/styles/_variables.scss

@@ -13,6 +13,7 @@ $gray-brown: #5d534e !default;
 $gray-dark: #292a2d !default;
 $black: #171719 !default;
 $blue: #638593 !default;
+$blue-green: #008092 !default;
 $cyan: #0095aa !default;
 $indigo: #323c47 !default;
 $red: #dc3545 !default; // TODO