Merge PR #28 and some improvements

.gimbalrc.yml

@@ -0,0 +1,101 @@
+# Specify audits to run. Also include any plugins (like axe)
+ audits:
+     - axe
+     - size
+     - lighthouse
+     - heap-snapshot
+     - unused-source
+
+ configs:
+   comment:
+     # Only show failures in GitHub PR comments.
+     # Useful to pinpoint why a build has failed
+     onlyFailures: true
+
+   # Heap snapshot settings
+   heap-snapshot:
+     threshold:
+       Documents: 11
+       Frames: 5
+       JSHeapTotalSize: 13356000
+       JSHeapUsedSize: 10068000
+       Nodes: 800
+       RecalcStyleCount: 15
+       LayoutCount: 15
+
+   # Lighthouse settings
+   lighthouse:
+     skipAudits:
+       - uses-http2
+       - redirects-http
+       - uses-long-cache-ttl
+       - uses-text-compression
+     outputHtml: ./gimbal-artifacts/lighthouse.html
+     threshold:
+       accessibility: 95
+       "best-practices": 95
+       performance: 95
+       pwa: 95
+       seo: 95
+
+   # File and directory size settings
+   size:
+     - path: ./build/precache-*.js
+       maxSize: 10 KB
+     - path: ./build/static/js/[0-9]*.chunk.js
+       maxSize: 1 MB
+     - path: ./build/static/js/*.chunk.js
+       maxSize: 1 MB
+     - path: ./build/static/js/runtime*.js
+       maxSize: 10 KB
+     - path: ./build/index.html
+       maxSize: 10 KB
+     - path: ./build/favicon.ico
+       maxSize: 10 KB
+     - path: ./build/
+       maxSize: 18 MB
+
+   # Unused source settings
+   unused-source:
+     threshold:
+       - path: "**/*(private).*.chunk.css"
+         maxSize: 60%
+       - path: "**/!(private).*.chunk.css"
+         maxSize: 60%
+       - path: "**/*([0-9]).*.chunk.js"
+         maxSize: 90%
+       - path: "**/!([0-9]|main).*.chunk.js"
+         maxSize: 45%
+       - path: "**/(main).*.chunk.js"
+         maxSize: 50%
+
+ # Locations of reports. Useful for storing artifacts in CI
+ outputs:
+   # Only show failures in CLI
+   cli:
+     onlyFailures: true
+   html: ./gimbal-artifacts/results.html
+   json: ./gimbal-artifacts/results.json
+   markdown: ./gimbal-artifacts/results.md
+
+ # Plugins
+ plugins:
+   # Compare metrics to last-saved values
+   - plugin: "@modus/gimbal-plugin-last-value"
+     saveOnlyOnSuccess: false
+
+   # Save reports to a database. Needed for gimbal-plugin-last-value
+   - plugin: "@modus/gimbal-plugin-sqlite"
+     lastValue: true
+
+   # Axe a11y audits
+   - plugin: "@modus/gimbal-plugin-axe"
+     thresholds:
+       aria-allowed-attr: critical
+       color-contrast: serious
+       landmark-one-main: moderate
+       landmark-complementary-is-top-level: moderate
+       meta-viewport: critical
+       region: moderate
+       page-has-heading-one: moderate
+       scrollable-region-focusable: moderate

.gitignore

