Add nats homepage slice (#1026)

* Adds the NATS slice to the homepage * corrects missing CSS * Changes nats slice to more closely match wasm slice * Remakes the nats slice using individual assets * corrects divider
redbadger · Mar 29, 2022 · e6d96c7 · e6d96c7
1 parent 53e0809
commit e6d96c7
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 46 deletions.
diff --git a/site/components/nats-slice/images/background.png b/site/components/nats-slice/images/background.png
diff --git a/site/components/nats-slice/images/nats-logo.png b/site/components/nats-slice/images/nats-logo.png
diff --git a/site/components/nats-slice/images/title.png b/site/components/nats-slice/images/title.png
diff --git a/site/components/nats-slice/index.js b/site/components/nats-slice/index.js
@@ -3,30 +3,54 @@ import * as React from 'react';
 
 import styles from './style.css';
 import backgroundImg from './images/background.png';
+import titleImg from './images/title.png';
+import natsLogo from './images/nats-logo.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>
+            <img
+              className={styles.NatsSliceTitleImage}
+              src={titleImg}
+              alt="text reading: We Love Tech"
+            />
+            <div className={styles.NatsSliceTextContent}>
+              <div className={styles.NatsSliceBodyheader}>
+                <h4>We love</h4>
+                <img src={natsLogo} alt="N.A.T.S logo" />
+              </div>
+              <div className={styles.NatsSliceCTA}>
+                <div>
+                  <p>
+                    Wednesday 20th April - 18:30
+                    <br />
+                    Red Badger HQ &amp; Virtual
+                  </p>
+                </div>
+              </div>
+              <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 className={styles.NatsSliceImageWrapper}>
+            <img
+              className={styles.NatsSliceImage}
+              src={backgroundImg}
+              alt="An illustration of the letters n.a.t.s floating above a cloud"
+            />
           </div>
         </div>
       </div>

diff --git a/site/components/nats-slice/style.css b/site/components/nats-slice/style.css
@@ -8,6 +8,26 @@
   color: badgerBlack;
 }
 
+.NatsSliceBodyheader {
+  composes: boldSansSerif from '../../css/typography/_fonts.css';
+  display: flex;
+}
+
+.NatsSliceBodyheader h4 {
+  font-size: 35px;
+  margin-right: 14px;
+}
+
+.NatsSliceBodyheader img {
+  width: 162px;
+  height: 42px;
+  margin-top: -7px;
+}
+
+.NatsSliceStrong {
+  composes: boldSansSerif from '../../css/typography/_fonts.css';
+}
+
 .NatsSlice {
   composes: sansSerif from '../../css/typography/_fonts.css';
   position: relative;
@@ -18,18 +38,18 @@
   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;
+.NatsSliceHeading {
+  composes: serif from '../../css/typography/_fonts.css';
+  font-size: 28px;
+  line-height: 1.25em;
 }
 
 .NatsSliceTextContent {
   padding-top: 16px;
 }
 
 .NatsSlice p {
-  font-size: 16px;
+  font-size: 18px;
   line-height: 1.25em;
   margin-bottom: 20px;
 }
@@ -41,7 +61,7 @@
 .NatsSliceTitleImage {
   display: block;
   width: 100%;
-  max-width: 1440px;
+  max-width: 610px;
 }
 
 .NatsSliceLink {
@@ -51,31 +71,127 @@
   background: badgerBlack;
   color: badgerWhite;
   display: block;
-  height: 60px;
-  width: 240px;
-  line-height: 60px;
+  height: 72px;
+  width: 179px;
+  line-height: 72px;
   text-align: center;
 }
 
 .NatsSliceLink:hover {
   background: scorpian;
 }
 
+.NatsSliceCloseButton {
+  position: absolute;
+  display: block;
+  height: 16px;
+  width: 16px;
+  background: none;
+  top: 14px;
+  right: 14px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.NatsSliceCloseButton:after,
+.NatsSliceCloseButton:before {
+  content: '';
+  display: block;
+  background: badgerWhite;
+  height: 2px;
+  width: 20px;
+  position: absolute;
+  left: -2px;
+  top: 7px;
+}
+
+.NatsSliceCloseButton:after {
+  transform: rotate(45deg);
+}
+
+.NatsSliceCloseButton:before {
+  transform: rotate(-45deg);
+}
+
+.NatsSliceImageWrapper {
+  display: none;
+  max-width: 472px;
+}
+
+.NatsSliceImageWrapper img {
+  display: none;
+}
+
+.NatsSliceCTA {
+  composes: boldSansSerif from '../../css/typography/_fonts.css';
+  display: block;
+}
+
+.NatsSliceCTA p {
+  display: flex;
+}
+
 @media mediumScreen {
-  .NatsSliceText {
-    width: 50%;
-    margin-top: -40px;
+  .NatsSlice {
+    display: flex;
+    flex-direction: row;
+    padding: 40px 60px;
+  }
+
+  .NatsSliceTextContent {
+    padding-top: 40px;
+  }
+
+  .NatsSliceImage {
+    margin-top: 14px;
+  }
+
+  .NatsSliceHeading {
+    font-size: 60px;
+  }
+
+  .NatsSlice h4 {
+    margin-bottom: 40px;
   }
 
   .NatsSlice p {
-    font-size: 18px;
+    font-size: 22px;
+    margin-bottom: 40px;
+  }
+
+  .NatsSliceLink {
+    font-size: 24px;
+    line-height: 72px;
+  }
+
+  .NatsSliceText {
+    width: 100%;
+    min-width: 420px;
   }
 }
 
 @media largeScreen {
+  .NatsSliceImageWrapper {
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
+  .NatsSliceImageWrapper img {
+    display: block;
+    width: 200%;
+    position: absolute;
+    right: -422px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   .NatsSliceText {
-    width: 50%;
-    margin-top: -60px;
+    width: 52%;
+  }
+
+  .NatsSliceTextContent {
+    margin-right: 50px;
   }
-
 }
diff --git a/site/pages/home/__snapshots__/test.js.snap b/site/pages/home/__snapshots__/test.js.snap
@@ -127,23 +127,58 @@ Array [
       <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"
+          <img
+            alt="text reading: We Love Tech"
+            class="NatsSliceTitleImage"
+            src="title.png"
+          />
+          <div
+            class="NatsSliceTextContent"
           >
-            Register →
-          </a>
+            <div
+              class="NatsSliceBodyheader"
+            >
+              <h4>
+                We love
+              </h4>
+              <img
+                alt="N.A.T.S logo"
+                src="nats-logo.png"
+              />
+            </div>
+            <div
+              class="NatsSliceCTA"
+            >
+              <div>
+                <p>
+                  Wednesday 20th April - 18:30
+                  <br />
+                  Red Badger HQ & Virtual
+                </p>
+              </div>
+            </div>
+            <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
+          class="NatsSliceImageWrapper"
+        >
+          <img
+            alt="An illustration of the letters n.a.t.s floating above a cloud"
+            class="NatsSliceImage"
+            src="background.png"
+          />
         </div>
       </div>
     </div>