From 66c25cc0bf4381da7c9dee55acd156d0294dac1a Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Thu, 17 Apr 2014 10:41:55 -0400
Subject: [PATCH] website: add a clear next step to intro after demos

---
 website/source/index.html.erb            | 15 +++++++++
 website/source/stylesheets/_buttons.less |  6 ++--
 website/source/stylesheets/_home.less    | 43 +++++++++++++++++++++++-
 website/source/stylesheets/main.less     |  2 +-
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 1a7a83483a..a1e9f7acd2 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -165,3 +165,18 @@
 	</div>
 </div><!-- /#demos -->
 
+<div id="cta">
+	<div class="container">
+		<div class="row">
+			<div class="intro">
+				<div class="left col-xs-12 col-sm-offset-2 col-sm-4">
+					<p>The intro and getting started guide contains
+						a simple and approachable walkthrough for running Consul locally.</p>
+				</div>
+				<div class="col-xs-offset-5 col-xs-12 col-sm-6 col-sm-offset-0 right">
+					<button class="outline-btn purple"><a href="/intro/index.html">Read the intro &#187;</a></button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/website/source/stylesheets/_buttons.less b/website/source/stylesheets/_buttons.less
index 504158262d..960ea5139c 100755
--- a/website/source/stylesheets/_buttons.less
+++ b/website/source/stylesheets/_buttons.less
@@ -15,15 +15,15 @@
 		border: 2px solid @purple;
 	}
 
-	&:hover{	
+	&:hover{
 		color: @white;
 		background-color: rgba(255, 255, 255, .2);
 		.transition(background-color .3s ease-in-out);
 
 		&.purple{
 			background-color: rgba(255, 255, 255, .5);
-		}			
-	}		
+		}
+	}
 }
 
 //dot animation on header main nav link hover
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index d88ea45b32..afbc7e91bf 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -177,10 +177,51 @@ body.page-home{
 	}
 }
 
+#cta {
+	padding: 160px 0 160px;
+
+	.intro {
+		.left {
+			text-align: right;
+		}
+
+		.right {
+			margin-top: 12px;
+		}
+
+	}
+
+	p{
+		font-size: 14px;
+		letter-spacing: 1px;
+        line-height: 1.5em;
+		color: @consul-gray;
+		font-family: @font-family-museo;
+		font-weight: @font-weight-museo-sb;
+	}
+
+
+
+	.outline-btn {
+		padding: 8px;
+	}
+
+	a {
+		font-weight: 500;
+	    font-size: 16px;
+	    text-transform: uppercase;
+	    letter-spacing: 3px;
+	    color: @purple;
+	    &:hover {
+	    	text-decoration: none;
+	    }
+	}
+}
+
 #demos{
 	padding: 30px 0 60px;
 	background-color: @light-purple;
-	background-color: darken(@light-purple, 3%);
+	background: @light-purple url('../images/sidebar-dots.jpg') left 62px no-repeat;
 
 	.explantion {
 		margin: 40px 0 40px 0;
diff --git a/website/source/stylesheets/main.less b/website/source/stylesheets/main.less
index 99ea4c1dd1..af89c81ff7 100755
--- a/website/source/stylesheets/main.less
+++ b/website/source/stylesheets/main.less
@@ -25,4 +25,4 @@
 // Components w/ JavaScript
 /*@import "modals.less";*/
 
-// 62
+// 63