Add nats homepage slice (#1025)

* Adds the NATS slice to the homepage

* corrects missing CSS

site/components/nats-slice/index.js

@@ -0,0 +1,37 @@
+// @flow
+import * as React from 'react';
+
+import styles from './style.css';
+import backgroundImg from './images/background.png';
+
+const NatsSlice = () => {
+  return (
+    <div className={`${styles.NatsSliceWrapper}`} id="genz">
+      <div className={styles.NatsSliceContent}>
+        <div className={styles.NatsSlice}>
+          <img
+            className={styles.NatsSliceTitleImage}
+            src={backgroundImg}
+            alt="text reading: We Love Tech"
+          />
+
+          <div className={styles.NatsSliceText}>
+            <p>
+              Join Red Badger, Synadia, FLEETCOR and Form3 to explore why NATS is the next
+              generation of cloud connectivity for financial blue chips. More than a message broker,
+              NATS is THE connective substrate for a global organisation–or even the whole planet.
+            </p>
+            <a
+              href="https://content.red-badger.com/events/we-love-tech/we-love-nats"
+              className={styles.NatsSliceLink}
+            >
+              Register →
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NatsSlice;

site/components/nats-slice/style.css

@@ -0,0 +1,81 @@
+@value badgerBlack, badgerWhite, scorpian, badgerRed, midBlue from '../../css/_colors.css';
+@value mediumScreen, largeScreen from "../../css/_sizes.css";
+
+.NatsSliceWrapper {
+  composes: dividerMidBlue from '../../css/_divider.css';
+  width: 100%;
+  background: midBlue;
+  color: badgerBlack;
+}
+
+.NatsSlice {
+  composes: sansSerif from '../../css/typography/_fonts.css';
+  position: relative;
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 60px 24px;
+  line-height: 1.5em;
+}
+
+/* Hacky workaround because the slice wasn't provided as indivisual assets instead it is a single image that also needed text + a button laid on top */
+.NatsSliceText {
+  width: 50%;
+  margin-top: -20px;
+}
+
+.NatsSliceTextContent {
+  padding-top: 16px;
+}
+
+.NatsSlice p {
+  font-size: 16px;
+  line-height: 1.25em;
+  margin-bottom: 20px;
+}
+
+.NatsSlice h4 {
+  margin-bottom: 16px;
+}
+
+.NatsSliceTitleImage {
+  display: block;
+  width: 100%;
+  max-width: 1440px;
+}
+
+.NatsSliceLink {
+  composes: boldSansSerif from '../../css/typography/_fonts.css';
+  cursor: pointer;
+  font-size: 18px;
+  background: badgerBlack;
+  color: badgerWhite;
+  display: block;
+  height: 60px;
+  width: 240px;
+  line-height: 60px;
+  text-align: center;
+}
+
+.NatsSliceLink:hover {
+  background: scorpian;
+}
+
+@media mediumScreen {
+  .NatsSliceText {
+    width: 50%;
+    margin-top: -40px;
+  }
+
+  .NatsSlice p {
+    font-size: 18px;
+  }
+}
+
+@media largeScreen {
+  .NatsSliceText {
+    width: 50%;
+    margin-top: -60px;
+  }
+
+}

site/css/_colors.css

@@ -27,6 +27,9 @@
 @value grey: #EDEDED;
 @value grey2: #d8d8d8;
 
+/* People are just adding random colors now */
+@value midBlue: #0091EB;
+
 /* Lines and shades */
 @value linesOnBlack: #565656;
 @value linesOnWhite: #CCCCCC;

site/css/_divider.css

@@ -1,4 +1,4 @@
-@value badgerRedOnWhite, badgerWhite, badgerBlack, daveGreen, cainYellow, mbpOrange, grey, stuBlue from "./_colors.css";
+@value badgerRedOnWhite, badgerWhite, badgerBlack, daveGreen, cainYellow, mbpOrange, grey, stuBlue, midBlue from "./_colors.css";
 @value timelineDivider from "./_zindex.css";
 @value largeScreen from "./_sizes.css";
 
@@ -35,6 +35,7 @@
 .dividerOrange,
 .dividerGreen,
 .dividerBlue,
+.dividerMidBlue,
 .dividerBlackOnTransparent,
 .dividerBlackSocialSlice,
 .dividerGrey,
@@ -73,6 +74,11 @@
   background-color: stuBlue;
 }
 
+.dividerMidBlue:before,
+.dividerMidBlue:after {
+  background-color: midBlue;
+}
+
 .dividerGrey:before,
 .dividerGrey:after {
   background-color: grey;

site/pages/home/__snapshots__/test.js.snap

@@ -117,6 +117,37 @@ Array [
       src="Homepage_2.jpg"
     />
   </div>,
+  <div
+    class="NatsSliceWrapper"
+    id="genz"
+  >
+    <div
+      class="NatsSliceContent"
+    >
+      <div
+        class="NatsSlice"
+      >
+        <img
+          alt="text reading: We Love Tech"
+          class="NatsSliceTitleImage"
+          src="background.png"
+        />
+        <div
+          class="NatsSliceText"
+        >
+          <p>
+            Join Red Badger, Synadia, FLEETCOR and Form3 to explore why NATS is the next generation of cloud connectivity for financial blue chips. More than a message broker, NATS is THE connective substrate for a global organisation–or even the whole planet.
+          </p>
+          <a
+            class="NatsSliceLink"
+            href="https://content.red-badger.com/events/we-love-tech/we-love-nats"
+          >
+            Register →
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>,
   <section
     class="caseStudyContainer"
     data-cy="case-study-slice"

site/pages/home/index.js

@@ -10,6 +10,7 @@ import HubspotSignup from './hubspot-signup';
 import TechSlice from '../../slices/tech-slice';
 import GoldCoinSlice from '../../slices/gc-slice';
 import MBPSlice from './mbp-slice';
+import NatsSlice from '../../components/nats-slice';
 
 import metaImage from './meta-image.jpg';
 import TestimonialsSlice from './client-testimonials-slice';
@@ -31,6 +32,7 @@ export default function HomePage() {
         <Social {...social} />
         <TopSlice />
         <GoldCoinSlice />
+        <NatsSlice />
         <CaseStudyOverview />
         <MBPSlice />
         <TestimonialsSlice />