_layouts/home.html

---
layout: default
---

<section class="site-section site-section--gradient">
  <div class="main-cta">
    <div class="main-cta__lede">
      <p class="main-cta__text">
        <strong class="main-cta__strong">Apache OpenWhisk</strong> is a
        <a class="main-cta__link"
           href="{{ site.github.url }}/serverless">serverless</a>,
        <strong class="main-cta__strong">open source</strong> cloud platform
        that executes functions in
        <strong class="main-cta__strong">response to events</strong> at any
        scale.
      </p>
      <a class="main-cta__button u-button"
         href="https://github.com/openwhisk/openwhisk/tree/master/docs#getting-started-with-openwhisk">
        Get Started
      </a>
    </div>
    <div class="main-cta__graphic main-cta__graphic--stick-to-top">
      <img class="main-cta__illustration"
           src="{{ site.github.url }}/images/illustration-openwhisk.svg"
           alt="Illustration: How Apache OpenWhisk Works">
    </div>
  </div>
</section>

<section class="site-section site-section--blue">
  <div class="where-to-start">
    <div class="where-to-start__animation">
      <img class="where-to-start__image"
           src="{{ site.github.url }}/images/apache-openwhisk-action-animation.gif"
           alt="Get started with Apache OpenWhisk">
    </div>
    <div class="where-to-start__text">
      <h2 class="where-to-start__heading">
        Where to start.
      </h2>
      <p class="where-to-start__lede">
        With Apache OpenWhisk you can easily create actions, test, connect to other
        actions or debug them. Use the
        <a class="where-to-start__link"
           href="https://github.com/openwhisk/openwhisk/blob/master/docs/README.md#setting-up-the-openwhisk-cli">
          Apache OpenWhisk CLI
        </a>,
        target your Apache OpenWhisk instance, and run your first action in seconds.
      </p>
    </div>
  </div>
</section>

<!--
<section class="site-section site-section--ultralight-blue">
  <div class="main-content main-content--center">
    <h2 class="main-content__heading">
      Video Title
    </h2>
    <div class="main-content__video u-embed-container">
      <iframe width="560" height="315"
              src="https://www.youtube.com/embed/enk45wEQHzI"
              frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</section>
-->

<section class="site-section">
  <div class="quotes quotes--compact">
    <blockquote id="quote1" class="quotes__quote">
      <div class="quotes__text quotes__text--compact">
        <p>
          “Thanks to serverless computing we can go even further. The new world
          needs to be asynchronous and elastic by design, and OpenWhisk provides
          the features that we need.”
        </p>
        <p class="quotes__attribution quotes__attribution--compact">
          – Luis Enriquez,
            Head of Platform Engineering &amp; Architecture at Santander Group
        </p>
      </div>
    </blockquote>
  </div>
</section>

<section class="site-section site-section--gray site-section--vertical-padding">
  <ul class="why-are-we-here">
    <li class="why-are-we-here__card">
      <a class="why-are-we-here__section-link why-are-we-here__section-link--developers"
         href="{{ site.github.url }}#developers">
        How do I use Apache OpenWhisk?
      </a>
    </li>
    <li class="why-are-we-here__card">
      <a class="why-are-we-here__section-link why-are-we-here__section-link--service-integrations"
         href="{{ site.github.url }}#service-integrations">
        How do I integrate my service with Apache OpenWhisk?
      </a>
    </li>
    <li class="why-are-we-here__card">
      <a class="why-are-we-here__section-link why-are-we-here__section-link--contributors"
         href="{{ site.github.url }}#contributors">
        How can I contribute to Apache OpenWhisk?
      </a>
    </li>
  </ul>
</section>

