sub rip

4 files changed, 190 insertions, 58 deletions

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index f4182d1..4bfa363 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -922,75 +922,120 @@ iframe.embed {
   width: 76vw;
   margin: 2vw 10vw;
 }
-.planbox {
-  padding: 2vw;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 25px;
-  font-size: 15px;
-  line-height: 23px;
-  text-align: center;
-}
-.planbox h3 {
+
+ul#plans {
+  margin: 0 auto;
   text-align: center;
-  margin-bottom: 10px;
-}
-.about_plan ul {
-  margin-bottom: 60px;
+  font-size: 14px;
 }
-.planbox li {
-  list-style-type: none;
-  margin-bottom: 0;
-  font-size: 1.3vw;
-  padding: 0 1vw;
+
+ul#plans>li {
+  display: inline-block;
+  width: 300px;
+  vertical-align: top;
+  margin: 0 25px 25px 0;
+  position: relative;
 }
-.paidPlan .planbox li {
-  padding: 0 5.6vw;
+
+ul#plans>li.most-popular:before {
+  content: 'Most Popular';
+  display: block;
+  background: #F17E6F;
+  color: white;
+  font-size: 1em;
+  font-weight: 500;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  width: 100%;
+  position: absolute;
+  top: -31px;
 }
-.about_custom.planbox li {
-	padding: 10px;
-	font-size: 17px;
+
+ul#plans .top {
+  background: #3A3A3A;
+  color: white;
+  padding: 30px 0;
+  height: 266px;
 }
-.planbox.miscbox {
-  border: 0;
-  background: #f8f8f8;
+
+ul#plans h2 {
+  padding: 0;
+  font-size: 1.25em;
+  margin-bottom: 1.75em;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-weight: 500;
 }
-.about_custom a {
-  border-bottom: 1px solid;
+
+ul#plans h3 {
+  margin: 0 0 20px;
+  font-weight: 200;
 }
 
-/* Billing / Subscription Settings */
-.planList {
-	position: absolute;
-	left: 50%;
-	transform: translateX(-48%);
+ul#plans h3 span.dollar {
+  font-size: 1.25em;
+  vertical-align: top;
+  position: relative;
+  top: -14px;
 }
-.planList .about_custom {
-	width: 56vw;
-	margin: 1vw 4vw;
+
+ul#plans h3 span.price {
+  font-size: 5em;
+  font-weight: 100;
 }
-.planList .planbox {
-	padding: 0;
+
+ul#plans h4 {
+  font-size: 0.85em;
+  color: #e6e6e6;
+  margin: 0 auto;
+  width: 50%;
+  font-weight: 500;
+  line-height: 30px;
 }
-.planList .custombox {
-	margin: 2vw 4vw 4vw 4vw;
+
+ul#plans ul {
+  border-left: 1px solid #e5e5e5;
+  border-right: 1px solid #e5e5e5;
 }
-.planList .miscbox {
-	line-height: 2.7vw;
+
+ul#plans ul li {
+  text-align: left;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 5px 20px;
+  font-weight: 700;
+  list-style: none;
+  background: white;
+	color:#333;
 }
-.mediaDrawer .planList h3 {
-	margin-top: 3px;
-	font-size: 21px;
-	font-weight: bold
+
+ul#plans .signup {
+  background: #3A3A3A;
+  padding: 25px 0;
 }
