Update landing page pricing to the yearly option (#196)

* Update landing page pricing to the yearly option

* Update static/pricing/index.html

Co-authored-by: Kevin Maes <[email protected]>

* Update static/pricing/index.html

Co-authored-by: David Khourshid <[email protected]>

---------

Co-authored-by: Kevin Maes <[email protected]>
Co-authored-by: David Khourshid <[email protected]>

Author: 3 people

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import React, { useEffect } from 'react';
 import { drawArrows } from '../components/landing-page-arrows';
+import '/landing-page/styles.css'; // import the CSS file before the HTML file to avoid layout shifts
 
 // https://github.com/facebook/docusaurus/discussions/8387#discussioncomment-6067944
 // Loading a static HTML only works during SSR, so we use this hack to make it work during CSR

static/landing-page/styles.css

@@ -339,7 +339,7 @@ h2 {
   font-family: 'TTCommons', Arial, sans-serif;
   font-weight: 750;
   margin: 0.83em 0;
-} 
+}
 
 p {
   margin: 1em 0;
@@ -2226,9 +2226,10 @@ h2.pricing-heading {
 
 .pricing-text.details-bold {
   font-size: var(--font-xxsmall);
-  color: var(--chakra-colors-gray-50);
+  color: var(--chakra-colors-gray-200) !important;
   margin-top: 0.5rem;
-  font-variation-settings: 'wght' 600;
+  font-variation-settings: 'wght' 200;
+  max-width: 8em;
 }
 
 .pricing-text.description {

static/pricing/index.html

@@ -106,12 +106,12 @@ <h2 class="pricing-heading">Community</h2>
               <div class="tier-header">
                 <h2 class="pricing-heading">Professional</h2>
                 <div class="horizontal">
-                  <p class="pricing-text price-number">$15</p>
+                  <p class="pricing-text price-number">$12.50</p>
                   <div class="details-wrapper">
                     <p class="pricing-text details">per seat/month</p>
-                    <p class="pricing-text details">billed monthly</p>
+                    <p class="pricing-text details">billed yearly</p>
                     <p class="pricing-text details details-bold">
-                      Save 17% billed yearly
+                      $15 per seat when billed monthly
                     </p>
                   </div>
                 </div>