website: use new hero

website/source/assets/stylesheets/_buttons.scss

@@ -4,7 +4,7 @@
 
 .h-btn{
 	display: inline-block;
-	background-color: $white;
+	background-color: transparent;
 	color: $black;
 	@include transition(color .3s ease-in-out);
 	//@include btn-shadow();

website/source/assets/stylesheets/_header.scss

@@ -4,12 +4,14 @@
 
 #header {
     position: relative;
+    height: 108px;
     color: $white;
     text-rendering: optimizeLegibility;
     margin-bottom: 0;
     /* opacity: 0;
     @include translate3d(0, -10px, 0); */
     transition: all 1s ease;
+    background-color: $white;
 
     /* &.showit{
         opacity: 1;
@@ -17,10 +19,10 @@
         transition: all 1s ease;
     } */
 
-    &.navbar-static-top{
-        height:70px;
-        z-index: 1000;
-    }
+    // &.navbar-static-top{
+    //     height:70px;
+    //     z-index: 1000;
+    // }
 
     .navbar-header{
 
@@ -57,10 +59,10 @@
             @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", 49px, 56px);
 
             &:hover{
-				@include transition(all 300ms ease-in);
-				color: $green-dark;
-				text-decoration: none;
-			}
+                @include transition(all 300ms ease-in);
+                color: $green-dark;
+                text-decoration: none;
+            }
         }
     }
 

website/source/assets/stylesheets/_home.scss

@@ -3,23 +3,42 @@
 // --------------------------------------------------
 
 #hero{
+	position: relative;
 	@include translate3d(0, -10px, 0);
 	text-align: center;
+	background: image-url('../images/hero-lockup.png') 0 0 no-repeat;
+	@include img-retina("../images/hero-bg.png", "../images/hero-bg@2x.png", 1278px, 798px);
+	background-size: cover;
+
+	&:before{
+		content: '';
+		position: absolute;
+		top: -20px;
+		left: 50%;
+		width: 1000px;
+		height: 1000px;
+		margin-left: -500px;
+		border-radius: 500px;
+		background-color: $white;
+		z-index: 1;
+	}
 
 	#hero-graphic{
 		position: relative;
 		display: inline-block;
 		width: 499px;
 		height: 340px;
-		margin: 120px auto;
+		margin: 120px auto 40px;
+		z-index: 2;
 
 		#hero-logotype{
 			position: absolute;
 			display: inline-block;
-		    top: 75px;
-		    left: 187px;
+			top: 75px;
+			left: 50%;
 			width: 115px;
 			height: 155px;
+			margin-left: -60px;
 			background: image-url('../images/hero-logotype.png') 0 0 no-repeat;
 			@include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px);
 		}
@@ -63,7 +82,26 @@
 
 	#hero-text{
 		position: relative;
-		text: center;
+
+		&:before{
+			content: '';
+			position: absolute;
+			top: -40px;
+			left: 50%;
+			width: 800px;
+			height: 800px;
+			margin-left: -400px;
+			border-radius: 4px;
+			opacity: .78;
+			background-color: $white;
+			z-index: 1;
+		}
+
+		#hero-text-content{
+			position: relative;
+			z-index: 2;
+			padding-bottom: 40px;
+		}
 
 		h1{
 			color: $blue-dark;

website/source/index.html.erb

@@ -15,11 +15,13 @@
 					<div id="hero-logotype"></div>
 				</div>
 				<div id="hero-text">
-					<h1>Easily deploy applications at any scale</h1>
-					<h3>Any App. Any OS. Any Cloud.</h3>
-					<div id="hero-btns">
-						<a class="h-btn light lrg has-caret intro" href="/intro">Learn More<span class="h-caret"></span></a>
-						<a class="h-btn green lrg has-caret has-border try" href="">Try Nomad<span class="h-caret"></span></a>
+					<div id="hero-text-content">
+						<h1>Applications on a global fleet.</h1>
+						<h3>As simple as a Single Machine.</h3>
+						<div id="hero-btns">
+							<a class="h-btn light lrg has-caret intro" href="/intro">Learn More<span class="h-caret"></span></a>
+							<a class="h-btn green lrg has-caret has-border try" href="">Try Nomad<span class="h-caret"></span></a>
+						</div>
 					</div>
 				</div>
 			</div>