microsite/index.html

<!DOCTYPE html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="klio: smarter data pipelines for audio">
    <meta name="docsearch:language" content="en" />
    <title>klio: smarter data pipelines for audio</title>

    <link rel="canonical" href="https://klio.io">
    <link rel="shortcut icon" href="images/favicon.png"/>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/fonts.css" />
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
  </head>

  <body class="d-flex flex-column h-100 text-center">
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#"><img src="images/logo.svg" class="logo" alt="logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <img src="images/menu.svg">
        </button>
        <div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarCollapse">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link"
                 href="https://github.com/spotify/klio"><button class="gradient">GitHub</button></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://docs.klio.io"><button class="gradient">Get Started</button></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://venturebeat.com/2020/10/13/spotify-open-sources-klio-a-framework-for-ai-audio-research/"><button class="gradient">In the News</button></a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main role="main" class="flex-shrink-0">
      <div class="shove-down"></div>
      <div class="container mt-5">
        <div class="row justify-content-center">
          <div class="col-10">
            <h1 class="mt-5">Smarter data pipelines for audio</h1>
          </div>
          <div class="col-8">
            <p class="lead">Process hundreds of thousands of audio files just as easily as any other kind of dataset.</p>
          </div>
        </div>
      </div>
      <div class="shove-down-sm">
        <img src="images/waveform.gif" class="img-fluid">
      </div>
      <div class="below-fold">
        <div class="shove-down-sm"></div>
        <div class="container mt-5">
          <div class="row justify-content-center">
            <img src="images/pipeline.gif" class="animated-icons">
          </div>
          <div class="row justify-content-center mt-5">
            <div class="col-9">
              <p>Built on Apache Beam. Written for native Python speakers. Designed for the cloud. Klio is an open framework for building data pipelines optimized for media. It makes processing audio, video, and images as simple and seamless as processing text.</p>
            </div>
          </div>
        </div>
        <div class="container mt-5">
          <div class="row justify-content-center">
            <img src="images/cloud.gif" class="animated-icons">
          </div>
          <div class="row justify-content-center mt-5">
            <div class="col-9">
              <p>With Klio, engineers can speak the same language as ML and audio researchers to build data pipelines, together. Pipelines that are both efficient and reproducible. And that automatically come with managed resources, along with the other benefits of a modern cloud infrastructure. All at enormous scale.</p>
            </div>
          </div>
        </div>
        <div class="container mt-5">
          <div class="row justify-content-center">
            <img src="images/files.gif" class="animated-icons">
          </div>
          <div class="row justify-content-center mt-5">
            <div class="col-9">
              <p>For the first time, media companies and academics alike can process hundreds of thousands of media files at once, simply and efficiently. How do we know? Because that’s how we do it every day here at Spotify.</p>
            </div>
          </div>
        </div>
        <div class="container mt-5 mb-5">
          <div class="row justify-content-center">
            <a href="https://docs.klio.io" class="btn btn-primary btn-lg get-started" role="button">Learn More</a>
          </div>
        </div>
        <div class="shove-down"></div>
        <footer class="footer mt-auto py-1">
          <div class="container">
            <p><a href="https://spotify.github.io"  class="made-with-footer">Made with ❤️ at Spotify</a></p>
            <p class="copyright">Copyright &copy; 2020 Spotify AB</p>
          </div>
        </footer>
      </div>
    </main>
  </body>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="js/bootstrap.js"></script>
</html>