download page

public/_includes/_cta-bar.jade

@@ -1,3 +1,3 @@
 .cta-bar
   a(href="/docs/js/latest/quickstart.html" class="button button-large button-shield md-raised md-primary" md-button) Learn in 5 Min
-  a(href="download.html" class="button button-large button-secondary" md-button) Download
+  a(href="download/" class="button button-large button-secondary" md-button) Download

public/_includes/_hero-home.jade

@@ -4,7 +4,7 @@ header(class="background-sky")
 
     .hero-cta
       a(href="/docs/js/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Learn in 5 mins
-      a(href="/download.html" class="button button-large button-navy"  md-button) Download
+      a(href="/download/" class="button button-large button-navy"  md-button) Download
 
     != partial("_social-icons")
 

public/_includes/_main-nav.jade

@@ -7,4 +7,4 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
       li <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
       li <a class="main-nav-button" href="/about/" md-button>About</a>
       li <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
-    a(class="cta main-nav-button has-icon" href="/download.html" md-button)  <span class="icon icon-cloud-download"></span> Download
+    a(class="cta main-nav-button has-icon" href="/download/" md-button)  <span class="icon icon-cloud-download"></span> Download

public/download/_data.json

@@ -1,13 +1,52 @@
 {
   "index": {
-    "title": "Angular Docs",
+    "title": "Setup & Install Angular",
-    "subtitle": "Choose a language for Angular",
+    "subtitle": "Choose from our list of Frameworks",
 
     "downloads": {
-      "angular2": {
+      "Angular_2": {
+        "description": "Angular 2.0 is currently in alpha preview. Angular 2 is a development platform for building mobile and desktop web applications",
+        "2.0.0-alpha.11": {
+          "npm": "https://www.npmjs.com/package/angular2"
+        }
+      },
 
+      "AngularDart_2": {
+        "description": "AngularDart 2.0 is currently in alpha preview. AngularDart 2.0 is a development platform for building mobile and desktop web applications",
+        "2.0.0-alpha.12": {
+          "npm": "https://pub.dartlang.org/packages/angular2"
+        }
+      },
+
+      "Angular_1.X": {
+        "description": "The production ready version of Angular JS",
+
+        "1.X": {
+          "file": "https://code.angularjs.org/"
+        }
+      },
+
+      "AngularDart_1.X": {
+        "description": "The production ready version of AngularDart",
+
+        "1.X": {
+          "file": "https://angulardart.org/"
+        }
+      },
+
+      "AngularFire_1.X": {
+        "description": "AngularFire is the officially supported AngularJS binding for Firebase.",
+        "1.X": {
+          "file": "https://www.firebase.com/docs/web/libraries/angular/index.html"
+        }
+      },
+
+      "AngularMaterial_1.X": {
+        "description": "The Angular Material project is an implementation of Material Design in Angular.js.",
+        "1.X": {
+          "file": "https://material.angularjs.org/#/getting-started"
+        }
       }
-
     }
   }
 }

public/download/index.jade

@@ -0,0 +1,23 @@
+.grid-fluid.l-space-bottom-8
+  for versions, framework in downloads
+    div.c9.card
+      frameworkName = framework.replace(/\_/gm, ' ')
+      header
+        h2.text-headline #{frameworkName}
+
+
+      for version, name in versions
+        if name == "description"
+          p #{version}
+
+        else
+          .card-content
+            h3.text-body Version #{name}
+
+            ul
+              if version.file
+                li <a href="#{version.file}"> Download for #{name}</a>
+
+              if version.npm
+                li <a href="#{version.npm}"> NPM installion for #{name}</a>
+

public/resources/css/main.scss

@@ -29,6 +29,7 @@
 @import 'module/bio-card';
 @import 'module/overlay';
 @import 'module/alert';
+@import 'module/card';
 
 
 /*

public/resources/css/module/_card.scss

@@ -0,0 +1,54 @@
+.card {
+  margin-bottom: $unit * 4;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+  border-radius: 2px;
+
+  header {
+    background: $mist;
+    padding: $unit * 2;
+    border-radius: 2px 2px 0px 0px;
+
+    h2 {
+      margin: ($unit * 2) 0px 0px 0px;
+    }
+  }
+
+  p {
+    padding: 0px ($unit * 2);
+    margin-bottom: 0px;
+  }
+
+  .card-content {
+    border-bottom: 1px solid $mist;
+    padding: $unit * 2;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+
+
+    h3 {
+      margin: 0px;
+    }
+
+    ul {
+      padding: 0px;
+      margin: 0px 0px 0px ($unit * 4);
+
+      a {
+        font-size: 14px;
+        display: block;
+        line-height: 24px;
+        text-decoration: none;
+        padding: 0px 4px;
+
+        &:hover {
+          text-decoration: underline;
+          background: $mist;
+        }
+      }
+
+    }
+  }
+}