YAML data, navi stub, page h1s

components/footer.js

@@ -0,0 +1,5 @@
+export default function Footer({ siteData }) {
+  return (
+    <footer className="foot"></footer>
+  );
+}

components/jambonz-ui.js

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import Head from 'next/head';
 import classNames from 'classnames';
 import * as Icons from 'react-feather';
 
@@ -43,8 +42,12 @@ export function MXS({ children }) {
   return <div className="mxs">{children}</div>;
 }
 
+export function Hero({ children }) {
+  return <div className="hero wrap">{children}</div>;
+}
+
 // Extra {props} get passed to the <a> element
-export function Button({ children, href, style = 'fill', subStyle = null, ...props}) {
+export function Button({ children, href, style = 'fill', subStyle = null, ...props }) {
   const classes = {
     'btn': true,
     [`btn--${style}`]: true,
@@ -64,7 +67,7 @@ export function Button({ children, href, style = 'fill', subStyle = null, ...pro
 // Extra {props} get passed to the feather Component
 // See react-feather for all 286 icons available
 // https://github.com/feathericons/react-feather
-export function Icon({name, style = 'inline', subStyle = null, ...props}) {
+export function Icon({ name, style = 'inline', subStyle = null, ...props }) {
   const Component = Icons[name];
   const classes = {
     'icon': true,
@@ -90,29 +93,4 @@ export function Icon({name, style = 'inline', subStyle = null, ...props}) {
 
   // Inline icon
   return <Component {...props} />;
-}
-
-export function Layout({children, title = "jambonz"}) {
-  return (
-    <>
-      <Head>
-        <title>{title}</title>
-        <link rel="icon" href="/favicon.ico" />
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <meta
-          name="description"
-          content="The “bring your own everything” CPaaS"
-        />
-        <link rel="apple-touch-icon" href="/logo192.png" />
-        {/*
-          manifest.json provides metadata used when your web app is installed on a
-          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-        */}
-        <link rel="manifest" href="/manifest.json" />
-      </Head>
-      {children}
-    </>
-  );
 }

components/kit-of-parts.js

@@ -2,29 +2,13 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from './jambonz-ui';
 
-export default function Kitofparts() {
-  const text = 'jambonz is a self-hosted, “bring your own everything” open source CPaaS platform, developed by the creator of the drachtio open source sip server.';
-
+export default function KitOfParts({pageData}) {
   return (
     <>
       {/* High-level design information */}
-      <div className="wrap padr">
-        <div className="pad">
-          <img src="/svg/jambonz.svg" width="128" />
-          <MS>Kit of Parts</MS>
-        </div>
+      <div className="wrap">
         <div className="pad">
           <H5>
-            <div><strong>docs</strong></div>
-            <div>
-              <Link href="/docs">
-                <a>
-                  <Icon name="Code" />
-                  <span>jambonz nextra docs</span>
-                </a>
-              </Link>
-            </div>
-            <div>&nbsp;</div>
             <div><strong>font</strong></div>
             <div>Objectivity (free, large family—16 styles)</div>
             <div>
@@ -67,53 +51,53 @@ export default function Kitofparts() {
       </div>
       {/* Show black background style */}
       <div className="pad bg-black">
-        <div className="wrap padr">
+        <div className="wrap">
           <div className="wrap-text">
-            <H1>{text}</H1>
+            <H1>{pageData.text}</H1>
           </div>
         </div>
       </div>
-      <div className="wrap padr">
+      <div className="wrap">
         <div className="wrap-text pad">
-          <H2>{text}</H2>
+          <H2>{pageData.text}</H2>
         </div>
       </div>
       {/* Show pink background style */}
       <div className="pad bg-pink">
-        <div className="wrap padr">
+        <div className="wrap">
           <div className="wrap-text">
-            <H3>{text}</H3>
+            <H3>{pageData.text}</H3>
           </div>
         </div>
       </div>
-      <div className="wrap padr">
+      <div className="wrap">
         <div className="wrap-text pad">
-          <H4>{text}</H4>
+          <H4>{pageData.text}</H4>
         </div>
       </div>
       {/* Show grey background style */}
       <div className="pad bg-grey">
-        <div className="wrap padr">
+        <div className="wrap">
           <div className="wrap-text">
-            <H5>{text}</H5>
+            <H5>{pageData.text}</H5>
           </div>
         </div>
       </div>
-      <div className="wrap padr">
+      <div className="wrap">
         <div className="wrap-text pad">
-          <H6>{text}</H6>
+          <H6>{pageData.text}</H6>
         </div>
         <div className="wrap-text pad">
-          <P>{text}</P>
+          <P>{pageData.text}</P>
         </div>
         <div className="wrap-text pad">
-          <M>{text}</M>
+          <M>{pageData.text}</M>
         </div>
         <div className="wrap-text pad">
-          <MS>{text}</MS>
+          <MS>{pageData.text}</MS>
         </div>
         <div className="wrap-text pad">
-          <MXS>{text}</MXS>
+          <MXS>{pageData.text}</MXS>
         </div>
         <div className="pad">
           <Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
@@ -167,7 +151,7 @@ export default function Kitofparts() {
       </div>
       {/* Show jambonz background style */}
       <div className="pad bg-jambonz">
-        <div className="wrap padr">
+        <div className="wrap">
           <Button href="#" target="_blank" subStyle="light">Footer button...</Button>
         </div>
       </div>

components/layout.js

@@ -0,0 +1,32 @@
+import Head from 'next/head';
+import Navi from './navi';
+import Footer from './footer';
+
+export default function Layout({ children, siteData, title = "jambonz" }) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+          name="description"
+          content="The “bring your own everything” CPaaS"
+        />
+        <link rel="apple-touch-icon" href="/logo192.png" />
+        {/*
+          manifest.json provides metadata used when your web app is installed on a
+          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+        */}
+        <link rel="manifest" href="/manifest.json" />
+      </Head>
+      <Navi siteData={siteData} />
+      <main>
+        {children}
+      </main>
+      <Footer siteData={siteData} />
+    </>
+  );
+}

components/navi.js

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import { Button, Icon } from './jambonz-ui';
+
+function NaviItem({obj}) {
+  const router = useRouter();
+  const classes = {
+    navi__link: true,
+    active: (router.route === obj.link),
+  };
+
+  return (
+    <li>
+      <Link href={obj.link}>
+        <a className={classNames(classes)}>
+          {obj.label}
+        </a>
+      </Link>
+    </li>
+  );
+}
+
+function NaviMobile({ active, handler, siteData }) {
+  const classes = {
+    'bg-jambonz': true,
+    'wrap': true,
+    'navi__mobile': true,
+    'active': active,
+  };
+
+  return (
+    <div className={classNames(classes)}>
+      <div className="navi__mobile__head">
+        <div className="navi__mobile__login">
+          <Button href={siteData.navi.login.link} style="login" subStyle="white">{siteData.navi.login.label}</Button>
+        </div>
+        <div className="navi__mobile__icon" onClick={handler}>
+          <Icon style="fill" subStyle="white" name="X" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Navi({ siteData }) {
+  const [active, setActive] = useState(false);
+
+  const handleNavi = () => {
+    setActive(!active);
+  };
+
+  return (
+    <nav className="navi">
+      <div className="wrap navi__wrap">
+        <Link href="/">
+          <a className="navi__logo">
+            <img src="/svg/jambonz.svg" width="128" />
+          </a>
+        </Link>
+        <ul className="navi__links">
+          {siteData.navi.links.map((obj) => {
+            return <NaviItem key={obj.id} obj={obj} />
+          })}
+        </ul>
+        <div className="navi__login">
+          <Button href={siteData.navi.login.link} style="login">{siteData.navi.login.label}</Button>
+        </div>
+        <div className="navi__icon" onClick={handleNavi}>
+          <Icon style="fill" name="Menu" />
+        </div>
+      </div>
+      <NaviMobile active={active} handler={handleNavi} siteData={siteData} />
+    </nav>
+  );
+}