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

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>