Quick framing update (#199)

cirephe · mellson · web-flow · commit c5544a7de493 · 2023-09-14T09:13:36.000+02:00
* Quick framing update

* update static html page for SSR

---------

Co-authored-by: Anders Bech Mellson &lt;mellson@icloud.com&gt;
diff --git a/static/index.html b/static/index.html
@@ -4,25 +4,22 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Stately | Visualize your application logic</title>
+    <title>Stately | Understand your app logic</title>
     <link rel="stylesheet" href="./landing-page/styles.css" />
     <meta
       content="width=device-width, initial-scale=1, viewport-fit=cover"
       name="viewport"
     />
     <meta
       name="description"
-      content="Stately is building tools to visualize your application logic using XState. Learn more about our visualizer, visual editor and XState."
-    />
-    <meta
-      property="og:title"
-      content="Stately - Visualize your application logic"
+      content="Stately helps your whole team understand and collaborate on your logic through our visualizer, visual editor and XState."
     />
+    <meta property="og:title" content="Stately - Understand your app logic" />
     <meta property="og:site_name" content="Stately - Privacy policy" />
     <meta property="og:url" content="https://stately.ai" />
     <meta
       property="og:description"
-      content="Stately is building tools to visualize your application logic using XState. Learn more about our visualizer, visual editor and XState."
+      content="Stately helps your whole team understand and collaborate on your logic through our visualizer, visual editor and XState."
     />
     <meta property="og:type" content="website" />
     <meta
@@ -86,11 +83,11 @@ <h2 class="logo">
         data-edge-target="cta-1"
         data-edge-target-side="left"
       >
-        Visualize your application logic
+        Understand your app logic, <strong class="pink">visually</strong>
       </h1>
 
       <p class="subtitle fadeout-box">
-        A suite of visual tools for building app logic. Powered by
+        Build logic together as a team. Then run the flows using
         <a href="/docs/xstate">XState</a>, a best-in-class open source library
         for handling complexity at scale.
       </p>
@@ -109,7 +106,7 @@ <h2 class="logo">
           Try the editor
         </a>
         <a
-          class="button-link button-link-cta-secondary"
+          class="button-link button-link-cta-secondary ghost"
           href="https://calendly.com/d/yc8-3hq-rpc/request-a-demo"
         >
           Book a demo
diff --git a/static/landing-page/index.html b/static/landing-page/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Stately | Visualize your application logic</title>
+    <title>Stately | Understand your app logic</title>
     <link rel="stylesheet" href="./landing-page/styles.css" />
     <meta
       name="description"
-      content="Stately is building tools to visualize your application logic using XState. Learn more about our visualizer, visual editor and XState."
+      content="Stately helps your whole team understand and collaborate on your logic through our visualizer, visual editor and XState."
     />
     <meta
       property="og:title"
-      content="Stately - Visualize your application logic"
+      content="Stately - Understand your app logic"
     />
     <meta property="og:site_name" content="Stately - Privacy policy" />
     <meta property="og:url" content="https://stately.ai" />
     <meta
       property="og:description"
-      content="Stately is building tools to visualize your application logic using XState. Learn more about our visualizer, visual editor and XState."
+      content="Stately helps your whole team understand and collaborate on your logic through our visualizer, visual editor and XState."
     />
     <meta property="og:type" content="website" />
     <meta
@@ -56,9 +56,6 @@ <h2 class="logo">
         </a>
       </h2>
       <nav class="navigation">
-        <a href="/editor?source=landing-page" class="button-link orange"
-          >Try the editor</a
-        >
         <a href="/registry/login?source=landing-page" class="button-link blue"
           >Sign in</a
         >
@@ -77,11 +74,11 @@ <h2 class="logo">
         data-edge-target="cta-1"
         data-edge-target-side="left"
       >
-        Visualize your application logic
+      Understand your app logic, <strong class="pink">visually</strong>
       </h1>
 
       <p class="subtitle fadeout-box">
-        A suite of visual tools for building app logic. Powered by
+        Build logic together as a team. Then run the flows using
         <a href="/docs/xstate">XState</a>, a best-in-class open source library
         for handling complexity at scale.
       </p>
@@ -100,7 +97,7 @@ <h2 class="logo">
           Try the editor
         </a>
         <a
-          class="button-link button-link-cta-secondary"
+          class="button-link button-link-cta-secondary ghost"
           href="https://calendly.com/d/yc8-3hq-rpc/request-a-demo"
         >
           Book a demo
diff --git a/static/landing-page/styles.css b/static/landing-page/styles.css
@@ -4,6 +4,7 @@
   font-family: 'TTCommons';
   src: url('assets/ttcommons.woff2') format('woff2');
   font-display: swap;
+  font-weight: '100 1000',
 }
 
 /* -- Variables
@@ -312,13 +313,14 @@ h6 {
 
 h1 {
   font-size: var(--font-xxl);
-  font-variation-settings: 'wght' 450;
+  font-variation-settings: 'wght' 700;
   margin-bottom: 0.25em;
   text-align: center;
 }
 
 h2 {
   font-size: var(--font-large);
+  font-variation-settings: 'wght' 500;
 }
 
 body.privacy main h2,
@@ -532,6 +534,14 @@ input[type='submit'],
   color: var(--button-orange-txt);
 }
 
+.button-link.ghost {
+  background: none;
+  border: 1px solid rgba(255,255,255,0.24)
+}
+.button-link.ghost:hover, .button-link-cta-ghost:active {
+  background: rgba(255,255,255,0.11);
+}
+
 .duo-buttons {
   display: flex;
   flex-wrap: wrap;
@@ -708,7 +718,7 @@ body {
   margin: 0.3em auto 4.6em;
   max-width: var(--max-header-width);
   padding: 0 1.35em;
-}
+  }
 
 .navigation-list a {
   color: var(--white);
@@ -828,6 +838,7 @@ body {
 
 .intro-title {
   font-size: var(--font-xxxl);
+  font-variation-settings: "wght" 700;
 }
 
 [data-edge-source='first-heading'] {
@@ -2265,3 +2276,8 @@ h2.pricing-heading {
 .pricing-section {
   margin-bottom: 8rem;
 }
+
+
+.pink {
+  color: #cf249b
+}
