Website Landing Page (#547)

website/assets/scss/_variables_project.scss

@@ -3,3 +3,66 @@
 Add styles or override variables from the theme here.
 
 */
+
+// Color palatte
+$primary: #5c64ab;
+
+$dark: #232F3E;
+$light: #f8f9fa;
+
+// Global styles
+$enable-gradients: false;
+$enable-rounded: false;
+$enable-shadows: false;
+$enable-responsive-font-sizes: true;
+
+// Typography
+// Primary font
+$google_font_name: "Poppins";
+$google_font_family: "Poppins:300,300i,400,400i,600,600i";
+$font-weight-body-text: 300 !default;
+
+// Landing page styles
+// Navigation
+nav.navbar-dark {
+  a.navbar-brand span {
+    text-transform: none !important;
+  }
+
+  .navbar-nav a.nav-link {
+    color: white;
+    text-shadow: none;
+
+    &:hover,
+    &:active {
+      color: rgba(255, 255, 255, 0.8)
+    }
+  }
+}
+
+// Hero
+.hero {
+  .display-1 {
+    font-weight: 700;
+    font-size: 3.5rem;
+    @media (min-width: 768px) {
+      font-size: 6rem;
+    }
+  }
+}
+
+// Features
+.feature {
+  .h1 {
+    font-size: 8rem;
+  }
+
+  .h3 {
+    font-weight: bold;
+  }
+
+  code.provisioner {
+    color: $light;
+  }
+}
+

website/config.toml

@@ -69,6 +69,8 @@ copyright = "Amazon.com, Inc. or its affiliates."
 github_repo = "https://github.com/awslabs/karpenter"
 # Specify a value here if your content directory is not in your repo's root directory
 github_subdir = "website"
+# Twitter card images (banner with logo)
+images = ["banner.png"]
 
 # Version configuration
 # Menu title if your navbar has a versions selector to access old versions of your site.
@@ -95,7 +97,7 @@ breadcrumb_disable = false
 #  Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
 sidebar_search_disable = false
 #  Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
-navbar_logo = false
+navbar_logo = true
 # Set to true to disable the About link in the site footer
 footer_about_disable = true
 

website/content/en/_index.html

@@ -0,0 +1,62 @@
++++
+title = "Karpenter"
+linkTitle = "Home"
++++
+
+{{< blocks/cover image_anchor="top" height="max" color="primary" >}}
+<div class="mx-auto hero">
+  <h1 class="display-1 mt-5">Karpenter</h1>
+  <h3 class="display-4 font-weight-light mt-5">Just-in-time Nodes for Any Kubernetes Cluster</h3>
+  <div class="mt-5">
+    <a class="btn btn-lg btn-dark col-sm-3 mb-3 font-weight-bold get-started" href="{{< relref "docs/getting-started" >}}">
+      Get Started
+    </a>
+  </div>
+</div>
+{{< /blocks/cover >}}
+
+{{< blocks/lead color="grey-100" height="med">}}
+  <h2 class="mx-auto mt-5 col-sm-9 font-weight-bolder">
+    Karpenter simplifies Kubernetes infrastructure with the right nodes at the right time.
+  </h2>
+  <p class="mx-auto mt-5 col-sm-10 h4 font-weight-light">
+    Karpenter automatically launches just the right compute resources to handle your cluster's applications. It is designed to let you take full advantage of the cloud with fast and simple compute provisioning for Kubernetes clusters.
+  </p>
+{{< /blocks/lead >}}
+
+{{< blocks/section color="primary" >}}
+    {{< blocks/feature title="Improve application availability" icon="fa-globe" feature_class="feature" >}}
+      <p class="mt-3 font-weight-light h5">Karpenter responds quickly and automatically to changes in application load, scheduling, and resource requirements, placing new workloads onto a variety of available compute resource capacity.</p>
+    {{< /blocks/feature >}}
+
+    {{< blocks/feature title="Minimize operational overhead" icon="fa-wrench" feature_class="feature" >}}
+      <p class="mt-3 font-weight-light h5">Karpenter comes with a set of opinionated defaults in a single, declarative <code class="font-weight-bold provisioner">Provisioner</code> resource which can easily be customized. No additional configuration required!</p>
+    {{< /blocks/feature >}}
+{{< /blocks/section >}}
+
+{{< blocks/section color="dark" type="section" >}}
+  <h2 class="mx-auto display-2 font-weight-bolder">How It Works</h2>
+  <img class="mx-auto col-sm-10 d-none d-md-block" src="karpenter-overview.png">
+  <div class="mx-auto col-sm-8 text-center">
+    <p class="lead mt-5">
+      Karpenter observes the aggregate resource requests of unscheduled pods and makes decisions to launch and terminate nodes to minimize scheduling latencies and infrastructure cost.
+    </p>
+  </div>
+{{< /blocks/section >}}
+
+{{< blocks/lead color="grey-100" type="section" >}}
+  <h2 class="mx-auto mt-2 col-sm-9 font-weight-bolder">
+    Karpenter is Open Source Software
+  </h2>
+  <p class="mx-auto mt-5 col-sm-10 lead">
+    Karpenter is licensed under the permissive <a href="https://github.com/awslabs/karpenter/blob/main/LICENSE">Apache License 2.0</a>.
+    It is designed to work with any Kubernetes cluster running in any environment, including all major cloud providers and on-premises environments.
+  </p>
+  <p class="mx-auto mt-5 col-sm-10 lead">
+    Have an idea for a feature or found something that could work better?
+    Create a <a href="https://github.com/awslabs/karpenter/issues/new/choose">GitHub issue</a> and tell us about it.
+  </p>
+  <a class="btn btn-lg btn-dark col-sm-3 mt-3 mr-sm-3 font-weight-bold" href="https://github.com/awslabs/karpenter">
+    <i class="fab fa-github pr-3"></i> Get involved
+  </a>
+{{< /blocks/lead >}}

website/content/en/docs/_index.md

@@ -1,11 +1,12 @@
 
 ---
 title: "Documentation"
-linkTitle: "Documentation"
+linkTitle: "Docs"
 weight: 20
 menu:
   main:
     weight: 20
+    pre: <i class='fas fa-book'></i>
 ---
 
 Karpenter is an open-source autoscaling project built for Kubernetes. It improves availability for Kubernetes applications without requiring manually or over-provisioning compute resources. Karpenter is designed to provide the right compute resources to match your application’s needs in seconds, instead of minutes by observing the aggregate resource requests of unschedulable pods and makes decisions to launch and terminate nodes to minimize scheduling latencies.

website/content/en/docs/getting-started/_index.md

@@ -1,7 +1,7 @@
 
 ---
 title: "Getting Started with Karpenter on AWS"
-linkTitle: "Getting Started Guide"
+linkTitle: "Getting Started"
 weight: 10
 menu:
   main:

website/layouts/partials/footer.html

@@ -0,0 +1,44 @@
+{{ $links := .Site.Params.links }}
+<footer class="bg-dark py-5 row d-print-none">
+  <div class="container-fluid mx-sm-5">
+    <div class="row">
+      <p class="mx-auto col-sm-3 text-center text-light">
+        Built with ❤️ at <a class="text-light" href="https://aws.amazon.com/">AWS</a>
+      </p>
+    </div>
+    <div class="row">
+      <div class="col-6 col-sm-4 text-xs-center order-sm-2">
+        {{ with $links }}
+          {{ with index . "user"}}
+            {{ template "footer-links-block"  . }}
+          {{ end }}
+        {{ end }}
+      </div>
+      <div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
+        {{ with $links }}
+          {{ with index . "developer"}}
+            {{ template "footer-links-block"  . }}
+          {{ end }}
+        {{ end }}
+      </div>
+      <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
+        {{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small>{{ end }}
+        {{ with .Site.Params.privacy_policy }}<small class="ml-1"><a href="{{ . }}" target="_blank" rel="noopener">{{ T "footer_privacy_policy" }}</a></small>{{ end }}
+        {{ if not .Site.Params.ui.footer_about_disable }}
+          {{ with .Site.GetPage "about" }}<p class="mt-2"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>{{ end }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</footer>
+{{ define "footer-links-block" }}
+  <ul class="list-inline mb-0">
+    {{ range . }}
+      <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
+        <a class="text-white" target="_blank" rel="noopener" href="{{ .url }}" aria-label="{{ .name }}">
+          <i class="{{ .icon }}"></i>
+        </a>
+      </li>
+    {{ end }}
+  </ul>
+{{ end }}

website/layouts/shortcodes/blocks/feature.html

@@ -0,0 +1,23 @@
+{{ $icon := .Get "icon" | default "fa-lightbulb" }}
+{{ $url_text := .Get "url_text" }}
+{{ $feature_class := .Get "feature_class" | default "" }}
+<div class="col-lg mb-5 mb-lg-0 text-center {{ $feature_class }}">
+  <div class="mb-4 h1">
+    <i class="{{ if not (or (hasPrefix $icon "fas ") (hasPrefix $icon "fab ")) }}fas {{ end }}{{ $icon }}"></i>
+  </div>
+  <h4 class="h3">
+  {{ if eq .Page.File.Ext "md" }}
+  {{ .Get "title" | markdownify }}
+  {{ else }}
+  {{ .Get "title" | htmlUnescape | safeHTML }}
+  {{ end }}
+  </h4>
+  <p class="mb-0">
+  {{ if eq .Page.File.Ext "md" }}
+  {{ .Inner | markdownify }}
+  {{ else }}
+  {{ .Inner | htmlUnescape | safeHTML }}
+  {{ end }}
+  </p>
+  {{ with .Get "url" }}<p><a href="{{ . }}">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} …</a></p>{{ end }}
+</div>

website/static/favicons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<browserconfig>
+  <msapplication>
+    <tile>
+    <square70x70logo src="/iconx/tile70x70.png" />
+    <square150x150logo src="/iconx/tile150x150.png" />
+    <wide310x150logo src="/iconx/tile310x150.png" />
+    <square310x310logo src="/iconx/tile310x310.png" />
+    <tilecolor>transparent</tilecolor>
+    </tile>
+  </msapplication>
+</browserconfig>