website: add a clear next step to intro after demos

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>

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

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;

website/source/stylesheets/main.less

@@ -25,4 +25,4 @@
 // Components w/ JavaScript
 /*@import "modals.less";*/
 
-// 62
+// 63