diff --git a/public/_includes/_cta-bar.jade b/public/_includes/_cta-bar.jade
index 58dcf8812b..9431bc1cb3 100644
--- a/public/_includes/_cta-bar.jade
+++ b/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
diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade
index aa9c685ee0..3a0a172c63 100644
--- a/public/_includes/_hero-home.jade
+++ b/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")
diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade
index a2a83754b3..073980f87f 100644
--- a/public/_includes/_main-nav.jade
+++ b/public/_includes/_main-nav.jade
@@ -7,4 +7,4 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
li Docs
li About
li Contribute
- a(class="cta main-nav-button has-icon" href="/download.html" md-button) Download
\ No newline at end of file
+ a(class="cta main-nav-button has-icon" href="/download/" md-button) Download
\ No newline at end of file
diff --git a/public/download/_data.json b/public/download/_data.json
index ca0ea9d492..eacf067dd4 100644
--- a/public/download/_data.json
+++ b/public/download/_data.json
@@ -1,13 +1,52 @@
{
"index": {
- "title": "Angular Docs",
- "subtitle": "Choose a language for Angular",
+ "title": "Setup & Install 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"
+ }
}
-
}
}
}
diff --git a/public/download/index.jade b/public/download/index.jade
index e69de29bb2..0c55be8b63 100644
--- a/public/download/index.jade
+++ b/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 Download for #{name}
+
+ if version.npm
+ li NPM installion for #{name}
+
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index 1af1c17dfc..581465495c 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -29,6 +29,7 @@
@import 'module/bio-card';
@import 'module/overlay';
@import 'module/alert';
+@import 'module/card';
/*
diff --git a/public/resources/css/module/_card.scss b/public/resources/css/module/_card.scss
new file mode 100644
index 0000000000..f1c7efefd9
--- /dev/null
+++ b/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;
+ }
+ }
+
+ }
+ }
+}
\ No newline at end of file