docs: Add links to homepage

Previously, there were no links from the homepage to any of the
more detailed docs about use cases and even mention of use cases
was below the fold.

This change adds links to use cases at the very top of the page,
along with pointers to core docs and the OPA summit.

Signed-off-by: Tim Hinrichs <tim@styra.com>

docs/website/layouts/partials/home/banner.html

@@ -3,7 +3,14 @@
 {{ $tagline     := site.Params.tagline }}
 {{ $socialMenu  := site.Menus.social }}
 {{ $docs        := "/docs/latest/" }}
-{{ $getStarted  := "/docs/latest/get-started/" }}
+{{ $introduction  := "/docs/latest/" }}
+{{ $tutorial  := "/docs/latest/get-started/" }}
+{{ $policyLanguage  := "/docs/latest/policy-language/" }}
+{{ $kubernetes  := "/docs/latest/kubernetes-introduction/" }}
+{{ $microservices  := "/docs/latest/http-api-authorization/" }}
+{{ $kafka  := "/docs/latest/kafka-authorization/" }}
+{{ $terraform  := "/docs/latest/terraform/" }}
+{{ $opaSummit  := "https://www.papercall.io/opa-summit" }}
 <header role="banner">
   <nav class="nav--banner" role="navigation">
     <ul class="nav--menu">
@@ -20,7 +27,7 @@
       </li>
 
       <li class="nav--menu-item nav--docs">
-        <a href="{{ $getStarted }}" rel="help">
+        <a href="{{ $tutorial }}" rel="help">
           Tutorials
         </a>
       </li>
@@ -63,13 +70,39 @@
       </p>
 
       <p class="headline--nav">
-        <a id="headline--get-started" href="{{ $getStarted }}" rel="help">
-          Get started
+        <span class="headline--navtitle">Core Docs</span>  
+        <a id="headline--get-started" class="headline--link" href="{{ $introduction }}" rel="help">
+          Introduction
         </a>
+        <a class="headline--link" href="{{ $tutorial }}" rel="help">
+          Tutorial
+        </a>
+        <a class="headline--link" href="{{ $policyLanguage }}" rel="help">
+          Policy Language
+        </a>
+      </p>
+      <p class="headline--nav">
+          <span class="headline--navtitle">Use Cases</span> 
+          <a class="headline--link" href="{{ $kubernetes }}" rel="help">
+            Kubernetes
+          </a>
+          <a class="headline--link" href="{{ $microservices }}" rel="help">
+            Microservice APIs
+          </a>
+          <a class="headline--link" href="{{ $kafka }}" rel="help">
+            Kafka
+          </a>
+          <a class="headline--link" href="{{ $terraform }}" rel="help">
+              Terraform
+          </a>
+      </p>
+      <p class="headline--nav">
+          <span class="headline--navtitle">Events</span> 
+          <a class="headline--link" href="{{ $opaSummit }}" rel="help">
+            OPA Summit
+          </a>
+      </p>
 
-        <a id="headline--learn-more" href="{{ $docs }}" rel="help">
-          Learn more
-        </a>
       </p>
     </div>
 

docs/website/static/css/home.css

@@ -77,12 +77,11 @@ p {
   margin-bottom: 1.3em;
 }
 
-ul, {
+ul {
   list-style: none;
 }
 
-#headline--get-started,
-#headline--learn-more {
+.headline--link {
   border: solid 2px #008391;
   border-radius: 6px;
   display: inline-block;
@@ -92,16 +91,25 @@ ul, {
   text-align: center;
   text-decoration: none;
   width: 180px;
-}
-
-#headline--get-started {
+  /* background-color: #fff;
+  color: #008391; */
   background-color: #008391;
   color: #fff;
 }
 
-#headline--learn-more {
-  background-color: #fff;
-  color: #008391;
+.headline--navtitle {
+  width: 100px;
+  float: left;
+  text-align: left;
+  vertical-align: middle;
+  line-height: 44px;
+  color: rgba(0, 0, 0, .54);
+  /* font-size: 1.25em; */
+
+}
+#headline--get-started {
+  background-color: #008391;
+  color: #fff;
 }
 
 footer {