docs(): Add content funnels to landing page

angular · Jan 21, 2015 · d5ae72e · d5ae72e
1 parent cfabdec
commit d5ae72e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 8 deletions.
diff --git a/docs/app/css/style.css b/docs/app/css/style.css
@@ -9,6 +9,10 @@ body {
 
 a {
   color: #3f51b5;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  text-decoration: underline;
 }
 
 table {
@@ -364,8 +368,37 @@ md-toolbar.demo-toolbar .md-button {
   font-size: 18px;
 }
 
+/***************
+ * Landing Page
+ ***************/
+ul.buckets {
+  margin: 24px 0;
+  padding: 0;
+}
+ul.buckets li {
+  list-style: none;
+  margin: 0;
+  text-align: center;
+}
+ul.buckets li md-card md-card-content {
+  padding: 0;
+}
+ul.buckets li a {
+  background-color: transparent;
+  display: block;
+  font-weight: 500;
+  padding: 16px 0;
+  text-decoration: none;
+  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+  transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+}
+ul.buckets li a:focus {
+  background-color: #03a9f4;
+  color: white;
+}
+
 /************
- * DOCS
+ * API DOCS
  ************/
 .api-options-bar .md-button {
   margin: 4px;

diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -16,6 +16,21 @@ function(COMPONENTS, DEMOS, PAGES, $routeProvider, $mdThemingProvider) {
         return 'partials/layout-' + params.tmpl + '.tmpl.html';
       }
     })
+    .when('/layout/', {
+      redirectTo: function() {
+        return "/layout/container";
+      }
+    })
+    .when('/demo/', {
+      redirectTo: function() {
+        return DEMOS[0].url;
+      }
+    })
+    .when('/api/', {
+      redirectTo: function() {
+        return COMPONENTS[0].docs[0].url;
+      }
+    })
     .when('/getting-started', {
       templateUrl: 'partials/getting-started.tmpl.html'
     });

diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
@@ -1,5 +1,44 @@
 <div ng-controller="HomeCtrl" layout="column" class="doc-content">
     <md-content class="extraPad" >
+        <p>
+            The <strong>Angular Material Design</strong> project is a reference implementation effort similar to that provided in the
+            <a href="http://www.polymer-project.org/">Polymer</a> project's
+            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a>
+            collection. This project provides a set of AngularJS UI elements that implement the Material Design system.
+        </p>
+
+        <ul class="buckets" layout layout-align="center center" layout-wrap>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/getting-started">Getting Started</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/demo/">Demos</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/layout/">Customization</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/api/">API Reference</a>
+              </md-card-content>
+            </md-card>
+          </li>
+        </ul>
+
+        <h2>What is Material Design?</h2>
         <p>
             <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a
             unified system of visual, motion, and interaction design that adapts across different devices and different
@@ -12,13 +51,6 @@
             <iframe width="560" height="315" title="Material Design" src="//www.youtube.com/embed/Q8TXgCzxEnw"
                     frameborder="0" allowfullscreen></iframe>
         </md-content>
-
-        <p>
-            The Angular Material Design project is a reference implementation effort similar to that provided in the
-            <a href="http://www.polymer-project.org/">Polymer</a> project's
-            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a>
-            collection. This project provides a set of AngularJS UI elements that implement the material design system.
-
         <ul>
             <li>These docs were generated from source in the `master` branch:
                 <ul style="padding-top:5px;">