Static home page components, stylized hero, navi style refactor

components/jambonz-ui.js

@@ -46,7 +46,6 @@ export function MXS({ children }) {
 export function Hero({ data, subStyle }) {
   const classes = {
     'hero': true,
-    'wrap': true,
   };
 
   if (subStyle) {
@@ -55,21 +54,23 @@ export function Hero({ data, subStyle }) {
 
   return (
     <div className={classNames(classes)}>
-      <div className="hero__headline">
-        <H1>{data.headline}</H1>
-      </div>
-      <div className="hero__subtext">
-        {Array.isArray(data.subtext) ? data.subtext.map((subtext) => {
-          return <H5 key={nanoid()}>{subtext}</H5>;
-        }) : (
-          <H5>{data.subtext}</H5>
+      <div className="wrap hero__wrap">
+        <div className="hero__headline">
+          <H1>{data.headline}</H1>
+        </div>
+        <div className="hero__subtext">
+          {Array.isArray(data.subtext) ? data.subtext.map((subtext) => {
+            return <H5 key={nanoid()}>{subtext}</H5>;
+          }) : (
+            <H5>{data.subtext}</H5>
+          )}
+        </div>
+        {data.cta && (
+          <div className="hero__cta">
+            <Button href={data.url} target="_blank">{data.cta}</Button>
+          </div>
         )}
       </div>
-      {data.cta && (
-        <div className="hero__cta">
-          <Button href={data.url} target="_blank">{data.cta}</Button>
-        </div>
-      )}
     </div>
   );
 }

data/home.yml

@@ -4,4 +4,19 @@ hero:
     - jambonz is the open source CPaaS 
     - built for communications service providers.
   cta: Sign up for free
-  url: /#
+  url: /#
+tech:
+  image: /images/Jambonz_app_screenshot.png
+  notes:
+    -
+      title: Adapts to your needs
+      text: Designed to plug-and-play with your chosen carriers and tech stack.
+    -
+      title: Privacy comes first
+      text: Our innovative design means that your customers' most sensitive personal information is never stored on our systems.
+    -
+      title: Open source
+      text: We work in the open, so that you can see all that we do and can gain the greatest value from our products.
+    -
+      title: Reliable
+      text: Built by a team that has been delivering five 9’s products to telcos since VoIP was a thing.

pages/index.js

@@ -1,11 +1,29 @@
+import { nanoid } from 'nanoid';
 import Layout from '../components/layout';
-import { Hero } from '../components/jambonz-ui';
+import { Hero, H6, MS } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Home({ data }) {
   return (
     <Layout siteData={data.site}>
       <Hero data={data.home.hero} subStyle="home" />
+      <div className="tech wrap">
+        <div className="tech__image">
+          <img src={data.home.tech.image} />
+        </div>
+        <ul className="tech__notes">
+          {data.home.tech.notes.map((note) => {
+            return (
+              <li key={nanoid()} className="tech__note">
+                <H6>
+                  <strong>{note.title}</strong>
+                </H6>
+                <MS>{note.text}</MS>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     </Layout>
   );
 }

styles/_layout.scss

@@ -1,3 +1,6 @@
+/******************************************************************************
+ * Main container wrap
+*******************************************************************************/
 .wrap {
   max-width: calc(#{$width-max} + #{$width-padding} * 2);
   width: 100%;
@@ -6,13 +9,16 @@
   padding-right: $width-padding;
 }
 
+/******************************************************************************
+ * Above the fold
+*******************************************************************************/
 .hero {
-  padding-top: calc(96px + #{$navi-height});
+  padding-top: 96px;
   padding-bottom: 96px;
   text-align: center;
 
-  @media (max-width: $width-tablet-2) {
-    padding-top: calc(64px + #{$navi-height});
+  @media (max-width: $width-tablet-1) {
+    padding-top: 64px;
     padding-bottom: 64px;
   }
 
@@ -23,7 +29,25 @@
   }
 
   &--pricing {
-    background-color: $pink;
+    position: relative;
+
+    &:before {
+      content: '';
+      background-color: $pink;
+      width: 100%;
+      height: calc(100% + #{$navi-height});
+      transform: translateY(-#{$navi-height});
+      z-index: 1;
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .hero__wrap {
+      position: relative;
+      z-index: 2;
+    }
 
     .hero__headline {
       color: $jambonz;
@@ -49,4 +73,60 @@
       margin-right: auto;
     }
   }
+}
+
+/******************************************************************************
+ * Homepage app screenshot
+*******************************************************************************/
+.tech {
+  display: flex;
+  padding-bottom: 96px;
+
+  @media (max-width: $width-tablet-1) {
+    flex-wrap: wrap;
+    padding-bottom: 64px;
+  }
+
+  &__image {
+    max-width: 66.6666666667vw;
+
+    @media (max-width: $width-tablet-1) {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+
+  &__notes {
+    max-width: 320px;
+    padding-left: 16px;
+    padding-top: 16px;
+
+    @media (max-width: $width-tablet-1) {
+      max-width: 100%;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+    }
+
+    @media (max-width: $width-mobile) {
+      max-width: 320px;
+      margin: 0 auto;
+    }
+  }
+
+  &__note {
+    margin-top: 16px;
+
+    @media (max-width: $width-tablet-1) {
+      width: 50%;
+      margin: 0;
+      padding: 32px 16px;
+    }
+
+    @media (max-width: $width-mobile) {
+      text-align: center;
+      width: 100%;
+    }
+  }
 }

styles/_navi.scss

@@ -1,9 +1,7 @@
 .navi {
   padding: 16px 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+  position: relative;
+  z-index: $navi-index;
 
   // Menu / X icons for mobile nav interactions
   .icon {
@@ -80,7 +78,7 @@
     &.active {
       pointer-events: auto;
       opacity: 1;
-      z-index: 999;
+      z-index: $navi-index;
     }
 
     &__head {

styles/_vars.scss

@@ -35,7 +35,8 @@ $icon-size-3: 36px;
 /******************************************************************************
  * Sizes
 *******************************************************************************/
-$navi-height: 74px;
+$navi-index: 999;
+$navi-height: 75px;
 $width-max: 1440px;
 $width-tablet-1: 1024px;
 $width-tablet-2: 768px;