Page hero stubs, tweak footer

components/jambonz-ui.js

@@ -42,8 +42,35 @@ export function MXS({ children }) {
   return <div className="mxs">{children}</div>;
 }
 
-export function Hero({ children }) {
-  return <div className="hero wrap">{children}</div>;
+export function Hero({ data, subStyle }) {
+  const classes = {
+    'hero': true,
+    'wrap': true,
+  };
+
+  if (subStyle) {
+    classes[`hero--${subStyle}`] = true;
+  }
+
+  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, index) => {
+          return <H5 key={index}>{subtext}</H5>;
+        }) : (
+          <H5>{data.subtext}</H5>
+        )}
+      </div>
+      {data.cta && (
+        <div className="hero__cta">
+          <Button href="#" target="_blank">{data.cta}</Button>
+        </div>
+      )}
+    </div>
+  );
 }
 
 // Extra {props} get passed to the <a> element

components/kit-of-parts.js

@@ -149,12 +149,6 @@ export default function KitOfParts({pageData}) {
           </Button>
         </div>
       </div>
-      {/* Show jambonz background style */}
-      <div className="pad bg-jambonz">
-        <div className="wrap">
-          <Button href="#" target="_blank" subStyle="light">Footer button...</Button>
-        </div>
-      </div>
     </>
   );
 }

components/layout.js

@@ -23,7 +23,7 @@ export default function Layout({ children, siteData, title = "jambonz" }) {
         <link rel="manifest" href="/manifest.json" />
       </Head>
       <Navi siteData={siteData} />
-      <main>
+      <main className="main">
         {children}
       </main>
       <Footer siteData={siteData} />

data/home.yml

@@ -1,2 +1,6 @@
-h1: Build unique voice solutions, faster.
-cta: Sign up for free
+hero:
+  headline: Build unique voice solutions, faster.
+  subtext:
+    - jambonz is the open source CPaaS 
+    - built for communications service providers.
+  cta: Sign up for free

data/pricing.yml

@@ -1,2 +1,5 @@
-h1: Simple, capacity-based pricing.
-cta: Contact us to get started
+hero:
+  headline: Simple, capacity-based pricing.
+  subtext:
+    - There are no per-minute charges.
+    - "You choose the application processing capacity that you need and pay a monthly fee based on:"

data/privacy.yml

@@ -1 +1,3 @@
-h1: Privacy Policy
+hero:
+  headline: Privacy Policy
+  subtext: This is the privacy policy page...

data/terms.yml

@@ -1 +1,3 @@
-h1: Terms of Service
+hero:
+  headline: Terms of Service
+  subtext: This is the terms of service page...

data/why.yml

@@ -1,2 +1,4 @@
-h1: Why choose jambonz?
-cta: Get started for free
+hero:
+  headline: Why choose jambonz?
+  subtext: jambonz is the communications platform that brings your ideas to life. So you can bring your best to your customers every day.
+  cta: Get started for free

pages/index.js

@@ -1,13 +1,11 @@
 import Layout from '../components/layout';
-import { Hero, H1 } from '../components/jambonz-ui';
+import { Hero } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Home({ data }) {
   return (
     <Layout siteData={data.site}>
-      <Hero>
-        <H1>{data.home.h1}</H1>
-      </Hero>
+      <Hero data={data.home.hero} subStyle="home" />
     </Layout>
   );
 }

pages/pricing.js

@@ -1,13 +1,11 @@
 import Layout from '../components/layout';
-import { Hero, H1 } from '../components/jambonz-ui';
+import { Hero } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Pricing({ data }) {
   return (
     <Layout siteData={data.site}>
-      <Hero>
-        <H1>{data.pricing.h1}</H1>
-      </Hero>
+      <Hero data={data.pricing.hero} subStyle="pricing" />
     </Layout>
   );
 }

pages/privacy.js

@@ -1,13 +1,11 @@
 import Layout from '../components/layout';
-import { Hero, H1 } from '../components/jambonz-ui';
+import { Hero } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Privacy({ data }) {
   return (
     <Layout siteData={data.site}>
-      <Hero>
-        <H1>{data.privacy.h1}</H1>
-      </Hero>
+      <Hero data={data.privacy.hero} subStyle="privacy" />
     </Layout>
   );
 }

pages/terms.js

@@ -1,13 +1,11 @@
 import Layout from '../components/layout';
-import { Hero, H1 } from '../components/jambonz-ui';
+import { Hero } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Terms({ data }) {
   return (
     <Layout siteData={data.site}>
-      <Hero>
-        <H1>{data.terms.h1}</H1>
-      </Hero>
+      <Hero data={data.terms.hero} subStyle="terms" />
     </Layout>
   );
 }

pages/why.js

@@ -1,13 +1,11 @@
 import Layout from '../components/layout';
-import { Hero, H1 } from '../components/jambonz-ui';
+import { Hero } from '../components/jambonz-ui';
 import { getData } from '../lib/data';
 
 export default function Why({ data }) {
   return (
     <Layout siteData={data.site}>
-      <Hero>
-        <H1>{data.why.h1}</H1>
-      </Hero>
+      <Hero data={data.why.hero} subStyle="why" />
     </Layout>
   );
 }

styles/_buttons.scss

@@ -18,7 +18,7 @@
   }
 
   &--login {
-    font-family: 'objectivityregular';
+    font-family: 'objectivitymedium';
     font-size: $ms-size;
     background-color: transparent;
     border: 2px solid $jambonz;

styles/_footer.scss

@@ -45,5 +45,9 @@
   &__support {
     text-align: center;
     padding-top: 96px;
+
+    @media (max-width: $width-mobile) {
+      padding-top: 64px;
+    }
   }
 }

