<div id="homepage" v-cloak>

  <div style="max-height: 1096px;">
    <div style="padding-top: 114px" class="hero-banner">
      <div class="hero-clouds">
        <div class="container-lg">
          <div class="container-fluid text-center pt-3 pt-sm-5">
            <h1>
              Open source <br>
              device management.
            </h1>
            <h6 style="max-width: 580px;" class="mx-auto mt-3 mb-0">
              Quickly deploy <a target="_blank" style="color: white; text-decoration-line: underline;" href="https://osquery.io/">osquery</a> and scale your fleet to 100,000+ devices on top of a stable core technology.
            </h6>
            <div purpose="demo-cta-container" class="mx-auto pb-5 pb-sm-2" style="padding-top: 32px;">
              <ajax-form action="deliverDemoSignup" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()" v-if="!cloudSuccess">
                <div purpose="demo-cta" class="flex-row row justify-content-between align-items-center mx-auto">
                  <div purpose="demo-cta-text" class="pl-0 pr-3 text-left">
                    <span style="font-size: 32px; vertical-align: middle;">💡</span>
                    <p class="d-inline-block">
                      <strong>Live Q&A session</strong>
                      <br class="d-lg-none d-block">
                      March 15th, 2022 2:30pm (CST)
                    </p>
                  </div>
                  <div purpose="demo-cta-form" class="flex-grow-1 col-12 col-sm-auto px-0 pt-sm-0">
                    <div class="form-control d-inline-flex" :class="[formErrors.emailAddress ? 'is-invalid' : '']">
                      <input class="float-left pr-1" v-model.trim="formData.emailAddress" placeholder="Enter your email">
                      <ajax-button purpose="register-button" spinner="true" :syncing="syncing" type="submit" class="btn btn-sm btn-info float-right">Register</ajax-button>
                    </div>
                    <div purpose="demo-cta-error-message" v-if="formErrors.emailAddress">
                      Please enter a valid email address e.g., example@email.com
                    </div>
                  </div>
                </div>
              </ajax-form>
              <div purpose="demo-cta-success-message" class="mx-auto" v-else>
                <p class="text-center">Thank you for registering.<br class="d-sm-none d-block"> Please check your inbox for event details.</p>
              </div>
            </div>
            <img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid justify-content center px-0 py-0">
    <div style="max-width: 720px;" class="d-none d-sm-flex text-center mx-auto">
      <h3 class="text-center pt-3 pb-5 mx-auto mb-3">Ask questions about your servers, and laptops. Whatever their operating system, wherever they live.</h3>
    </div>
    <div style="max-width: 960px;" class="container-fluid justify-content-center">
      <div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
        <div class="container text-center text-lg-left px-0 pb-5 pb-lg-0">
          <h3>
            Single source of truth
          </h3>
          <p>
            Search for any device data using SQL queries, monitor your devices and respond to incidents quickly.
          </p>
          <div class="container d-flex justify-content-center justify-content-lg-start align-items-center px-0">
            <img alt="macOS logo" src="/images/os-macos-black-31x35@2x.png" style="width: auto; height: 36px;" class="mr-4" />
            <img alt="Windows logo" src="/images/os-windows-black-38x36@2x.png" style="width: auto; height: 36px;" class="mr-4" />
            <img alt="Linux logo" src="/images/os-linux-black-32x36@2x.png" style="width: auto; height: 36px;" />
          </div>
        </div>
        <div style="max-width: 488px;" class="container d-flex px-2 px-sm-0 pb-5 pb-lg-0">
          <img alt="Fleet UI" src="images/feature-inventory-management-488x305@2x.png" class="w-100 h-100 m-lg-0" />
        </div>
      </div>
      <div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
        <div style="max-width: 380px;" class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
          <h3>
            Share with any team
          </h3>
          <p>
            Collect and share useful information for ops teams, security teams, help desk, and more.
          </p>
        </div>
        <div style="max-width: 459px;" class="container d-flex order-lg-first px-2 px-sm-0 pb-5 pb-lg-0 m-0">
          <img alt="Fleet UI" src="images/feature-share-with-any-team-459x312@2x.png" class="w-100 h-100 m-lg-0"/>
        </div>
      </div>
      <div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
        <div class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
            <h3>
              Deploy anywhere
            </h3>
            <p class="pb-4 mb-0">
              Fleet is self-hosted and self-managed, and can be run within your own data centers or in the cloud.
            </p>
          <div class="d-block align-items-center">
            <div class="d-inline-block mr-4">
              <img title="Kubernetes" alt="kubernetes logo" src="/images/icon-kubernetes-37x36@2x.png" style="width: auto; height: 36px;" class="d-block mx-auto"/>
            </div>
            <div class="d-inline-block mr-4">
              <img title="AWS" alt="aws logo" src="/images/icon-aws-60x36@2x.png" style="width: auto; height: 36px;" lass="d-block mx-auto"/>
            </div>
            <div class="d-inline-block">
              <img title="Google cloud" alt="google cloud logo" src="/images/icon-google-cloud-46x36@2x.png" style="width: auto; height: 36px;" class="d-block mx-auto"/>
            </div>
          </div>
        </div>
        <div style="max-width: 489px;" class="container d-flex px-2 px-sm-0 pb-5 pb-lg-0">
          <img alt="Fleet UI" src="images/feature-deployment-489x278@2x.png" class="w-100 h-100 m-lg-0"/>
        </div>
      </div>
    </div>
    <div class="container-sm justify-content-center m-0 mb-5">
      <div style="max-width: 566px;" class="text-center px-2 px-sm-0 mx-auto">
        <h3 class="mb-3">Collect and push predictable data</h3>
        <p>
          Automate scheduled queries to integrate alerts and dashboards across your enterprise.
        </p>
      </div>
      <div class="log-destination-grid container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="filesystem icon" src="/images/icon-log-destination-filesystem-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">Filesystem</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="Splunk logo" src="/images/icon-log-destination-splunk-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">Splunk</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="AWS Kinesis logo" src="/images/icon-log-destination-firehose-40x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">AWS Kinesis</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="Google Cloud Platform PubSub logo" src="/images/icon-log-destination-pubsub-53x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">GCP PubSub</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="AWS Lambda logo" src="/images/icon-log-destination-lambda-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">AWS Lambda</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="Elastic logo" src="/images/icon-log-destination-elastic-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">Elastic</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="Sumo Logic logo" src="/images/icon-log-destination-sumo-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">Sumo Logic</p>
        </div>
        <div class="log-destination d-flex mx-1 mx-sm-2 mb-4">
          <img alt="Graylog logo" src="/images/icon-log-destination-graylog-48x48@2x.png"/>
          <p class="font-weight-bold m-0 ml-3">Graylog</p>
        </div>
      </div>
      <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5">
        <a
          style="max-width: 220px"
          class="btn btn-block btn-md btn-primary mx-4"
          href="/get-started?tryitnow"
        >
          Try it out
        </a>
        <a
          style="max-width: 220px"
          class="btn btn-block btn-lg btn-white pl-0 m-0"
          purpose="animated-arrow-button"
          target="_blank"
          href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top"
          >Schedule a demo
        </a>
      </div>
    </div>
  </div>

  <div id="testimonials" style="background: #F4F6FA;">
    <div class="container-lg text-center justify-content-center py-5 mx-auto mt-5">
      <h3 class="px-4 mt-5 mb-3">Community driven, and built on open core technology.</h3>
      <p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
        That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.
      </p>
      <div purpose="tweets" class="d-flex card-deck justify-content-center pt-5 mx-auto">
        <div purpose="tweet-card" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">It’s great to see the new release of Fleet containing some really cool new features that make <a href="https://twitter.com/osquery">@osquery</a> much more usable in practical environments. I’m really impressed with the work that <a href="https://twitter.com/thezachw">@thezachw</a> and crew are doing at <a href="https://twitter.com/fleetctl">@fleetctl</a>.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Mike Arpaia</p>
              <p class="m-0">Creator of <a href="https://twitter.com/osquery">@osquery</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/osquery">#osquery</a> is one of the best tools out there and <a href="https://twitter.com/hashtag/fleetdm">#fleetdm</a> makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.</p>
          <p>I have used it on 15k servers and it’s really scalable.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Ahmed Elshaer</p>
              <p class="m-0">DFIR, Blue Teaming, SecOps <a href="https://twitter.com/Wayfair">@wayfair</a></p>
              </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/SnowflakeDB"><img width="153" height="38" alt="Snowflake logo" src="/images/social-proof-logo-snowflake-153x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">My DevOps team members got Fleet set up this week, w/ data streaming via firehose to S3 buckets. This is pretty dang amazing being able to stream real data this fast. I’m very excited to see what we can build out with this. Enrolled a few boxes & streaming that sweet data.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Tom Larkin</p>
              <p class="m-0">IT Engineering <a href="https://twitter.com/SnowflakeDB">@Snowflake</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">Exciting. This is a team that listens to feedback.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Erik Gomez</p>
              <p class="m-0">Staff Software Engineer <a href="https://twitter.com/Uber">@Uber</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">Mad props to how easy making a deploy pkg of Orbit was. I wish everyone made stuff that easy.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Wesley Whetstone</p>
              <p class="m-0">CPE <a href="https://twitter.com/Square">@Square</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/fleet">#Fleet</a>’s come a long way - to now being the top open-source <a href="https://twitter.com/hashtag/fleet">#osquery</a> manager. Just in the past 6 months.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Brendan Shaklovitz</p>
              <p class="m-0">Senior SRE <a href="https://twitter.com/atlassian">@Atlassian</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card-bottom-row" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
          </div>
          <p class="pb-2 mb-1">With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Abubakar Yousafzai</p>
              <p class="m-0">Security Software Development & Engineering <a href="https://twitter.com/comcast">@Comcast</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card-bottom-row" class="card ">
          <div class="mb-4">
            <a href="https://twitter.com/grupoversia"><img width="90" height="38" alt="Versia logo" src="/images/social-proof-logo-versia-90x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">Thanks <a href="https://twitter.com/fleetctl">@fleetctl</a> for such an awesome tool to manage <a href="https://twitter.com/osquery">@osquery</a></p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Ruben Rodriguez</p>
              <p class="m-0">Systems technician <a href="https://twitter.com/grupoversia">@Versia</a></p>
            </div>
          </div>
        </div>

      </div>

      <div>
        <h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
        <p class="px-4">
          Teams use osquery with Fleet every day to stay secure and compliant.
        </p>
        <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
          <a
            style="max-width: 220px"
            class="btn btn-block btn-md btn-primary mx-4"
            href="/get-started?tryitnow"
          >
            Try it out
          </a>
          <a
            style="max-width: 220px"
            class="btn btn-block btn-lg btn-white pl-0 m-0"
            purpose="animated-arrow-button"
            target="_blank"
            href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom"
            >Schedule a demo
          </a>
        </div>
      </div>
    </div>
  </div>
</div>


<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
