the landing page.

app/assets/stylesheets/new-templates.css.scss

@@ -25,6 +25,7 @@
 /* login */
 @import 'new_styles/login';
 @import 'new_styles/registration';
+@import 'new_styles/landing';
 
 @import 'new_styles/forms';
 

app/assets/stylesheets/new_styles/_landing.scss

@@ -0,0 +1,223 @@
+/* animations */
+@-webkit-keyframes fly-in {
+	0%   { @include opacity(0); margin-top : -600px; }
+	100% { @include opacity(1); margin-top : auto; }
+}
+@-moz-keyframes fly-in {
+	0%   { @include opacity(0); margin-top : -600px; }
+	100% { @include opacity(1); margin-top : auto; }
+}
+@-ms-keyframes fly-in {
+	0%   { @include opacity(0); margin-top : -600px; }
+	100% { @include opacity(1); margin-top : auto; }
+}
+
+@-webkit-keyframes fly-out {
+	0%   { @include opacity(1); margin-top : auto; }
+    50% { @include opacity(0); }
+	100% { @include opacity(0); margin-top : 500px; }
+}
+@-moz-keyframes fly-out {
+	0%   { @include opacity(1); margin-top : auto; }
+	50% { @include opacity(0); }
+	100% { @include opacity(0); margin-top : 500px; }
+}
+@-ms-keyframes fly-out {
+	0%   { @include opacity(1); margin-top : auto; }
+	50% { @include opacity(0); }
+	100% { @include opacity(0); margin-top : 500px; }
+}
+
+/* le declarations */
+#landing {
+  position : absolute;
+  min-height : 100%;
+  width : 100%;
+  top : 0;
+  left : 0;
+
+  color : #fff;
+
+  background : {
+    color : #2b2b2b;
+    image : url('/landing/background.jpg');
+    size : cover;
+    position : center;
+  }
+
+  #banner {
+    @include box-shadow(0, 2px, 40px, rgba(0,0,0,0.8));
+
+    position : relative;
+    z-index : 8;
+
+    text-align : center;
+    font-family : Roboto-Light;
+    padding : 50px 0;
+    margin-bottom : 30px;
+    background-color : rgba(0,0,0,0.6);
+
+    h1, h3 { font-weight : 200; }
+
+    h1 {
+      font-size : 80px;
+      line-height : 80px;
+    }
+
+    h3 {
+      font-size : 24px;
+      line-height : 24px;
+      color : rgb(42,156,235);
+    }
+
+    #controls,
+    .fb-like {
+      z-index : 10;
+      position : absolute;
+      top : 10px;
+    }
+
+    .fb-like {
+      left : 40px;
+    }
+
+    #controls {
+      right : 10px;
+
+      a:hover {
+        text-decoration : none;
+      }
+
+      .label {
+        @include transition(background-color);
+        padding : 5px 4px;
+        padding-bottom : 4px;
+        margin-left : 8px;
+      }
+
+
+      .twitter-bird,
+      .github-octocat {
+        height : 20px;
+        width : 20px;
+        margin-top : -5px;
+        margin-right : -2px;
+      }
+    }
+  }
+
+  #screens {
+    /* hardware acceleration */
+    -webkit-transform : translateZ(0);
+       -moz-transform : translateZ(0);
+
+    text-align : center;
+
+    #s_container {
+      display : inline-block;
+      height : 417px;
+      width : 516px;
+
+      img {
+        position : absolute;
+        z-index : 1;
+
+        height : 417px;
+        width : 516px;
+
+        &:nth-child(1) {
+          -webkit-animation : fly-in 1.2s;
+        }
+
+        &:nth-child(2) {
+          -webkit-animation : fly-in 1s;
+        }
+
+        &:nth-child(3) {
+          -webkit-animation : fly-in 0.8s;
+        }
+
+        &:nth-child(4) {
+          -webkit-animation : fly-in 0.6s;
+        }
+      }
+
+      &.outtatime {
+        img {
+          &:nth-child(1) {
+            -webkit-animation : fly-out 1.2s;
+          }
+
+          &:nth-child(2) {
+            -webkit-animation : fly-out 1s;
+          }
+
+          &:nth-child(3) {
+            -webkit-animation : fly-out 0.8s;
+          }
+
+          &:nth-child(4) {
+            -webkit-animation : fly-out 0.6s;
+          }
+        }
+      }
+    }
+  }
+
+  #sign_up {
+    position : relative;
+    z-index : 20;
+
+    padding-top : 100px;
+    color : rgb(255, 77, 54);
+
+    h4 {
+      font-size : 20px;
+      line-height : 24px;
+    }
+
+    h2 {
+      font-family : Roboto-Bold;
+      font-size : 40px;
+      line-height : 40px;
+    }
+
+    form {
+      label.control-label { width : 50px !important; }
+      .controls { margin-left : 70px; }
+
+      input[type='submit'] {
+        @include transition(background);
+        @include box-shadow(0,0,0,0);
+
+        background : rgb(255, 77, 54);
+        color : #fff;
+        text-shadow : none;
+        border : 1px solid #000;
+
+        &:hover {
+          background : desaturate(rgb(255, 77, 54), 15%);
+        }
+
+        &:active {
+          @include box-shadow(0,0,0,0);
+          background : darken(rgb(255, 77, 54), 2%);
+        }
+      }
+    }
+  }
+
+  #invites {
+    margin : 20px 0;
+  }
+
+  #footer {
+    position : absolute;
+    bottom : 0;
+    left : 0;
+    width : 100%;
+    padding : 10px 0;
+    color : #333;
+    text-align : center;
+  }
+}

config/locales/diaspora/en.yml

@@ -326,21 +326,6 @@ en:
       birthday: "%B %d"
       birthday_with_year: "%B %d %Y"
 
-  home:
-    show:
-      share_what_you_want: "Share what you want, with whom you want."
-      tagline_first_half: "Share what you want,"
-      tagline_second_half: "with whom you want."
-      already_account: "already have an account?"
-      login_here: "log in here"
-      choice: "Choice"
-      choice_explanation: "Diaspora lets you sort your connections into groups called aspects. Unique to Diaspora, aspects ensure that your photos, stories and jokes are shared only with the people you intend."
-      ownership: "Ownership"
-      ownership_explanation: "You own your pictures, and you shouldn’t have to give that up just to share them. You maintain ownership of everything you share on Diaspora, giving you full control over how it's distributed."
-      simplicity: "Simplicity"
-      simplicity_explanation: "Diaspora makes sharing clean and easy – and this goes for privacy too. Inherently private, Diaspora doesn’t make you wade through pages of settings and options just to keep your profile secure."
-      learn_about_host: "Learn about how to host your own Diaspora server."
-
   invitation_codes:
     excited: "%{name} is excited to see you here."
   invitations: