Optimise mobile viewport

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

Author: alexellis

_data/customers.yml

@@ -6,16 +6,12 @@
   logo: bryter.jpg
 - name: BCubed Engineering
   logo: bcubed.png
-- name: Curiflow
-  logo: curiflow.png
 - name: Deloitte Cyber LLC
   logo: deloitte.png
 - name: End to End Networks
   logo: e2enetworks.png
 - name: Fullscript
   logo: fullscript.png
-- name: Kubiya
-  logo: kubiya.png
 - name: Lifetime Value Corporation
   logo: ltvco.png
 - name: Majesco

_includes/landing-page/landing-bottom-cta-cards.html

@@ -1,55 +1,63 @@
 <div class="container">
-    <div class="columns is-multiline">
-        <div class="column is-12 is-spaced-bottom">
-            <div class="cards-wrapper">
+    <h2 class="title is-size-3-tablet is-size-2-desktop has-text-grey-darker mb-5">
+        Start your Serverless Journey
+    </h2>
+    <div class="columns is-multiline is-centered">
 
-                <div class="card has-text-centered">
-                    <div class="card-content">
-                        <div class="card-logo">
-                            <figure class="image">
-                                <img src="{{ site.baseurl }}/images/openfaas/whale.png" alt="logo">
-                            </figure>
-                        </div>
-                        <h3 class="title is-size-4 is-size-3-desktop has-text-grey-darker">
-                            Start your Serverless Journey
-                        </h3>
-                        <h3 class="title has-text-weight-light is-size-5 is-size-4-desktop has-text-grey">
-                            Understand the use-cases for functions and learn at your own pace with the OpenFaaS handbook: <i>Serverless For Everyone Else</i>.
-                        </h3>
-
-                    </div>
-                    <a href="http://store.openfaas.com/l/serverless-for-everyone-else" target="_blank" class="button is-primary is-large">
-                        <span class="icon"><i class="fas fa-book-reader"></i></span>
-                        <span>GET THE EBOOK</span>
-                    </a>
+        <div class="column is-12-mobile is-6-tablet is-4-desktop" style="padding: 0.75rem;">
+            <div style="background: #E6E7E8; border-radius: 10px; padding: 2rem 1.5rem; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;">
+                <div style="margin-bottom: 1.25rem;">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 48px; height: 48px; color: #3B5EE9;">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                    </svg>
                 </div>
+                <h3 class="title is-size-4 is-size-3-desktop has-text-grey-darker">
+                    Get started with Python
+                </h3>
+                <p class="has-text-weight-light is-size-5 has-text-grey-dark" style="flex-grow: 1;">
+                    Build and scale your first Python function with a step-by-step walkthrough.
+                </p>
+                <a href="https://www.openfaas.com/blog/build-and-scale-python-function/" class="button is-primary is-large" style="margin-top: 1.5rem; border-radius: 7px;">
+                    <span>READ TUTORIAL</span>
+                </a>
+            </div>
+        </div>
 
-                <div class="card has-text-centered">
-                    <div class="card-content">
-                        <div class="card-logo">
-                            <figure class="image">
-                                <span style="font-size: 60pt" class="icon"><i class="fas fa-server"></i></span>
-                            </figure>
-                        </div>
-                        <h3 class="title is-size-4 is-size-3-desktop has-text-grey-darker">
-                            Run OpenFaaS in Production
-                        </h3>
-                        <p class="title has-text-weight-light is-size-5 is-size-4-desktop has-text-grey">
-                            OpenFaaS Pro is a commercially licensed version of OpenFaaS meant for production use.
-                        </p>
-                        <p class="title has-text-weight-light is-size-5 is-size-4-desktop has-text-grey">
-                            You'll gain access to new features to make your team more efficient and productive.
-                        </p>
-                    </div>
-
-                    <a href="https://openfaas.com/pricing" class="button is-primary is-large">
-                        <span class="icon"><i class="fas fa-server"></i></span>
-                        <span>VIEW PRICING</span>
-                    </a>
+        <div class="column is-12-mobile is-6-tablet is-4-desktop" style="padding: 0.75rem;">
+            <div style="background: #E6E7E8; border-radius: 10px; padding: 2rem 1.5rem; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;">
+                <div style="margin-bottom: 1.25rem;">
+                    <img src="{{ site.baseurl }}/images/openfaas/whale.png" alt="Serverless For Everyone Else" style="width: 80px; height: auto;">
                 </div>
+                <h3 class="title is-size-4 is-size-3-desktop has-text-grey-darker">
+                    Serverless For Everyone Else
+                </h3>
+                <p class="has-text-weight-light is-size-5 has-text-grey-dark" style="flex-grow: 1;">
+                    Alex's hands-on eBook for building and deploying functions with Node.js.
+                </p>
+                <a href="http://store.openfaas.com/l/serverless-for-everyone-else" target="_blank" class="button is-primary is-large" style="margin-top: 1.5rem; border-radius: 7px;">
+                    <span>GET THE EBOOK</span>
+                </a>
+            </div>
+        </div>
 
