update styles to match wireframes

Author: eashaw

website/assets/styles/pages/pricing.less

@@ -81,12 +81,17 @@
     margin-right: 6px;
     width: 50%;
     strong {
-      color: #192147;
+      color: @core-fleet-black-75;
+      font-weight: 400;
       font-size: 16px;
       line-height: 20px;
     }
   }
 
+  [purpose='price-dollar-sign'] {
+    vertical-align: text-bottom;
+    font-size: 24px;
+  }
   [purpose='premium-card'] {
     width: 50%;
   }
@@ -192,7 +197,8 @@
       font-weight: 700;
       font-size: 12px;
       line-height: 20px;
-      color: #192147;
+      color: @core-fleet-black-75;
+      font-weight: 400;
     }
     p {
       color: #ff5c83;
@@ -202,6 +208,7 @@
   [purpose='contact-sales-link'] {
     text-align: center;
     margin-top: 8px;
+    margin-bottom: 0px;
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
@@ -239,7 +246,7 @@
     font-size: 16px;
     padding: 15px;
     margin-top: 8px;
-    margin-bottom: 32px;
+    margin-bottom: 0px;
     color: #FFF;
   }
   [purpose='chat-button'], [purpose='card-button'] {
@@ -397,6 +404,12 @@
       padding-left: 0px;
       padding-right: 0px;
     }
+    [purpose='premium-tier-card'] {
+      padding: 40px 140px;
+    }
+    [purpose='free-tier-card'] {
+      padding: 40px 140px;
+    }
   }
   @media (max-width: 991px) {
     // >992 width:

website/views/pages/pricing.ejs

@@ -15,7 +15,7 @@
                 <h2>Community</h2>
                 <h3>Unlimited hosts</h3>
                 <div class="d-flex flex-row align-items-center">
-                  <h1>$0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
+                  <h1><span purpose="price-dollar-sign">$</span>0</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
                 </div>
               </div>
             </div>
@@ -31,14 +31,14 @@
                   <h2>Premium</h2>
                   <h3>Unlimited hosts</h3>
                   <div class="d-flex flex-row align-items-center justify-content-center">
-                    <h4>From </h4><h1 class="mb-2">$7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
+                    <h4>From </h4><h1 class="mb-2"><span purpose="price-dollar-sign">$</span>7.00</h1><strong>/ host <br purpose="premium-price-linebreak">/ month</strong>
                   </div>
                 </div>
               </div>
             </div>
             <div>
               <a purpose="card-button" class="btn btn-block btn-lg btn-primary mx-auto mb-0" href="/customers/register">Get started</a>
-              <p purpose="contact-sales-link">For organizations with large deployments, <a  @click="clickOpenChatWidget()">contact sales</a>.</p>
+              <p purpose="contact-sales-link">Have a large deployment? <a @click="clickOpenChatWidget()">contact sales</a>.</p>
             </div>
           </div>
         </div>