Updates for dynamic inlets bundle and pro baseline

Signed-off-by: Alex Ellis (OpenFaaS Ltd) <alexellis2@gmail.com>

Author: alexellis

_includes/logo-strip.html

@@ -8,7 +8,6 @@
       <img class="h-10 w-auto grayscale opacity-60" src="/images/customers/radiantlogic.png" alt="Radiant Logic">
       <img class="h-7 w-auto grayscale opacity-60" src="/images/customers/lambda.svg" alt="Lambda">
       <img class="h-7 w-auto grayscale opacity-60" src="/images/customers/essentry.svg" alt="Essentry">
-      <img class="h-7 w-auto grayscale opacity-60" src="/images/customers/econolite.png" alt="Econolite">
       <img class="h-5 w-auto grayscale opacity-60" src="/images/customers/linkbycar.svg" alt="LinkByCar">
       <img class="h-7 w-auto grayscale opacity-60" src="/images/customers/posteo.svg" alt="Posteo">
     </div>

_includes/pricing/checkout-modal.html

@@ -49,7 +49,7 @@ <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
           </h3>
           <div class="mt-2">
             <p class="text-sm text-gray-500">
-              Deploy inlets tunnels for commercial and/or business use. Each subscription includes 5 tunnels.
+              Deploy inlets tunnels for commercial and/or business use. Each subscription includes 2 tunnels.
             </p>
           </div>
         </div>
@@ -62,8 +62,8 @@ <h3 class="text-lg font-semibold text-gray-900" id="modal-title">
               id="quantity"
               name="quantity"
               type="number"
-              value="1"
-              min="1"
+              value="2"
+              min="2"
               class="mt-1 ml-3 px-1 w-16 block border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
             />
           </div>

_includes/pricing/pricing-grid.html

@@ -29,7 +29,18 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Personal</h2>
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Tunnels included.</th>
             <td class="py-5 pr-4">
-              <span class="block text-sm text-gray-700 text-right">5 tunnels</span>
+              <span class="block text-sm text-gray-700 text-right">Maximum of 5</span>
+            </td>
+          </tr>
+
+          <tr class="border-t border-gray-200">
+            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
+            <td class="py-5 pr-4">
+              <!-- Heroicon name: minus -->
+              <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">No</span>
             </td>
           </tr>
 
@@ -131,17 +142,6 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Personal</h2>
           </tr>
 
 
-          <tr class="border-t border-gray-200">
-            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
-            <td class="py-5 pr-4">
-              <!-- Heroicon name: minus -->
-              <svg class="ml-auto h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">No</span>
-            </td>
-          </tr>
-
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">{% include pricing/tooltip-label.html label="Update seat count via API." tip="Standard REST API, requires approval for access" %}</th>
             <td class="py-5 pr-4">
@@ -219,7 +219,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Personal</h2>
       <div class="px-4 mt-16">
         <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Pro Commercial</h2>
         <p class="mt-4">
-          <span class="text-4xl font-extrabold text-gray-900">$125.00</span>
+          <span class="text-4xl font-extrabold text-gray-900">$50.00</span>
           <span class="text-base font-medium text-gray-500">/mo</span>
         </p>
         <p class="mt-4 text-sm text-gray-500">For use at work, in teams, and shared environments.</p>
@@ -241,14 +241,25 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Pro Commercial</h
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Tunnels included.</th>
             <td class="py-5 pr-4">
-              <span class="block text-sm text-gray-700 text-right">5 tunnels</span>
+              <span class="block text-sm text-gray-700 text-right">Starts with 2</span>
+            </td>
+          </tr>
+
+          <tr class="border-t border-gray-200">
+            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
+            <td class="py-5 pr-4">
+              <!-- Heroicon name: check -->
+              <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Yes</span>
             </td>
           </tr>
 
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Cost per tunnel.</th>
             <td class="py-5 pr-4">
-              <span class="block text-sm text-gray-700 text-right">25 USD / mo</span>
+              <span class="block text-sm text-gray-700 text-right">2 included, 25 USD / mo each additional</span>
             </td>
           </tr>
 
@@ -342,17 +353,6 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">inlets Pro Commercial</h
             </td>
           </tr>
 
-          <tr class="border-t border-gray-200">
-            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
-            <td class="py-5 pr-4">
-              <!-- Heroicon name: check -->
-              <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Yes</span>
-            </td>
-          </tr>
-
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">{% include pricing/tooltip-label.html label="Update seat count via API." tip="Standard REST API, requires approval for access" %}</th>
             <td class="py-5 pr-4">
@@ -433,7 +433,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
           <span class="text-base font-medium text-gray-500">/mo</span>
         </p>
         <p class="mt-4 text-sm text-gray-500">For service providers and managed access to customer services.</p>
-        <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+        <button class="uplink-checkout-button mt-6 block border border-gray-800 rounded-md bg-gray-800 w-full py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</button>
       </div>
 
       <table class="mt-8 w-full">
@@ -451,7 +451,18 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Tunnels included per cluster.</th>
             <td class="py-5 pr-4">
-              <span class="block text-sm text-gray-700 text-right">10</span>
+              <span class="block text-sm text-gray-700 text-right">Starts with 10</span>
+            </td>
+          </tr>
+
+          <tr class="border-t border-gray-200">
+            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
+            <td class="py-5 pr-4">
+              <!-- Heroicon name: check -->
+              <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Yes</span>
             </td>
           </tr>
 
