Cleanup some UI (#78)

jambonz · Oct 22, 2023 · ffcae20 · ffcae20 · vercel · Oct 22, 2023
1 parent 7e49f79
commit ffcae20
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/data/home.yml b/data/home.yml
@@ -1,9 +1,8 @@
 hero:
   headline: Build unique voice solutions, faster.
-  subtext:
-    - jambonz is the open source voice platform 
-    - for conversational AI providers and CSPs.
-  cta: Create a free account on jambonz.cloud
+  subtext: jambonz is the open source voice platform for conversational AI providers and CSPs.
+  ctaline: Create a free account on <a href="https://jambonz.cloud/register">jambonz.cloud</a> today!
+  cta: Create your free account
   url: https://jambonz.cloud/register
 
 tech:

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -76,6 +76,11 @@ export function Hero({ data = {}, subStyle, altStyle, children }) {
             </H2>
           </div>
         )}
+        {data.ctaline && (
+          <div className="hero__ctaline">
+            <p dangerouslySetInnerHTML={{ __html: data.ctaline }} />
+          </div>
+        )}
         {data.cta && (
           <div className="hero__cta">
             <Button as={Link} href={data.url}>{data.cta}</Button>

diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
@@ -107,6 +107,14 @@
   &--home {
     padding-bottom: 64px;
     padding-top: 32px;
+
+    .hero__subtext {
+      max-width: 530px;
+
+      @media (max-width: ui-vars.$width-tablet-1) {
+        max-width: 470px;
+      }
+    }
   }
 
   &--why {
@@ -166,6 +174,10 @@
       margin-right: auto;
     }
   }
+
+  &__ctaline {
+    margin-bottom: 32px;
+  }
 }
 
 /******************************************************************************

diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
@@ -3,10 +3,10 @@
  * Utilized in src/components/hooks: useMobileMedia
 *******************************************************************************/
 :root {
-  --mobile-media: 896px;
+  --mobile-media: 1024px;
 }
 
-$mobile-width: 896px;
+$mobile-width: 1024px;
 
 /******************************************************************************
  * Sizes