Update enterprise features and add services to pricing pages (#204)

* Merge generate and modify flows into one Pro item on pricing plan

* Add list of Enterprise features to Pricing page

* Add enterprise and services to pricing plan

Author: laurakalbag

static/landing-page/styles.css

@@ -4,7 +4,7 @@
   font-family: 'TTCommons';
   src: url('assets/ttcommons.woff2') format('woff2');
   font-display: swap;
-  font-weight: '100 1000',
+  font-weight: '100 1000';
 }
 
 /* -- Variables
@@ -535,10 +535,11 @@ input[type='submit'],
 
 .button-link.ghost {
   background: none;
-  border: 1px solid rgba(255,255,255,0.24)
+  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);
+.button-link.ghost:hover,
+.button-link-cta-ghost:active {
+  background: rgba(255, 255, 255, 0.11);
 }
 
 .duo-buttons {
@@ -717,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);
@@ -837,7 +838,7 @@ body {
 
 .intro-title {
   font-size: var(--font-xxxl);
-  font-variation-settings: "wght" 700;
+  font-variation-settings: 'wght' 700;
 }
 
 [data-edge-source='first-heading'] {
@@ -2121,21 +2122,37 @@ path.edge {
 
 /* -- Pricing page (copied from the React code Billing page)
 -------------------------------------------------------------------- */