@@ -559,17 +570,6 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
             </td>
           </tr>
 
-          <tr class="border-t border-gray-200">
-            <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
-            <td class="py-5 pr-4">
-              <!-- Heroicon name: check -->
-              <svg class="ml-auto h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Yes</span>
-            </td>
-          </tr>
-
           <tr class="border-t border-gray-200">
             <th class="py-5 px-4 text-sm font-normal text-gray-500 text-left" scope="row">{% include pricing/tooltip-label.html label="Update seat count via API." tip="Standard REST API, requires approval for access" %}</th>
             <td class="py-5 pr-4">
@@ -640,7 +640,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
       </table>
 
       <div class="border-t border-gray-200 px-4 pt-5">
-        <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+        <button class="uplink-checkout-button block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</button>
       </div>
     </div>
 
@@ -685,7 +685,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
             <td class="h-full py-8 px-6 align-top">
               <div class="relative h-full table">
                 <p>
-                  <span class="text-4xl font-extrabold text-gray-900">$125</span>
+                  <span class="text-4xl font-extrabold text-gray-900">$50</span>
                   <span class="text-base font-medium text-gray-500">/mo</span>
                 </p>
                 <p class="mt-4 mb-16 text-sm text-gray-500">For use at work, in teams, and shared environments.</p>
@@ -701,7 +701,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
                   <span class="text-base font-medium text-gray-500">/mo</span>
                 </p>
                 <p class="mt-4 mb-16 text-sm text-gray-500">For service providers and managed access to customer services.</p>
-                <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+                <button class="uplink-checkout-button absolute bottom-0 flex-grow block w-full bg-gray-800 border border-gray-800 rounded-md 5 py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</button>
               </div>
             </td>
           </tr>
@@ -712,13 +712,38 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
           <tr>
             <th class="py-5 px-6 text-sm font-normal text-gray-500 text-left" scope="row">Tunnels included.</th>
             <td class="py-5 px-6">
-              <span class="block text-sm text-gray-700">5 tunnels</span>
+              <span class="block text-sm text-gray-700">Maximum of 5</span>
             </td>
             <td class="py-5 px-6">
-              <span class="block text-sm text-gray-700">5 tunnels</span>
+              <span class="block text-sm text-gray-700">Starts with 2</span>
             </td>
             <td class="py-5 px-6">
-              <span class="block text-sm text-gray-700">10 tunnels</span>
+              <span class="block text-sm text-gray-700">Starts with 10</span>
+            </td>
+          </tr>
+
+          <tr>
+            <th class="py-5 px-6 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
+            <td class="py-5 px-6">
+              <!-- Heroicon name: minus -->
+              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Limited in Personal</span>
+            </td>
+            <td class="py-5 px-6">
+              <!-- Heroicon name: check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Commercial</span>
+            </td>
+            <td class="py-5 px-6">
+              <!-- Heroicon name: check -->
+              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+              <span class="sr-only">Included in Uplink</span>
             </td>
           </tr>
 
@@ -728,7 +753,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
               <span class="block text-sm text-gray-700">Included</span>
             </td>
             <td class="py-5 px-6">
-              <span class="block text-sm text-gray-700">25 USD / mo</span>
+              <span class="block text-sm text-gray-700">2 included, 25 USD / mo each additional</span>
             </td>
             <td class="py-5 px-6">
               <span class="block text-sm text-gray-700">10 included, 25 USD / mo each additional</span>
@@ -941,31 +966,6 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
             </td>
           </tr>
 
-          <tr>
-            <th class="py-5 px-6 text-sm font-normal text-gray-500 text-left" scope="row">Commercial use.</th>
-            <td class="py-5 px-6">
-              <!-- Heroicon name: minus -->
-              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Limited in Personal</span>
-            </td>
-            <td class="py-5 px-6">
-              <!-- Heroicon name: check -->
-              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Included in Commercial</span>
-            </td>
-            <td class="py-5 px-6">
-              <!-- Heroicon name: check -->
-              <svg class="h-5 w-5 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="sr-only">Included in Uplink</span>
-            </td>
-          </tr>
-
           <tr>
             <th class="py-5 px-6 text-sm font-normal text-gray-500 text-left" scope="row">{% include pricing/tooltip-label.html label="Update seat count via API." tip="Standard REST API, requires approval for access" %}</th>
             <td class="py-5 px-6">
@@ -1097,7 +1097,7 @@ <h2 class="text-lg leading-6 font-medium text-gray-900">Inlets Uplink</h2>
             </td>
 
             <td class="pt-5 px-6">
-              <a href="https://subscribe.openfaas.com/buy/a1087de1-3eb6-4bbc-8a3b-2f0955ec3ce1" class="block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</a>
+              <button class="uplink-checkout-button block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900">Buy Uplink</button>
             </td>
           </tr>
         </tfoot>

_includes/pricing/pricing-uplink-callout.html

@@ -1,6 +1,6 @@
 <div class="bg-gray-100">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="max-w-3xl mx-auto pt-1 pb-3">
+    <div class="max-w-3xl mx-auto pt-0 pb-6">
       <div class="bg-blue-600 rounded-lg px-6 py-5 sm:flex sm:items-center sm:justify-between">
         <div>
           <h3 class="text-base font-semibold text-white">Evaluating Inlets Uplink?</h3>