---
layout: default
---

<div class="border-bottom bg-brand-blue-light">
  <div class="container-lg px-3">
    <div class="py-3 clearfix">
      <h1 class="h3 float-left">
        <img src="/assets/probot-head.png" width="32" alt="">
        <strong class="">Probot</strong>
      </h1>
      <nav class="text-bold d-block float-right">
        <a class="text-inherit px-2 d-inline-block" href="#">Explore</a>
        <a class="text-inherit px-2 d-inline-block" href="#">Build</a>
        <a class="text-inherit px-2 d-inline-block" href="#">Contribute</a>
      </nav>
    </div>
  </div>
</div>

<div class="border-bottom">
  <div class="container-lg px-3 jumbotron jumbotron-minitron">
    <div class="d-flex d-flex-row gutter-spacious flex-items-center">
      <div class="flex-column col-3 text-center cover position-relative rounded-2"
           style="background-image: url({{ page.background }}); background-size: cover; background-position: center;">
      </div>
      <div class="flex-column col-7">
        <h1 class="alt-h1 lh-condensed-ultra">{{ page.title }}</h1>
        <p class="text-gray">{{ page.description }}</p>
      </div>
      <div class="flex-column col-2 text-right">
        <a class="btn btn-primary btn-large" href="https://github.com/apps/{{ page.slug }}/installations/new">Install</a>
      </div>

    </div>
  </div>
</div>

<div class="">
  <div class="container-lg px-3 py-6">
    <div class="d-flex flex-row-reverse d-flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="mb-6 bg-white">
          <div class="d-flex flex-items-center  flex-justify-center">
            {% for screenshot in page.screenshots limit:1 %}
              <img src="{{ screenshot }}" style="max-width:100%; max-height:100%;">
            {% endfor %}
          </div>
          <div class="d-flex flex-items-center flex-justify-center p-2">
            {% for screenshot in page.screenshots %}
              <div class="rounded border mx-1" style="width:125px; height: 70px; background-image: url({{ screenshot }}); background-size: cover; background-position: center;">
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="flex-column col-3">
        <h4 class="alt-h4 text-gray">Topics</h4>
        {% for topic in page.topics %}
          <a class="bg-blue-light rounded-2 px-2 py-1" href="#">#{{ topic }}</a>
        {% endfor %}

        <h4 class="mt-4 alt-h4 text-gray">About</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p><span class="text-gray-light">Updated:</span> June 12, 2017</p>
        <p><strong>{{ page.installs | default: 0 }}</strong> <span class="text-gray-light">installs</span></p>
        <p><strong>{{ page.stars | default: 0 }}</strong> <span class="text-gray-light">stars</span></p>
      </div>
    </div>
  </div>
</div>

<div class="py-6">
  <div class="container-lg px-3">
    <div class="d-flex flex-row-reverse d-flex-row gutter-spacious">
      <div class="flex-coumn col-9">
        <div class="markdown-body">
          {{ content }}
        </div>
      </div>
      <div class="flex-column col-3">
        <h4 class="mt-4 alt-h4 text-gray">This App is used by</h4>
        {% for organization in page.organizations %}
          <a href="https://github.com/{{ organization }}"><img class="avatar avatar-group-item" src="https://github.com/{{ organization }}.png" height="35"></a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>