make feature cards links

website/source/assets/stylesheets/_home.scss

@@ -127,6 +127,7 @@ body.page-home {
 	}
 
 	.feature-card{
+		display: block;
 		height: 200px;
 		border: 2px solid #E6E7E8;
 		margin-bottom: 15px;
@@ -144,6 +145,7 @@ body.page-home {
 		}
 
 		p{
+			color: #000;
 			font-size: 16px;
 			line-height: 1.2;
 			font-weight: 400;
@@ -165,6 +167,11 @@ body.page-home {
 			background: image-url("feature-card-create.svg") left 0 top 70% no-repeat;
 			background-size: 80%;
 		}
+
+		&:hover {
+			border: 2px solid $purple;
+			text-decoration: none;
+		}
 	}
 
 	.feature{

website/source/index.html.erb

@@ -39,22 +39,22 @@
 				<h2>Features</h2>
 			</div>
 			<div class="col-sm-4">
-				<div class="feature-card feature-card-write">
+				<a href="#write-section" class="feature-card feature-card-write">
 					<h3>Write</h3>
 					<p>Infrastructure as code</p>
-				</div>
+				</a>
 			</div>
 			<div class="col-sm-4">
-				<div class="feature-card feature-card-plan">
+				<a href="#plan-section" class="feature-card feature-card-plan">
 					<h3>Plan</h3>
 					<p>Preview changes before applying</p>
-				</div>
+				</a>
 			</div>
 			<div class="col-sm-4">
-				<div class="feature-card feature-card-create">
+				<a href="#create-section" class="feature-card feature-card-create">
 					<h3>Create</h3>
 					<p>Reproducible infrastructure</p>
-				</div>
+				</a>
 			</div>
 		</div>
 	</div>
@@ -62,7 +62,7 @@
 
 <div class="skew-item feature" id="feature-write">
 	<div class="container">
-		<div class="row">
+		<div id="write-section" class="row">
 			<div class="col-sm-12">
 				<h2>Infrastructure as code</h2>
 				<p class="lead">Define infrastructure as code to increase operator productivity through collaboration and automation.</p>
@@ -86,7 +86,7 @@
 
 <div class="skew-item feature" id="feature-plan">
 	<div class="container">
-		<div class="row">
+		<div id="plan-section" class="row">
 			<div class="col-sm-12">
 				<h2>One safe workflow across providers</h2>
 				<p class="lead">Terraform provides an elegant user experience for
@@ -121,7 +121,7 @@
 
 <div class="skew-item feature" id="feature-create">
 	<div class="container">
-		<div class="row">
+		<div id="create-section" class="row">
 			<div class="col-sm-6">
 				<h2>Cloneable infrastructure</h2>
 				<p class="lead">Infrastructures share commonality across environments