-.pricing-grid {
-  display: grid;
-  grid-gap: 0;
-  grid-template-columns: repeat(3, minmax(0px, 1fr));
-  margin-top: 3rem;
+
+.pricing-arrow {
+  display: none;
 }
 
-@media (max-width: 1280px) {
+@media (min-width: 1280px) {
   .pricing-grid {
-    max-width: 600px;
-    margin: 0 auto;
-    grid-template-columns: repeat(1, minmax(0px, 1fr));
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: repeat(3, 1fr);
+    margin-top: 3rem;
+    grid-template-areas:
+      'community professional enterprise'
+      'services services services';
   }
+
   .pricing-arrow {
-    display: none;
+    display: block;
+  }
+
+  .tier-wrapper.community {
+    grid-area: community;
+  }
+  .tier-wrapper.professional {
+    grid-area: professional;
+  }
+  .tier-wrapper.enterprise {
+    grid-area: enterprise;
+  }
+  .tier-wrapper.services {
+    grid-area: services;
   }
 }
 
@@ -2184,7 +2201,7 @@ path.edge {
   color: white;
 }
 
-.enterprise {
+.tier.enterprise {
   /* padding copied from H2 */
   padding-top: 0.83em;
   padding-bottom: 0.83em;
@@ -2200,9 +2217,15 @@ path.edge {
   margin-top: 0;
 }
 
+.tier.services {
+  margin-top: 1rem;
+}
+
 .sign-up-button {
-  margin-top: 3rem;
-  margin-bottom: 2rem;
+  font-size: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  max-width: 25rem;
 }
 
 .pricing-heading {
@@ -2276,7 +2299,6 @@ h2.pricing-heading {
   margin-bottom: 8rem;
 }
 
-
 .pink {
-  color: #cf249b
+  color: #cf249b;
 }

static/pricing/index.html

@@ -67,8 +67,8 @@ <h1 class="pricing-heading">Pricing</h1>
           and unlock more features. Then add users to enable team collaboration.
         </p>
         <div class="pricing-grid">
-          <div class="tier-wrapper">
-            <div class="tier">
+          <div class="tier-wrapper community">
+            <div class="tier community">
               <div class="tier-header">
                 <h2 class="pricing-heading">Community</h2>
                 <p class="pricing-text price-number">$0</p>
@@ -101,7 +101,7 @@ <h2 class="pricing-heading">Community</h2>
               </svg>
             </div>
           </div>
-          <div class="tier-wrapper">
+          <div class="tier-wrapper professional">
             <div class="tier professional">
               <div class="tier-header">
                 <h2 class="pricing-heading">Professional</h2>
@@ -126,8 +126,9 @@ <h2 class="pricing-heading">Professional</h2>
                 <li class="pricing-text">Version history</li>
                 <li class="pricing-text">Import from GitHub</li>
                 <li class="pricing-text">Live simulation mode</li>
-                <li class="pricing-text">Generate flows using AI ✨</li>
-                <li class="pricing-text">Modify flows using AI ✨</li>
+                <li class="pricing-text">
+                  Generate and modify flows using AI ✨
+                </li>
                 <li class="pricing-text">Lock machines</li>
                 <li class="pricing-text">Color states and transitions</li>
                 <li class="pricing-text">Markdown export</li>
@@ -155,8 +156,8 @@ <h2 class="pricing-heading">Professional</h2>
               </svg>
             </div>
           </div>
-          <div>
-            <div class="enterprise">
+          <div class="tier-wrapper enterprise">
+            <div class="tier enterprise">
               <div class="tier-header">
                 <h2 class="pricing-heading">Enterprise</h2>
                 <p class="pricing-text price-number">
@@ -179,12 +180,67 @@ <h2 class="pricing-heading">Enterprise</h2>
                   >Contact us</a
                 >
               </div>
-              <div class="feature-list">
-                <p class="pricing-text">
+              <ul class="feature-list">
+                <li class="pricing-text">Everything from Community and Pro</li>
+                <li class="pricing-text">Flexible hosting</li>
+                <li class="pricing-text">Dedicated support</li>
+                <li class="pricing-text">Custom server locations</li>
+                <li class="pricing-text">User provisioning</li>
+                <li class="pricing-text">Single sign-on (SSO)</li>
+                <li class="pricing-text">Audit logs</li>
+                <li class="pricing-text">Embed Stately</li>
+                <li class="pricing-text">
+                  Custom action and invoked actor collections
+                </li>
+                <li class="pricing-text">Custom formats for export</li>
+                <li class="pricing-text">Prioritized feature requests</li>
+                <li class="pricing-text">
                   A custom plan tailored to the requirements of your
                   organization
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="tier-wrapper services">
+            <div class="tier services">
+              <div class="tier-header">
+                <h2 class="pricing-heading">Services</h2>
+                <p class="pricing-text price-number">
+                  <svg
+                    width="48"
+                    height="48"
+                    viewBox="0 0 14 14"
+                    focusable="false"
+                    class="chakra-icon css-onkibi"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M0.913134,0.920639 C1.49851,0.331726 2.29348,0 3.12342,0 L10.8766,0 C11.7065,0 12.5015,0.331725 13.0869,0.920639 C13.6721,1.50939 14,2.30689 14,3.13746 L14,8.12943 C13.9962,8.51443 13.9059,8.97125 13.7629,9.32852 C13.6128,9.683 13.3552,10.0709 13.0869,10.3462 C12.813,10.6163 12.4265,10.8761 12.0734,11.0274 C11.7172,11.1716 11.2607,11.263 10.8766,11.2669 L10.1234,11.2669 L10.1234,12.5676 L10.1209,12.5676 C10.1204,12.793 10.0633,13.0791 9.97807,13.262 C9.8627,13.466 9.61158,13.7198 9.40818,13.8382 L9.40824,13.8383 C9.4077,13.8386 9.40716,13.8388 9.40661,13.8391 C9.40621,13.8393 9.4058,13.8396 9.40539,13.8398 L9.40535,13.8397 C9.22958,13.9254 8.94505,13.9951 8.75059,14 L8.74789,14 C8.35724,13.9963 7.98473,13.8383 7.71035,13.5617 L5.39553,11.2669 L3.12342,11.2669 C2.29348,11.2669 1.49851,10.9352 0.913134,10.3462 C0.644826,10.0709 0.387187,9.683 0.23711,9.32852 C0.0941235,8.97125 0.00379528,8.51443 0,8.12943 L0,3.13746 C0,2.30689 0.327915,1.50939 0.913134,0.920639 Z M3.12342,1.59494 C2.71959,1.59494 2.33133,1.75628 2.04431,2.04503 C1.75713,2.33395 1.59494,2.72681 1.59494,3.13746 L1.59494,8.12943 C1.59114,8.35901 1.62114,8.51076 1.71193,8.72129 C1.79563,8.9346 1.88065,9.06264 2.04431,9.22185 C2.33133,9.5106 2.71959,9.67195 3.12342,9.67195 L5.72383,9.67195 C5.93413,9.67195 6.13592,9.75502 6.28527,9.90308 L8.52848,12.1269 L8.52848,10.4694 C8.52848,10.029 8.88552,9.67195 9.32595,9.67195 L10.8766,9.67195 C11.1034,9.67583 11.2517,9.64614 11.4599,9.55518 C11.6712,9.47132 11.7976,9.38635 11.9557,9.22185 C12.1193,9.06264 12.2044,8.9346 12.2881,8.72129 C12.3789,8.51076 12.4089,8.35901 12.4051,8.12943 L12.4051,3.13746 C12.4051,2.72681 12.2429,2.33394 11.9557,2.04503 C11.6687,1.75628 11.2804,1.59494 10.8766,1.59494 L3.12342,1.59494 Z"
+                    ></path>
+                  </svg>
+                </p>
+                <p>
+                  <a
+                    href="mailto:[email protected]?subject=I'm interested in the Stately Studio services"
+                    class="button-link sign-up-button"
+                    >Contact us</a
+                  >
                 </p>
               </div>
+              <ul class="feature-list">
+                <li class="pricing-text">
+                  Consultancy on state management and/or using XState in your
+                  team
+                </li>
+                <li class="pricing-text">
+                  Workshops for XState V4 and XState V5 beta
+                </li>
+                <li class="pricing-text">
+                  Custom solutions for state machine logic and model-based
+                  testing
+                </li>
+                <li class="pricing-text">Priority support</li>
+              </ul>
             </div>
           </div>
         </div>