better page explaining cubbi.es and why we're promoting it on diaspora

app/views/aspects/index.html.haml

@@ -35,7 +35,7 @@
         Connect to Cubbi.es
     .content
       Cubbi.es is the first Diaspora application under development.
-      = link_to "Follow the instructions to get started", token_path
+      = link_to "Learn more", token_path
 
   - if @invites > 0
     .section

app/views/tokens/show.html.haml

@@ -1,39 +1,86 @@
-%h3
-  This is a temporary hack while we develop a more general application framework.
-%br
-%br
-%br
-%br
+- content_for :page_title do
+  = t('.connect_to_cubbies')
 
-.span-11.append-1
-  %h3
-    Your Diaspora Token:
-  - if current_user.authentication_token
-    %h1
-      = current_user.authentication_token
-  - else
-    %h4 No authentication token set.
-
-  = form_tag(token_path) do
-    =submit_tag "Generate new authentication token"
-
-.span-11.last
-  %h3
-    Your Diaspora Handle:
+.span-24.last{:style => "position:relative;"}
+  .right{:style => 'z-index:10;'}
+    = link_to t('.sign_up_today'), 'http://cubbi.es', :class => "button sign_up"
   %h1
-    = current_user.diaspora_handle
+    = t('.connect_to_cubbies')
+%h3
+  = t('.what_is_cubbies')
+  %br
+  = t('.love_to_try')
+  
+%hr
+
+.span-24{:style => "text-align:center;"}
+  = image_tag '/images/cubbies_screenshot.png', :width => 600, :height => 452
+
+.span-18.prepend-3.append-3.last{:style => "text-align:center;"}
+  %p.subtle
+    != t('.screenshot_explanation', :link1 => link_to(t('.typical_userpage'), "http://cubbi.es/daniel"), :link2 => link_to(t('.daniels_account'), "https://joindiaspora.com/people/29"))
+%hr
+
+/%p.subtle
+/  Cubbi.es allows you to collect images from all across the internet and keep them in one place (your cubby) in a simple and intuative way.  Hooking up your Diaspora account with Cubbi.es means the images you collect will automatically be shared on Diaspora.*
+
+%br
+.span-24.last
+  %h2
+    = t('.making_the_connection')
+  %br
+  %br
+
+.span-20.append-2.prepend-2.last
+  .span-8
+    = image_tag '/images/cubbies_settings.png', :width => 238, :height => 248, :class => "cubbies-settings-image"
+    %div.subtle
+      != t('.via', :link => link_to('http://cubbi.es/users/edit', 'http://cubbi.es/users/edit'))
+
+  .span-12.last
+    %h3
+      = t('.connecting_is_simple')
+
+    %p.subtle
+      = t('.were_working_hard')
+
+    %br
+
+    .span-11.cubbies-credentials
+      .span-4
+        %h5
+          = t('.your_diaspora_handle')
+      .span-6
+        %h2
+          = current_user.diaspora_handle
+      .span-4
+        %h5
+          = t('.your_diaspora_token')
+
+      .span-6
+        - if current_user.authentication_token
+          %h2
+            = current_user.authentication_token
+        - else
+          = form_tag(token_path) do
+            = submit_tag t('.generate_a_token')
+
+    %br
+    %br
+    %br
 
 .clearfix
 
 %br
 %br
-%br
-%br
-%br
-%div
-  %h4
-    Click settings on
-    = link_to "Cubbi.es", 'http://cubbi.es'
-    to share your internet folder with the internet!
-  %h5
-    Make sure to fill out both these fields to properly connect your account!!
+%hr
+.span-20.append-2.prepend-2.last{:style => "text-align:center;"}
+  %p.subtle
+    * Using Cubbi.es requires the
+    %strong
+      Google Chrome
+    browser for the time being.
+    %strong
+      Adding to your cubby is exclusive to a Chrome extension.
+    If you are a deveolper, we would strongly support you in creating a FF addon and/or a js bookmarklet!
+

config/locales/diaspora/en.yml

@@ -611,6 +611,23 @@ en:
       nobody_talking: "Nobody is talking about %{tag} yet."
       people_tagged_with: "People tagged with %{tag}"
 
+  tokens:
+    show:
+      connect_to_cubbies: "Connect to Cubbi.es"
+      what_is_cubbies: "Cubbi.es is the world's first Diaspora application.  It's also the best way to collect photos online."
+      love_to_try: "We'd love for you to try it out."
+      sign_up_today: "Sign up today!"
+      screenshot_explanation: "%{link1}.  This particular cubby is linked to %{link2}."
+      typical_userpage: "A typical cubbi.es userpage"
+      daniels_account: "Daniel's Diaspora account"
+      making_the_connection: "Making the Connection"
+      connecting_is_simple: "Connecting your Diaspora account is as simple as filling out two fields on your Cubbi.es account page."
+      were_working_hard: "We're working hard on delivering easy connectivity between Diaspora pods and applications.  In the meantime, connecting you Diaspora account with Cubbi.es means copying and pasting two fields."
+      your_diaspora_handle: "Your Diaspora Handle:"
+      your_diaspora_token: "Your Diaspora Token:"
+      generate_a_token: "Generate a token"
+      via: "(via %{link})"
+
   users:
     edit:
       export_data: "Export Data"

public/stylesheets/sass/application.sass

@@ -28,11 +28,20 @@ h1, h2, h3, h4, h5
   :font
     :weight bold
     
+h1, h2, h3
+  :letter-spacing -1px
+
 h4
   :margin
     :bottom 5px
 
-ol, ul, li
+h1
+  :color #111
+
+h3
+  :color #777
+
+ul > li
   :list-style none
 
 form
@@ -2856,3 +2865,35 @@ h1.tag
       :height 36px
     :margin
       :bottom 4px
+
+.subtle
+  :color #888
+  :font
+    :style italic
+
+.cubbies_steps
+  li
+    :margin
+      :bottom 12px
+    :vertical-align top
+
+.cubbies-credentials
+  :background
+    :color #eee
+  :padding 15px
+
+.cubbies-settings-image
+  @include box-shadow(3px, 3px, 15px, #333)
+  :margin
+    :bottom 5px
+
+.button.sign_up
+  @include linear-gradient(#D9FFA9,#B9E68A)
+  :text-shadow none
+  :color #333
+
+  &:hover
+    @include linear-gradient(darken(#D9FFA9,10%),darken(#B9E68A,10%))
+
+  &:active
+    @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))