Add front page example videos

Use YouTube embedded videos to demonstrate our wares.

Signed-off-by: Aidan Delaney <[email protected]>

Author: AidanDelaney

themes/buildpacks/layouts/index.html

@@ -3,9 +3,35 @@
 <div class="hero">
   <div class="well bg-transparent">
     <section class="container">
-      <h2 class="px-4">
-        <span class="strong">Cloud Native Buildpacks</span><br/> transform your application source code into images that can run on any cloud.
-      </h2>
+      <div class="row">
+        <h2 class="col-sm px-4">
+          <span class="strong">Cloud Native Buildpacks</span><br/> transform your application source code into images that can run on any cloud.
+        </h2>
+        <div class="col-sm bg-white mb-2 border rounded">
+          <ul class="nav nav-pills nav-fill" id="introVideo">
+            <li class="nav-item">
+              <a class="nav-link active" data-toggle="tab" href="#python-video">Python</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#javascript-video">JavaScript</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#java-video">Java</a>
+            </li>
+          </ul>
+          <div class="tab-content clearfix" id="introVideoContent">
+            <div class="tab-pane active" id="python-video">
+              <iframe width="100%" src="https://www.youtube-nocookie.com/embed/4zOEp8dyqoM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
+            <div class="tab-pane" id="javascript-video">
+              <iframe width="100%" src="https://www.youtube-nocookie.com/embed/kfourVy7zBk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
+            <div class="tab-pane" id="java-video">
+              <iframe width="100%" src="https://www.youtube-nocookie.com/embed/d_L_AZyocWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
       <p class="button-holder">
         <a href="/docs/" class="bg-pink button">Get Started</a>
       </p>