Adding region landing page for registering/signing in from jambonz.org (#37)

cypress/integration/navi.spec.js

@@ -30,8 +30,9 @@ describe('Navigation', () => {
 
       cy.get('.navi__login .btn')
         .contains(site.navi.login.label)
-        .should('have.attr', 'href', site.navi.login.link)
-        .should('have.attr', 'target', '_blank');
+        .should('have.attr', 'href', 
+          `${site.navi.login.link.pathname}?redirect=${site.navi.login.link.query.redirect}`
+        )
     });
   });
 

data/home.yml

@@ -4,7 +4,10 @@ hero:
     - jambonz is the open source CPaaS 
     - built for communications service providers.
   cta: Sign up for free
-  url: https://jambonz.us/register
+  url:
+    pathname: /regions/
+    query:
+      redirect: register
 tech:
   image:
     src: /images/Jambonz_app_screenshot.webp
@@ -94,6 +97,9 @@ byo:
     - PhoneCall
     - Folder
     - Cloud
-  comment: Why pay someone to upcharge you for all of that when it’s basically a one-click experience to provision all of those yourself in today's world. You know how to <a href="https://jambonz.us" target="_blank">click</a>, right?
+  comment: Why pay someone to upcharge you for all of that when it’s basically a one-click experience to provision all of those yourself in today's world. You know how to <a href="/regions/?=register">click</a>, right?
   cta: Get started for free
-  url: https://jambonz.us/register
+  url:
+    pathname: /regions/
+    query:
+      redirect: register

data/regions.yml

@@ -0,0 +1,21 @@
+hero:
+  headline: Choose your location
+  subtext: jambonz currently operates in the following regions
+
+regions:
+  -
+    name: us
+    title: United States
+    text: jambonz.us
+    url: https://jambonz.us/sign-in
+    altUrl: https://jambonz.us/register
+    icon: MapPin
+    color: blue
+  -
+    name: eu
+    title: Europe
+    text: jambonz.xyz
+    url: https://jambonz.xyz/sign-in
+    altUrl: https://jambonz.xyz/register
+    icon: MapPin
+    color: teal

data/site.yml

@@ -15,7 +15,10 @@ navi:
     label: Home
   login:
     label: Log In
-    link: https://jambonz.us
+    link: 
+      pathname: /regions/
+      query:
+        redirect: login
   links:
     -
       label: Why jambonz

data/why.yml

@@ -2,7 +2,10 @@ 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
-  url: https://jambonz.us/register
+  url: 
+    pathname: /regions/
+    query:
+      redirect: register
 facts:
   -
     icon: Layers
@@ -34,4 +37,7 @@ os:
       url: https://github.com/drachtio
   logo: /svg/drachtio.svg
   cta: Get started for free
-  url: https://jambonz.us/register
+  url:
+    pathname: /regions/
+    query:
+      redirect: register

pages/index.js

@@ -144,7 +144,7 @@ function BYO({data}) {
           </H4>
         </div>
         <div className="byo__cta">
-          <Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
+          <Button href={data.url} subStyle="dark">{data.cta}</Button>
         </div>
       </div>
     </section>
@@ -153,7 +153,6 @@ function BYO({data}) {
 
 export default function Home({ data }) {
   const latest = data.site.latest.find((item) => item.active);
-
   return (
     <Layout siteData={data.site}>
       {latest && <Latest data={latest} />}

pages/regions.js

@@ -0,0 +1,63 @@
+import Link from 'next/link';
+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 { getData } from '../src/lib/data';
+
+function Regions({ data }) {
+  const router = useRouter();
+  const redirect = router.query.redirect;
+
+  return (
+    <section className="regions">
+      {data.regions.map((region) => {
+        const href = (redirect === 'login') ? region.url : region.altUrl;
+
+        return (
+          <div key={nanoid()} className="wrap regions__wrap">
+            <div className="regions__icon">
+              <Icon name={region.icon} subStyle={region.color} mainStyle="fill" />
+            </div>
+            <div className="regions__title">
+              <P className={`med color--${region.color}`}>
+                {region.title}
+              </P>
+            </div>
+            <div className="regions__text">
+              <P className="med">
+                <Link href={href}>
+                  <a className="i" title={`jambonz ${region.title}`}>
+                    <span className="regions__text">{region.text}</span>
+                    <Icon name="ExternalLink" />
+                  </a>
+                </Link>
+              </P>
+            </div>
+          </div>
+        );
+      })}
+    </section>
+  );
+}
+
+export default function RegionsPage({ data }) {
+  return (
+    <Layout siteData={data.site}>
+      <Hero data={data.regions.hero} altStyle="pink">
+        <Regions data={data.regions} />
+      </Hero>
+    </Layout>
+  );
+}
+
+export async function getStaticProps() {
+  const data = getData('regions');
+
+  return {
+    props: {
+      data,
+    },
+  };
+}

pages/why.js

@@ -56,7 +56,7 @@ function OS({data}) {
           </Button>
         </div>
         <div className="os__cta">
-          <Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
+          <Button href={data.url} subStyle="dark" >{data.cta}</Button>
         </div>
       </div>
     </section>

src/components/jambonz-ui.js

@@ -144,7 +144,7 @@ export function Hero({ data = {}, subStyle, altStyle, children }) {
         )}
         {data.cta && (
           <div className="hero__cta">
-            <Button href={data.url} target="_blank">{data.cta}</Button>
+            <Button href={data.url}>{data.cta}</Button>
           </div>
         )}
         {children}

src/components/navi.js

@@ -40,7 +40,7 @@ function NaviMobile({ active, handler, siteData }) {
     <div className={classNames(classes)}>
       <div className="navi__mobile__head">
         <div className="navi__mobile__login">
-          <Button href={siteData.navi.login.link} target="_blank" mainStyle="login" subStyle="white">
+          <Button href={siteData.navi.login.link} mainStyle="login" subStyle="white" onClick={handler}>
             {siteData.navi.login.label}
           </Button>
         </div>
@@ -103,7 +103,7 @@ export default function Navi({ siteData }) {
           <Icon mainStyle="fill" name="Menu" />
         </div>
         <div className="navi__login">
-          <Button href={siteData.navi.login.link} target="_blank" mainStyle="login">
+          <Button href={siteData.navi.login.link} mainStyle="login">
             {siteData.navi.login.label}
           </Button>
         </div>

src/styles/_layout.scss

@@ -169,6 +169,10 @@
       left: 0;
       top: 0;
     }
+
+    h1 {
+      color: $jambonz;
+    }
   }
 
   &__wrap {

src/styles/_typography.scss

@@ -107,6 +107,10 @@ em {
   @include mxs();
 }
 
+.med {
+  @include font-medium();
+}
+
 .color--teal {
   color: $teal;
 }

src/styles/global.scss

@@ -57,4 +57,5 @@
 @import 'pages/home.scss';
 @import 'pages/why.scss';
 @import 'pages/pricing.scss';
-@import 'pages/jambonz-ui.scss';
+@import 'pages/jambonz-ui.scss';
+@import 'pages/regions.scss'

src/styles/pages/_regions.scss

@@ -0,0 +1,20 @@
+/******************************************************************************
+ * Regions
+*******************************************************************************/
+.regions {
+  text-align: center;
+  margin-top: 64px;
+
+  &__wrap {
+    @include flex-cols();
+    padding-bottom: 72px;
+  }
+
+  &__icon {
+    padding-bottom: 24px;
+  }
+
+  &__text {
+    color: $black;
+  }
+}