Merge pull request #420 from openforge/feat/partners

Feat/partners

Author: Wholloran

src/assets/i18n/en.ts

@@ -371,6 +371,34 @@ export const translations = {
       },
     },
 
+    partners: {
+      hero: {
+        title: 'Meet Our Partners',
+        text1: 'Isaac Newton once said "If I have seen further, it is by standing on the shoulders of giants." and that is exactly how we feel about our partners!',
+        text2:
+          'We believe in industry-wide collaboration and have connected with the top firms in their fields in order to create true value to our clients. Our partnerships provide us with cutting-edge solutions and services. The combination of our expertise and their support means we provide you with the best experience money can buy.',
+      },
+      trusted: {
+        title: 'Trusted Partners',
+        ionic: 'Ionic Framework is an open source app development platform which allows our team of developers to build and deploy high-quality cross-platform apps in record time.',
+        t1776:
+          '1776 is the largest start-up incubator in the Northeast Corridor. It is a public benefit corporation that empowers start-ups by providing them with access to a global network of connections, and the intellectual and financial capital needed for them to prosper.',
+        strapi:
+          'Strapi is an open source Headless CMS, used to manage content and make it available through a fully-customizable API. It is a framework designed for building practical applications and services in a matter of hours, instead of the usual weeks; saving your team precious time.',
+        t215Marketing:
+          '215Marketing is a Google Partner and full-service digital marketing agency; providing everything from traditional design to CRM implementation. Their primary focus is creating websites, effective Search Engine Marketing and measuring Return On Investment.',
+        finantialGPS:
+          'Financial GPS is a virtual accounting solution for small enterprises, that presents them with monthly reports and videos. The wonderful team at Financial GPS provides different services, including bookkeeping, payroll processing and tax preparation.',
+        drexel:
+          'Drexel University and the Science Center offer an incubator and accelerator for early-stage, funded start-ups. ic@3401 is a community of experts and investors that plays an important role in the building of the collaborative culture in Philadelphia’s Innovation Neighborhood.',
+      },
+      cta: {
+        title: 'Interested in partnering with us?',
+        subTitle: `Contact us today to get started!        `,
+        link: 'GET IN TOUCH',
+      },
+    },
+
     resources: {
       hero: {
         title: 'What is a PWA and is it right for you?',

src/assets/partners-1776-logo.png

@@ -0,0 +1,307 @@
+// section - partners
+
+.partners {
+  .hero {
+    padding-top: 150px;
+
+    @include media-breakpoint-down(sm) {
+      text-align: center;
+      padding-top: 125px;
+    }
+
+    .row {
+      height: auto;
+      padding-bottom: 2rem;
+
+      @include media-breakpoint-down(sm) {
+        padding-bottom: 0;
+      }
+
+      img {
+        min-height: 300px;
+
+        @include media-breakpoint-down(md) {
+          min-height: 260px;
+        }
+      }
+    }
+
+    .line-break {
+      border-bottom: 1px solid $gray-800;
+    }
+
+    span {
+      margin-right: 20px;
+      text-decoration: underline;
+      color: #e88212;
+      background-color: transparent;
+
+      &:hover {
+        color: #a15a0c;
+      }
+    }
+
+    h1 {
+      color: #292a2d;
+      font-family: Muli;
+      font-size: 52px;
+      font-weight: 600;
+      letter-spacing: 1.73px;
+      text-align: left;
+      margin-bottom: 40px;
+
+      @include media-breakpoint-down(sm) {
+        color: #333333;
+        font-family: Muli;
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 2.1px;
+        line-height: 45px;
+        text-align: center;
+        margin-top: 40px;
+      }
+    }
+
+    p {
+      font-family: Muli;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 30px;
+      text-align: left;
+
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+    }
+  }
+
+  button.btn-partner {
+    background-color: #0095aa;
+    border: 0.75px solid #ffffff;
+    border-radius: 20px;
+    box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+    &:hover {
+      background: #0095aa linear-gradient(180deg, #00b4cc, #0095aa) repeat-x;
+    }
+  }
+
+  .trusted-partners {
+    position: relative;
+
+    .header {
+      margin: 4rem auto 2rem;
+      max-width: 768px;
+      text-align: center;
+
+      @include media-breakpoint-down(sm) {
+        margin: 0 auto 2rem;
+      }
+
+      h2 {
+        color: #333333;
+        font-family: Muli;
+        font-size: 42px;
+        font-weight: 600;
+        letter-spacing: 2.1px;
+        line-height: 45px;
+        text-align: center;
+
+        @include media-breakpoint-down(sm) {
+          color: #333333;
+          font-family: Muli;
+          font-size: 32px;
+          font-weight: 600;
+          letter-spacing: 2.1px;
+          line-height: 45px;
+          text-align: center;
+          margin-top: 40px;
+        }
+      }
+    }
+
+    .line-title {
+      display: block;
+      position: relative;
+
+      &:before,
+      &:after {
+        content: '';
+        display: inline-block;
+        height: 1px;
+        background: gray;
+        width: 50%;
+        position: relative;
+        vertical-align: middle;
+
+        @include media-breakpoint-down(sm) {
+          display: none;
+        }
+      }
+      &:before {
+        left: -0.5em;
+        margin-left: -50%;
+      }
+      &:after {
+        right: -0.5em;
+        margin-right: -50%;
+      }
+    }
+  }
+
+  .cta {
+    height: 344px;
+
+    @include media-breakpoint-down(sm) {
+      height: 530px;
+    }
+
+    .row {
+      height: 100%;
+      background: #008092;
+      margin: 0;
+      padding: 0 200px;
+
+      @include media-breakpoint-down(md) {
+        padding: 0;
+      }
+    }
+
+    .cta-image {
+      background-image: url('/assets/svg/partners-graphic-cta.svg');
+      background-size: 338px 195px;
+      background-position: center center;
+      background-repeat: no-repeat;
+
+      @include media-breakpoint-down(sm) {
+        height: 300px;
+      }
+    }
+
+    .cta-text {
+      padding: 0 60px;
+      @include media-breakpoint-down(md) {
+        padding: 0 20px;
+      }
+
+      @include media-breakpoint-down(sm) {
+        margin-bottom: 5rem;
+      }
+    }
+
+    h2 {
+      margin: 0 0 20px 0;
+      color: #ffffff;
+      font-family: Muli;
+      font-size: 40px;
+      font-weight: 700;
+      text-align: center;
+
+      @include media-breakpoint-down(sm) {
+        font-size: 20px;
+      }
+    }
+
+    p {
+      color: #ffffff;
+      font-family: Muli;
+      font-size: 18px;
+      font-weight: 400;
+      text-align: center;
+
+      @include media-breakpoint-down(sm) {
+        margin: 2rem 0;
+      }
+    }
+
+    button {
+      background-color: #c75300;
+      border: 0.75px solid #ffffff;
+      border-radius: 16px;
+      box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+      color: #ffffff;
+      width: 130px;
+      cursor: pointer;
+      font-family: Roboto;
+      font-size: 11px;
+      font-weight: bold;
+      font-style: normal;
+      font-stretch: normal;
+      letter-spacing: 1.3px;
+      height: auto;
+      line-height: 1.82;
+      padding: 0.5rem 1rem;
+      text-align: center;
+    }
+  }
+
+  .carousel-inner {
+    padding: 25px 0;
+
+    @include media-breakpoint-down(sm) {
+      margin-left: 15px;
+    }
+  }
+
+  .carousel-item-col {
+    padding: 0 25%;
+
+    @include media-breakpoint-down(sm) {
+      padding: 0 25px;
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 170px;
+    }
+
+    p {
+      margin-top: 3rem;
+    }
+  }
+  .carousel-indicators {
+    bottom: 0;
+    position: initial;
+    @include media-breakpoint-down(sm) {
+      position: initial;
+    }
+  }
+
+  .carousel-indicators li {
+    border-radius: 100%;
+    background-color: #d8d8d8;
+    height: 10px;
+    margin: 0.5rem;
+    width: 10px;
+  }
+
+  .carousel-indicators .active {
+    background-color: $orange;
+  }
+
+  .carousel-arrows {
+    position: absolute;
+    top: 275px;
+    width: 100%;
+
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
+  }
+
+  .carousel-control {
+    color: #9baaab;
+    font-size: 60px;
+
+    &.right {
+      font-size: 60px;
+      padding-right: 100px;
+      text-align: right;
+    }
+
+    &.left {
+      font-size: 60px;
+      padding-left: 100px;
+      text-align: left;
+    }
+  }
+}