+        <div class="column is-12-mobile is-6-tablet is-4-desktop" style="padding: 0.75rem;">
+            <div style="background: #E6E7E8; border-radius: 10px; padding: 2rem 1.5rem; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;">
+                <div style="margin-bottom: 1.25rem;">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 48px; height: 48px; color: #3B5EE9;">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
+                    </svg>
+                </div>
+                <h3 class="title is-size-4 is-size-3-desktop has-text-grey-darker">
+                    Run OpenFaaS in Production
+                </h3>
+                <p class="has-text-weight-light is-size-5 has-text-grey-dark" style="flex-grow: 1;">
+                    Deploy functions to production with autoscaling, SSO/IAM, and GitOps.
+                </p>
+                <a href="https://openfaas.com/pricing" class="button is-primary is-large" style="margin-top: 1.5rem; border-radius: 7px;">
+                    <span>VIEW PRICING</span>
+                </a>
             </div>
         </div>
+
     </div>
 </div>
-

_includes/landing-page/landing-customers.html

@@ -17,6 +17,8 @@
 <style>
     .customer-logo{
         filter: grayscale(1);
+        max-height: 60px;
+        object-fit: contain;
     }
 </style>
 
@@ -29,10 +31,10 @@ <h2 class="title is-size-3 is-size-2-desktop has-text-white" style="margin-botto
         </div>
 
         <div class="column is-12" style="padding-top: 0;">
-            <div class="columns is-multiline" style="margin-top: 0; margin-bottom: 0;">
+            <div class="columns is-multiline is-mobile" style="margin-top: 0; margin-bottom: 0;">
                 {% for customer in site.data.customers %}
                 {% if customer %}
-                <div class="column is-2-desktop is-4-tablet is-6-mobile" style="padding: 0.5rem;">
+                <div class="column is-2-desktop is-3-tablet is-4-mobile" style="padding: 0.5rem;">
                     <figure class="image is-customer-logo" style="margin: 0;">
                         <img class="customer-logo" src="images/customers/{{ customer.logo }}" alt="{{ customer.name }} logo" title="{{ customer.name }}">
                     </figure>

_includes/landing-page/landing-description.html

@@ -4,79 +4,57 @@
             <h2 class="title is-size-3-tablet is-size-2-desktop has-text-grey-darker">
                 Run your code anywhere with the same unified experience.
             </h2>
-            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-grey mt-2">
-                You can deploy OpenFaaS to any Kubernetes cluster
+            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-grey-dark mt-2">
+                Deploy OpenFaaS to any Kubernetes cluster. Write a new function and ship it to production in minutes, knowing it will scale to meet demand.
             </p>
-            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-grey mt-2">
-                Our templates follow best practices meaning you can write and deploy a new function to production within a few minutes, knowing it will scale to meet demand.
-            </p>
-            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-grey mt-2">
-                OpenFaaS Pro brings flexible auto-scaling, event-connectors, monitoring dashboards, Single Sign On, RBAC, and direct to engineering support.
+            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-grey-dark mt-2">
+                OpenFaaS Pro adds autoscaling, event connectors, monitoring dashboards, SSO, RBAC, and direct-to-engineering support.
             </p>
+            <div class="mt-5">
+                <a href="{{ site.baseurl }}/pricing" class="button is-primary solutions-button">
+                    Learn about OpenFaaS Pro
+                </a>
+            </div>
         </div>
         <div class="column is-12-tablet is-5-desktop is-offset-1-desktop">
             <div class="columns is-multiline">
                 <div class="column is-12 is-spaced-bottom">
-                    <div class="columns">
-                        <div class="column is-3-tablet has-text-centered-mobile">
-                            <p><img src="{{ site.baseurl }}/images/openfaas/template.svg" alt="Reduce Boilerplating"></p>
-                        </div>
-                        <div class="column">
-                            <h2 class="title is-size-4 has-text-grey-darker">
-                                Templates that just work
-                            </h2>
-                            <p class="title has-text-weight-light is-size-5-tablet is-size-4 has-text-grey">
-                                Get code into production within minutes using our templates, or create your own.
-                            </p>
-                        </div>
-                    </div>
+                    <h2 class="title is-size-4 has-text-grey-darker" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 28px; height: 28px; min-width: 28px; color: #3B5EE9;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                        </svg>
+                        Templates that just work
+                    </h2>
+                    <p class="has-text-weight-light is-size-5-tablet is-size-4 has-text-grey-dark">
+                        Get code into production within minutes using our templates, or create your own.
+                    </p>
                 </div>
 
                 <div class="column is-12 is-spaced-bottom">
