o Improved front page.

2 files changed, 67 insertions, 42 deletions

diff --git a/views/index.jade b/views/index.jade
index 3cbf438..76e56bf 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -1,34 +1,68 @@
 extends layout
 
+block navbar
+  div(class='navbar navbar-fixed-top')
+    div(class='navbar-inner')
+      div(class='container')
+        a(class='btn btn-navbar', data-toggle='collapse', data-target='.nav-collapse')
+          span(class='icon-bar')
+        a(class='brand', href='/') Collection+JSON Explorer
+        div(class='nav-collapse')
+          ul(class='nav')
+
 block content
-  h1= title
+  div(class='hero-unit')
+    h1= title
+
+    // spacers
+    div(class='row')  
+    div(class='row')  
 
-  form(action='/render', class='well')
-    div(class='row')
-      div(class='span10')
-        input(type='text', name='url', size='100', placeholder='Enter URL to explore...', class='span10')
-    // TODO: Fix
-    div(class='row')
-      div(class='span12')
-         
     div(class='row')
-      div(class='offset4 span2')
-        button(type='submit', class='btn') Explore
-
-  p This is a simple/dumb explorer for the 
-    a(href='http://amundsen.com/media-types/collection/') Collection+JSON Hypermedia
-    | .
-
-  h2 Examples
-
-  p From the 
-    a(href='http://' + host + '/render?url=http%3A%2F%2Fexample-collection-json-db.herokuapp.com') Example Collection+JSON
-    |  application. Drill down in an employee data set.
-
-  p From the specification: 
-    - var examples = [ "minimal", "collection", "item", "queries", "template", "error" ]
-      each example, i in examples
-        - var u='http://' + host + '/render?url=' + encodeURIComponent('http://' + host + '/examples/from-spec/' + example + '.collection+json')
-          if i > 0
-            | , 
-          a(href='#{u}') #{example}
+      div(class='offset3 span6')
+        form(action='/render', class='form-search')
+          input(type='text', name='url', placeholder='Resource to explore', class='span5')
+          button(type='submit', class='btn') Explore
+
+    //
+      p
+        form(action='/render', class='form-search')
+          input(type='text', name='url', placeholder='Enter URL to explore...', class='span6')
+          button(type='submit', class='btn') Explore
+
+  div(class='row')
+    div(class='span6')
+      h2 About
+      p This is an interactive explorer for the Collection+JSON
+        | hypermedia. Give it an URL and it will render is as good as it
+        | can.
+
+      h3 REST/Collection+JSON Resources
+
+      p There's a growing C+J community that's discussing on the 
+        a(href='https://groups.google.com/forum/#!forum/collectionjson') Google Group
+        | .
+
+      p The 
+        a(href='http://amundsen.com/media-types/collection/') formal specification 
+        | with a tutorial and examples.
+
+    div(class='span6')
+      h2 Examples
+
+      p The 
+        a(href='http://employee.herokuapp.com') Employee 
+        | application is a set of resources with employees and
+        | departments. The application was made specifically for this
+        | explorer. 
+        a(href='http://' + host + '/render?url=http%3A%2F%2Femployee.herokuapp.com') Explore now!
+
+      p The specification contains a few example collections too which you can explore: 
+        - var examples = [ "minimal", "collection", "item", "queries", "template", "error" ]
+          each example, i in examples
+            - var u='http://' + host + '/render?url=' + encodeURIComponent('http://' + host + '/examples/from-spec/' + example + '.collection+json')
+              if i > 0
+                | , 
+              a(href='#{u}') #{example}
+              if i == examples.length - 1
+                |.
diff --git a/views/layout.jade b/views/layout.jade
index 05f6e5d..5814794 100644
--- a/views/layout.jade
+++ b/views/layout.jade
@@ -5,26 +5,17 @@ html
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
     link(href='/bootstrap-2.0.4/css/bootstrap.css', rel='stylesheet')
     style
-      /*
-        body {
-          padding-top: 40px;
-        }
-      */
+      .hero-unit {
+        margin-top: 60px;
+      }
       section {
         padding-top: 40px;
       }
+
     link(href='/bootstrap-2.0.4/css/bootstrap-responsive.css', rel='stylesheet')
-    // Le HTML5 shim, for IE6-8 support of HTML5 elements
     // if lt IE 9
       script(src='http://html5shim.googlecode.com/svn/trunk/html5.js')
 
-    // 
-      link(rel='shortcut icon', href='/bootstrap-2.0.4/ico/favicon.ico')
-      link(rel='apple-touch-icon-precomposed', sizes='144x144', href='/bootstrap-2.0.4/ico/apple-touch-icon-144-precomposed.png')
-      link(rel='apple-touch-icon-precomposed', sizes='114x114', href='/bootstrap-2.0.4/ico/apple-touch-icon-114-precomposed.png')
-      link(rel='apple-touch-icon-precomposed', sizes='72x72', href='/bootstrap-2.0.4/ico/apple-touch-icon-72-precomposed.png')
-      link(rel='apple-touch-icon-precomposed', href='/bootstrap-2.0.4/ico/apple-touch-icon-57-precomposed.png')
-
   body
     block navbar
     div(class='container')