Feat/our work fer

src/assets/i18n/en.ts

@@ -438,6 +438,32 @@ export const translations = {
       thanks: 'Progressive Web Apps can offer your business an array of benefits and improvements to your web and mobile users that can have a direct impact on your costs and revenue.',
     },
 
+    ourWork: {
+      header: {
+        title: 'Our Work',
+        text: "Each day we work to make our world better by design. Below you will find examples of projects that we've had the pleasure of working on.",
+      },
+      cards: {
+        mobile_measures: {
+          title: 'Mobile Measures',
+          text:
+            "A Physical Therapist's brainchild; this app aims to help Physical Therapists keep track of their patients' progress. Like many founders and entrepreneurs, Ben's foray into the start-up world started with a simple idea: \"There has to be a better way!\"",
+        },
+        loudcloud: {
+          title: 'LoudCloud',
+          text:
+            'This app was designed with privacy in mind. Users can receive and make calls through a temporary and disposable phone number; in over 40 countries! LoudCloud allows for more secure business and social interactions.',
+        },
+        voyage: {
+          title: 'The Voyage',
+          text:
+            "Employers can now incentivize their employees to develop and commit to healthy habits thanks to New Ocean Health's unique app. A company-wide social platform where employees can interact & challenge each other to reap the benefits.",
+        },
+        button: 'View Project',
+      },
+      worked_with: "Who We've Worked With",
+    },
+
     cta: {
       title: 'Got a vision?',
       subTitle: `We've got your back.`,

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

@@ -33,18 +33,24 @@
 
   h2 {
     color: white;
-    font-size: 22px;
+    font-family: Muli;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 29px;
     margin: 0 0 20px 0;
 
     @include media-breakpoint-down(sm) {
       font-size: 20px;
     }
   }
 
-  p {
+  h3 {
     color: $white;
-    font-size: 38px;
-    margin: 1rem 0;
+    font-family: Muli;
+    font-size: 40px;
+    font-weight: 700;
+    line-height: 48px;
+    margin: 1rem 0 3rem;
 
     @include media-breakpoint-down(sm) {
       font-size: 55px;
@@ -61,7 +67,7 @@
     color: #ffffff;
     width: 223px;
     cursor: pointer;
-    font-family: Roboto;
+    font-family: Muli;
     font-size: 11px;
     font-weight: bold;
     font-style: normal;

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

@@ -15,9 +15,12 @@ export class AppCta {
             <h2>
               <app-translate keyword="cta.title" />
             </h2>
-            <p>
+            <h3>
               <app-translate keyword="cta.subTitle" />
-            </p>
+            </h3>
+            {/* <h2>
+              <app-translate keyword="cta.text" />
+            </h2> */}
 
             <stencil-route-link url="/contact">
               <button class="btn btn-primary">

src/pages/app-our-work/app-our-work.scss

@@ -0,0 +1,281 @@
+.our-work {
+  margin-top: 76px;
+
+  header {
+    section {
+      align-items: center;
+      background-image: url(assets/our-work/our-work-header.svg);
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      min-height: 520px;
+
+      @include media-breakpoint-down(md) {
+        min-height: 350px;
+      }
+
+      @include media-breakpoint-down(sm) {
+        min-height: initial;
+        margin-top: calc(3rem + 76px);
+        background-image: none;
+      }
+    }
+
+    h1 {
+      color: #292a2d;
+      font-family: 'Muli';
+      font-size: 52px;
+      font-weight: 600;
+      letter-spacing: 1.73px;
+      line-height: 62px;
+      text-align: left;
+
+      @include media-breakpoint-down(md) {
+        font-size: 40px;
+      }
+    }
+
+    p {
+      margin-top: 15px;
+      color: #292a2d;
+      font-family: 'Muli';
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 32px;
+      width: 427px;
+      text-align: center;
+
+      @include media-breakpoint-down(md) {
+        width: 300px;
+      }
+    }
+  }
+
+  .card-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    border-radius: 20px;
+    margin-bottom: 30px;
+    -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
+    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
+
+    @include media-breakpoint-down(sm) {
+      grid-template-columns: initial;
+      grid-template-rows: 1fr 1fr;
+    }
+
+    .card-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      h2 {
+        color: #333333;
+        font-family: Muli;
+        font-size: 42px;
+        font-weight: 600;
+        letter-spacing: 2.1px;
+        line-height: 38px;
+        text-align: center;
+
+        @include media-breakpoint-down(md) {
+          font-size: 28px;
+        }
+      }
+
+      p {
+        color: #292a2d;
+        font-family: Muli;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 32px;
+        text-align: center;
+        margin-bottom: 0;
+        width: 80%;
+
+        @include media-breakpoint-down(md) {
+          font-size: 14px;
+        }
+      }
+
+      button {
+        background-color: #292a2d;
+        border-radius: 16px;
+        box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+        width: 188px;
+        color: #ffffff;
+        font-family: Muli;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 1.25px;
+        line-height: 20px;
+        text-align: center;
+        height: 32px;
+        margin-top: 70px;
+
+        @include media-breakpoint-down(sm) {
+          margin-top: 30px;
+        }
+      }
+    }
+
+    .card-image {
+      position: relative;
+      padding: 4rem 0 2rem;
+      border-top-left-radius: 20px;
+      border-bottom-left-radius: 20px;
+
+      @include media-breakpoint-down(sm) {
+        border-bottom-left-radius: 0;
+        border-top-right-radius: 20px;
+        padding: 2rem 0 0;
+      }
+
+      .behind-left {
+        position: relative;
+        height: 350px;
+        left: 100px;
+        top: 30px;
+
+        @include media-breakpoint-down(lg) {
+          height: 300px;
+          left: 80px;
+        }
+
+        @include media-breakpoint-down(md) {
+          left: 30px;
+          height: 220px;
+        }
+
+        @include media-breakpoint-down(sm) {
+          left: 80px;
+          height: 220px;
+        }
+      }
+
+      .behind-right {
+        position: relative;
+        height: 350px;
+        right: 100px;
+        top: 30px;
+
+        @include media-breakpoint-down(lg) {
+          height: 300px;
+          right: 80px;
+        }
+
+        @include media-breakpoint-down(md) {
+          height: 220px;
+          right: 30px;
+        }
+
+        @include media-breakpoint-down(sm) {
+          height: 220px;
+          right: 80px;
+        }
+      }
+
+      .front-center {
+        height: 400px;
+        margin-left: auto;
+        margin-right: auto;
+        z-index: 1;
+
+        @include media-breakpoint-down(lg) {
+          height: 340px;
+          margin-left: initial;
+          margin-right: initial;
+        }
+
+        @include media-breakpoint-down(md) {
+          height: 280px;
+          margin-left: initial;
+          margin-right: initial;
+        }
+
+        @include media-breakpoint-down(sm) {
+          position: relative;
+          margin: auto;
+          height: 280px;
+        }
+      }
+
+      .card-image-row {
+        justify-content: center;
+      }
+
+      .store-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        margin: 4rem 0 2rem;
+
+        a {
+          margin: 0 10px;
+        }
+
+        @include media-breakpoint-down(sm) {
+          margin: 2rem 0 2rem;
+        }
+      }
+
+      &.mobilemeasures {
+        background-image: url('/assets/apps/mobilemeasures/background-graphic.png');
+        background-size: cover;
+        background-position: center;
+      }
+
+      &.loudcloud {
+        background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
+        background-size: cover;
+        background-position: center;
+      }
+
+      &.voyage {
+        background-image: url('/assets/home-graphic-voyage-pattern.jpg');
+        background-size: cover;
+        background-position: center;
+      }
+    }
+  }
+
+  .worked-with {
+    padding: 5rem 0;
+
+    @include media-breakpoint-down(sm) {
+      padding: 3rem 1rem;
+    }
+
+    .header {
+      margin: 0 auto 3rem;
+      max-width: 768px;
+
+      h2 {
+        color: #292a2d;
+        font-family: 'Muli';
+        font-size: 52px;
+        font-weight: 600;
+        letter-spacing: 1.73px;
+        line-height: 62px;
+        text-align: center;
+
+        @include media-breakpoint-down(md) {
+          font-size: 40px;
+        }
+      }
+    }
+
+    .img-row {
+      justify-content: center;
+      margin-bottom: 16px;
+    }
+
+    .center-col {
+      display: flex;
+      align-items: center;
+    }
+  }
+}