Added enterprise page (linkerd#1685)

* Stubbed out content for enterprise page Signed-off-by: Travis Beckham <[email protected]> * added styles to enterprise page Signed-off-by: Travis Beckham <[email protected]> * css fixes Signed-off-by: Travis Beckham <[email protected]> * opened external links in new tab Signed-off-by: Travis Beckham <[email protected]> * feedback Signed-off-by: Travis Beckham <[email protected]> * fixed link Signed-off-by: Travis Beckham <[email protected]> --------- Signed-off-by: Travis Beckham <[email protected]> Signed-off-by: Yohan Belval <[email protected]>
yohanb · Sep 21, 2023 · a8d95d3 · a8d95d3
1 parent bba6597
commit a8d95d3
Show file tree

Hide file tree

Showing 13 changed files with 498 additions and 107 deletions.
diff --git a/linkerd.io/assets/scss/bulma.scss b/linkerd.io/assets/scss/bulma.scss
@@ -102,6 +102,12 @@ $tablet-enabled: false;
   }
 }
 
+.has-gradient-text {
+  background-image: -webkit-linear-gradient(0deg, $deep-blue, $primary-bright-blue);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent; 
+}
+
 body {
   font: 400 18px/28px "Open Sans" !important;
 }

diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss
@@ -70,9 +70,6 @@
     font-weight: 700 !important;
     line-height: 1 !important;
     letter-spacing: -1.5px;
-    background-image: -webkit-linear-gradient(0deg, $deep-blue, $primary-bright-blue);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent; 
   }
   .linky {
     display: none;
@@ -81,7 +78,7 @@
     right: 20%;
     z-index: 1;
   }
