refactor(homepage): refactor helix-ui homepage

Author: Cathy Siller

docs/docs.less

@@ -14,6 +14,10 @@
 */
 @import (reference) 'vars';
 
+.homepage {
+  background-image: linear-gradient(0deg, @cyan-100, @gray-0 20%);
+}
+
 .brand-logo {
   align-items: center;
   display: flex;

docs/index.html

@@ -1,13 +1,29 @@
 {% extends 'application.njk' %}
 
 {% block layout %}
-  <main id="content" class="hxBox-md">
-    <h1>HelixUI</h1>
-
-    <p>We're still building. Content will arrive as it's built.</p>
-
+  <main id="content" class="hxBox-md homepage">
     <section>
-        <!-- common links and getting started stuff goes here -->
+      <h1 class="hxPageTitle">HelixUI</h1>
+      <p>HelixUI is a UI library, created with custom elements to help you develop applications.</p>
+    </section>
+    <section class="hxSpan-12-xs hxSpan-6-md">
+      <h3 class="hxSubSectionTitle">Getting Started</h3>
+      <p>
+        To learn how to get HelixUI into your projects, check out the 
+        <a href="guides/install">install guide</a>.
+      </p>
+    </section>
+    <section class="hxSpan-12-xs hxSpan-6-md">
+      <h3 class="hxSubSectionTitle">Browser Support</h3>
+      <p>
+        HelixUI supports IE11 and all current versions of evergreen browsers
+        (Chrome, Firefox, Safari, and Edge).
+      </p>
+    </section>
+    <section class="hxSpan-12-xs hxSpan-6-md">
+      <h3 class="hxSubSectionTitle">Getting Involved</h3>
+      <p>We welcome issue and code contributions. A contribution guide is coming soon.</p>
+     </section>
     </section>
   </main>
 {% endblock %}