-                    <div class="columns">
-                        <div class="column is-centered-mobile is-centered-tablet is-6-mobile is-3-tablet has-text-centered-mobile has-text-grey-darker">
-                            <p><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6" />
-                              </svg>
-                              </p>
-                        </div>
-                        <div class="column">
-                            <h2 class="title is-size-4 has-text-grey-darker">
-                                Efficient scaling
-                            </h2>
-                            <p class="title has-text-weight-light is-size-5-tablet is-size-4 has-text-grey">
-                                Your functions can be fine-tuned to scale to match the type of traffic they receive, including to zero to save on costs.
-                            </p>
-                        </div>
-                    </div>
+                    <h2 class="title is-size-4 has-text-grey-darker" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 28px; height: 28px; min-width: 28px; color: #3B5EE9;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+                        </svg>
+                        Efficient scaling
+                    </h2>
+                    <p class="has-text-weight-light is-size-5-tablet is-size-4 has-text-grey-dark">
+                        Your functions can be fine-tuned to scale to match the type of traffic they receive, including to zero to save on costs.
+                    </p>
                 </div>
 
                 <div class="column is-12 is-spaced-bottom">
-                    <div class="columns">
-                        <div class="column is-6-mobile is-3-tablet is-centered-mobile is-centered-tablet has-text-centered-mobile has-text-grey-darker">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
-                              </svg>
-                        </div>
-                        <div class="column">
-                            <h2 class="title is-size-4 has-text-grey-darker">
-                                Event-driven workloads
-                            </h2>
-                            <p class="title has-text-weight-light is-size-5-tablet is-size-4 has-text-grey">
-                                Invoke functions through events from Apache Kafka, AWS SQS/SNS, GCP Pub/Sub, RabbitMQ, Postgresql, Cron and MQTT. 
-                            </p>
-                        </div>
-                    </div>
-                </div>
+                    <h2 class="title is-size-4 has-text-grey-darker" style="display: flex; align-items: center; gap: 0.5rem;">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 28px; height: 28px; min-width: 28px; color: #3B5EE9;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+                        </svg>
+                        Event-driven workloads
+                    </h2>
+                    <p class="has-text-weight-light is-size-5-tablet is-size-4 has-text-grey-dark">
+                        Invoke functions through events from Apache Kafka, AWS SQS/SNS, GCP Pub/Sub, RabbitMQ, Postgresql, Cron and MQTT.
+                    </p>
             </div>
         </div>
 
-        <div class="column is-3 solutions">
-                <a href="{{ site.baseurl }}/pricing" class="button is-primary solutions-button">
-                    Learn about OpenFaaS Pro
-                </a>
-        </div>
-
     </div>
 
 </div>

_includes/landing-page/landing-solutions.html

@@ -1,20 +1,11 @@
 <style>
     @media (max-width: 768px) {
-        .solutions-cards {
-            padding-left: 1.5rem;
-            padding-right: 1.5rem;
-        }
-        .solutions-cards .column {
-            border-bottom: 1px solid #e0e0e0;
-            padding-bottom: 2rem;
-            margin-bottom: 1rem;
-        }
-        .solutions-cards .column:last-child {
-            border-bottom: none;
+        .solutions-section {
+            display: none;
         }
     }
 </style>
-<div class="container">
+<div class="container solutions-section">
     <h2 class="title is-size-3-tablet is-size-2-desktop has-text-grey-darker">
         How teams use OpenFaaS
     </h2>

_includes/pricing-page/pricing-edge.html

@@ -14,7 +14,7 @@
                     </div>
                     <div class="column is-narrow">
                         <a href="/edge/" class="button is-primary is-medium">
-                            <span>Learn more about OpenFaaS Edge &rarr;</span>
+                            <span>Learn about Edge &rarr;</span>
                         </a>
                     </div>
                 </div>

_includes/pricing-page/pricing-table.html

@@ -1,4 +1,4 @@
-<div class="container mt-6">
+<div class="container mt-6 is-hidden-mobile">
 
     <p class="title is-4">What you get at each tier</p>
 

_sass/openfaas/includes/landing-page/demo-samples.scss

@@ -191,6 +191,16 @@ a.button {
   padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
+  overflow-x: auto;
+
+  pre {
+    overflow-x: auto;
+  }
+}
+
+.code-samples {
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .tabs {

_sass/openfaas/includes/landing-page/general.scss

@@ -1,4 +1,20 @@
+body.landing-page {
+    overflow-x: hidden;
+}
+
 .hero {
+    overflow-x: hidden;
+
+    &.is-small .hero-body {
+        padding-left: 0;
+        padding-right: 0;
+
+        > .container {
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+    }
+
     .wavy {
         background: url('../images/openfaas/wave-a.svg'), linear-gradient(to bottom, transparent 46%, $of-grey 46%);
         background-repeat: no-repeat;