Update customers

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

Author: alexellis

README.md

@@ -259,7 +259,6 @@ Before making any style changes / additions please consider:
 - make use of the declared SASS variables and mixins
 - each section on the website should have its own SASS file
 
-
 ### Altering the Header and Footer
 
 The site's navbar and footer are configured via YAML in the following files:

_data/customers.yml

@@ -0,0 +1,40 @@
+- name: Corva
+  logo: corva.png
+- name: Baker Hughes Company
+  logo: bakerhughes.png
+- name: BCubed Engineering
+  logo: bcubed.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
+  logo: majesco.png
+- name: Mnemonic As
+  logo: mnemonic.png
+- name: Optiv
+  logo: optiv.png
+- name: Patchworks Integration
+  logo: patchworks.png
+- name: Rudderstack
+  logo: rudderstack.png
+- name: Surge
+  logo: surge.png
+- name: Yokogawa Electrical
+  logo: yokogawa.png
+- name: Waylay
+  logo: waylay.png
+
+- name: Cognite AS
+  logo: cognite.png
+- name: LivePerson
+  logo: liveperson.png
+- name: Northwestern Mutual
+  logo: nw.png
+  

_includes/landing-page/landing-customers.html

@@ -0,0 +1,50 @@
+<!-- <style>
+.image.is-128x128 {
+    width: 128px;
+    height: 128px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.customer-logo {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
+</style> -->
+
+<div class="container">
+    <div class="columns is-multiline">
+        <div class="column is-12 has-text-centered">
+            <h2 class="title is-size-3 is-size-2-desktop has-text-white">
+                Trusted in production
+            </h2>
+        </div>
+
+        <div class="column is-12">
+            <div class="columns is-multiline">
+                {% for customer in site.data.customers %}
+                {% if customer %}
+                <div class="column is-2-desktop is-4-tablet is-6-mobile">
+                    <figure class="image is-128x128">
+                        <img class="customer-logo" src="images/customers/{{ customer.logo }}" alt="{{ customer.name }}">
+                    </figure>
+                </div>
+                {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="column is-12 has-text-centered">
+            <p class="has-text-weight-light is-size-5 is-size-4-desktop has-text-white customers-category">
+                Learn about OpenFaaS features & benefits</p>
+            <a href="{{ site.baseurl }}/pricing" class="button is-primary">
+                See options
+                <span class="icon">
+                    <i class="fas fa-long-arrow-alt-right"></i>
+                </span>
+            </a>
+        </div>
+    </div>
+</div>

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

@@ -7,5 +7,6 @@
 @import "users.scss";
 @import "description.scss";
 @import "sponsors.scss";
+@import "customers.scss";
 @import "demo-samples.scss";
 @import "call-to-action.scss";

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

@@ -0,0 +1,38 @@
+.hero.is-primary {
+	.customers {
+		&-category {
+			&.title {
+				font-weight: 300;
+				text-transform: capitalize;
+			}
+		}
+
+        .button {
+            margin-top: $padding-step * 2;
+
+			border: 3px solid;
+			border-radius: 10px;
+
+            background: #ffffff;
+            border-color: #000000;
+
+            color: black;
+
+            transition: box-shadow .3s;
+
+            &:hover {
+                box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.26);
+                .icon {
+                    transform: translateX(10px);
+                }
+            }
+
+            .icon {
+                margin: 0 0 0 10px;
+
+                transition: transform .3s;
+            }
+		}
+
+	}
+}

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

@@ -54,6 +54,11 @@
             padding-bottom: $padding-step * 4;
         }
 
+        &.customers {
+            padding-top: $padding-step * 4;
+            padding-bottom: $padding-step * 4;
+        }
+
         &.call-to-action-cards {
             padding-top: $padding-step * 8;
         }

images/customers/patchworks.png

@@ -33,6 +33,10 @@
         {% include landing-page/landing-demo.html %}
     </div>
 
+    <div class="hero-body customers" style="background-color: dodgerblue;">
+        {% include landing-page/landing-customers.html %}
+    </div>
+
     <div class="hero-body grey-darker-bis sponsors">
         {% include landing-page/landing-sponsors.html %}
     </div>