styles/_layout.scss

@@ -10,4 +10,32 @@
   padding-top: 96px;
   padding-bottom: 96px;
   text-align: center;
+
+  &--why {
+    .hero__subtext > div {
+      max-width: 870px;
+    }
+  }
+
+  &--pricing {
+    .hero__subtext {
+      > div {
+        max-width: 820px;
+      }
+
+      > div + div {
+        margin-top: 32px;
+      }
+    }
+  }
+
+  &__subtext {
+    margin-top: 16px;
+    margin-bottom: 32px;
+    
+    > div {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }

styles/_navi.scss

@@ -100,10 +100,6 @@
         font-size: $h6-size;
         font-family: 'objectivitymedium';
         margin: 0;
-
-        &.active {
-          text-decoration: underline;
-        }
       }
     }
 

styles/_typography.scss

@@ -54,7 +54,7 @@ a:not(.btn) {
 }
 
 strong {
-  font-family: 'objectivitybold';
+  font-family: 'objectivitymedium';
 }
 
 em {
@@ -134,6 +134,11 @@ em {
   font-size: $h4-size;
   line-height: 1.5;
   letter-spacing: -0.04px;
+  font-family: 'objectivitymedium';
+
+  em {
+    font-family: 'objectivitymedium_slanted';
+  }
 
   @media (max-width: $width-tablet-1) {
     font-size: $h5-size;
@@ -152,6 +157,11 @@ em {
   font-size: $h5-size;
   line-height: 1.67;
   letter-spacing: -0.03px;
+  font-family: 'objectivitymedium';
+
+  em {
+    font-family: 'objectivitymedium_slanted';
+  }
 
   @media (max-width: $width-tablet-1) {
     font-size: $h6-size;
@@ -170,6 +180,11 @@ em {
   font-size: $h6-size;
   line-height: 1.8;
   letter-spacing: -0.03px;
+  font-family: 'objectivitymedium';
+
+  em {
+    font-family: 'objectivitymedium_slanted';
+  }
 
   @media (max-width: $width-tablet-1) {
     font-size: $p-size;

styles/global.scss

@@ -46,4 +46,4 @@
 /******************************************************************************
  * Kit of Parts
 *******************************************************************************/
-@import 'kitofparts.scss';
+@import 'kit-of-parts.scss';