From b2438a1e059215ceffe743b446263555b9f73b79 Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Wed, 5 Oct 2016 11:53:28 -0700
Subject: [PATCH] add feature-write background art

---
 .../source/assets/images/feature-write-bg.svg | 220 ++++++++++++++++++
 website/source/assets/stylesheets/_home.scss  |  53 ++++-
 2 files changed, 262 insertions(+), 11 deletions(-)
 create mode 100644 website/source/assets/images/feature-write-bg.svg

diff --git a/website/source/assets/images/feature-write-bg.svg b/website/source/assets/images/feature-write-bg.svg
new file mode 100644
index 000000000..b4c172787
--- /dev/null
+++ b/website/source/assets/images/feature-write-bg.svg
@@ -0,0 +1,220 @@
+<?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 705.9 744.1" style="enable-background:new 0 0 705.9 744.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#E6E7E8;stroke-width:2;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;stroke:#2D0972;stroke-width:2;stroke-miterlimit:10;}
+	.st2{fill:url(#SVGID_1_);}
+	.st3{fill:url(#SVGID_2_);}
+	.st4{fill:url(#SVGID_3_);}
+	.st5{fill:url(#SVGID_4_);}
+	.st6{fill:url(#SVGID_5_);}
+	.st7{fill:url(#SVGID_6_);}
+	.st8{fill:url(#SVGID_7_);}
+	.st9{fill:url(#SVGID_8_);}
+	.st10{fill:url(#SVGID_9_);}
+	.st11{fill:url(#SVGID_10_);}
+	.st12{fill:url(#SVGID_11_);}
+	.st13{fill:url(#SVGID_12_);}
+	.st14{fill:url(#SVGID_13_);}
+	.st15{fill:url(#SVGID_14_);}
+	.st16{fill:url(#SVGID_15_);}
+	.st17{fill:url(#SVGID_16_);}
+	.st18{fill:url(#SVGID_17_);}
+	.st19{fill:url(#SVGID_18_);}
+	.st20{fill:url(#SVGID_19_);}
+</style>
+<g>
+	<polygon class="st0" points="153,449.1 153,387 200.6,363.1 248.1,387 248.1,449.1 200.6,472.9 	"/>
+	<polygon class="st0" points="301.7,472.9 254.1,449.1 254.1,387 301.7,363.1 349.3,387 349.3,449.1 	"/>
+	<polygon class="st0" points="502.6,472.9 455,449.1 455,387 502.6,363.1 550.1,387 550.1,449.1 	"/>
+	<polygon class="st0" points="561.6,110.9 514,87.1 514,25 561.6,1.1 609.1,25 609.1,87.1 	"/>
+	<polygon class="st0" points="550.6,382.9 503,359.1 503,297 550.6,273.1 598.1,297 598.1,359.1 	"/>
+	<polygon class="st0" points="149.6,562.9 102,539.1 102,477 149.6,453.1 197.1,477 197.1,539.1 	"/>
+	<polygon class="st0" points="351.6,562.9 304,539.1 304,477 351.6,453.1 399.1,477 399.1,539.1 	"/>
+	<polygon class="st0" points="53,629.1 53,567 67.4,559.7 100.6,543.1 148.1,567 148.1,629.1 100.6,652.9 	"/>
+	<polygon class="st0" points="200.6,652.9 153,629.1 153,567 200.6,543.1 248.1,567 248.1,629.1 	"/>
+	<polygon class="st0" points="48.6,742.9 1,719.1 1,657 48.6,633.1 96.1,657 96.1,719.1 	"/>
+	<polygon class="st0" points="48.6,563.9 1,540.1 1,478 48.6,454.1 96.1,478 96.1,540.1 	"/>
+	<polygon class="st0" points="148.6,742.9 101,719.1 101,657 148.6,633.1 196.1,657 196.1,719.1 	"/>
+</g>
+<rect x="52.4" y="173.3" class="st1" width="440.8" height="324.6"/>
+<line class="st1" x1="52.4" y1="200.2" x2="493.2" y2="200.2"/>
+<circle class="st1" cx="71.5" cy="187.1" r="5.6"/>
+<circle class="st1" cx="89.6" cy="187.1" r="5.6"/>
+<circle class="st1" cx="107.7" cy="187.1" r="5.6"/>
+<g>
+	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="276.113" y1="253.7102" x2="748.8944" y2="253.7102">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="250.8" class="st2" width="179.8" height="5.8"/>
+	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="276.113" y1="253.7102" x2="748.8944" y2="253.7102">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="288.3" y="250.8" class="st3" width="232.3" height="5.8"/>
+	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="282.4" class="st4" width="77.7" height="5.8"/>
+	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="174.8" y="282.4" class="st5" width="191.5" height="5.8"/>
+	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="276.113" y1="285.2885" x2="748.8944" y2="285.2885">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="384.4" y="282.4" class="st6" width="214.1" height="5.8"/>
+	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="312.5" class="st7" width="163.6" height="5.8"/>
+	<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="265.8" y="312.5" class="st8" width="61.2" height="5.8"/>
+	<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="276.113" y1="315.3964" x2="748.8944" y2="315.3964">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="343.4" y="312.5" class="st9" width="362.5" height="5.8"/>
+	<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="276.113" y1="345.5071" x2="748.8944" y2="345.5071">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="342.6" class="st10" width="183.1" height="5.8"/>
+	<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="276.113" y1="345.5071" x2="748.8944" y2="345.5071">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="284.4" y="342.6" class="st11" width="295.7" height="5.8"/>
+	<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="372.7" class="st12" width="91.3" height="5.8"/>
+	<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="200.9" y="372.7" class="st13" width="154.8" height="5.8"/>
+	<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="276.113" y1="375.6165" x2="748.8944" y2="375.6165">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="378.5" y="372.7" class="st14" width="253.4" height="5.8"/>
+	<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="276.113" y1="405.7231" x2="748.8944" y2="405.7231">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="402.8" class="st15" width="141.7" height="5.8"/>
+	<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="276.113" y1="405.7231" x2="748.8944" y2="405.7231">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="242.2" y="402.8" class="st16" width="171.4" height="5.8"/>
+	<linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-96.5875" y1="405.7231" x2="1490.1528" y2="405.7231">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="434.3" y="402.8" class="st17" width="108.8" height="5.8"/>
+	<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="83.7" y="434.4" class="st18" width="91.3" height="5.8"/>
+	<linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="201.2" y="434.4" class="st19" width="102.5" height="5.8"/>
+	<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="276.113" y1="437.3027" x2="748.8944" y2="437.3027">
+		<stop  offset="0" style="stop-color:#AA43FF"/>
+		<stop  offset="3.900588e-03" style="stop-color:#A943FF"/>
+		<stop  offset="0.1351" style="stop-color:#983AFB"/>
+		<stop  offset="0.2932" style="stop-color:#8B34F9"/>
+		<stop  offset="0.506" style="stop-color:#8430F7"/>
+		<stop  offset="1" style="stop-color:#822FF7"/>
+	</linearGradient>
+	<rect x="324.2" y="434.4" class="st20" width="233.4" height="5.8"/>
+</g>
+</svg>
diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 3f2844230..1a1396869 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -79,7 +79,7 @@ body.page-home {
 	}
 
 	#feature-overview{
-		padding-bottom: 120px;
+		padding: 120px 0;
 		border-bottom: 2px solid #E6E7E8;
 	}
 
@@ -121,23 +121,42 @@ body.page-home {
 	}
 
 	#feature-write{
+		position: relative;
+		padding: 180px 0 200px;
+		margin-top: -80px;
 
+		>.container {
+			z-index: 21;
+		}
+
+		#feature-write-bg{
+			border-top: 2px solid white;
+			border-bottom: 2px solid $purple;
+			background: image-url("feature-write-bg.svg") 85% 100% no-repeat;
+			background-size: 570px;
+			z-index: 20;
+		}
 	}
 
 	#feature-plan{
 		position: relative;
 		color: $white;
-		background: $purple;
+		position: relative;
+		padding: 180px 0 60px;
+		margin-top: -80px;
 
+		>.container {
+			z-index: 21;
+		}
 
-		// #feature-iterate-bg{
-		// 	background: #fff image-url("feature-iterate-bg.png") center top no-repeat;
-		// 	border-top: 2px solid white;
-		// 	border-bottom: 2px solid $purple;
-		// 	background-size: cover;
-		// 	@include skewY(3deg);
-		// 	z-index: 20;
-		// }
+		#feature-plan-bg{
+			background: $purple;
+			border-top: 2px solid white;
+			border-bottom: 2px solid $purple;
+			background-size: cover;
+			@include skewY(3deg);
+			z-index: 20;
+		}
 	}
 
 	#feature-create{
@@ -150,7 +169,6 @@ body.page-home {
 		}
 
 		#feature-create-bg{
-			background-color: $purple;
 			@include skewY(3deg);
 			z-index: 20;
 		}
@@ -312,6 +330,7 @@ body.page-home {
 
 	#announcement{
 		position: relative;
+		margin-top: -80px;
 		padding: 180px 220px;
 		color: $white;
 		text-align: center;
@@ -330,12 +349,24 @@ body.page-home {
 	#enterprise-callout {
 		position: relative;
 		padding: 180px 220px;
+		margin-top: -80px;
 		color: #fff;
 		background-color: #000;
 
+		>.container {
+			z-index: 31;
+		}
+
 		.lead {
 			max-width: 30em;
 		}
+
+		#enterprise-callout-bg {
+			background: #000 image-url("enterprise-callout-bg.svg") bottom right no-repeat;
+			background-size: cover;
+			@include skewY(3deg);
+			z-index: 30;
+		}
 	}
 
 	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {