New welcome page. Needs all sections, login, and more interactivity. But a great start to a redesign.

assets.yml

@@ -50,7 +50,7 @@ javascripts:
         - media/js/vendor/jquery.tipsy.js
         - media/js/vendor/jquery.chosen.js
         - media/js/vendor/jquery.effects.core.js
-        - media/js/vendor/jquery.effects.slide.js
+        - media/js/vendor/jquery.effects.slideOffscreen.js
         # - media/js/vendor/jquery.linkify.js
         - media/js/vendor/bootstrap.*.js
         - media/js/vendor/audio.js
@@ -66,6 +66,7 @@ javascripts:
         - media/js/newsblur/reader/reader.js
         - media/js/newsblur/reader/*.js
         - media/js/newsblur/static/*.js
+        - media/js/newsblur/welcome/*.js
     mobile:
         - media/js/vendor/jquery-1.7.2.js
         - media/js/mobile/jquery.mobile-1.0b1.js

media/css/welcome.css

@@ -0,0 +1,224 @@
+body.NB-welcome {
+    overflow: auto !important;
+}
+
+.NB-welcome .NB-splash-info.NB-splash-top .NB-splash-title {
+    display: none;
+}
+.NB-welcome .NB-splash-info.NB-splash-top {
+    height: 6px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#17501B), to(#143F14));
+    background: -moz-linear-gradient(center top, #17501B 0%, #143F14 100%); 
+    border-bottom: 1px solid #213021;
+    border-top: none;
+}
+
+.NB-welcome .NB-splash-info.NB-splash-bottom {
+    position: static;
+}
+
+/* ========== */
+/* = Common = */
+/* ========== */
+
+.NB-inner {
+    width: 960px;
+    margin: 0 auto;
+    position: relative;
+    height: 100%;
+}
+.NB-button {
+    border: 1px solid #07360F;
+    font-size: 12px;
+    padding: 4px 12px;
+    text-transform: uppercase;
+    margin: 2px 4px 2px;
+    -moz-box-shadow:2px 2px 0 rgba(35, 35, 35, 0.4);
+    -webkit-box-shadow:2px 2px 0 rgba(35, 35, 35, 0.4);
+    box-shadow:2px 2px 0 rgba(35, 35, 35, 0.4);
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    cursor: pointer;
+    text-decoration: none;
+    color: #404040;
+}
+.NB-button:active {
+    -moz-box-shadow:1px 1px 0 rgba(35, 35, 35, 0.6);
+    -webkit-box-shadow:1px 1px 0 rgba(35, 35, 35, 0.6);
+    box-shadow:1px 1px 0 rgba(35, 35, 35, 0.6);
+}
+
+/* ========== */
+/* = Header = */
+/* ========== */
+
+.NB-welcome-header {
+    background-color: #238232;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#238232), to(#1E6F24));
+    background: -moz-linear-gradient(center top, #238232 0%, #1E6F24 100%);
+    height: 400px;
+    color: white;
+    overflow: hidden;
+    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.3);
+}
+
+.NB-welcome-header .NB-welcome-header-logo {
+    padding: 108px 0 0 0;
+    text-align: center;
+    width: 460px;
+}
+.NB-welcome-header .NB-welcome-header-tagline {
+    margin: 36px 0 0 0;
+    font-size: 22px;
+    text-shadow: 0 1px 0 rgba(35,35,35,0.35);
+    text-align: center;
+    width: 460px;
+}
+.NB-welcome-header .NB-welcome-header-tagline b {
+    padding: 2px 8px;
+    background-color: rgba(205, 205, 205, 0.1);
+    font-weight: normal;
+    border-radius: 4px;
+}
+
+.NB-welcome-header-image {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    -webkit-transform : translate3d(0, 0, 0);
+    transform : translate3d(0, 0, 0);
+}
+.NB-welcome-header-image img.NB-1 {
+    width: 500px;
+    height: 327px;
+    position: absolute;
+    bottom: -20px;
+    right: 0;
+    border-radius: 2px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+.NB-welcome-header-image img.NB-2 {
+    opacity: 0;
+    height: 325px;
+    position: absolute;
+    bottom: -10px;
+    right: 0;
+    border-radius: 2px;
+    margin-right: 100px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+.NB-welcome-header-image img.NB-3 {
+    opacity: 0;
+    height: 300px;
+    position: absolute;
+    bottom: -10px;
+    right: 0;
+    border-radius: 2px;
+    margin-right: 140px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+.NB-welcome-header-captions {
+    text-align: center;
+    margin: 36px auto 0;
+    position: absolute;
+    top: 0;
+    left: 470px;
+    overflow: hidden;
+    text-shadow: 0 1px 0 rgba(35,35,35,0.35);
+    padding-left: 64px;
+    -webkit-transform : translate3d(0, 0, 0);
+    transform : translate3d(0, 0, 0);
+}
+.NB-welcome-header-caption {
+    float: left;
+    color: #FDC85B;
+    cursor: pointer;
+    padding: 0 12px;
+    text-transform: uppercase;
+}
+.NB-welcome-header-caption span {
+    padding: 2px 8px;
+    border-radius: 4px;
+    display: block;
+    -webkit-transition: all 1s ease-in-out;
+    -moz-transition: all 1s ease-in-out;
+    -o-transition: all 1s ease-in-out;
+    -ms-transition: all 1s ease-in-out;
+}
+.NB-welcome-header-caption.NB-active span {
+    color: #FAA518;
+    background-color: rgba(235, 235, 235, 0.1);
+}
+
+.NB-welcome-header-actions {
+    margin: 36px 0 0;
+    line-height: 16px;
+}
+.NB-welcome-header-action {
+    float: left;
+}
+.NB-welcome-header-action-subtext {
+    text-align: center;
+    line-height: 24px;
+    padding: 0 12px;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: #C5EC88;
+    text-shadow: 0 1px 0 rgba(35, 35, 35, 0.4);
+}
+.NB-welcome-header-actions img {
+    vertical-align: top;
+    width: 16px;
+    height: 16px;
+}
+.NB-welcome-header-actions .NB-welcome-header-action-arrow {
+    display: none;
+}
+.NB-welcome-header-actions .NB-active .NB-welcome-header-action-bolt {
+    display: none;
+}
+.NB-welcome-header-actions .NB-active .NB-welcome-header-action-arrow {
+    display: block;
+}
+.NB-welcome-header-actions .NB-button {
+    float: left;
+    font-size: 16px;
+    padding: 6px 10px;
+    margin: 0 24px;
+    text-transform: none;
+    text-shadow: 0 1px 0 rgba(235, 235, 235, 0.4);
+    background-color: #F5FFE2;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5FFE2), to(#E8FACA));
+    background: -moz-linear-gradient(center top, #F5FFE2 0%, #E8FACA 100%);
+}
+.NB-welcome-header-actions .NB-button:hover {
+    background-color: #F4DD43;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4DD43), to(#F1D526));
+    background: -moz-linear-gradient(center top, #F4DD43 0%, #F1D526 100%);
+}
+.NB-welcome-header-actions .NB-button:active {
+    text-shadow: 0 1px 0 rgba(35, 35, 35, 0.4);
+    background-color: #E97326;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E97326), to(#D94B0D));
+    background: -moz-linear-gradient(center top, #E97326 0%, #D94B0D 100%);
+    color: white;
+}
+
+/* ============ */
+/* = Features = */
+/* ============ */
+
+.NB-welcome-features {
+    margin: 36px 0;
+}
+
+/* ============ */
+/* = Activity = */
+/* ============ */
+
+.NB-welcome-activity {
+    overflow: hidden;
+}

media/js/newsblur/reader/reader.js

@@ -2,7 +2,9 @@
 
     NEWSBLUR.Reader = Backbone.Router.extend({
     
-        init: function() {
+        init: function(options) {
+            
+            var defaults = {};
             
             // ===========
             // = Globals =
@@ -11,6 +13,7 @@
             NEWSBLUR.assets = new NEWSBLUR.AssetModel();
             this.model = NEWSBLUR.assets;
             this.story_view = 'page';
+            this.options = _.extend({}, defaults, options);
             this.$s = {
                 $body: $('body'),
                 $feed_lists: $('.NB-feedlists'),
@@ -41,7 +44,8 @@
                 'bouncing_callout': false,
                 'has_unfetched_feeds': false,
                 'count_unreads_after_import_working': false,
-                'import_from_google_reader_working': false
+                'import_from_google_reader_working': false,
+                'sidebar_closed': this.options.hide_sidebar
             };
             this.locks = {};
             this.counts = {
@@ -200,14 +204,15 @@
             this.layout.outerLayout = this.$s.$body.layout({ 
                 closable:               true,
                 zIndex:                 1,
-                fxName:                 "slide",
+                fxName:                 "slideOffscreen",
                 fxSettings:             { duration: 560, easing: "easeInOutQuint" },
                 center__paneSelector:   ".right-pane",
                 west__paneSelector:     ".left-pane",
                 west__size:             this.model.preference('feed_pane_size'),
                 west__minSize:          this.constants.MIN_FEED_LIST_SIZE,
                 west__onresize_end:     $.rescope(this.save_feed_pane_size, this),
-                spacing_open:           4,
+                west__initHidden:       this.options.hide_sidebar,
+                west__spacing_open:     this.options.hide_sidebar ? 1 : 6,
                 resizerDragOpacity:     0.6,
                 resizeWhileDragging:    true,
                 enableCursorHotkey:     false
@@ -220,7 +225,7 @@
             this.layout.leftLayout = $('.left-pane').layout({
                 closable:               false,
                 resizeWhileDragging:    true,
-                fxName:                 "slide",
+                fxName:                 "slideOffscreen",
                 fxSettings:             { duration: 560, easing: "easeInOutQuint" },
                 north__paneSelector:    ".left-north",
                 north__size:            18,
@@ -249,7 +254,7 @@
                 south__spacing_closed:  0,
                 south__closable:        true,
                 south__initClosed:      true,
-                fxName:                 "slide",
+                fxName:                 "slideOffscreen",
                 fxSettings:             { duration: 560, easing: "easeInOutQuint" },
                 enableCursorHotkey:     false
             });
@@ -260,7 +265,7 @@
                 spacing_open:           story_anchor == 'west' ? 4 : 10,
                 resizerDragOpacity:     0.6,
                 enableCursorHotkey:     false,
-                fxName:                 "slide",
+                fxName:                 "slideOffscreen",
                 fxSettings:             { duration: 560, easing: "easeInOutQuint" }
             };
             rightLayoutOptions[story_anchor+'__paneSelector'] = '.right-north';

media/js/newsblur/views/feed_list_view.js

@@ -59,7 +59,9 @@ NEWSBLUR.Views.FeedList = Backbone.View.extend({
         this.$el.html($feeds);
         this.$el.animate({'opacity': 1}, {'duration': 700});
         // this.count_collapsed_unread_stories();
-        this.$s.$feed_link_loader.fadeOut(250);
+        this.$s.$feed_link_loader.fadeOut(250, _.bind(function() {
+            this.$s.$feed_link_loader.css({'display': 'none'});
+        }, this));
 
         if (!this.options.feed_chooser && 
             NEWSBLUR.Globals.is_authenticated && 

media/js/newsblur/welcome/welcome.js

@@ -0,0 +1,42 @@
+NEWSBLUR.Welcome = Backbone.View.extend({
+    
+    el: 'body',
+    
+    rotation: 0,
+    
+    initialize: function() {
+        this.start_rotation();
+    },
+    
+    start_rotation: function() {
+        this.$('.NB-welcome-header-image img').eq(0).load(_.bind(function() {
+            _.delay(_.bind(this.rotate_screenshots, this), 2000);
+        }, this));
+    },
+    
+    rotate_screenshots: function() {
+        var r = this.rotation;
+        var $images = $('.NB-welcome-header-image img');
+        var $captions = $('.NB-welcome-header-caption');
+        var $in_img = $images.eq((r+1) % $images.length);
+        var $out_img = $images.eq(r % $images.length);
+        var $in_caption = $captions.eq((r+1) % $images.length);
+        var $out_caption = $captions.eq(r % $images.length);
+        
+        $out_img.css({zIndex: 0}).animate({
+            bottom: -300,
+            opacity: 0
+        }, {easing: 'easeInOutQuart', queue: false, duration: 1400});
+        $in_img.css({zIndex: 1, bottom: -300}).animate({
+            bottom: 0,
+            opacity: 1
+        }, {easing: 'easeInOutQuart', queue: false, duration: 1400});
+        $out_caption.removeClass('NB-active');
+        $in_caption.addClass('NB-active');
+
+        this.rotation += 1;
+
+        _.delay(_.bind(this.rotate_screenshots, this), 3000);
+    }
+    
+});

media/js/vendor/jquery.effects.slideOffscreen.js

@@ -0,0 +1,102 @@
+/**
+ *	UI Layout Plugin: Slide-Offscreen Animation
+ *
+ *	Prevent panes from being 'hidden' so that an iframes/objects 
+ *	does not reload/refresh when pane 'opens' again.
+ *	This plug-in adds a new animation called "slideOffscreen".
+ *	It is identical to the normal "slide" effect, but avoids hiding the element
+ *
+ *	Requires Layout 1.3.0.RC30.1 or later for Close offscreen
+ *	Requires Layout 1.3.0.RC30.5 or later for Hide, initClosed & initHidden offscreen
+ *
+ *	Version:	1.0 - 2012-04-07
+ *	Author:		Kevin Dalman (kevin.dalman@gmail.com)
+ *	@preserve	jquery.layout.slideOffscreen-1.0.js
+ */
+;(function ($) {
+var _ = $.layout;
+
+// Add a new "slideOffscreen" effect
+if ($.effects) {
+
+	// add an option so initClosed and initHidden will work
+	_.defaults.panes.useOffscreenClose = false; // user must enable when needed
+	/* set the new animation as the default for all panes
+	_.defaults.panes.fxName = "slideOffscreen";
+	*/
+
+	if (_.plugins)
+		_.plugins.effects.slideOffscreen = true;
+
+	// dupe 'slide' effect defaults as new effect defaults
+	_.effects.slideOffscreen = $.extend(true, {}, _.effects.slide);
+
+	// add new effect to jQuery UI
+	$.effects.slideOffscreen = function(o) {
+		return this.queue(function(){
+
+			var fx		= $.effects
+			,	opt		= o.options
+			,	$el		= $(this)
+			,	pane	= $el.data('layoutEdge')
+			,	state	= $el.data('parentLayout').state
+			,	dist	= state[pane].size
+			,	s		= this.style
+			,	props	= ['top','bottom','left','right']
+				// Set options
+			,	mode	= fx.setMode($el, opt.mode || 'show') // Set Mode
+			,	show	= (mode == 'show')
+			,	dir		= opt.direction || 'left' // Default Direction
+			,	ref	 	= (dir == 'up' || dir == 'down') ? 'top' : 'left'
+			,	pos		= (dir == 'up' || dir == 'left')
+			,	offscrn	= _.config.offscreenCSS || {}
+			,	keyLR	= _.config.offscreenReset
+			,	keyTB	= 'offscreenResetTop' // only used internally
+			,	animation = {}
+			;
+			// Animation settings
+			animation[ref]	= (show ? (pos ? '+=' : '-=') : (pos ? '-=' : '+=')) + dist;
+
+			if (show) { // show() animation, so save top/bottom but retain left/right set when 'hidden'
+				$el.data(keyTB, { top: s.top, bottom: s.bottom });
+
+				// set the top or left offset in preparation for animation
+				// Note: ALL animations work by shifting the top or left edges
+				if (pos) { // top (north) or left (west)
+					$el.css(ref, isNaN(dist) ? "-" + dist : -dist); // Shift outside the left/top edge
+				}
+				else { // bottom (south) or right (east) - shift all the way across container
+					if (dir === 'right')
+						$el.css({ left: state.container.offsetWidth, right: 'auto' });
+					else // dir === bottom
+						$el.css({ top: state.container.offsetHeight, bottom: 'auto' });
+				}
+				// restore the left/right setting if is a top/bottom animation
+				if (ref === 'top')
+					$el.css( $el.data( keyLR ) || {} );
+			}
+			else { // hide() animation, so save ALL CSS
+				$el.data(keyTB, { top: s.top, bottom: s.bottom });
+				$el.data(keyLR, { left: s.left, right: s.right });
+			}
+
+			// Animate
+			$el.show().animate(animation, { queue: false, duration: o.duration, easing: opt.easing, complete: function(){
+				// Restore top/bottom
+				if ($el.data( keyTB ))
+					$el.css($el.data( keyTB )).removeData( keyTB );
+				if (show) // Restore left/right too
+					$el.css($el.data( keyLR ) || {}).removeData( keyLR );
+				else // Move the pane off-screen (left: -99999, right: 'auto')
+					$el.css( offscrn );
+
+				if (o.callback) o.callback.apply(this, arguments); // Callback
+				$el.dequeue();
+			}});
+	
+		});
+	};
+
+}
+
+})( jQuery );

templates/base.html

@@ -103,9 +103,11 @@
   <div class="NB-splash-info NB-splash-top">
     <a href="{% url index %}"><img class="NB-splash-title" src="{{ MEDIA_URL }}/img/logo_newsblur_blur.png" /></a>
   </div>
-      
+  
+  {% block content %}{% endblock %}
+
   <div class="NB-splash-info NB-splash-bottom">
-    <ul class="NB-splash-links">
+    <ul class="NB-splash-links NB-inner">
       <li class="NB-splash-link NB-splash-link-logo"><a href="{% url index %}"><img src="{{ MEDIA_URL }}/img/logo_newsblur_blur.png" style="height: 32px; width: 183px;" /></a></li>
       <li class="NB-splash-link NB-splash-link-about"><a href="{% url about %}">About</a></li>
       <li class="NB-splash-link NB-splash-link-faq"><a href="{% url faq %}">FAQ</a></li>
@@ -118,8 +120,6 @@
     </ul>
   </div>
   
-  {% block content %}{% endblock %}
-
   {% block head_js %}
     {% include_javascripts "common" %}
   {% endblock head_js %}

templates/reader/welcome.xhtml

@@ -7,224 +7,138 @@
         $(document).ready(function() {
 
             NEWSBLUR.reader = new NEWSBLUR.Reader();
-            NEWSBLUR.reader.init();
+            NEWSBLUR.reader.init({
+                hide_sidebar: true
+            });
 
+            NEWSBLUR.welcome = new NEWSBLUR.Welcome();
         });
     </script>
-
-    {% if user.is_staff %}
-        <script>
-            $(document).ready(function() {
-              $('#add-feature-button').click(function(e) {
-                e.preventDefault();
-                $('#add-feature-form').fadeIn(500);
-              });
-            });
-        </script>
-    {% endif %}
 {% endblock %}
 
-{% block bodyclass %}NB-body-main{% endblock %}
+{% block bodyclass %}NB-welcome{% endblock %}
 {% block content %}
 
-
-<h1 class="NB-splash-heading">NewsBlur</h1>
-<h2 class="NB-splash-heading">- The best stories from your friends and favorite blogs, all in one place.</h2>
-
-<div id="NB-splash" style="left: {% firstof user_profile.feed_pane_size 240 %}px">
-
-  <div class="NB-modules-center">
-    
-    <div class="NB-module NB-module-logo">
-        <img src="{{ MEDIA_URL }}img/logo_newsblur.png" class="NB-module-logo-image" style="width: 312px; height: 55px;" />
-        <div class="NB-module-logo-tagline">
+<div class="NB-welcome-header">
+    <div class="NB-inner">
+        <div class="NB-welcome-header-logo">
+            <img src="{{ MEDIA_URL }}img/logo_newsblur.png" class="NB-module-logo-image" style="width: 312px; height: 55px;" />
+        </div>
+        <div class="NB-welcome-header-tagline">
             Focus on the best stories from<br><b>your friends</b> and <b>favorite blogs</b>
         </div>
-        <div class="NB-module-logo-elsewhere">
-            FOR WEB, <a href="{% url ios-static %}" class="NB-splash-link">iOS</a>, AND <a href="https://market.android.com/details?id=bitwrit.Blar" class="NB-splash-link">ANDROID</a>
+        <div class="NB-welcome-header-captions">
+            <div class="NB-welcome-header-caption NB-1 NB-active"><span>Web</span></div>
+            <div class="NB-welcome-header-caption NB-2"><span>iPad &amp; iPhone</span></div>
+            <div class="NB-welcome-header-caption NB-3"><span>Android</span></div>
         </div>
-    </div>
-    
-    {% render_features_module %}
-
-    <div class="NB-module NB-module-howitworks" style="display: none">
-        <h5 class="NB-module-header">
-            <div class="NB-module-header-right">
-                <a href="#" class="NB-module-direction NB-module-next-page"></a>
-                <a href="#" class="NB-module-direction NB-module-previous-page NB-disabled"></a>
+        <div class="NB-welcome-header-actions">
+            <div class="NB-welcome-header-action">
+                <div class="NB-welcome-header-action-subtext">First</div>
+                <div class="NB-button NB-button-tryout">
+                    <img src="{{ MEDIA_URL }}img/reader/search_icon2.png" style="width: 16px; height: 16px">
+                    Try out NewsBlur
+                </div>
             </div>
-            <div class="NB-module-header-left">
-                How It Works
+            <div class="NB-welcome-header-action">
+                <div class="NB-welcome-header-action-subtext">Then</div>
+                <div class="NB-button NB-button-tryout">
+                    <img src="{{ MEDIA_URL }}img/reader/32-Power.png" class="NB-welcome-header-action-bolt">
+                    <img src="{{ MEDIA_URL }}img/reader/32-Arrow-Right.png" class="NB-welcome-header-action-arrow">
+                    Sign up or Log in
+                </div>
             </div>
-        </h5>
-
-        <div class="NB-howitworks-page-indicators">
-            <a href="#" class="NB-module-page-indicator NB-active"></a>
-            <a href="#" class="NB-module-page-indicator"></a>
-            <a href="#" class="NB-module-page-indicator"></a>
-            <a href="#" class="NB-module-page-indicator"></a>
-            <a href="#" class="NB-module-page-indicator"></a>
-            <a href="#" class="NB-module-page-indicator"></a>
+        </div>
+        <div class="NB-welcome-header-image">
+            <img src="{{ MEDIA_URL }}img/welcome/header1.jpg" class="NB-1">
+            <img src="{{ MEDIA_URL }}img/welcome/header-ios.png" class="NB-2">
+            <img src="{{ MEDIA_URL }}img/welcome/header-android.png" class="NB-3">
         </div>
 
-        <div class="NB-howitworks-page NB-active">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_original.png" />
-            </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        Read the original site.
-                    </td>
-                </tr>
-            </table>
-        </div>
+        <div class="NB-account">
+            <div class="NB-module NB-module-login">
+                <h5>
+                    <div class="NB-module-header-login">Log in</div>
+                    <div class="NB-module-header-signup">Sign up</div>
+                </h5>
+                <div class="NB-login">
+                    {% if login_form.errors %}
+                        {% for field, error in login_form.errors.items %}
+                            {{ error|safe }}
+                        {% endfor %}
+                    {% endif %}
+                    <form method="post" action="{% url login %}">
+                        <div>
+                            {{ login_form.username.label_tag }}
+                            {{ login_form.username }}
+                        </div>
+                        <div>
+                            <div class="NB-signup-optional">
+                                {% if login_form.errors %}
+                                    {% for field, error in login_form.errors.items %}
+                                        <a href="mailto:password@newsblur.com?subject=Forgot%20Password%20on%20NewsBlur&amp;body=Hello!%20My%20username%20is:%20" class="NB-splash-link">Forgot?</a>
+                                    {% endfor %}
+                                {% else %}
+                                    Optional
+                                {% endif %}
+                            </div>
+                            {{ login_form.password.label_tag }}
+                            {{ login_form.password }}
+                        </div>
+                        <input name="submit" type="submit" value="log in" />
+                        <input type="hidden" name="next" value="/" />
+                    </form>
+                </div>
+                
+                <div class="NB-signup">
+                    <form method="post" action="{% url signup %}">
+                        <div>
+                            {{ signup_form.username.label_tag }}
+                            {{ signup_form.username }}
+                        </div>
+                        <div class="NB-signup-hidden">
+                            <div class="NB-signup-optional">Optional</div>
+                            {{ signup_form.password.label_tag }}
+                            {{ signup_form.password }}
+                        </div>
+                        <div class="NB-signup-hidden">
+                            {{ signup_form.email.label_tag }}
+                            {{ signup_form.email }}
+                        </div>
 
-        <div class="NB-howitworks-page">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_intelligence_like.png" />
+                        <input name="submit" type="submit" value="create account" />
+                        <input type="hidden" name="next" value="/" />
+                    </form>
+                    {% if signup_form.errors %}
+                        {% for field, error in signup_form.errors.items %}
+                            {{ error|safe }}
+                        {% endfor %}
+                    {% endif %}
+                    <div class="NB-signup-orline {% if signup_form.errors %}NB-signup-orline-reduced{% endif %}">&mdash; <span class="NB-signup-orline-or">or</span> &mdash;</div>
+                    <a href="{% url google-reader-authorize %}" class="NB-splash-link NB-signup-google">Import from <img src="{{ MEDIA_URL }}img/reader/google-reader-logo.png" width="112" height="24" /></a>
+                </div>
             </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        Easily train NewsBlur to highlight stories you like.
-                    </td>
-                </tr>
-            </table>
-        </div>
-
-        <div class="NB-howitworks-page">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_intelligence_dislike.png" />
-            </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        NewsBlur will filter out stories which you don't like.
-                    </td>
-                </tr>
-            </table>
-        </div>
-
-        <div class="NB-howitworks-page">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_import.png" />
-            </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        Quickly import your sites from Google Reader.
-                    </td>
-                </tr>
-            </table>
-        </div>
-
-        <div class="NB-howitworks-page">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_iphone.png" />
-            </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        Use the free iPhone app.
-                    </td>
-                </tr>
-            </table>
-        </div>
-
-        <div class="NB-howitworks-page">
-            <div class="NB-howitworks-page-image">
-                <img src="{{ MEDIA_URL }}img/reader/howitworks_github.png" />
-            </div>
-            <table class="NB-howitworks-page-description">
-                <tr>
-                    <td>
-                        Open source, regularly improved, attention to detail.
-                    </td>
-                </tr>
-            </table>
         </div>
 
     </div>
+</div>
 
-  </div>
+<div class="NB-welcome-features">
+    <div class="NB-inner">
+        
+    </div>    
+</div>
 
-  <div class="NB-account">
-    
-      <div class="NB-module NB-module-login">
-        <h5>
-          <div class="NB-module-header-login">Login</div>
-          <div class="NB-module-header-signup">Signup</div>
-        </h5>
 
-        <div class="NB-login">
-          {% if login_form.errors %}
-            {% for field, error in login_form.errors.items %}
-              {{ error|safe }}
-            {% endfor %}
-          {% endif %}
-      
-          <form method="post" action="{% url login %}">
-            <div>
-              {{ login_form.username.label_tag }}
-              {{ login_form.username }}
-            </div>
-            <div>
-              <div class="NB-signup-optional">
-                {% if login_form.errors %}
-                  {% for field, error in login_form.errors.items %}
-                    <a href="mailto:password@newsblur.com?subject=Forgot%20Password%20on%20NewsBlur&amp;body=Hello!%20My%20username%20is:%20" class="NB-splash-link">Forgot?</a>
-                  {% endfor %}
-                {% else %}
-                  Optional
-                {% endif %}
-              </div>
-              {{ login_form.password.label_tag }}
-              {{ login_form.password }}
-            </div>
+<div class="NB-welcome-activity">
+    <div class="NB-inner">
+        {% render_features_module %}
+        {% render_statistics_graphs statistics %}
+    </div>
+</div>
 
-            <input name="submit" type="submit" value="login" />
-            <input type="hidden" name="next" value="/" />
-          </form>
-        </div>
-
-        <div class="NB-signup">
-          <form method="post" action="{% url signup %}">
-            <div>
-              {{ signup_form.username.label_tag }}
-              {{ signup_form.username }}
-            </div>
-            <div class="NB-signup-hidden">
-              <div class="NB-signup-optional">Optional</div>
-              {{ signup_form.password.label_tag }}
-              {{ signup_form.password }}
-            </div>
-            <div class="NB-signup-hidden">
-              {{ signup_form.email.label_tag }}
-              {{ signup_form.email }}
-            </div>
-
-            <input name="submit" type="submit" value="create account" />
-            <input type="hidden" name="next" value="/" />
-          </form>
-          
-          {% if signup_form.errors %}
-            {% for field, error in signup_form.errors.items %}
-              {{ error|safe }}
-            {% endfor %}
-          {% endif %}
-      
-          <div class="NB-signup-orline {% if signup_form.errors %}NB-signup-orline-reduced{% endif %}">&mdash; <span class="NB-signup-orline-or">or</span> &mdash;</div>
-          <a href="{% url google-reader-authorize %}" class="NB-splash-link NB-signup-google">Import from <img src="{{ MEDIA_URL }}img/reader/google-reader-logo.png" width="112" height="24" /></a>
-        </div>
-      </div>
-
-    {% render_statistics_graphs statistics %}
-
-  </div>
-  
 </div>
 
 {% render_feeds_skeleton %}
 
-{% endblock %}
+{% endblock %}