{% 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>
          <p style="display: block">
            <a href="{{ 'getting-started/tutorial' | 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 class="scroller">
              <div class="scroller__inner">
                  <!-- First row of adopters will be populated dynamically -->
              </div>
            </div>
            <div class="scroller" data-direction="right">
              <div class="scroller__inner">
                  <!-- Second row of adopters will be populated dynamically -->
              </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 class="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-head">
        Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
        meaning that companies only pay for what they use. 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">
              <div class="img-wrapper">
                <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>
            <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">
              <div class="img-wrapper">
                <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>
            <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">
              <div class="img-wrapper">
                <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>
            <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">
              <div class="img-wrapper">
                <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>
            <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">
              <div class="img-wrapper">
                <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>
            <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">
              <div class="img-wrapper">
                <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>
            <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>
    <div class="knative-components-container-mobile">
      <div class="text-upper-right">
          <p>Run serverless containers in Kubernetes with ease. Knative takes care of the details of networking, autoscaling (even to zero), and revision tracking.</p>
      </div>
      <div class="svg-diagram">
        <img class="components-img" src="images/home-images/knative_flowchart_graphic_mobile.svg" alt="" draggable="false" />
      </div>
      <div class="text-lower-left">
          <p>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>
  </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>
        <a href="{{ 'about/case-studies/' | url }}">Case Studies</a>
      </h1>
      <div class="cases-table">
        <a href="{{ 'about/case-studies/sva/' | url }}">
          <div class="col">
            <div class="logo">
              <img class="sva" src="images/case-studies/sva.png" alt="" draggable="false" />
            </div>
            <hr>
            <p class="normal-text">
              "Knative allowed the team to centralize their system, scale, audit, and 
              even select events while enforcing policies and simplifying the architecture"<br>
            </p>
          </div>
        </a>
        <a href="{{ 'about/case-studies/ibm/' | url }}">
          <div class="col">
            <div class="logo">
              <img class="ibm" src="images/case-studies/ibm.png" alt="IBM logo" draggable="false" width="75" />
            </div>
            <hr>
            <p class="normal-text">
              "The introduction of the ML training infrastructure using Knative Eventing 
              has enabled us to establish a well-defined operational boundary for the service teams."<br>
            </p>
          </div>
        </a>
        <a href="{{ 'about/case-studies/pnc/' | url }}">
          <div class="col">
            <div class="logo">
              <img class="pnc" src="images/case-studies/pnc_bank.png" alt="" draggable="false" />
            </div>
            <hr>
            <p class="normal-text">
              "The power of Knative’s eventing and serverless features allows PNC to bridge processes 
              between Apache Kafka and CI/CD toolchain events and achieve this automated state."<br>
            </p>
          </div>
        </a>
      </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>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Suggested size for the logo images = 320x96
    const adopters = [
      { logoPath: "images/corporate-logos/alauda.svg", url: "https://www.alauda.io/" },
      { logoPath: "images/corporate-logos/alibaba_cloud.svg", url: "https://cs.console.aliyun.com/" },
      { logoPath: "images/corporate-logos/bloomberg.svg", url: "https://www.bloomberg.net/" },
      { logoPath: "images/corporate-logos/blue_origin.svg", url: "https://www.blueorigin.com/" },
      { logoPath: "images/corporate-logos/box.svg", url: "https://box.com/" },
      { logoPath: "images/corporate-logos/chainguard.svg", url: "https://chainguard.dev/" },
      { logoPath: "images/corporate-logos/control_plane.svg", url: "https://www.controlplane.com/" },
      { logoPath: "images/corporate-logos/deepc.svg", url: "https://www.deepc.ai/" },
      { logoPath: "images/corporate-logos/fulcrum.svg", url: "https://www.fulcrumapp.com/" },
      { logoPath: "images/corporate-logos/gojek.svg", url: "https://www.gojek.com/" },
      { logoPath: "images/corporate-logos/google.svg", url: "https://cloud.google.com/anthos/run" },
      { logoPath: "images/corporate-logos/ibm.svg", url: "https://cloud.ibm.com/codeengine" },
      { logoPath: "images/corporate-logos/ka-nabell_japan.svg", url: "https://www.ka-nabell.com/" },
      { logoPath: "images/corporate-logos/kubesphere.svg", url: "https://kubesphere.io/" },
      { logoPath: "images/corporate-logos/liquidx.svg", url: "https://www.liquidx.com/" },
      { logoPath: "images/corporate-logos/manomano.svg", url: "https://www.manomano.es/" },
      { logoPath: "images/corporate-logos/optum.svg", url: "https://optum.com/" },
      { logoPath: "images/corporate-logos/property_xyz.svg", url: "https://property.xyz/" },
      { logoPath: "images/corporate-logos/redhat.svg", url: "https://www.openshift.com/learn/topics/serverless" },
      { logoPath: "images/corporate-logos/scaleway.svg", url: "https://www.scaleway.com/en" },
      { logoPath: "images/corporate-logos/sonavi_labs.svg", url: "https://www.sonavilabs.com/" },
      { logoPath: "images/corporate-logos/spider.svg", url: "https://www.spider.com/" },
      { logoPath: "images/corporate-logos/tata_comm.svg", url: "https://www.tatacommunications.com/solutions/cloud/platforms" },
      { logoPath: "images/corporate-logos/vmware.svg", url: "https://network.tanzu.vmware.com/products/serverless" },
      { logoPath: "images/corporate-logos/y_meadows.svg", url: "https://www.ymeadows.com/" },
      { logoPath: "images/corporate-logos/grerook.svg", url: "https://www.greyrook.com/" },
      { logoPath: "images/corporate-logos/high_cohesion.svg", url: "https://www.highcohesion.com/" },
      { logoPath: "images/corporate-logos/vhive.svg", url: "https://vhive-serverless.github.io/" },
      { logoPath: "images/corporate-logos/sva.svg", url: "https://sva.de/en" },
      { logoPath: "images/corporate-logos/vorteil-direktiv.svg", url: "https://www.direktiv.io/" }
    ];

    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
    }

    // Shuffle the adopters array
    shuffle(adopters);

    const trustedByContainers = document.querySelectorAll(".trusted-by-container .scroller__inner");

    function populateAdopters(container, adopters) {
      adopters.forEach(adopter => {
        const adopterLink = document.createElement("a");
        adopterLink.href = adopter.url;
        adopterLink.target = "_blank";

        const adopterImg = document.createElement("img");
        adopterImg.src = adopter.logoPath;
        adopterImg.alt = "Adopters";
        adopterImg.classList.add("logo");

        adopterLink.appendChild(adopterImg);
        container.appendChild(adopterLink);
      });
    }

    const firstRowAdopters = adopters.slice(0, adopters.length / 2);
    const secondRowAdopters = adopters.slice(adopters.length / 2);

    // Shuffle each row's adopters array independently
    shuffle(firstRowAdopters);
    shuffle(secondRowAdopters);

    populateAdopters(trustedByContainers[0], firstRowAdopters);
    populateAdopters(trustedByContainers[1], secondRowAdopters);

    // If a user hasn't opted in for reduced motion, then we add the animation
    const scrollers = document.querySelectorAll(".scroller");
    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      addAnimation();
    }

    function addAnimation() {
      scrollers.forEach((scroller) => {
        scroller.setAttribute("data-animated", true);

        const scrollerInner = scroller.querySelector(".scroller__inner");
        const scrollerContent = Array.from(scrollerInner.children);

        // For each item in the array, clone it -> add aria-hidden to it -> add it into the `.scroller-inner`
        scrollerContent.forEach((item) => {
          const duplicatedItem = item.cloneNode(true);
          duplicatedItem.setAttribute("aria-hidden", true);
          scrollerInner.appendChild(duplicatedItem);
        });
      });
    }
  });
</script>

{% endblock %}

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