doc: Add top-level navigation grid

Make the documentation page a little bit more interesting with top-level
navigation grid highlighting the most important sections with a brief
description.

Signed-off-by: Anas Nashif <anas.nashif@intel.com>

doc/index.rst

@@ -16,13 +16,6 @@ Zephyr Project Documentation
    Welcome to the Zephyr Project's documentation. This is the documentation of the
    master tree under development (version |version|).
 
-   Documentation for tagged released versions of Zephyr can be found at
-   ``https://docs.zephyrproject.org/<version>``. The following documentation
-   versions are available:
-
-   `Zephyr 1.9.2`_ | `Zephyr 1.10.0`_ | `Zephyr 1.11.0`_ |
-   `Zephyr 1.12.0`_ | `Zephyr 1.13.0`_
-
 For information about the changes and additions for releases, please
 consult the published :ref:`zephyr_release_notes` documentation.
 
@@ -31,15 +24,76 @@ the LICENSE file in the project's `GitHub repo`_).  The Zephyr OS also
 imports or reuses packages, scripts, and other files that use other
 licensing, as described in :ref:`Zephyr_Licensing`.
 
-Source code for the Zephyr Project is maintained in the Zephyr Project's
-`GitHub repo`_.
-
 .. _Apache 2.0 license:
    https://github.com/zephyrproject-rtos/zephyr/blob/master/LICENSE
 
 .. _GitHub repo: https://github.com/zephyrproject-rtos/zephyr
 
 
+.. raw:: html
+
+   <ul class="grid">
+       <li class="grid-item">
+	   <a href="introduction/introducing_zephyr.html">
+	       <img alt="" src="_static/images/kite.png"/>
+	       <h2>Introduction</h2>
+	   </a>
+	   <p>Introducing the Zephyr Project: the overview, architecture, features and licensing</p>
+       </li>
+       <li class="grid-item">
+	   <a href="getting_started/getting_started.html">
+	       <img alt="" src=""/>
+	       <h2>Getting Started Guide</h2>
+	   </a>
+	   <p>Follow this guide to set up a Zephyr development environment on your
+	       system, and then build and run a sample application.</p>
+       </li>
+       <li class="grid-item">
+	   <a href="contribute/index.html">
+	       <img alt="" src=""/>
+	       <h2>Contribution Guidelines</h2>
+	   </a>
+	   <p>As an open-source project, we welcome and encourage the community
+           to submit patches directly to the project.</p>
+       </li>
+       <li class="grid-item">
+	   <a href="samples/samples.html">
+	       <img alt="" src=""/>
+	       <h2>Samples and Demos</h2>
+	   </a>
+	   <p>A list of samples and demos that can run on a variety of boards supported
+	       by Zephyr</p>
+       </li>
+       <li class="grid-item">
+	   <a href="kernel/kernel.html">
+	       <img alt="" src=""/>
+	       <h2>Kernel Services</h2>
+	   </a>
+	   <p>General introduction of the Zephyr kernel’s key capabilities and services.</p>
+       </li>
+       <li class="grid-item">
+	   <a href="security/security.html">
+	       <img alt="" src=""/>
+	       <h2>Security</h2>
+	   </a>
+	   <p>Requirements, processes, and developer guidelines for ensuring security is addressed within the Zephyr project.</p>
+       </li>
+       <li class="grid-item">
+	   <a href="boards/boards.html">
+	       <img alt="" src=""/>
+	       <h2>Supported Boards</h2>
+	   </a>
+	   <p>List if supported boards and platforms.</p>
+       </li>
+       <li class="grid-item">
+	   <a href="tools/index.html">
+	       <img alt="" src=""/>
+	       <h2>Tools</h2>
+	   </a>
+	   <p>List of Tools used for development.</p>
+       </li>
+   </ul>
+
 .. only:: html
 
    Sections

doc/static/zephyr-custom.css

@@ -165,3 +165,72 @@ kbd
   padding:.1em .6em;
   text-shadow:0 1px 0 #fff;
 }
+
+
+.grid {
+    list-style-type: none !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    margin: 1rem auto;
+    max-width: calc((250px + 2rem) * 4);
+}
+
+.grid-item {
+    list-style-type: none !important;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 auto;
+            flex: 0 0 auto;
+    width: 200px;
+    text-align: center;
+    margin: 1rem;
+}
+
+.grid-item a {
+    display: block;
+    width: 200px;
+    height: 200px;
+    padding: 10px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    border: 1px solid #c6cbce;
+    background-color: #57D3FC;
+    color: white;
+}
+
+.grid-item h2 {
+    font-size: 1.1rem;
+}
+
+.grid-item img {
+    margin-bottom: 1.1rem;
+    max-width: 60%;
+}
+
+
+.grid-item a:hover {
+        background-color: #C756E9;
+	color: white;
+}
+
+
+.grid-item p {
+    margin-top: 0.5rem;
+    color: #333e48;
+}