Match pricing page to Studio content (update Pro features) (#165)

Author: laurakalbag

static/landing-page/styles.css

@@ -2113,7 +2113,7 @@ path.edge {
 -------------------------------------------------------------------- */
 .pricing-grid {
   display: grid;
-  grid-gap: 1rem;
+  grid-gap: 0;
   grid-template-columns: repeat(3, minmax(0px, 1fr));
   margin-top: 3rem;
 }
@@ -2153,15 +2153,16 @@ path.edge {
 .tier-wrapper {
   display: flex;
   position: relative;
+  margin-bottom: 1rem;
 }
 
 .tier {
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 0.75rem;
   width: 100%;
   background: var(--chakra-colors-gray-850);
-  padding-inline-start: 2rem;
-  padding-inline-end: 2rem;
+  padding-inline-start: 1.5rem;
+  padding-inline-end: 1.5rem;
   padding-bottom: 2rem;
 }
 
@@ -2257,7 +2258,7 @@ h2.pricing-heading {
 .pricing-arrow {
   margin-top: 2rem;
   color: var(--chakra-colors-gray-600);
-  width: 58px;
+  width: 38px;
 }
 
 .pricing-section {

static/pricing/index.html

@@ -83,14 +83,14 @@ <h2 class="pricing-heading">Community</h2>
                 <li class="pricing-text">Unlimited public projects</li>
                 <li class="pricing-text">Design flows</li>
                 <li class="pricing-text">Simulate flows</li>
-                <li class="pricing-text">Export flows as JSON</li>
+                <li class="pricing-text">Export flows as code</li>
               </ul>
             </div>
             <div class="pricing-arrow">
               <svg
-                width="48"
+                width="45"
                 height="24"
-                viewBox="10 0 48 24"
+                viewBox="14 0 48 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
               >
@@ -121,17 +121,24 @@ <h2 class="pricing-heading">Professional</h2>
               </div>
               <ul class="feature-list">
                 <li class="pricing-text">Everything from Community</li>
-                <li class="pricing-text">30-day free trial</li>
-                <li class="pricing-text">Private projects</li>
-                <li class="pricing-text">Team collaboration</li>
+                <li class="pricing-text">Teams and shared projects</li>
+                <li class="pricing-text">Private and unlisted projects</li>
+                <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">Color states and transitions</li>
                 <li class="pricing-text">Priority support</li>
+                <li class="pricing-text">GitHub Sync (coming soon!)</li>
+                <li class="pricing-text">Workflows (coming soon!)</li>
+                <li class="pricing-text">Live collaboration (coming soon!)</li>
+                <li class="pricing-text">Many more pro-only features coming soon</li>
               </ul>
             </div>
             <div class="pricing-arrow">
               <svg
-                width="48"
+                width="45"
                 height="24"
-                viewBox="10 0 48 24"
+                viewBox="14 0 48 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
               >