update jambonz-ui

pages/index.js

@@ -61,7 +61,7 @@ function Dilemma({data}) {
   }, [mobile, active, setActive, initialRef]);
 
   return (
-    <section className="bg-grey dilemma pad">
+    <section className="bg--grey dilemma pad">
       <div className="wrap dilemma__wrap">
         <div className="dilemma__headline">
           <H2>{data.headline}</H2>

pages/jambonz-ui.js

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
 import Layout from '../src/components/layout';
+import Icons from '../src/components/icons';
 import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon, Hero } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
 
@@ -59,70 +60,88 @@ export default function JambonzUI({ data }) {
           </div>
         </Hero>
         {/* Show black background style */}
-        <div className="pad bg-black">
+        <div className="pad bg--black">
           <div className="wrap">
             <div className="wrap-text">
-              <H1>{pageData.text}</H1>
+              <H1>H1: {pageData.text}</H1>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H2>{pageData.text}</H2>
+            <H2>H2: {pageData.text}</H2>
           </div>
         </div>
         {/* Show pink background style */}
-        <div className="pad bg-pink">
+        <div className="pad bg--pink">
           <div className="wrap">
             <div className="wrap-text">
-              <H3>{pageData.text}</H3>
+              <H3>H3: {pageData.text}</H3>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H4>{pageData.text}</H4>
+            <H4>H4: {pageData.text}</H4>
           </div>
         </div>
         {/* Show grey background style */}
-        <div className="pad bg-grey">
+        <div className="pad bg--grey">
           <div className="wrap">
             <div className="wrap-text">
-              <H5>{pageData.text}</H5>
+              <H5>H5: {pageData.text}</H5>
             </div>
           </div>
         </div>
         <div className="wrap">
           <div className="wrap-text pad">
-            <H6>{pageData.text}</H6>
+            <H6>H6: {pageData.text}</H6>
           </div>
           <div className="wrap-text pad">
-            <P>{pageData.text}</P>
+            <P>P: {pageData.text}</P>
           </div>
           <div className="wrap-text pad">
-            <M>{pageData.text}</M>
+            <P>P: With a <strong>strong</strong> element</P>
           </div>
           <div className="wrap-text pad">
-            <MS>{pageData.text}</MS>
+            <P>P: With a <strong className="med">medium</strong> element</P>
           </div>
           <div className="wrap-text pad">
-            <MXS>{pageData.text}</MXS>
+            <P>P: With an <em>emphasized</em> element</P>
+          </div>
+          <div className="wrap-text pad">
+            <P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
+          </div>
+          <div className="wrap-text pad">
+            <M>M: {pageData.text}</M>
+          </div>
+          <div className="wrap-text pad">
+            <MS>MS: {pageData.text}</MS>
+          </div>
+          <div className="wrap-text pad">
+            <MXS>MXS: {pageData.text}</MXS>
           </div>
           <div className="pad">
-            <img src="/images/Jambonz_app_screenshot.webp" width="1280" height="842" alt="jambonz node-red screenshot" />
+            <div className="icons icons--set">
+              {Object.keys(Icons).map((icon) => {
+                return <Icon key={icon} mainStyle="fill" name={icon} />;
+              })}
+            </div>
           </div>
           <div className="pad">
-            <div className="icons">
-              <Icon mainStyle="fill" name="Server" />
-              <Icon mainStyle="fill" name="Folder" />
-              <Icon mainStyle="fill" name="Cloud" />
-              <Icon mainStyle="fill" name="Layers" />
-              <Icon mainStyle="fill" name="UserCheck" />
-              <Icon mainStyle="fill" name="Lock" />
-              <Icon mainStyle="fill" name="ThumbsUp" />
-              <Icon mainStyle="fill" subStyle="purple" name="Phone" />
-              <Icon mainStyle="fill" subStyle="teal" name="PhoneCall" />
-              <Icon mainStyle="fill" subStyle="blue" name="Activity" />
+            <div className="icons icons--set">
+              <Icon mainStyle="fill" subStyle="dark" name="MapPin" />
+              <Icon mainStyle="fill" subStyle="purple" name="MapPin" />
+              <Icon mainStyle="fill" subStyle="teal" name="MapPin" />
+              <Icon mainStyle="fill" subStyle="blue" name="MapPin" />
+            </div>
+          </div>
+          <div className="pad">
+            <div className="icons icons--set">
+              <Icon mainStyle="pill" subStyle="dark" name="Heart" />
+              <Icon mainStyle="pill" subStyle="purple" name="Heart" />
+              <Icon mainStyle="pill" subStyle="teal" name="Heart" />
+              <Icon mainStyle="pill" subStyle="blue" name="Heart" />
               <Icon mainStyle="pill" name="Heart" />
             </div>
           </div>
@@ -130,17 +149,31 @@ export default function JambonzUI({ data }) {
             <img src="/svg/drachtio.svg" width="313" height="71" alt="drachtio" />
           </div>
           <div className="pad">
-            <Button href="#" mainStyle="login">Log In</Button>
+            <Button href="/regions/?redirect=login" mainStyle="login">Log In</Button>
+          </div>
+        </div>
+        <div className="bg--jambonz">
+          <div className="pad">
+            <Button href="/regions/?redirect=login" mainStyle="login" subStyle="white">Log In</Button>
+          </div>
+        </div>
+        <div className="wrap">
+          <div className="btns pad">
+            <Button href="/regions/?redirect=register">Sign up for free</Button>
+            <Button href="/regions/?redirect=register" subStyle="dark">Get started for free</Button>
           </div>
           <div className="btns pad">
-            <Button href="#">Button</Button>
-            <Button href="#" subStyle="dark">styles...</Button>
+            <Button href="/regions/?redirect=register" subStyle="purple">Do it</Button>
+            <Button href="/regions/?redirect=register" subStyle="teal">Do it</Button>
+            <Button href="/regions/?redirect=register" subStyle="blue">Do it</Button>
           </div>
-          <div className="btns pad">
-            <Button href="#" subStyle="purple">Optional</Button>
-            <Button href="#" subStyle="teal">button</Button>
-            <Button href="#" subStyle="blue">styles...</Button>
+        </div>
+        <div className="bg--jambonz">
+          <div className="pad">
+            <Button href="mailto:support@jambonz.org?subject=Jambonz Support" subStyle="light" target="_blank">support@jambonz.org</Button>
           </div>
+        </div>
+        <div className="wrap">
           <div className="btns pad">
             <Button href="https://github.com/jambonz" target="_blank" mainStyle="pill">
               <Icon name="GitHub" />
@@ -152,9 +185,9 @@ export default function JambonzUI({ data }) {
             </Button>
           </div>
           <div className="pad">
-            <Button href="#" mainStyle="pill" subStyle="jambonz">
+            <Button href="mailto:support@jambonz.org?subject=Additional Services Support" mainStyle="pill" subStyle="jambonz" target="_blank">
               <Icon name="Send" />
-              <span>Contact us to get started</span>
+              <span>Contact us</span>
             </Button>
           </div>
         </div>

pages/pricing.js

@@ -27,7 +27,7 @@ function Structure({data}) {
 
 function Services({data}) {
   return (
-    <section className="bg-pink services pad">
+    <section className="bg--pink services pad">
       <div className="wrap services__wrap">
         <div className="services__headline">
           <H2>{data.headline}</H2>

pages/regions.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import { nanoid } from 'nanoid';
 
 import Layout from '../src/components/layout';
-import { Hero, Icon, P, H6 } from '../src/components/jambonz-ui';
+import { Hero, Icon, P } from '../src/components/jambonz-ui';
 import { getData } from '../src/lib/data';
 
 function Regions({ data }) {

pages/why.js

@@ -6,7 +6,7 @@ import { getData } from '../src/lib/data';
 
 function Facts({data}) {
   return (
-    <section className="bg-pink facts">
+    <section className="bg--pink facts">
       <div className="wrap facts__wrap">
         <div className="facts__items">
           {data.map((fact) => {