From 7aced5b1b6a9ccf64a404e68490eaad176b02463 Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Tue, 4 Oct 2016 16:03:46 -0700
Subject: [PATCH] add and style feature-card graphics

---
 .../assets/images/feature-card-create.svg     | 15 +++++++
 .../assets/images/feature-card-plan.svg       | 31 +++++++++++++
 .../assets/images/feature-card-write.svg      | 24 +++++++++++
 website/source/assets/stylesheets/_home.scss  | 43 ++++++++-----------
 website/source/feature-card-write.svg         |  1 +
 website/source/index.html.erb                 | 26 ++---------
 6 files changed, 92 insertions(+), 48 deletions(-)
 create mode 100644 website/source/assets/images/feature-card-create.svg
 create mode 100644 website/source/assets/images/feature-card-plan.svg
 create mode 100644 website/source/assets/images/feature-card-write.svg
 create mode 100644 website/source/feature-card-write.svg

diff --git a/website/source/assets/images/feature-card-create.svg b/website/source/assets/images/feature-card-create.svg
new file mode 100644
index 000000000..0c77fe438
--- /dev/null
+++ b/website/source/assets/images/feature-card-create.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 275.8 75.8" style="enable-background:new 0 0 275.8 75.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#822FF7;}
+</style>
+<g>
+	<polygon class="st0" points="92.2,43.2 169.3,43.2 169.3,41.2 131.7,41.2 145.3,14.8 216,14.8 216,12.8 144.1,12.8 129.4,41.2 
+		89.7,41.2 87.2,41.2 0,41.2 0,43.2 89.3,43.2 118.3,70.5 253.7,70.5 253.7,68.5 119.1,68.5 	"/>
+	<polygon class="st0" points="266.9,55.8 258.5,60 258.5,71 266.9,75.2 275.3,71 275.3,60 	"/>
+	<polygon class="st0" points="238.8,15.7 238.8,4.8 230.4,0.6 222,4.8 222,15.7 230.4,20 	"/>
+	<polygon class="st0" points="176.9,42.8 185.3,47 193.7,42.8 193.7,31.8 185.3,27.6 176.9,31.8 	"/>
+</g>
+</svg>
diff --git a/website/source/assets/images/feature-card-plan.svg b/website/source/assets/images/feature-card-plan.svg
new file mode 100644
index 000000000..765579dce
--- /dev/null
+++ b/website/source/assets/images/feature-card-plan.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 360 20.7" style="enable-background:new 0 0 360 20.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#822FF7;}
+	.st1{fill:#FFFFFF;}
+</style>
+<rect y="9.4" class="st0" width="360" height="2"/>
+<g>
+	<path class="st0" d="M83.3,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8C80,1.4,81.7,1,83.3,1c3.3,0,6.5,1.8,8.1,4.7
+		c2.6,4.5,1,10.2-3.4,12.8C86.5,19.3,84.9,19.7,83.3,19.7C83.3,19.7,83.3,19.7,83.3,19.7z"/>
+	<path class="st1" d="M83.3,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
+		c-2.3-4-0.9-9.1,3.1-11.4C80.4,2.4,81.9,2,83.3,2 M83.3,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1c1.8,3.2,5.3,5.2,9,5.2
+		c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C90.4,2,87,0,83.3,0L83.3,0z"/>
+</g>
+<g>
+	<path class="st0" d="M276.4,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8c1.4-0.8,3-1.2,4.7-1.2c3.3,0,6.5,1.8,8.1,4.7
+		c1.2,2.2,1.6,4.7,0.9,7.1c-0.6,2.4-2.2,4.4-4.4,5.7C279.6,19.3,278,19.7,276.4,19.7C276.4,19.7,276.4,19.7,276.4,19.7z"/>
+	<path class="st1" d="M276.4,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
+		c-2.3-4-0.9-9.1,3.1-11.4C273.5,2.4,275,2,276.4,2 M276.4,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1
+		c1.8,3.2,5.3,5.2,9,5.2c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C283.5,2,280.1,0,276.4,0L276.4,0z"/>
+</g>
+<g>
+	<path class="st0" d="M179.9,19.7c-3.3,0-6.5-1.8-8.1-4.7c-2.6-4.5-1-10.2,3.4-12.8c1.4-0.8,3-1.2,4.7-1.2c3.3,0,6.5,1.8,8.1,4.7
+		c1.2,2.2,1.6,4.7,0.9,7.1c-0.6,2.4-2.2,4.4-4.4,5.7C183.1,19.3,181.5,19.7,179.9,19.7C179.9,19.7,179.9,19.7,179.9,19.7z"/>
+	<path class="st1" d="M179.8,2c2.9,0,5.7,1.5,7.3,4.2c2.3,4,0.9,9.1-3.1,11.4c-1.3,0.8-2.7,1.1-4.2,1.1c-2.9,0-5.7-1.5-7.3-4.2
+		c-2.3-4-0.9-9.1,3.1-11.4C177,2.4,178.4,2,179.8,2 M179.8,0c-1.8,0-3.6,0.5-5.2,1.4c-4.9,2.9-6.7,9.2-3.8,14.1
+		c1.8,3.2,5.3,5.2,9,5.2c1.8,0,3.6-0.5,5.2-1.4c4.9-2.9,6.7-9.2,3.8-14.1C187,2,183.5,0,179.8,0L179.8,0z"/>
+</g>
+</svg>
diff --git a/website/source/assets/images/feature-card-write.svg b/website/source/assets/images/feature-card-write.svg
new file mode 100644
index 000000000..3e81bc1b2
--- /dev/null
+++ b/website/source/assets/images/feature-card-write.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 289.9 54.4" style="enable-background:new 0 0 289.9 54.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#822FF7;}
+</style>
+<g>
+	<rect class="st0" width="32.6" height="2"/>
+	<rect x="39.6" class="st0" width="82.2" height="2"/>
+	<rect x="130.9" class="st0" width="87" height="2"/>
+	<rect y="13.1" class="st0" width="70" height="2"/>
+	<rect x="79.3" y="13.1" class="st0" width="25.4" height="2"/>
+	<rect x="113" y="13.1" class="st0" width="137" height="2"/>
+	<rect y="26.2" class="st0" width="78.5" height="2"/>
+	<rect x="87.3" y="26.2" class="st0" width="202.6" height="2"/>
+	<rect y="39.3" class="st0" width="38.5" height="2"/>
+	<rect x="51" y="39.3" class="st0" width="66.1" height="2"/>
+	<rect x="128.3" y="39.3" class="st0" width="109.1" height="2"/>
+	<rect y="52.4" class="st0" width="60.5" height="2"/>
+	<rect x="69" y="52.4" class="st0" width="73.4" height="2"/>
+	<rect x="152.6" y="52.4" class="st0" width="61.9" height="2"/>
+</g>
+</svg>
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 5e1ef52dd..328d5dd75 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -79,7 +79,7 @@ body.page-home {
 	}
 
 	.feature-card {
-		height: 230px;
+		height: 210px;
 		border: 2px solid #E6E7E8;
 		padding:20px;
 		font-size: 18px;
@@ -98,6 +98,23 @@ body.page-home {
 			text-transform: uppercase;
 			letter-spacing: 1px;
 		}
+
+		&.feature-card-write{
+			background: image-url("feature-card-write.svg") 20px 120px no-repeat;
+			background-size: 289px 55px;
+		}
+
+		&.feature-card-plan{
+			background: image-url("feature-card-plan.svg") 0px 137px no-repeat;
+			background-size: 360px 21px;
+		}
+
+		&.feature-card-create{
+			background: image-url("feature-card-create.svg") 0px 105px no-repeat;
+			background-size: 275px 75px;
+		}
+
+
 	}
 
 	#feature-write{
@@ -218,12 +235,6 @@ body.page-home {
 			@include lato-light();
 		}
 
-		.explantion {
-			margin: 40px 0 60px 15px;
-			border-left: 8px solid #1e1e1e;
-
-		}
-
 		.terminals{
 			margin-bottom: 80px;
 
@@ -244,16 +255,6 @@ body.page-home {
 
 					.right{
 						padding-left: 25px;
-
-						h2{
-							margin-top: 0;
-							font-size: 28px;
-							text-transform: uppercase;
-						}
-
-						p{
-							font-size: 16px;
-						}
 					}
 				}
 
@@ -584,8 +585,6 @@ body.page-home {
 
 	@media (max-width: 320px) {
 
-		#feature-clone{
-		}
 
 		#feature-iterate{
 			margin-top: -80px;
@@ -601,12 +600,6 @@ body.page-home {
 				@include skewY(-3deg);
 			}
 
-			p{
-				text-align: right;
-				padding-left: 120px;
-				font-weight: 300;
-			}
-
 			.it-icon{
 				width: 245px;
 				margin: 0 auto 40px 45px;
diff --git a/website/source/feature-card-write.svg b/website/source/feature-card-write.svg
new file mode 100644
index 000000000..0e81a10e3
--- /dev/null
+++ b/website/source/feature-card-write.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 289.92 54.42"><defs><style>.cls-1{fill:#822ff7;}</style></defs><title>Untitled-1</title><rect class="cls-1" width="32.6" height="2"/><rect class="cls-1" x="39.64" width="82.15" height="2"/><rect class="cls-1" x="130.89" width="87.05" height="2"/><rect class="cls-1" y="13.11" width="70" height="2"/><rect class="cls-1" x="79.27" y="13.11" width="25.42" height="2"/><rect class="cls-1" x="113.03" y="13.11" width="136.98" height="2"/><rect class="cls-1" y="26.21" width="78.49" height="2"/><rect class="cls-1" x="87.33" y="26.21" width="202.59" height="2"/><rect class="cls-1" y="39.32" width="38.52" height="2"/><rect class="cls-1" x="51" y="39.32" width="66.15" height="2"/><rect class="cls-1" x="128.31" y="39.32" width="109.1" height="2"/><rect class="cls-1" y="52.42" width="60.45" height="2"/><rect class="cls-1" x="68.98" y="52.42" width="73.36" height="2"/><rect class="cls-1" x="152.6" y="52.42" width="61.88" height="2"/></svg>
\ No newline at end of file
diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 8d0cff760..0d80e8e0b 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -3,30 +3,10 @@
 	<div id="jumbotron">
 		<div class="jumbotron-content" id="jumbotron-content">
 			<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
-				<p class="lead">Terraform is an open source tool that allows you to codify APIs into
-					declarative configuration files that can be shared amongst team members,
-					treated as code, edited, reviewed, and versioned. Terraform allows you
-					safely and predictably create, change, and improve production
-					infrastructure.</p>
-				<p>
-					<button class="btn">Get Started &gt;</button>
-				</p>
 		</div>
 	</div>
 </div>
 
-<div class="col-sm-12">
-	<p>Trusted in production by:</p>
-	<ul class="customer-list">
-		<li>Nike</li>
-		<li>HBO</li>
-		<li>Capital One</li>
-		<li>Target</li>
-		<li>Hotels.com</li>
-		<li>Home Depot</li>
-	</ul>
-</div>
-
 <div class="feature" id="feature-overview">
 	<div class="container">
 		<div class="row">
@@ -34,19 +14,19 @@
 				<h2>Features</h2>
 			</div>
 			<div class="col-md-4 col-sm-12">
-				<div class="feature-card">
+				<div class="feature-card feature-card-write">
 					<h3>Write</h3>
 					<p>Infrastructure as code</p>
 				</div>
 			</div>
 			<div class="col-md-4 col-sm-12">
-				<div class="feature-card">
+				<div class="feature-card feature-card-plan">
 					<h3>Plan</h3>
 					<p>Workflows, not technologies</p>
 				</div>
 			</div>
 			<div class="col-md-4 col-sm-12">
-				<div class="feature-card">
+				<div class="feature-card feature-card-create">
 					<h3>Create</h3>
 					<p>Cloneable infrastructure</p>
 				</div>