-.freePlan {
-	text-align: left;
+
+.signup .button {
+  font-weight: bold;
+  padding: 16px 30px 14px;
+  -o-transition: background 0.2s ease-in-out;
+  -webkit-transition: background 0.2s ease-in-out;
+  transition: background 0.2s ease-in-out;
+  display: inline-block;
+  background: #F17E6F;
+  color: white;
+  text-decoration: none;
+  font-size: 1em;
+  padding: 4px 30px 3px;
+  border: none;
+  cursor: pointer;
 }
-.planList .planbox li:first-child {
-	font-size: 1.9vw;
-	padding: 0;
+
+
+.signup .button:hover {
+  color: white;
+  background: #ef6958;
 }
 
+
 /* debug sync button */
 .editSubscription .gear {
 	position: absolute;
diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs
index 855f897..80cb154 100644
--- a/views/about/brochure.ejs
+++ b/views/about/brochure.ejs
@@ -11,11 +11,98 @@
 	<h1 class="leader">Subscriptions</h1>
 
 	<div class="projectList about aboutintro">
-	  <div class="inner">
-      Want to get more out of VValls?  Consider becoming a subscription user.
-      <br><br>
-    </div>
   
+
+		<ul id="plans">
+		  <li class="most-popular">
+		    <div class="top">
+		      <h2>Large</h2>
+		      <h3><span class="dollar">$</span><span class="price large">50</span> <span class="month large">/ mo </span></h3>
+		      <h4>Ideal for businesses and ecommerce sites.</h4>
+		    </div>
+		    <ul>
+		      <li>
+		        15 Source Accounts / Hashtags 
+		      </li>
+		      <li>
+		        3 Embeddable Feeds 
+		      </li>
+		      <li>
+		        Pulls In New Posts Every 10 Minutes 
+		      </li>
+		      <li>
+		        Analytics and Analysis Tools 
+		      </li>
+		      <li>
+		        Everything the Medium Plan Contains 
+		      </li>
+		      <li>
+		        No Juicer Branding! 
+		      </li>
+		    </ul>
+		    <div class="signup"><a class="button" href="/credit-card/new?plan=large">Sign Up for Large</a></div>
+		  </li>
+		  <li>
+		    <div class="top">
+		      <h2>Medium</h2>
+		      <h3><span class="dollar">$</span><span class="price medium">10</span> <span class="month medium">/ mo </span></h3>
+		      <h4>Great for personal sites and small blogs.</h4>
+		    </div>
+		    <ul>
+		      <li>
+		        5 Source Accounts / Hashtags 
+		      </li>
+		      <li>
+		        1 Embeddable Feed 
+		      </li>
+		      <li>
+		        Pulls In New Posts Every Hour 
+		      </li>
+		      <li>
+		        Moderation and Filtering Tools 
+		      </li>
+		      <li>
+		        Everything the Small Plan Contains 
+		      </li>
+		      <li>
+		        No Juicer Branding! 
+		      </li>
+		    </ul>
+		    <div class="signup"><a class="button" href="/credit-card/new?plan=medium">Sign Up for Medium</a></div>
+		  </li>
+		  <li>
+		    <div class="top">
+		      <h2>Small</h2>
+		      <h3><span class="dollar">$</span><span class="price small">0</span> <span class="month small">/ mo </span></h3>
+		      <h4>Free forever.</h4>
+		    </div>
+		    <ul>
+		      <li>
+		        2 Source Accounts / Hashtags 
+		      </li>
+		      <li>
+		        1 Embeddable Social Media Feed 
+		      </li>
+		      <li>
+		        Pulls In New Posts Every 24 Hours 
+		      </li>
+		      <li>
+		        All Templates and Custom Styling 
+		      </li>
+		      <li>
+		        HTTPS Secure Connection Support 
+		      </li>
+		      <li>
+		        Juicer Branding 
+		      </li>
+		    </ul>
+		    <div class="signup"><a class="button" href="/sign-up">Sign Up for Small</a></div>
+		  </li>
+		</ul>
+
+
+
+
 		[[ include _plans ]]
   </div>
 
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 52430f7..05bc128 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -2,7 +2,7 @@
 
 	[[ if (logged_in) { ]]
 	<span>
-		signed in as &rarr;
+		signed in as 
 		<a href="/profile/[[- user.username ]]"><b>[[- user.displayName ]]</b></a>
 		[[ if (user.isStaff) { ]]
 		<a href="/staff">Staff Area</a>
diff --git a/views/staff/_pagination.ejs b/views/staff/_pagination.ejs
index 6c3bfb1..7d85c71 100644
--- a/views/staff/_pagination.ejs
+++ b/views/staff/_pagination.ejs
@@ -10,7 +10,7 @@
     [[ if (pagination.next_page !== -1) { ]]
       <a href="?[[- pagination.query ]]&offset=[[- pagination.next_page ]]">Next page &rarr;</a>
     [[ } else { ]]
-       &rarr;
+      ->
     [[ } ]]
 
   </div>