Improve CSS and layout of feature list on new subscription page

services/web/app/views/subscriptions/new.jade

@@ -13,7 +13,40 @@ block content
 	.content.content-alt
 		.container(ng-controller="NewSubscriptionController" ng-cloak)
 			.row.card-group
-				.col-md-6.col-md-offset-1
+						
+				.col-lg-3
+					.card.card-first
+						.paymentPageFeatures
+							.page-header
+								h3 #{translate("features")}
+							h3 #{translate("unlimited_projects")}
+							p #{translate("create_unlimited_projects")}
+						
+							h3
+								if plan.features.collaborators == -1
+									- var collaboratorCount = 'Unlimited'
+								else
+									- var collaboratorCount = plan.features.collaborators
+								| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
+							p #{translate("work_on_single_version")}. #{translate("view_collab_edits")} in real time.
+							
+							h3 #{translate("full_doc_history")}
+							p #{translate("see_what_has_been")} 
+								span.added #{translate("added")} 
+								| #{translate("and")} 
+								span.removed #{translate("removed")}. 
+								| #{translate("restore_to_any_older_version")}.
+							
+							h3 #{translate("sync_to_dropbox")}
+							p
+								| #{translate("acces_work_from_anywhere")}. 
+								| #{translate("work_offline_and_sync_with_dropbox")}.
+								
+							hr
+							
+							p.small.text-center We're confident that you'll love ShareLaTeX, but if not you can cancel anytime. We'll give you your money back, no questions asked, if you let us know within 30 days.
+
+				.col-lg-6
 					.card.card-highlighted
 						.page-header
 							span.dropdown.changePlanButton.pull-right(ng-cloak)
@@ -30,32 +63,7 @@ block content
 										) {{currency}} ({{value['symbol']}})
 							h1 #{translate("new_subscription")}
 						
-						#subscribeForm(style="min-height: 400px;") #{translate("loading_billing_form")}...
-						
-				.col-md-4
-					.card.card-last
-						.paymentPageFeatures
-							ul.list-unstyled
-								li 
-									if plan.features.collaborators == -1
-										- var collaboratorCount = 'Unlimited'
-									else
-										- var collaboratorCount = plan.features.collaborators
-									i.fa.fa-check
-									|  #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
-								li 
-									i.fa.fa-check
-									|  #{translate("full_doc_history")}
-								li 
-									i.fa.fa-check
-									|  #{translate("sync_to_dropbox")}
-								li 
-									i.fa.fa-check
-									|  Cancel Anytime
-								li 
-									i.fa.fa-check
-								|  100% Money Back Guarantee
-
+						#subscribeForm(style="min-height: 700px;") #{translate("loading_billing_form")}...
 
 	script(type="text/javascript").
 		ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")

services/web/app/views/subscriptions/plans.jade

@@ -49,118 +49,120 @@ block content
 									) {{currency}} ({{value['symbol']}})
 
 				.row(ng-cloak)
-					.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
-						.col-md-3.col-md-offset-1
-							.card.card-first
-								.card-header
-									h2 #{translate("personal")} 
-								.circle #{translate("free")} 
-								ul.list-unstyled
-									li #{translate("one_collaborator")}
-									li  
-									li  
-									li
-										br
-										a.btn.btn-info(href="/register") #{translate("sign_up_now")}
-						.col-md-4
-							.card.card-highlighted
-								.card-header
-									h2 #{translate("collaborator")}
-								.circle
-									span(ng-if="ui.view == 'monthly'")
-										| {{plans[currencyCode]['collaborator']['monthly']}}
-										span.small /mo
-									span(ng-if="ui.view == 'annual'")
-										| {{plans[currencyCode]['collaborator']['annual']}}
-										span.small /yr
-								ul.list-unstyled
-									li 
-										strong #{translate("collabs_per_proj", {collabcount:10})}
-									li #{translate("full_doc_history")}
-									li #{translate("sync_to_dropbox")}
-									li
-										br
-										a.btn.btn-info(
+					.col-md-10.col-md-offset-1
+						.row
+							.card-group.text-centered(ng-if="ui.view == 'monthly' || ui.view == 'annual'")
+								.col-md-4
+									.card.card-first
+										.card-header
+											h2 #{translate("personal")} 
+										.circle #{translate("free")} 
+										ul.list-unstyled
+											li #{translate("one_collaborator")}
+											li  
+											li  
+											li
+												br
+												a.btn.btn-info(href="/register") #{translate("sign_up_now")}
+								.col-md-4
+									.card.card-highlighted
+										.card-header
+											h2 #{translate("collaborator")}
+										.circle
+											span(ng-if="ui.view == 'monthly'")
+												| {{plans[currencyCode]['collaborator']['monthly']}}
+												span.small /mo
+											span(ng-if="ui.view == 'annual'")
+												| {{plans[currencyCode]['collaborator']['annual']}}
+												span.small /yr
+										ul.list-unstyled
+											li 
+												strong #{translate("collabs_per_proj", {collabcount:10})}
+											li #{translate("full_doc_history")}
+											li #{translate("sync_to_dropbox")}
+											li
+												br
+												a.btn.btn-info(
 
-											ng-href="#{baseUrl}/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('collaborator')"
-										)
-											span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
-											span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
-						.col-md-3
-							.card.card-last
-								.card-header
-									h2 #{translate("professional")}
-								.circle 
-									span(ng-if="ui.view == 'monthly'")
-										| {{plans[currencyCode]['professional']['monthly']}}
-										span.small /mo
-									span(ng-if="ui.view == 'annual'")
-										| {{plans[currencyCode]['professional']['annual']}}
-										span.small /yr
-								ul.list-unstyled
-									li
-										strong #{translate("unlimited_collabs")}
-									li #{translate("full_doc_history")}
-									li #{translate("sync_to_dropbox")}
-									li
-										br
-										a.btn.btn-info(
-											ng-href="#{baseUrl}/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('professional')"
-										)
-											span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
-											span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
+													ng-href="#{baseUrl}/user/subscription/new?planCode=collaborator{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('collaborator')"
+												)
+													span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
+													span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
+								.col-md-4
+									.card.card-last
+										.card-header
+											h2 #{translate("professional")}
+										.circle 
+											span(ng-if="ui.view == 'monthly'")
+												| {{plans[currencyCode]['professional']['monthly']}}
+												span.small /mo
+											span(ng-if="ui.view == 'annual'")
+												| {{plans[currencyCode]['professional']['annual']}}
+												span.small /yr
+										ul.list-unstyled
+											li
+												strong #{translate("unlimited_collabs")}
+											li #{translate("full_doc_history")}
+											li #{translate("sync_to_dropbox")}
+											li
+												br
+												a.btn.btn-info(
+													ng-href="#{baseUrl}/user/subscription/new?planCode=professional{{ ui.view == 'annual' && '-annual' || planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('professional')"
+												)
+													span(ng-show="ui.view != 'annual'") #{translate("start_free_trial")}
+													span(ng-show="ui.view == 'annual'") #{translate("buy_now")}
 