<section class="site-section site-section--vertical-padding"
         id="developers">
  <div class="persona">
    <div class="persona__text">
      <h2 class="persona__heading">Focus only on your code.</h2>
      <p class="persona__lede">
        As a developer there's no need to manage the servers that run your code.
        Apache OpenWhisk operates and scales your application for you.
        Spend your time innovating, not configuring infrastructure. Plus,
        you only pay for what your app uses and needs at that moment.
      </p>
      <div class="persona__columns persona__columns--more-top-margin">
        <div class="persona__column">
          <h3 class="persona__sub-heading">
            Fine-grained resource consumption
          </h3>
          <img class="persona__benefit-image"
               src="{{ site.github.url }}/images/illustration-cost-effective.svg"
               alt="Apache OpenWhisk is cost-effective for developers">
          <p class="persona__benefit-text">
            Pay only for the actual resources your actions use, down to the
            millisecond. When an action is not running, it’s not in memory, so
            you don’t pay for idle resources.
          </p>
        </div>
        <div class="persona__column">
          <h3 class="persona__sub-heading">
            Use any language, any service
          </h3>
          <img class="persona__benefit-image"
               src="{{ site.github.url }}/images/illustration-languages-and-integrations.svg"
               alt="Apache OpenWhisk is integrates with many popular languages and apps">
          <p class="persona__benefit-text">
            Work with what you know and love. Integrate popular services. Code in your
            favorite languages. All the pieces connect and are easy to extend.
          </p>
        </div>
      </div>
    </div>
    <div class="persona__cta">
      <img class="persona__illustration"
           src="{{ site.github.url }}/images/persona-developers.svg"
           alt="Developers">
      <a class="persona__button u-button u-button--secondary"
         href="{{ github.site.url }}/developers">
        Read More
      </a>
    </div>
  </div>
</section>

<section class="site-section site-section--gray site-section--vertical-padding"
         id="service-integrations">
  <div class="persona">
    <div class="persona__text">
      <div class="persona__columns">
        <div class="persona__column">
          <img class="persona__benefit-image"
               src="{{ site.github.url }}/images/illustration-integrators.svg"
               alt="Apache OpenWhisk benefits for package creators">
        </div>
        <div class="persona__column">
          <h2 class="persona__heading">Plug your service into Apache OpenWhisk.</h2>
          <p class="persona__benefit-text">
            Apache OpenWhisk makes it simple for thousands of developers to
            integrate with your service. Make it easy for developers to perform
            actions when something happens in your service, or to send data into
            your service when things happen somewhere else.
          </p>
          <p class="persona__benefit-text">
            Become part of a thriving, open source ecosystem. Get your service
            in the hands of more developers, and make it easier than ever for
            other providers to integrate with your services.
          </p>
        </div>
      </div>
    </div>
    <div class="persona__cta">
      <img class="persona__illustration"
           src="{{ site.github.url }}/images/persona-integrators.svg"
           alt="Developers">
      <a class="persona__button u-button u-button--secondary"
         href="{{ github.site.url }}/developers">
        Read More
      </a>
    </div>
  </div>
</section>

<section class="site-section site-section--vertical-padding"
         id="contributors">
  <div class="persona">
    <div class="persona__text">
      <div class="persona__columns">
        <div class="persona__column">
          <img class="persona__benefit-image"
               src="{{ site.github.url }}/images/illustration-contributors.svg"
               alt="Apache OpenWhisk benefits for open source contributors">
        </div>
        <div class="persona__column">
          <h2 class="persona__heading">Join a vibrant open source community.</h2>
          <p class="persona__benefit-text">
            Play a critical part in building game-changing cloud technology.
            Share your actions and triggers with the community, add your service to
            the Apache OpenWhisk ecosystem, or join the development effort to
            make Apache OpenWhisk even better.
          </p>
        </div>
      </div>
    </div>
    <div class="persona__cta">
      <img class="persona__illustration"
           src="{{ site.github.url }}/images/persona-contributors.svg"
           alt="Developers">
      <a class="persona__button u-button u-button--secondary"
         href="{{ github.site.url }}/contributors">
        Read More
      </a>
    </div>
  </div>
</section>