{% extends "main.html" %} {% block content %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}" />

<div class="md-container home-page">
  <section class="home-container">
    <div class="md-grid md-typeset">
      <div class="mdx-hero">
        <div class="headline-section">
          <h1 class="main-headline">
            Knative is an Open-Source Enterprise-level<br>
            solution to build Serverless and Event Driven Applications
          </h1>
          <h2>Serverless Containers in Kubernetes environments.</h2>
          <p style="display: block">
            <a href="{{ 'getting-started/' | url }}" class="md-button white md-button--primary">Try the tutorial</a>
            <a href="{{ 'install/' | url }}" class="md-button white">Install Knative on your cluster</a>
          </p>
          <div class="trusted-by-container">
            <h3 class="trusted-by">Trusted by</h3>
            <div id="usedby">
              <div class="logo">
                <img src="images/corporate-logos/Google.svg" alt="" draggable="false" />
              </div>
              <div class="logo">
                <img src="images/corporate-logos/vmware.svg" alt="" draggable="false" />
              </div>
              <div class="logo">
                <img src="images/corporate-logos/IBM.svg" alt="" draggable="false" />
              </div>
              <div class="logo">
                <img src="images/corporate-logos/Redhat.svg" alt="" draggable="false" />
              </div>
              <div class="logo triggermesh">
                <img src="images/corporate-logos/triggermesh_logo.svg" alt="" draggable="false" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="need-to-know-more-container">
    <div class="md-grid md-typeset">
      <h1>Need to know more?</h1>
      <p class="normal-text">
        Learn about how Knative works with Kubernetes and the underlying ideas behind containers<br>
        and serverless infrastructure.
      </p>
      <a href="{{ 'getting-started/' | url }}" class="md-button call-to-action">
        Explore Knative
      </a>
    </div>
  </section>

  <section class="why-serverless-container">
    <div class="md-grid md-typeset">
      <h1>Why serverless containers?</h1>
      <p class="normal-text">
        Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
        meaning that companies only use what they pay for. Knative is a platform-agnostic
        solution for running serverless deployments.
      </p>
      <div class="img-table">
        <div class="img-row">
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_simple_abstractions_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Simpler Abstractions</h2>
              <p class="normal-text">
                Simplify your YAML with our custom CRDs
              </p>
            </div>
          </div>
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_autoscaling_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
                onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Autoscaling</h2>
              <p class="normal-text">
                Scale down to zero and up from zero
              </p>
            </div>
          </div>
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_progressive_rollouts_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Progressive Rollouts</h2>
              <p class="normal-text">
                Choose your rollout strategy depending on your needs
              </p>
            </div>
          </div>
        </div>
        <div class="img-row">
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_event_intergrations_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Event Integrations</h2>
              <p class="normal-text">
                Handle events from many sources
              </p>
            </div>
          </div>
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_handle_events_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
                onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Handle Events</h2>
              <p class="normal-text">
                Trigger handlers from the event broker
              </p>
            </div>
          </div>
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/blue_plugable_icon.svg"
                onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
                onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Plugable</h2>
              <p class="normal-text">
                Kubernetes native to be integrated and extended
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="knative-components-container">
    <div class="md-grid md-typeset">
      <h1>Knative Components</h1>
      <p class="normal-text">
        Knative has two main components that empower teams working with Kubernetes. Serving and<br>
        Eventing work together to automate and manage tasks and applications.
      </p>
      <div class="components-content">
        <img class="components-img" src="images/home-images/knative_flowchart_graphic.svg" alt="" draggable="false" />
        <div class="text-table">
          <p class="normal-text">
            Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking,
            autoscaling (even to zero), and revision tracking. Teams can focus on core logic using any programming
            language.
          </p>
          <p class="normal-text">
            Universal subscription, delivery and management of events. Build modern apps by attaching compute to a data
            stream with declarative event connectivity and developer friendly object models.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="trying-it-all-container">
    <div class="md-grid md-typeset">
      <h1>Trying it all together</h1>
      <div class="img-table">
        <div class="img-row">
          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/dev_focus_code_icon.svg" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Developers focus on code</h2>
              <p class="normal-text">
                From container to URL<br>
                with less YAML config
              </p>
            </div>
          </div>

          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/dkblue_scale_icon.svg" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Scale up and down</h2>
              <p class="normal-text">
                Scale down to zero<br>
                based on traffic patterns
              </p>
            </div>
          </div>

          <div class="img-col">
            <div class="reason-img">
              <img src="images/home-images/cloud_agnostic_icon.svg" alt="" draggable="false">
            </div>
            <div class="reason-text">
              <h2>Cloud agnostic</h2>
              <p class="normal-text">
                Control traffic shifting<br>
                for smoother rollouts
              </p>
            </div>
          </div>
        </div>
      </div>
      <a href="{{ 'install/' | url }}" class="md-button call-to-action">
        Deploy Knative Today
      </a>
    </div>
  </section>

  <section class="case-studies-container">
    <div class="md-grid md-typeset">
      <h1>Case Studies</h1>
      <div class="cases-table">
        <div class="col">
          <a href="{{ 'about/case-studies/deepc/' | url }}">
            <div class="logo">
              <img class="deepc" src="images/case-studies/deepc.png" alt="" draggable="false" />
            </div>
            <hr>
            <p class="normal-text">
              "It should be possible for
              somebody with an algorithm to have it on the platform in an hour"<br><br>

              —Andrew Webber,<br>
              Senior Software Engineer for deepc
            </p>
          </a>
        </div>
        <div class="col">
          <a href="{{ 'about/case-studies/outfit7/' | url }}">
            <div class="logo">
              <img class="outfit7" src="images/case-studies/outfit7.png" alt="" draggable="false" />
            </div>
            <hr>
            <p class="normal-text">
              "The community support is
              really great. The hands-on
              experience with Knative was
              so impressive. On the Slack
              channel, we got actual
              engineers to answer our questions"<br><br>

              —Tilen Kavcic,<br>
              Software Engineer for Outfit7
            </p>
          </a>
        </div>
        <div class="col">
          <a href="{{ 'about/case-studies/puppet/' | url }}">
            <div class="logo">
              <img class="puppet" src="images/case-studies/puppet.png" alt="" draggable="false" />
            </div>
            <hr>
            <p class="normal-text">
              "I'm a strong believer in
              working with open-source
              vendors. We've made
              contributions to numerous
              projects, including Tekton,
              Knative, Ambassador, and
              gVisor --All of which we depend
              on to make our product
              functional."<br><br>

              —Noah Fontes,<br>
              Senior Principal Software Engineer for<br>Puppet
            </p>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="cncf-notice-container">
    <h3>Knative is a <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> incubation project</h3>
    <img class="cncf-logo" src="images/home-images/cncf-color.png" alt="" draggable="false" />
  </section>

  <section class="whats-next-container">
    <div class="md-grid md-typeset">
      <h1>What's Next?</h1>
      <div class="component-flex">
        <div class="pane">
          <a href="https://slack.cncf.io" title="Slack Link">
            <div class="twemoji">
              {% include ".icons/fontawesome/brands/slack.svg" %}
            </div>
            <h2>Talk to us on Slack in #knative</h2>
            <p class="normal-text">Interested in learning more, speaking to other contributors, or finding answers?</p>
          </a>
        </div>
        <div class="pane">
          <a href="{{ 'community/contributing' | url }}" title="Contributing Link">
            <div class="twemoji">
              {% include ".icons/fontawesome/brands/github.svg" %}
            </div>
            <h2>Contributions Welcome</h2>
            <p class="normal-text">Want to join the fun on Github? New users are always welcome!</p>
          </a>
        </div>
        <div class="pane">
          <a href="https://twitter.com/KnativeProject" title="Twitter Link">
            <div class="twemoji">
              {% include ".icons/fontawesome/brands/twitter.svg" %}
            </div>
            <h2>Follow us on Twitter</h2>
            <p class="normal-text">For feature announcements, interesting Knative news, and other great things.</p>
          </a>
        </div>
      </div>
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const logos = document.getElementById("usedby").getElementsByTagName("div");
    for (let i = 0; i < logos.length - 1; i++) {
      // Technically there's a chance two elements end up with the same
      // random order in which case the result won't be truly random (it'll be based
      // on the original document order). This really doesn't matter.
      logos[i].style.order = Math.floor(Math.random() * 99);
    }
    logos[logos.length - 1].style.order = 100;
  })
</script>
{% endblock %}

<!-- Application footer -->
{% block footer %}
{% include "partials/footer.html" %}
{% endblock %}