Templates

_data/toc.json

@@ -1,6 +1,7 @@
 {
     "Getting Started": [
       "docs/README.md",
+      "docs/quickstarts.md",
       "docs/hello-world.md",
       "docs/development.md",
       "docs/webhooks.md",

_data/toc.yml

@@ -1,5 +1,6 @@
 Getting Started:
   - docs/README.md
+  - docs/quickstarts.md
   - docs/hello-world.md
   - docs/development.md
   - docs/webhooks.md

community.html

@@ -8,7 +8,7 @@
 
 <div class="container-lg px-3 featurette">
   <h1 class="h2 text-center">Join the Community</h1>
-  <p class="alt-lead col-md-8 text-center color-text-secondary mx-auto">
+  <p class="lead col-md-8 text-center color-text-secondary mx-auto">
     We're thrilled that you'd like to contribute to this project. Your help is
     essential for keeping it great.
   </p>

index.html

@@ -16,7 +16,7 @@ <h2 class="h2 lh-condensed">
             GitHub Apps to automate <br />and improve your workflow
           </h2>
           <p
-            class="alt-lead color-text-tertiary mt-2 lh-condensed"
+            class="lead color-text-tertiary mt-2 lh-condensed"
             style="opacity: 0.6"
           >
             Use pre-built apps to extend GitHub,<br />
@@ -57,7 +57,70 @@ <h2 class="h1 text-center">Explore</h2>
   </div>
 </div>
 
-<div id="build" class="border-top page-section f4 pt-4">
+<div id="build" class="border-top page-section f4 pt-4 py-1">
+  <div class="container-lg px-3">
+    <h2 class="h1 text-center lh-condensed">Quickstarts</h2>
+    <p class="lead text-center">Apps are easy to write and share.</p>
+    <p class="text-center">
+      <a href="/docs/">Get started with this app {% octicon "chevron-right" %}</a>
+    </p>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center my-3">
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/img/comment.png" class="width-fit">
+      </div>
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Comment on an Issue</h3>
+        <p class="">
+          Get started with an app that will post a comment any time an issue is opened.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon "chevron-right" %}</a>
+        </p>
+      </div>
+    </div>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center my-3">
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Create a Check</h3>
+        <p class="">
+          Get started with an app that creates successful checks on pull requests.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon "chevron-right" %}</a>
+        </p>
+      </div>
+
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/img/checks.png" class="width-fit">
+      </div>
+    </div>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center my-3">
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/img/pr.png" class="width-fit">
+      </div>
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Open a Pull Request</h3>
+        <p class="">
+          Get started with an app that will open a new pull request when you install it on your repository.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon "chevron-right" %}</a>
+        </p>
+      </div>
+    </div>
+
+    <p class="text-center mb-6">
+      <a class="btn btn-outline btn-large" href="/docs/">
+        {% octicon "versions" class="mr-2" %}
+        Browse Quickstarts
+      </a>
+    </p>
+  </div>
+</div>
+
+<div id="build" class="border-top page-section f4 py-3">
   <div class="container-lg px-3">
     <h2 class="h1 text-center lh-condensed">Build your own app</h2>
     <p class="alt-lead text-center mb-6">Apps are easy to write and share.</p>