-					.card-group.text-centered(ng-if="ui.view == 'student'")
-						.col-md-3.col-md-offset-1
-							.card.card-first
-								.card-header
-									h2 #{translate("personal")}
-								.circle #{translate("free")}
-								ul.list-unstyled
-									li #{translate("one_collaborator")}
-									li  
-									li  
-									li
-										br
-										a.btn.btn-info(href="/register") #{translate("sign_up_now")}
-						
-						.col-md-4
-							.card.card-highlighted
-								.card-header
-									h2 #{translate("student")}
-								.circle
-									span
-										| {{plans[currencyCode]['student']['monthly']}}
-										span.small /mo
-								ul.list-unstyled
-									li
-										strong #{translate("collabs_per_proj", {collabcount:6})}
-									li #{translate("full_doc_history")}
-									li #{translate("sync_to_dropbox")}
-									li
-										br
-										a.btn.btn-info(
-											ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
-										) #{translate("start_free_trial")}
-						
-						.col-md-3
-							.card.card-last
-								.card-header
-									h2 #{translate("student")} (#{translate("annual")})
-								.circle
-									span
-										| {{plans[currencyCode]['student']['annual']}}
-										span.small /yr
-								ul.list-unstyled
-									li
-										strong #{translate("collabs_per_proj", {collabcount:6})}
-									li #{translate("full_doc_history")}
-									li #{translate("sync_to_dropbox")}
-									li
-										br
-										a.btn.btn-info(
-											ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
-										) #{translate("buy_now")}
+							.card-group.text-centered(ng-if="ui.view == 'student'")
+								.col-md-4
+									.card.card-first
+										.card-header
+											h2 #{translate("personal")}
+										.circle #{translate("free")}
+										ul.list-unstyled
+											li #{translate("one_collaborator")}
+											li  
+											li  
+											li
+												br
+												a.btn.btn-info(href="/register") #{translate("sign_up_now")}
+								
+								.col-md-4
+									.card.card-highlighted
+										.card-header
+											h2 #{translate("student")}
+										.circle
+											span
+												| {{plans[currencyCode]['student']['monthly']}}
+												span.small /mo
+										ul.list-unstyled
+											li
+												strong #{translate("collabs_per_proj", {collabcount:6})}
+											li #{translate("full_doc_history")}
+											li #{translate("sync_to_dropbox")}
+											li
+												br
+												a.btn.btn-info(
+													ng-href="#{baseUrl}/user/subscription/new?planCode=student{{planQueryString}}&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
+												) #{translate("start_free_trial")}
+								
+								.col-md-4
+									.card.card-last
+										.card-header
+											h2 #{translate("student")} (#{translate("annual")})
+										.circle
+											span
+												| {{plans[currencyCode]['student']['annual']}}
+												span.small /yr
+										ul.list-unstyled
+											li
+												strong #{translate("collabs_per_proj", {collabcount:6})}
+											li #{translate("full_doc_history")}
+											li #{translate("sync_to_dropbox")}
+											li
+												br
+												a.btn.btn-info(
+													ng-href="#{baseUrl}/user/subscription/new?planCode=student-annual&currency={{currencyCode}}", ng-click="signUpNowClicked('student')"
+												) #{translate("buy_now")}
 
 				.row.row-spaced(ng-cloak)
 					p.text-centered #{translate("choose_plan_works_for_you", {len:14})}

services/web/public/stylesheets/app/plans.less

@@ -73,10 +73,21 @@
 }
 
 .paymentPageFeatures {
-
-	padding-top:200px;
-	li {
-		font-size:24px;
+	h1, h2, h3 {
+		color: @gray-dark;
+	}
+	h3 {
+		font-size: 18px;
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+	p {
+		font-size: 14px;
+		color: @gray;
+	}
+	.small {
+		font-size: 12px;
 	}
 }