quay/static/partials/plans.html

<div class="co-main-content-panel plans-panel">
  <!-- Header -->
  <div class="plans-header">Use Quay in the cloud or hosted on your servers:</div>

  <!-- Tabs -->
  <ul class="nav nav-tabs plan-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#hosted">
        <div class="tab-logo">
          <img src="/static/img/Quay_horizontal_color.svg">
        </div>
        <div class="tab-title">Hosted in the cloud and scales with you.</div>
        <div class="tab-title">Priced by the number of private repositories.</div>
      </a>
    </li>
    <li role="presentation">
      <a href="javascript:void(0)" role="tab" data-toggle="tab" data-target="#enterprise">
        <div class="tab-logo">
          <img src="/static/img/QuayEnterprise_horizontal_color.svg">
        </div>
        <div class="tab-title">Runs privately anywhere you can run a Docker container.</div>
        <div class="tab-title">Fixed price for unlimited users and repositories</div>
      </a>
    </li>
  </ul>

<div class="tab-content">
  <!-- Hosted -->
  <div class="tab-pane active" id="hosted">
    <!-- Plan columns -->
    <div class="row-container">
      <div class="row">
        <!-- Personal Plan -->
        <div class="col-md-3 plan-col">
          <div class="plan-box">
            <div class="plan-header">
              <span class="plan-box-price">$12/mo</span>
              <b>Personal</b>
            </div>
            <ul>
              <li>5 private repositories</li>
              <li>Unlimited public repos</li>
            </ul>
            <div class="plan-description">Great for individuals</div>
            <a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('personal-30')">
              Start Free Trial
              <span class="fa fa-angle-double-right"></span>
            </a>
          </div>

          <ul class="plan-features">
            <li><i class="fa fa-clock-o"></i>30-day free trial</li>
          </ul>
        </div>

        <!-- Skiff Plan -->
        <div class="col-md-3 plan-col">
          <div class="plan-box">
            <div class="plan-header">
              <span class="plan-box-price">$25/mo</span>
              <b>Skiff</b>
            </div>
            <ul>
              <li>10 private repositories</li>
              <li>Unlimited public repos</li>
              <li>Team-based permissions</li>
            </ul>
            <div class="plan-description">Great for startups</div>
            <a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('bus-micro-30')">
              Start Free Trial
              <span class="fa fa-angle-double-right"></span>
            </a>
          </div>

          <ul class="plan-features">
            <li><i class="fa fa-clock-o"></i>30-day free trial</li>
          </ul>
        </div>

        <!-- Yacht Plan -->
        <div class="col-md-3 plan-col popular">
          <div class="plan-box">
            <div class="plan-header">
              <span class="plan-box-price">$50/mo</span>
              <b>Yacht</b>
            </div>
            <ul>
              <li>20 private repositories</li>
              <li>Unlimited public repos</li>
              <li>Team-based permissions</li>
            </ul>
            <div class="plan-description">Great for small businesses</div>
            <a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow('bus-small-30')">
              Start Free Trial
              <span class="fa fa-angle-double-right"></span>
            </a>
          </div>

          <ul class="plan-features">
            <li><i class="fa fa-clock-o"></i>30-day free trial</li>
          </ul>
        </div>

        <!-- Larger Plans -->
        <div class="col-md-3 plan-col">
          <div class="plan-box">
            <div class="plan-header">
              <b>Larger Plans</b>
            </div>

            <select ng-model="dropdownPlan" class="form-control">
              <option ng-repeat="plan in plans" ng-if="plan.privateRepos > 20 && !plan.plans_page_hidden"
                      value="{{ plan.stripeId }}">
                {{ plan.privateRepos }} private repositories
              </option>
            </select>

            <ul>
              <li>Unlimited public repos</li>
              <li>Team-based permissions</li>
            </ul>
            <div class="plan-description">Great for enterprises</div>
            <a href="javascript:void(0)" class="btn btn-primary trial-button" ng-click="buyNow(dropdownPlan)">
              Start Free Trial
              <span class="fa fa-angle-double-right"></span>
            </a>
          </div>

          <ul class="plan-features">
            <li><i class="fa fa-clock-o"></i>30-day free trial</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- FAQ and features -->
    <div class="faq-features">
      <div class="row-container-no-margin">
        <div class="row">
          <!-- Features -->
          <div class="col-md-3 col-md-push-9 features-col">
            <div class="features-title">All plans include:</div>

            <ul class="features-list">
              <li><i class="fa fa-refresh"></i>
                  <b>Continuous Integration</b>
                  Build your containers in response to git pushes: GitHub, BitBucket, Gitlab and others
              </li>

              <li><i class="fa fa-clock-o"></i>
                  <b>30-Day Free Trial</b>
                  Your first 30 days are free on Quay.io. Test it out and start building containers!
              </li>

              <li><i class="fa fa-hdd-o"></i>
                <b>Public Repositories</b>
                Provide a public download page for your container. The best part, they’re free!
              </li>

              <li><i class="fa ci-robot"></i>
                <b>Robot Accounts</b>
                Create credentials designed for deploying software automatically.
              </li>

              <li><i class="fa fa-group"></i>
                <b>Teams</b>
                Teams can collectively have access to manage specific repositories on your account.
              </li>

              <li><i class="fa fa-lock"></i>
                <b>SSL Encryption</b>
                Transit between Quay.io and your servers is secured automatically.
              </li>

              <li><i class="fa fa-bar-chart"></i>
                <b>Logging &amp; Auditing</b>
                Auditing is essential for everything in your CI pipeline. Actions via API and UI are tracked.
              </li>

              <li><i class="fa fa-calendar"></i>
                <b>Invoice History</b>
                Download past invoices for your billing team or purchasing departement.
              </li>
            </ul>
          </div>

          <!-- FAQ -->
          <div class="col-md-9 col-md-pull-3 faq-col">
            <h4>How do I use Quay with my servers and code?</h4>

            <p>Using Quay with your infrastructure is separated into two main actions: <b>building containers</b> and <b>distributing them to your servers</b>.</p>

            <p>You can configure Quay to automatically build containers of your code on each commit. Integrations with GitHub, Bitbucket, GitLab and self-hosted Git repositories are supported. Each built container is stored on Quay and is available to be pulled down onto your servers.</p>

            <p>To distribute your private containers onto your servers, Docker or rkt must be configured with the correct credientials. Quay has sophisticated access controls – organizations, teams, robot accounts, and more – to give you full control over which servers can pull down your containers. An API can be used to automate the creation and management of these credentials.</p>

            <h4>How is Quay optimized for a team environment?</h4>

            <p>Quay’s permission model is designed for teams. Each new user can be assigned to one or more teams, with specific permissions. Robot accounts, used for automated deployments, can be managed per team as well. This system allows for each development team to manage their own credentials.</p>

            <p>Full logging and auditing is integrated into every part of the application and API. Quay helps you dig into every action for more details.</p>

            <h4>Additional FAQs</h4>

            <b>Can I change my plan?</b>

            <p>Yes, you can change your plan at any time and your account will be pro-rated for the difference. For large organizations, Quay Enterprise offers unlimited users and repos.</p>

            <b>Do you offer special plans for business or academic institutions?</b>

            <p>Please contact us at our support email address to discuss the details of your organization and intended usage.</p>

            <b>Can I use Quay for free?</b>

            <p>Yes! We offer unlimited storage and serving of public repositories. We strongly believe in the open source community and will do what we can to help!</p>

            <b>What types of payment do you accept?</b>

            <p>Quay uses Stripe as our payment processor, so we can accept any of the payment options they offer, which are currently: Visa, MasterCard, American Express, JCB, Discover and Diners Club.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Enterprise -->
  <div class="tab-pane" id="enterprise">...</div>
</div>

<!-- Modal message dialog -->
<div class="modal fade" id="signinModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="user-setup" signed-in="signedIn()" redirect-url="'/plans/'"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->