More work on front page

lib/a_b_front_end/view/front.haml

@@ -44,6 +44,7 @@
                 });
 
               });
+        #code_note Feel free to use Ruby and Javascript together or separately
   .clear
   .one-line-code-example
     Randomly select a variant to
@@ -74,12 +75,44 @@
         %a{ :href => '#' } Javascript
   #web_interface
     .span-12
-      .space-right
-        .sub-box
+      %img{ :src => '/image/web_interface.png' }
     .span-12.last
       .space-left
         %strong Control panel
         %ul
           %li Define sites and environments
           %li Create categories, tests, and variants
-          %li Review test results
+          %li Review test results
+  .clear
+  #features
+    .span-12
+      #features_1
+        .span-6
+          .header Scalable
+          Battle-hardened on a Quantcast "Top 125" site serving 15 million pageviews per day.
+        .span-6.last
+          .header Easy Setup
+          Record test data locally and see it on the control panel within five minutes of signing up.
+      .clear
+      #features_2
+        .span-6
+          .header Open Source
+          Complete source code transparency. Dependable results and rapid feature development.
+        .span-6.last
+          .header Tiny Footprint
+          No databases to set up. Negligible performance impact. A worry-free addition to your app.
+    .span-12.last
+      .space-left
+        .highlight-box
+          .header Get Started
+          %form
+            .span-4 Email
+            .span-7.last
+              %input{ :type => 'text' }
+            .span-4 Password
+            .span-7.last
+              %input{ :type => 'password' }
+            .span-4 Confirm Password
+            .span-7.last
+              %input{ :type => 'password' }
+            .clear

public/css/front.css

@@ -30,6 +30,11 @@
 	margin-top: -13px;
 }
 
+#front #code_note {
+	color: #aaa;
+	margin-top: 5px;
+}
+
 #front pre {
 	margin: 0.2em 0 0;
 	padding: 6px 10px 10px;
@@ -57,19 +62,39 @@
 }
 
 #front #web_interface {
-	font-size: 1.438em;
-	line-height: 2.65em;
 	margin-top: 50px;
 }
 
-#front #web_interface .sub-box {
-	background-color: #fff !important;
-	background-image: url('/image/web_interface.png');
-	background-position: 3px 3px;
-	background-repeat: no-repeat;
-	height: 245px;
+#front #web_interface .space-left {
+	font-size: 1.438em;
+	line-height: 2.9em;
+	margin-top: -25px;
 }
 
 #front #web_interface ul {
+	margin-bottom: 0;
 	padding-left: 35px;
+}
+
+#front #features {
+	margin-top: 50px;
+}
+
+#front #features_2 {
+	margin-top: 25px;
+}
+
+#front #features .highlight-box {
+	margin-top: -8px;
+	padding: 5px 8px;
+}
+
+#front #features form {
+	margin: 15px 0 15px 15px;
+}
+
+#front #features input {
+	font-size: inherit;
+	margin: 0 0 15px;
+	width: 90%;
 }