@@ -28,3 +28,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 performance-artifacts/**
+
+#Gimbal items
+gimbal-artifacts/**
+gimbal.db

components/carousel/customCarousels/violetCarousel.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Anchor from '../../common/link';
 import VideoCarousel from './videoCarousel';
 import Carousel from '../index';
 import './customCarousels.scss';
@@ -20,9 +21,15 @@ const VioletCarousel = ({
         <div>
           <VideoCarousel title={title} elements={elements} settings={settings} />
           <div className="center-align md-left-align py2 my1">
-            <a href="/know-aime" aria-label="know-aime" className="b-white ghost-btn center" target="_blank">
+            <Anchor
+              to="/knowAime"
+              as="/know-aime"
+              aria-label="know-aime"
+              className="b-white ghost-btn center"
+              target="_blank"
+            >
               Tell me more
-            </a>
+            </Anchor>
           </div>
         </div>
       ) : (

components/common/errorBoundary.js

@@ -53,7 +53,7 @@ class ErrorBoundary extends Component {
                     {' '}
                     <Anchor prefetch withData to="/contact"> contact us </Anchor>
                   </p>
-                  <Anchor to="/" className="basic-btn bold bg-brand-primary c-white mt3">Back to home</Anchor>
+                  <Anchor to="/home" as="/" className="basic-btn bold bg-brand-primary c-white mt3">Back to home</Anchor>
                 </div>
               </div>
             </div>

components/contact/contact.module.scss

@@ -0,0 +1,250 @@
+@import "../../styles/base/variables";
+
+.contactBanner {
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 40vh;
+  background:
+    url($cdnRoot+"assets/images/banner/[email protected]") no-repeat
+    top center / cover fixed #050301;
+  padding: 35px 0;
+
+  @media screen and (min-width: $sm) {
+    padding: 0;
+    height: 62vh;
+  }
+
+  @media screen and (max-device-width: 1024px) {
+    background-attachment: scroll;
+  }
+
+  .highlightText {
+    transform: rotate(-3deg);
+    font-size: 8rem;
+    font-weight: 100;
+    font-family: "blackhawk_italicregular";
+    display: block;
+    color: $white;
+    position: relative;
+    z-index: 1;
+
+    @media (min-width: $md) {
+      padding: 15px 87px 30px 35px;
+    }
+
+    @media (min-width: $lg) {
+      line-height: 4.2rem;
+    }
+
+    em {
+      position: relative;
+      font-family: "blackhawk_italicregular";
+      font-size: italic;
+    }
+  }
+
+  .bannerContainer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    height: 100%;
+  }
+
+  .bannerWrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    .preText {
+      padding-left: 0;
+      position: relative;
+      line-height: 3rem;
+      z-index: 2;
+      font-style: italic;
+      font-weight: 900;
+      vertical-align: baseline;
+      background: transparent;
+      color: $white;
+      font-family: $feature-font-family;
+
+      @media all and(min-width: $lg) {
+        font-size: calc(#{$base-font-size} + 0.6rem);
+      }
+    }
+  }
+
+  .borderGradient {
+    border-image: linear-gradient(270deg, $accent-pink 0, $accent-blue);
+    border-image-slice: 1;
+    border-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 0.5rem;
+    line-height: 3rem;
+    color: $white;
+
+    @media (min-width: $md) {
+      width: 16.66667%;
+    }
+  }
+}
+
+.supportCentreContainer {
+  margin-right: auto;
+  margin-left: auto;
+  margin-top: 1rem;
+
+  @media (min-width: $sm) {
+    width: 100%;
+  }
+
+  @media (min-width: $md) {
+    width: 41.66667%;
+  }
+
+  .contactUsImg {
+    clip-path: url(#svgScratchAmbassadorClipPath);
+    height: 270px;
+  }
+
+  .supportCentreContent {
+    margin-top: 4rem;
+
+    @media (max-width: $md) {
+      display: none;
+    }
+  }
+
+  .supportCentreList {
+    list-style: none;
+    margin-left: 1rem;
+    padding-left: 2rem;
+    border-color: $accent-purple;
+    border-left-style: solid;
+    border-left-width: 1px;
+  }
+
+  .title {
+    color: $brand-primary;
+    padding-bottom: 2rem;
+  }
+
+  .textParagraph {
+    padding-bottom: 1rem;
+    font-size: 13px;
+  }
+
+  .listItem {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .iconQuestion {
+    fill: $brand-secondary;
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    stroke-width: 0;
+    stroke: currentColor;
+    overflow: hidden;
+  }
+
+  .link {
+    font-size: 13px;
+    text-decoration: none;
+    font-weight: 500;
+    display: inline-block;
+    letter-spacing: 0.001em;
+    color: $brand-primary;
+  }
+}
+
+.formContainer {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 2rem 1rem;
+
+  @media screen and (min-width: $lg) {
+    padding-bottom: 2rem;
+    width: 58.33333%;
+  }
+
+  @media screen and (min-width: $md) and (max-width: $lg) {
+    padding-bottom: 2rem;
+    width: 58.33333%;
+  }
+
+  @media screen and (min-width: $sm) and (max-width: $md) {
+    padding-bottom: 1rem;
+  }
+
+  @media (min-width: $sm) {
+    float: left;
+    box-sizing: border-box;
+  }
+
+  @media screen and (max-width: $sm) {
+    margin: 0;
+    padding: 30px 2rem 4rem;
+  }
+
+  .formContent {
+    max-width: 800px;
+    padding: 0;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .form {
+
+    &::after {
+      clear: both;
+      content: " ";
+      display: table;
+    }
+
+    &::before {
+      content: " ";
+      display: table;
+    }
+  }
+
+  .contactFormWrapper {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .formTitle {
+    padding-bottom: 1rem;
+  }
+
+  .firstParagraph {
+    padding-bottom: 1rem;
+    max-width: 600px;
+  }
+
+  .secondParagraph {
+    max-width: 600px;
+  }
+
+  .titleContainer {
+    max-width: 800px;
+    margin-bottom: 2rem;
+
+    @media screen and (min-width: $md) and (max-width: $lg) {
+      margin-bottom: 4rem;
+    }
+
+    @media screen and (min-width: $lg) {
+      margin-bottom: 4rem;
+    }
+  }
+}
+