-  @media screen and (min-width: 768px) {
+  @include from($tablet) {
     background-image: url(/images/homepage-top-hero-pattern.png);
     .notification {
       padding-top: 80px;
@@ -94,7 +91,7 @@
       display: block;
     }
   }
-  @media screen and (min-width: 1440px) {
+  @include from($fullhd) {
     .notification {
       padding-top: 120px;
       padding-bottom: 120px;
@@ -236,13 +233,13 @@
     background-image: linear-gradient(-90deg, $aqua-green, rgba($aqua-green, 0));
     right: 0;
   }
-  @media screen and (min-width: 768px) {
+  @include from($tablet) {
     &::before,
     &::after {
       width: 100px;
     }
   }
-  @media screen and (min-width: 1024px) {
+  @include from($desktop) {
     &::before,
     &::after {
       width: 200px;
@@ -263,6 +260,110 @@
   }
 }
 
+.enterprise-top-hero {
+  .notification {
+    padding-top: 60px;
+    padding-bottom: 60px;
+  }
+  h1 {
+    font-weight: 700 !important;
+    line-height: 1.1 !important;
+    letter-spacing: -1.5px;
+  }
+  p {
+    margin: 14px 0;
+  }
+  @include from($tablet) {
+    .notification {
+      padding-top: 80px;
+      padding-bottom: 80px;
+    }
+    h1 {
+      font-size: 60px !important;
+    }
+    h1, p {
+      max-width: 700px;
+    }
+  }
+  @media screen and (min-width: 900px) {
+    .notification {
+      background-image: none;
+      background-repeat: no-repeat;
+      background-position: center right;
+      background-image: url(/uploads/enterprise/enterprise-background.svg);
+      background-size: 400px auto;
+    }
+  }
+  @include from($desktop) {
+    .notification {
+      background-size: 500px auto;
+    }
+  }
+  @include from($widescreen) {
+    .notification {
+      background-size: auto 100%;
+    }
+  }
+}
+
+.enterprise-support {
+  padding: 80px 0 160px 0;
+  background-image: linear-gradient($light-blue, rgba($light-blue, 0));
+  background-size: 100% 200px;
+  background-repeat: no-repeat;
+  .title {
+    font-weight: 600 !important;
+    line-height: 1.1 !important;
+  }
+  h2.title {
+    margin-bottom: 80px;
+    font-size: 40px !important;
+  }
+  .enterprise-support__entry {
+    margin-bottom: 48px;
+    padding: 24px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    h3.title {
+      font-size: 32px !important;
+    }
+    ul {
+      list-style-type: disc;
+      padding-left: 24px;
+    }
+    img {
+      max-width: 200px;
+    }
+  }
+  @include from($tablet) {
+    h2.title {
+      font-size: 48px !important;
+    }
+    .enterprise-support__entry {
+      margin-bottom: 80px;
+      padding: 60px;
+      h3.title {
+        font-size: 40px !important;
+      }
+      img {
+        max-width: 100%;
+      }
+      .enterprise-support__entry-content {
+        order: 1;
+      }
+      .enterprise-support__entry-image {
+        order: 2;
+      }
+    }
+  }
+  @include from($fullhd) {
+    .enterprise-support__entry {
+      padding: 60px 120px;
+    }
+  }
+}
+
 .foundation-member {
   .foundation-member-banner {
     padding: 40px 0 30px 0;
@@ -306,13 +407,6 @@
   background-color: $white;
 }
 
-.enterprise-top-hero {
-  background: url('/images/enterprise_left.svg'),
-    url('/images/enterprise_right.svg');
-  background-repeat: no-repeat;
-  background-position: left top, right top;
-}
-
 .platform-top-hero {
   background: url('/images/choose_your_platform_left.svg'),
     url('/images/choose_your_platform_right.svg');

diff --git a/linkerd.io/content/enterprise.md b/linkerd.io/content/enterprise.md
@@ -0,0 +1,44 @@
+---
+description: Lists of educational resources and companies that provide commercial support for Linkerd.
+title: Enterprise
+aliases:
+  - /support-training/
+layout: enterprise
+type: enterprise
+weight: 1
+menu:
+  top:
+    weight: 5
+top_hero:
+  title: Linkerd Enterprise Support and Training
+  description: "Linkerd was created by Buoyant and contributed to the Cloud Native Computing Foundation in 2017. It was the first service mesh to achieve graduated status, and today powers the critical production systems of enterprises around the world.\n\nHere, you'll find commercial products, support, and training for Linkerd."
+support:
+  - title: Enterprise Support
+    entries:
+      - title: Enterprise support from Buoyant, creators of Linkerd
+        description: "- 24x7 Enterprise Support\n- FIPS compliant distribution\n- Support, training, architectural reviews, and more"
+        image: /uploads/enterprise/buoyant.svg
+        button:
+          href: https://buoyant.io/
+          text: Learn more
+      - title: Enterprise-grade Linkerd Support for Production Environment
+        description: "Run Linkerd confidently with 24*7 enterprise support from the officially recognized commercial services Linkerd partner."
+        image: /uploads/enterprise/infracloud.svg
+        button:
+          href: https://www.infracloud.io/linkerd-support/
+          text: Learn more
+  - title: Training
+    entries:
+      - title: Buoyant Service Mesh Academy
+        description: "Hands-on, engineer-focused training from the creators of the service mesh. Self-paced courses and monthly live workshops providing hands-on training on Linkerd and related CNCF projects."
+        image: /uploads/enterprise/buoyant-service-mesh-academy.svg
+        button:
+          href: https://buoyant.io/service-mesh-academy/
+          text: Learn more
+      - title: The Linux Foundation
+        description: "Get hands-on practical experience with Linkerd, the open source, open governance, ultralight CNCF service mesh for Kubernetes with this self-paced course."
+        image: /uploads/enterprise/linux-foundation.png
+        button:
+          href: https://www.edx.org/course/introduction-to-service-mesh-with-linkerd
+          text: Learn more
+---
diff --git a/linkerd.io/content/support-training.md b/linkerd.io/content/support-training.md
diff --git a/linkerd.io/layouts/enterprise/enterprise.html b/linkerd.io/layouts/enterprise/enterprise.html
@@ -1,3 +1,4 @@
 {{ define "main" }}
+{{ partial "enterprise/top-hero.html" .Params.top_hero }}
 {{ partial "enterprise/support.html" .Params.support }}
 {{ end }}
diff --git a/linkerd.io/layouts/partials/enterprise/support.html b/linkerd.io/layouts/partials/enterprise/support.html
@@ -1,44 +1,26 @@
-<div class="wrapper has-background-bright-blue has-text-white has-text-centered is-fullheight hero">
-  <div class="container jobs-list-container notification has-background-bright-blue enterprise-top-hero">
-    {{ range .kinds }}
-    <h1 class="title is-size-1">{{.title}}</h1>
-    <h5 class="title is-size-5">{{.description | markdownify}}</h5>
-    <div class="columns jobs-list is-multiline is-centered">
-      {{ range .entries }}
-      <div class="column is-half job-item mb-5">
-        <a class="has-text-color box-link" href="{{ .url }}" target="_blank">
-          <div class="box">
-            <article class="media">
-              <div class="media-left">
-                <figure class="image is-96x96 level-item">
-                  {{ if .thumbnail }}
-                  <img {{ partial "src.html" (dict "img" .thumbnail) | safeHTMLAttr }} alt="image" />
-                  {{ else }}
-                  <img src="/images/identity/svg/linkerd_primary_color_white.svg" alt="placeholder" />
-                  {{ end }}
+<div class="wrapper has-background-white enterprise-support">
+  <div class="container">
+    <div class="p-4">
+      {{ range . }}
+        <h2 class="title has-text-navy-black">{{ .title }}</h2>
+        {{ range .entries }}
+          <div class="card enterprise-support__entry">
+            <div class="columns is-variable is-8">
+              <div class="column enterprise-support__entry-image">
+                <figure class="image mb-3">
+                  <img {{ partial "src.html" (dict "img" .image) | safeHTMLAttr }} alt="{{ .title }}" />
                 </figure>
               </div>
-              <div class="media-content">
-                <div class="">
-                  <h5 class="title has-text-color is-5 is-marginless">{{ .title }}</h5>
-                  <h6 class="is-size-6 has-text-weight-light">{{.description | markdownify}}</h6>
-                </div>
+              <div class="column is-two-thirds-tablet is-three-quarters-widescreen enterprise-support__entry-content">
+                <h3 class="title has-text-navy-black mb-6">{{ .title }}</h3>
+                <div class="mb-6">{{ .description | markdownify }}</div>
+                <a href="{{ .button.href }}" class="button is-link" target="_blank">
+                  {{ .button.text }}
+                </a>
               </div>
-            </article>
+            </div>
           </div>
-        </a>
-      </div>
-      {{ end }}
-    </div>
-    {{ end }}
-    <h5 class="title is-size-5 has-text-white	">{{.bottom_description | markdownify}}</h5>
-    <div class="columns">
-      {{ range .buttons }}
-      <div class="column">
-        <a href="{{.url}}" class="button is-large is-primary">
-          {{.caption}}
-        </a>
-      </div>
+        {{ end }}
       {{ end }}
     </div>
   </div>

diff --git a/linkerd.io/layouts/partials/enterprise/top-hero.html b/linkerd.io/layouts/partials/enterprise/top-hero.html
@@ -0,0 +1,10 @@
+<div class="wrapper body-header has-background-white enterprise-top-hero">
+  <div class="container">
+    <div class="notification">
+      <h1 class="title has-gradient-text is-size-1 pb-5">{{ .title }}</h1>
+      <div class="has-text-navy-black">
+        {{ .description | markdownify }}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/linkerd.io/layouts/partials/homepage/top-hero.html b/linkerd.io/layouts/partials/homepage/top-hero.html
@@ -3,7 +3,7 @@
     <div class="column">
 
       <div class="notification">
-        <h1 class="title is-size-1 mb-5">{{.title}}</h1>
+        <h1 class="title has-gradient-text is-size-1 mb-5">{{.title}}</h1>
         <h5 class="title is-size-5 mb-5">{{.description | markdownify}}</h5>
         <div class="columns is-5 is-variable">
           {{ range .buttons }}