Improve index page layout

index.html

@@ -7,71 +7,51 @@
   <div class="col">
     <div class="flex">
       <div class="col-9-12 p-10">
-        <img src="en/img/overview/vespa-overview.svg" />
-      </div>
-      <div class="col-1-12 p-10 flex-column-column-reverse">
-        <a class="button is-solid" href="en/getting-started.html">Get Started</a>
+        <img src="en/img/overview/vespa-overview.svg" width="741" height="auto"/>
       </div>
     </div>
   </div>
 </div>
 
 <div class="row">
-  <div class="col-4-12">
-    <div class="box m-10 has-">
+  <div class="col-3-12">
+    <div class="box m-10 p-10 has-bg-grey-300">
       <h4>Sample applications</h4>
       <p style="color: var(color-brand-400)">Get started deploying your first Vespa application from the
         <a href="https://github.com/vespa-engine/sample-apps">Vespa Sample apps repo</a>.
       </p>
     </div>
   </div>
-  <div class="col-4-12">
-    <div class="box m-10 ">
+  <div class="col-3-12">
+    <div class="box m-10 p-10 has-bg-grey-300">
       <h4>Support</h4>
       <p>Engage with the community and Vespa Team from the
         <a href="https://vespa.ai/support">Vespa Support Center</a>.
       </p>
     </div>
   </div>
-  <div class="col-4-12">
-    <div class="box m-10">
+  <div class="col-3-12">
+    <div class="box m-10 p-10 has-bg-grey-300">
       <h4>Vespa Blog</h4>
       <p>Find announcements, features and use cases at
         <a href="https://blog.vespa.ai">blog.vespa.ai</a>.
       </p>
     </div>
   </div>
-  <!--
   <div class="col-3-12">
-    <div class="box m-10">
-      <h4>Vespa Videos</h4>
-      <p>Coming soon!</p>
+    <div class="box m-10 p-10 has-bg-grey-300">
+      <h4>Community</h4>
+      <ul>
+        <li><a href="https://twitter.com/vespaengine">Twitter</a></li>
+        <li><a href="http://stackoverflow.com/questions/tagged/vespa">Stack Overflow</a></li>
+        <li><a href="http://slack.vespa.ai/">Slack</a></li>
+      </ul>
     </div>
   </div>
-  -->
 </div>
 
-<div class="row m-t-100" style="border-top: 1px solid #1A7DB6;"> <!-- ToDo: fixme -->
-  <div class="col">
-    <h4 class="upper">Resources</h4>
-    <p><a href="en/getting-started.html">Getting Started</a></p>
-    <p><a href="/">Documentation</a></p>
-    <p><a href="https://github.com/vespa-engine/vespa">Open source</a></p>
-  </div>
-  <div class="col">
-    <h4 class="upper">Contact</h4>
-    <p><a href="https://twitter.com/vespaengine">Twitter</a></p>
-    <p><a href="mailto:[email protected]">[email protected]</a></p>
-    <p><a href="https://github.com/vespa-engine/vespa/issues">Issues</a></p>
-  </div>
-  <div class="col">
-    <h4 class="upper">Community</h4>
-    <p><a href="https://github.com/vespa-engine/vespa/blob/master/CONTRIBUTING.md">Contributing</a></p>
-    <p><a href="http://stackoverflow.com/questions/tagged/vespa">Stack Overflow</a></p>
-    <p><a href="http://slack.vespa.ai/">Slack</a></p>
-  </div>
-  <div class="col m-b-20 section-footer--copyright">
-    <h6>Copyright Yahoo. Licensed by <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache</a> License 2.0</h6>
+<div class="row">
+  <div class="col-1-12 m-10 p-10">
+    <a class="button is-solid" href="en/getting-started.html">Get Started</a>
   </div>
-
 </div>