Merge pull request #8416 from mitchellh/sethvargo/rebrand

Rebrand to match HashiCorp styles
2017-03-28 12:13:11 -04:00 · 2017-03-28 12:13:11 -04:00 · ba16b14035
parent 1e6e6a0bf0 041b0e705f
commit ba16b14035
131 changed files with 2458 additions and 3921 deletions
--- a/website/Gemfile
+++ b/website/Gemfile
@ -1,3 +1,3 @@
 source "https://rubygems.org"

-gem "middleman-hashicorp", "0.3.13"
+gem "middleman-hashicorp", "0.3.22"
--- a/website/Gemfile.lock
+++ b/website/Gemfile.lock
@ -6,7 +6,7 @@ GEM
      minitest (~> 5.1)
      thread_safe (~> 0.3, >= 0.3.4)
      tzinfo (~> 1.1)
-    autoprefixer-rails (6.7.6)
+    autoprefixer-rails (6.7.7.1)
      execjs
    bootstrap-sass (3.3.7)
      autoprefixer-rails (>= 5.2.1)
@ -77,7 +77,7 @@ GEM
      rack (>= 1.4.5, < 2.0)
      thor (>= 0.15.2, < 2.0)
      tilt (~> 1.4.1, < 2.0)
-    middleman-hashicorp (0.3.13)
+    middleman-hashicorp (0.3.22)
      bootstrap-sass (~> 3.3)
      builder (~> 3.2)
      middleman (~> 3.4)
@ -103,7 +103,7 @@ GEM
    mini_portile2 (2.1.0)
    minitest (5.10.1)
    multi_json (1.12.1)
-    nokogiri (1.7.0.1)
+    nokogiri (1.7.1)
      mini_portile2 (~> 2.1.0)
    padrino-helpers (0.12.8.1)
      i18n (~> 0.6, >= 0.6.7)
@ -138,7 +138,7 @@ GEM
    turbolinks (5.0.1)
      turbolinks-source (~> 5)
    turbolinks-source (5.0.0)
-    tzinfo (1.2.2)
+    tzinfo (1.2.3)
      thread_safe (~> 0.1)
    uber (0.0.15)
    uglifier (2.7.2)
@ -151,7 +151,7 @@ PLATFORMS
  ruby

 DEPENDENCIES
-  middleman-hashicorp (= 0.3.13)
+  middleman-hashicorp (= 0.3.22)

 BUNDLED WITH
   1.14.6
--- a/website/Makefile
+++ b/website/Makefile
@ -1,4 +1,4 @@
-VERSION?="0.3.13"
+VERSION?="0.3.22"

 website:
 	@echo "==> Starting website in Docker..."
--- a/website/config.rb
+++ b/website/config.rb
@ -1,12 +1,40 @@
 set :base_url, "https://www.vagrantup.com/"

 activate :hashicorp do |h|
-  h.name = "vagrant"
-  h.version = "1.9.3"
-  h.github_slug = "mitchellh/vagrant"
+  h.name         = "vagrant"
+  h.version      = "1.9.3"
+  h.github_slug  = "mitchellh/vagrant"
+  h.website_root = "website"
 end

 helpers do
+  # Get the title for the page.
+  #
+  # @param [Middleman::Page] page
+  #
+  # @return [String]
+  def title_for(page)
+    if page && page.data.page_title
+      return "#{page.data.page_title} - Vagrant by HashiCorp"
+    end
+
+     "Vagrant by HashiCorp"
+   end
+
+  # Get the description for the page
+  #
+  # @param [Middleman::Page] page
+  #
+  # @return [String]
+  def description_for(page)
+    description = (page.data.description || "")
+      .gsub('"', '')
+      .gsub(/\n+/, ' ')
+      .squeeze(' ')
+
+    return escape_html(description)
+  end
+
  # This helps by setting the "active" class for sidebar nav elements
  # if the YAML frontmatter matches the expected value.
  def sidebar_current(expected)
@ -18,51 +46,47 @@ helpers do
    end
  end

-  # This returns the overall section of the documentation we're on.
-  def sidebar_section
-    current = current_page.data.sidebar_current
-    return "" if !current
-    current.split("-")[0]
+  # Returns the id for this page.
+  # @return [String]
+  def body_id_for(page)
+    if !(name = page.data.sidebar_current).blank?
+      return "page-#{name.strip}"
+    end
+    if page.url == "/" || page.url == "/index.html"
+      return "page-home"
+    end
+    if !(title = page.data.page_title).blank?
+      return title
+        .downcase
+        .gsub('"', '')
+        .gsub(/[^\w]+/, '-')
+        .gsub(/_+/, '-')
+        .squeeze('-')
+        .squeeze(' ')
+    end
+    return ""
  end

-  def body_classes
-    classify = ->(s) { s.downcase.gsub(/[^a-zA-Z0-9]/, "-").squeeze("-") }
-
+  # Returns the list of classes for this page.
+  # @return [String]
+  def body_classes_for(page)
    classes = []

-    if current_page.data.page_title
-      classes << "page-#{classify.call(current_page.data.page_title)}"
-    else
-      classes << "page-home"
+    if !(layout = page.data.layout).blank?
+      classes << "layout-#{page.data.layout}"
    end

-    if current_page.data.layout
-      classes << "layout-#{classify.call(current_page.data.layout)}"
+    if !(title = page.data.page_title).blank?
+      title = title
+        .downcase
+        .gsub('"', '')
+        .gsub(/[^\w]+/, '-')
+        .gsub(/_+/, '-')
+        .squeeze('-')
+        .squeeze(' ')
+      classes << "page-#{title}"
    end

    return classes.join(" ")
  end
-  # "home layout-#{current_page.data.layout}"
-
-  # Get the title for the page.
-  #
-  # @param [Middleman::Page] page
-  #
-  # @return [String]
-  def title_for(page)
-    if page && page.data.page_title
-      return "#{page.data.page_title} - Vagrant by HashiCorp"
-    end
-
-    "Vagrant by HashiCorp"
-  end
-
-  # Get the description for the page
-  #
-  # @param [Middleman::Page] page
-  #
-  # @return [String]
-  def description_for(page)
-    return escape_html(current_page.data.description || "")
-  end
 end
--- a/website/packer.json
+++ b/website/packer.json
@ -8,7 +8,7 @@
  "builders": [
    {
      "type": "docker",
-      "image": "hashicorp/middleman-hashicorp:0.3.13",
+      "image": "hashicorp/middleman-hashicorp:0.3.22",
      "discard": "true",
      "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"]
    }
--- a/website/source/about.html.md
+++ b/website/source/about.html.md
@ -1,23 +0,0 @@
---
-layout: "about"
-sidebar_current: "about-main"
-page_title: "About"
-description: |-
-  Vagrant is a tool for building complete development environments. With an
-  easy-to-use workflow and focus on automation, Vagrant lowers development
-  environment setup time, increases development/production parity, and makes
-  the "works on my machine" excuse a relic of the past.
---
-
-# About Vagrant
-
-Vagrant is a tool for building complete development environments. With an
-easy-to-use workflow and focus on automation, Vagrant lowers development
-environment setup time, increases development/production parity, and makes
-the "works on my machine" excuse a relic of the past.
-
-Vagrant was started in January 2010 by [Mitchell Hashimoto](https://twitter.com/mitchellh). For almost three years, Vagrant was a side-project for Mitchell, a project that he worked on in his free hours after his full-time job. During this time, Vagrant grew to be trusted and used by a range of individuals to entire development teams in large companies.
-
-In November 2012, [HashiCorp](https://www.hashicorp.com) was formed by Mitchell to back the development of Vagrant full-time. HashiCorp builds commercial additions and provides professional support and training for Vagrant.
-
-Vagrant remains and always will be a liberally licensed open source project. Each release of Vagrant is the work of hundreds of individuals' contributions to the [open source project](https://github.com/mitchellh/vagrant).
--- a/website/source/android-manifest.json.erb
+++ b/website/source/android-manifest.json.erb
@ -0,0 +1,18 @@
+{
+  "name": "Vagrant by HashiCorp",
+  "icons": [
+    {
+      "src": "<%= image_path('favicons/android-chrome-192x192.png') %>",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "<%= image_path('favicons/android-chrome-512x512.png') %>",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
--- a/website/source/assets/images/bullet_1.png
+++ b/website/source/assets/images/bullet_1.png
--- a/website/source/assets/images/bullet_2.png
+++ b/website/source/assets/images/bullet_2.png
--- a/website/source/assets/images/bullet_3.png
+++ b/website/source/assets/images/bullet_3.png
--- a/website/source/assets/images/customers_small.png
+++ b/website/source/assets/images/customers_small.png
--- a/website/source/assets/images/fastly_logo.png
+++ b/website/source/assets/images/fastly_logo.png
--- a/website/source/assets/images/favicon.ico
+++ b/website/source/assets/images/favicon.ico
--- a/website/source/assets/images/favicon.png
+++ b/website/source/assets/images/favicon.png
--- a/website/source/assets/images/favicons/android-chrome-192x192.png
+++ b/website/source/assets/images/favicons/android-chrome-192x192.png
--- a/website/source/assets/images/favicons/android-chrome-512x512.png
+++ b/website/source/assets/images/favicons/android-chrome-512x512.png
--- a/website/source/assets/images/favicons/apple-touch-icon.png
+++ b/website/source/assets/images/favicons/apple-touch-icon.png
--- a/website/source/assets/images/favicons/favicon-16x16.png
+++ b/website/source/assets/images/favicons/favicon-16x16.png
--- a/website/source/assets/images/favicons/favicon-32x32.png
+++ b/website/source/assets/images/favicons/favicon-32x32.png
--- a/website/source/assets/images/favicons/favicon.ico
+++ b/website/source/assets/images/favicons/favicon.ico
--- a/website/source/assets/images/favicons/mstile-150x150.png
+++ b/website/source/assets/images/favicons/mstile-150x150.png
--- a/website/source/assets/images/favicons/safari-pinned-tab.svg
+++ b/website/source/assets/images/favicons/safari-pinned-tab.svg
@ -0,0 +1,116 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.001563,-0.001563)"
+fill="#000000" stroke="none">
+<path d="M1440 10231 c0 -5 -8 -11 -17 -14 -19 -6 -75 -38 -83 -48 -3 -3 -17
+-12 -32 -20 -38 -19 -272 -161 -278 -168 -3 -3 -19 -13 -35 -22 -24 -13 -374
+-223 -500 -300 -16 -11 -37 -22 -45 -26 -8 -3 -17 -9 -20 -13 -3 -3 -39 -26
+-80 -50 -107 -65 -112 -67 -148 -87 -18 -9 -35 -26 -38 -38 -2 -11 -3 -238 -2
+-505 l3 -485 23 -50 c13 -27 28 -59 32 -70 4 -11 18 -42 29 -68 12 -27 31 -74
+43 -105 11 -32 25 -62 29 -68 5 -6 6 -14 2 -17 -3 -4 -1 -7 5 -7 7 0 11 -3 10
+-7 0 -5 2 -17 7 -28 4 -11 61 -148 127 -305 65 -156 118 -290 118 -297 0 -7 5
+-13 10 -13 6 0 9 -3 8 -7 -1 -5 4 -21 11 -38 6 -16 22 -55 34 -85 12 -30 25
+-56 30 -58 4 -2 7 -12 7 -21 0 -10 8 -33 17 -52 10 -19 18 -38 19 -44 3 -10
+135 -329 154 -370 18 -39 59 -136 61 -143 2 -11 19 -53 35 -89 25 -59 41 -97
+69 -167 15 -38 31 -77 35 -85 5 -9 36 -88 70 -176 34 -88 69 -175 76 -192 8
+-18 51 -124 95 -235 45 -112 86 -214 92 -228 5 -14 11 -29 13 -35 2 -9 30 -78
+67 -165 6 -14 11 -28 12 -32 2 -5 4 -11 5 -15 1 -5 2 -11 1 -15 0 -5 4 -8 9
+-8 6 0 10 -7 10 -16 0 -9 6 -28 14 -42 8 -15 31 -70 52 -122 20 -52 41 -99 46
+-105 4 -5 8 -15 8 -22 0 -7 9 -32 20 -56 22 -49 200 -477 204 -492 2 -5 13
+-32 24 -58 12 -27 22 -51 22 -53 0 -3 9 -24 19 -47 10 -23 35 -82 55 -132 20
+-49 41 -99 45 -110 80 -186 99 -234 94 -239 -4 -3 -1 -6 5 -6 7 0 12 -8 12
+-18 0 -10 4 -22 8 -28 5 -5 21 -40 36 -79 16 -38 45 -110 66 -160 21 -49 60
+-142 85 -205 26 -63 52 -126 58 -140 6 -14 11 -27 12 -30 0 -3 6 -15 13 -27 7
+-13 10 -23 6 -23 -3 0 -2 -6 4 -12 5 -7 22 -44 37 -83 15 -38 35 -88 46 -110
+10 -22 55 -130 100 -240 45 -110 87 -213 94 -230 8 -16 28 -66 45 -110 17 -44
+40 -97 51 -118 10 -22 19 -47 19 -56 0 -9 4 -21 9 -27 5 -5 26 -49 46 -97 20
+-48 41 -100 47 -115 6 -15 12 -29 13 -32 1 -3 9 -22 18 -44 9 -21 17 -40 17
+-43 0 -2 12 -30 26 -61 15 -31 27 -61 29 -67 1 -5 10 -28 19 -50 9 -22 21 -49
+25 -60 5 -11 14 -33 22 -50 7 -16 13 -32 14 -35 1 -3 6 -16 12 -30 6 -14 24
+-58 41 -98 23 -57 37 -78 63 -94 87 -53 115 -69 132 -75 9 -3 17 -9 17 -14 0
+-5 5 -9 10 -9 6 0 65 -31 131 -70 66 -38 124 -70 129 -70 6 0 10 -4 10 -8 0
+-4 15 -15 33 -23 17 -9 73 -39 122 -68 99 -58 152 -89 235 -134 30 -17 57 -34
+58 -39 2 -4 8 -8 12 -8 5 0 35 -15 67 -34 125 -73 169 -97 186 -103 9 -3 17
+-9 17 -14 0 -5 4 -9 9 -9 5 0 88 -46 185 -103 97 -56 193 -110 214 -121 20
+-10 39 -21 42 -25 3 -3 23 -15 45 -26 22 -11 42 -22 45 -25 8 -8 42 -28 80
+-47 19 -9 52 -28 72 -41 l37 -24 38 23 c50 32 63 39 125 73 29 15 60 34 68 40
+8 6 35 22 60 35 25 13 52 30 60 37 8 7 22 14 30 16 8 2 17 6 20 9 6 8 222 134
+288 169 26 13 49 27 52 30 3 4 25 17 50 31 25 13 47 27 48 32 2 4 8 7 13 7 7
+0 96 51 204 117 11 7 31 17 45 23 14 6 33 19 42 27 10 9 18 12 18 7 0 -5 4 -4
+8 2 9 13 129 84 143 84 5 0 9 5 9 10 0 6 4 10 10 10 5 0 47 22 92 49 46 27
+124 73 175 102 50 30 106 63 125 74 18 10 60 34 92 53 89 49 113 69 120 97 4
+14 6 28 5 31 0 4 3 10 8 13 6 3 27 51 49 106 21 55 42 103 47 106 5 3 8 9 8
+13 -1 3 -1 7 0 9 0 1 2 11 4 21 2 10 7 22 12 25 4 3 9 13 11 21 1 8 7 24 12
+35 5 11 19 45 31 75 12 30 27 69 34 85 7 17 23 55 35 85 12 30 26 64 31 75 4
+11 20 49 34 85 15 36 36 85 47 110 11 25 21 50 23 55 3 15 15 45 36 92 10 24
+19 45 19 48 0 4 8 25 19 48 17 39 32 75 36 87 1 3 6 14 10 25 58 136 117 282
+119 290 1 6 6 17 11 25 5 8 10 20 11 25 1 6 25 66 54 135 29 69 53 130 55 135
+1 6 7 21 13 35 5 14 33 81 61 150 28 69 58 137 67 152 8 15 15 30 15 33 -1 9
+36 101 74 190 13 30 25 63 24 68 0 1 14 32 30 69 17 37 31 74 31 83 0 8 5 15
+10 15 6 0 10 7 10 16 0 8 11 39 23 67 13 29 41 95 62 147 34 88 44 110 74 180
+5 14 27 66 46 115 20 50 44 106 52 125 9 19 16 41 16 48 0 6 4 12 9 12 4 0 8
+11 8 24 0 13 3 26 8 28 4 2 40 86 81 188 41 102 84 205 95 230 11 25 21 50 22
+55 1 6 10 30 21 55 34 76 58 134 59 142 1 4 3 10 4 13 1 3 3 10 4 15 0 6 6 14
+11 18 6 4 11 14 13 22 3 17 37 106 63 165 9 22 29 69 43 105 15 36 31 74 36
+85 5 11 18 43 29 70 10 28 35 88 54 135 37 88 96 233 170 418 24 59 48 116 52
+127 5 11 9 22 10 25 1 3 11 27 23 53 12 27 25 60 28 73 3 13 10 27 15 30 5 3
+7 10 4 15 -4 5 -1 9 5 9 6 0 9 4 5 9 -3 5 -1 12 5 16 6 4 8 11 5 16 -4 5 -1 9
+5 9 6 0 9 4 6 9 -3 4 1 17 9 27 8 10 15 25 15 32 0 7 9 31 19 55 21 45 87 205
+201 487 39 96 74 184 79 195 19 44 40 95 91 220 28 72 56 139 60 150 59 138
+73 170 75 179 2 11 26 69 45 111 24 53 38 95 32 95 -4 0 -2 4 3 8 6 4 35 68
+65 142 l54 135 1 466 0 465 -22 22 c-13 13 -23 20 -23 17 0 -5 -52 21 -90 45
+-19 11 -148 84 -297 166 -27 15 -52 30 -57 35 -6 5 -18 9 -27 9 -10 0 -19 4
+-21 9 -1 4 -30 23 -63 41 -82 45 -133 73 -180 100 -22 13 -74 41 -115 63 -41
+22 -86 47 -100 56 -14 9 -38 23 -55 31 -16 8 -32 18 -35 21 -3 3 -30 18 -60
+33 -68 35 -113 59 -120 66 -18 18 -153 81 -159 74 -6 -9 -19 -17 -101 -63 -25
+-14 -51 -31 -58 -38 -13 -12 -27 -17 -44 -14 -5 0 -8 -4 -8 -10 0 -5 -13 -15
+-30 -20 -16 -6 -30 -14 -30 -18 0 -5 -18 -16 -40 -26 -22 -10 -40 -21 -40 -25
+0 -5 -11 -11 -25 -14 -14 -4 -25 -11 -25 -16 0 -6 -4 -10 -10 -10 -5 0 -61
+-31 -125 -70 -64 -38 -120 -70 -125 -70 -6 0 -10 -4 -10 -8 0 -5 -18 -17 -40
+-27 -22 -10 -40 -22 -40 -27 0 -4 -4 -8 -9 -8 -8 0 -41 -19 -169 -95 -9 -5
+-107 -64 -217 -129 -110 -66 -216 -129 -235 -141 -93 -60 -292 -175 -300 -175
+-6 0 -10 -3 -10 -8 0 -4 -21 -18 -47 -32 -27 -14 -52 -28 -58 -33 -23 -18
+-158 -97 -166 -97 -5 0 -9 -4 -9 -8 0 -4 -12 -13 -27 -19 -30 -12 -85 -44 -93
+-54 -3 -3 -23 -16 -45 -28 l-40 -22 0 -457 c1 -413 -1 -460 -16 -489 -10 -17
+-15 -34 -12 -37 4 -3 1 -6 -5 -6 -7 0 -12 -4 -12 -10 0 -5 -15 -40 -32 -77
+-18 -38 -33 -70 -33 -73 -1 -3 -16 -36 -34 -75 -18 -38 -57 -122 -86 -185 -29
+-63 -67 -146 -86 -185 -18 -38 -33 -72 -34 -75 -1 -3 -16 -35 -33 -72 -97
+-205 -172 -382 -172 -404 0 -8 -4 -14 -10 -14 -5 0 -10 -9 -10 -19 0 -11 -5
+-23 -10 -26 -6 -4 -8 -10 -5 -15 3 -5 1 -11 -5 -15 -5 -3 -10 -15 -10 -26 0
+-10 -4 -19 -8 -19 -5 0 -9 -6 -9 -12 0 -7 -7 -29 -16 -48 -8 -19 -48 -114 -87
+-210 -40 -96 -77 -186 -83 -200 -6 -14 -11 -29 -12 -35 -1 -5 -10 -28 -20 -50
+-10 -22 -19 -42 -20 -45 -1 -3 -7 -18 -13 -33 -7 -16 -12 -30 -12 -31 0 -2 -8
+-21 -17 -42 -9 -22 -17 -41 -18 -44 -2 -7 -24 -59 -40 -95 -7 -16 -31 -75 -53
+-130 -23 -55 -66 -160 -96 -234 -31 -74 -56 -140 -56 -147 0 -8 -4 -14 -8 -14
+-5 0 -9 -6 -9 -12 -1 -13 -67 -180 -83 -210 -5 -9 -23 -53 -40 -97 -35 -89
+-45 -102 -55 -69 -4 13 -15 41 -25 63 -9 22 -37 85 -60 140 -23 55 -51 119
+-61 142 -32 71 -42 98 -41 106 1 4 -3 7 -8 7 -6 0 -10 6 -10 14 0 7 -21 60
+-46 117 -58 133 -67 153 -69 159 0 3 -7 16 -15 30 -7 14 -13 26 -12 27 1 3
+-27 71 -59 140 -10 24 -19 45 -19 47 0 2 -10 25 -22 52 -12 27 -23 51 -23 54
+-3 8 -35 82 -61 138 -13 29 -24 55 -24 57 0 2 -11 28 -24 57 -13 29 -37 85
+-54 123 -16 39 -38 88 -48 110 -9 22 -18 42 -19 45 -4 12 -26 64 -44 103 -10
+23 -38 87 -61 142 -23 55 -50 118 -60 140 -9 22 -39 90 -65 150 -26 61 -50
+117 -54 125 -4 8 -36 83 -71 165 -35 83 -68 153 -74 157 -6 4 -8 8 -4 8 7 0
+-5 31 -49 130 -88 194 -164 384 -159 396 3 7 1 14 -5 14 -6 0 -6 7 1 19 7 13
+7 22 0 26 -7 4 -7 13 0 24 6 12 5 22 -1 28 -8 8 -7 17 0 32 8 15 9 21 1 21 -6
+0 -8 5 -5 11 10 15 12 79 3 79 -3 0 -3 14 2 30 5 17 6 30 2 30 -9 0 -8 53 2
+68 3 6 2 13 -4 17 -6 4 -8 11 -4 16 9 16 10 79 1 79 -4 0 -3 9 3 19 7 13 7 22
+0 26 -7 4 -7 13 0 24 6 12 5 22 -1 28 -8 8 -7 17 0 32 8 15 9 21 1 21 -6 0 -8
+5 -5 11 9 13 12 79 5 79 -7 0 -4 59 3 67 4 3 2 12 -4 19 -7 8 -7 14 1 19 23
+14 -15 45 -162 130 -84 49 -155 88 -157 86 -2 -1 -7 1 -10 6 -9 12 -42 32 -73
+44 -16 6 -28 15 -28 19 0 5 -9 11 -19 15 -11 3 -84 44 -164 90 -80 47 -150 85
+-156 85 -6 0 -11 3 -11 8 0 4 -17 16 -37 27 -42 22 -335 189 -370 211 -13 8
+-26 15 -30 15 -5 1 -19 10 -32 20 -13 11 -30 19 -37 19 -8 0 -14 4 -14 9 0 5
+-16 15 -35 22 -19 7 -35 16 -35 20 0 4 -8 9 -17 13 -10 3 -27 11 -38 18 -50
+33 -126 78 -130 78 -3 0 -76 41 -162 92 -87 50 -176 101 -197 112 -22 12 -45
+25 -50 29 -26 20 -176 105 -176 100 0 -4 -8 1 -17 9 -20 17 -146 88 -156 88
+-4 0 -7 -4 -7 -9z"/>
+</g>
+</svg>
--- a/website/source/assets/images/footer_background.png
+++ b/website/source/assets/images/footer_background.png
--- a/website/source/assets/images/footer_hashi_logo.png
+++ b/website/source/assets/images/footer_hashi_logo.png
--- a/website/source/assets/images/footer_vagrant_logo.png
+++ b/website/source/assets/images/footer_vagrant_logo.png
--- a/website/source/assets/images/get_started_background.png
+++ b/website/source/assets/images/get_started_background.png
--- a/website/source/assets/images/icon_caution.png
+++ b/website/source/assets/images/icon_caution.png
--- a/website/source/assets/images/logo-header.png
+++ b/website/source/assets/images/logo-header.png
--- a/website/source/assets/images/logo-header.svg
+++ b/website/source/assets/images/logo-header.svg
@ -1,58 +0,0 @@
-
-<svg width="151px" height="45px" viewBox="325 -169 231 69" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <desc>HashiCorp Vagrant</desc>
-    <defs>
-        <polygon id="path-1" points="15.406 30.5511 15.406 0.0681 0.0451 0.0681 0.0451 30.5511 15.406 30.5511"></polygon>
-        <polygon id="path-3" points="0.8845 63 33.7715 63 33.7715 0.2315 0.8845 0.2315 0.8845 63"></polygon>
-        <polygon id="path-5" points="11.96035 0 0 0 0 13.918 23.9207 13.918 23.9207 0 11.96035 0"></polygon>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(325.000000, -169.000000)">
-        <polygon id="Fill-1" fill="#000000" points="104.9843 20.1001 111.2723 20.1001 101.7193 52.0711 92.7913 52.0711 83.2383 20.1001 89.5263 20.1001 97.2553 46.7431"></polygon>
-        <g id="Group-54">
-            <path d="M124.8076,43.2378 L120.4866,43.2378 C118.5666,43.2378 118.0386,43.7658 118.0386,45.5428 C118.0386,47.1748 118.5666,47.8938 120.3906,47.8938 C122.1196,47.8938 123.7036,47.3188 124.8076,46.6948 L124.8076,43.2378 Z M130.6636,52.0708 L125.8636,52.0708 L125.4316,50.4868 C123.3196,51.8788 120.8236,52.5508 118.4706,52.5508 C114.1986,52.5508 112.3736,49.6228 112.3736,45.5908 C112.3736,40.8378 114.4386,39.0128 119.1906,39.0128 L124.8076,39.0128 L124.8076,36.5658 C124.8076,33.9728 124.0866,33.0608 120.3426,33.0608 C118.2306,33.0608 115.9266,33.3488 113.8626,33.7808 L113.1426,29.3168 C115.3506,28.6448 118.5666,28.2128 121.1596,28.2128 C128.5036,28.2128 130.6636,30.8048 130.6636,36.6618 L130.6636,52.0708 Z" id="Fill-2" fill="#000000"></path>
-            <path d="M143.1914,32.9175 C140.3104,32.9175 139.3024,33.9735 139.3024,36.1815 L139.3024,37.9575 C139.3024,40.2625 140.4554,41.1255 143.1914,41.1255 C145.9754,41.1255 147.1274,40.2135 147.1274,37.9575 L147.1274,36.1815 C147.1274,33.9735 146.1194,32.9175 143.1914,32.9175 M141.8464,45.7825 C141.0794,46.2625 140.4554,46.9345 140.4554,47.6545 C140.4554,48.2785 140.8384,48.5665 141.7514,48.6625 C144.3424,48.9505 145.7834,49.0945 148.5194,49.3825 C152.3114,49.8145 153.5114,51.6875 153.5114,55.0475 C153.5114,60.0395 151.6874,62.0075 142.9514,62.0075 C140.2624,62.0075 136.5664,61.6235 133.9254,60.8075 L134.6464,56.4385 C137.1424,57.0635 139.7834,57.4465 142.5184,57.4465 C147.1754,57.4465 148.0874,57.1105 148.0874,55.5745 C148.0874,54.1355 147.6554,53.8955 145.8794,53.7025 C143.1914,53.4145 142.0874,53.2715 139.1104,52.9355 C135.7984,52.5515 134.5024,51.4465 134.5024,48.4705 C134.5024,46.5505 135.7984,45.3025 136.9504,44.4855 C134.7904,43.1895 133.7824,41.0295 133.7824,38.1975 L133.7824,35.9895 C133.8784,31.1415 136.4224,28.2125 143.1914,28.2125 C144.7754,28.2125 146.0234,28.4045 147.1754,28.6925 L154.3764,28.6925 L154.3764,31.6205 C153.5594,31.8605 152.5994,32.1015 151.7844,32.3415 C152.3114,33.3495 152.5994,34.6455 152.5994,35.9895 L152.5994,38.1975 C152.5994,42.9495 149.7194,45.8305 143.1914,45.8305 C142.7114,45.8305 142.2794,45.8305 141.8464,45.7825" id="Fill-4" fill="#000000"></path>
-            <path d="M169.0634,33.5893 C166.8074,34.5973 164.9834,35.6533 162.8714,36.9973 L162.8714,52.0703 L157.0144,52.0703 L157.0144,28.6933 L161.9594,28.6933 L162.3424,31.2843 C163.6384,30.4213 166.4224,28.7883 168.4874,28.2123 L169.0634,33.5893 Z" id="Fill-6" fill="#000000"></path>
-            <path d="M182.791,43.2378 L178.47,43.2378 C176.55,43.2378 176.022,43.7658 176.022,45.5428 C176.022,47.1748 176.55,47.8938 178.374,47.8938 C180.103,47.8938 181.687,47.3188 182.791,46.6948 L182.791,43.2378 Z M188.647,52.0708 L183.847,52.0708 L183.415,50.4868 C181.303,51.8788 178.807,52.5508 176.454,52.5508 C172.182,52.5508 170.357,49.6228 170.357,45.5908 C170.357,40.8378 172.422,39.0128 177.174,39.0128 L182.791,39.0128 L182.791,36.5658 C182.791,33.9728 182.07,33.0608 178.326,33.0608 C176.214,33.0608 173.91,33.3488 171.846,33.7808 L171.126,29.3168 C173.334,28.6448 176.55,28.2128 179.143,28.2128 C186.487,28.2128 188.647,30.8048 188.647,36.6618 L188.647,52.0708 Z" id="Fill-8" fill="#000000"></path>
-            <path d="M207.0312,52.0708 L207.0312,35.7498 C207.0312,34.5018 206.5032,33.8778 205.1592,33.8778 C203.7182,33.8778 201.1752,34.7418 199.0622,35.8448 L199.0622,52.0708 L193.2062,52.0708 L193.2062,28.6928 L197.6702,28.6928 L198.2462,30.6608 C201.1752,29.2208 204.8712,28.2128 207.6072,28.2128 C211.4952,28.2128 212.8872,30.9488 212.8872,35.1258 L212.8872,52.0708 L207.0312,52.0708 Z" id="Fill-10" fill="#000000"></path>
-            <g id="Group-14" transform="translate(215.000000, 22.000000)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <g id="Clip-13"></g>
-                <path d="M15.1181,29.6391 C13.8701,30.1661 11.4701,30.5511 9.9811,30.5511 C5.7101,30.5511 3.5501,28.5351 3.5501,24.3581 L3.5501,11.3491 L0.0451,11.3491 L0.0451,6.6931 L3.5501,6.6931 L3.5501,0.8841 L9.4061,0.0681 L9.4061,6.6931 L15.4061,6.6931 L15.0221,11.3491 L9.4061,11.3491 L9.4061,23.5901 C9.4061,24.8381 9.9811,25.6551 11.5171,25.6551 C12.3821,25.6551 13.4381,25.4621 14.4461,25.1741 L15.1181,29.6391 Z" id="Fill-12" fill="#000000" mask="url(#mask-2)"></path>
-            </g>
-            <g id="Group-17" transform="translate(32.000000, 5.000000)">
-                <mask id="mask-4" fill="white">
-                    <use xlink:href="#path-3"></use>
-                </mask>
-                <g id="Clip-16"></g>
-                <polygon id="Fill-15" fill="#1159CC" mask="url(#mask-4)" points="33.7715 6.4595 33.7715 0.2315 18.8235 8.9285 18.8235 14.1835 6.8655 39.9855 0.8845 44.1055 0.8845 63.0005 13.7025 55.6095"></polygon>
-            </g>
-            <g id="Group-20" transform="translate(0.000000, 5.000000)" fill="#127EFF">
-                <polygon id="Fill-18" points="14.9482 14.1831 14.9482 8.9291 0.0002 0.2321 0.0002 6.6471 5.9392 21.0701 8.9692 22.7801 8.9692 28.4281 20.1842 55.6671 32.8852 63.0001 32.8852 44.1061 26.9062 41.1171"></polygon>
-            </g>
-            <polygon id="Fill-21" fill="#127EFF" points="41.8545 8.7466 41.8545 14.7256 38.6725 21.7016 35.5645 29.1786 32.8845 35.6526 32.8845 43.1606 32.8845 43.1276 38.7685 46.1166 50.8235 19.1836 50.8235 13.9286"></polygon>
-            <polygon id="Fill-23" fill="#1159CC" points="32.8847 35.6528 23.9167 14.7258 23.9167 8.8098 23.8547 8.7778 14.9477 13.9288 14.9477 19.1828 26.9057 46.1168 32.8847 43.1608"></polygon>
-            <polygon id="Fill-25" fill="#127EFF" points="32.8847 42.6489 26.9057 46.1169 32.8847 49.5849 38.8647 46.1169"></polygon>
-            <g id="Group-29">
-                <mask id="mask-6" fill="white">
-                    <use xlink:href="#path-5"></use>
-                </mask>
-                <g id="Clip-28"></g>
-                <polygon id="Fill-27" fill="#127EFF" mask="url(#mask-6)" points="8.9687 0 -0.0003 5.232 14.9477 13.918 23.9207 8.756"></polygon>
-            </g>
-            <polygon id="Fill-30" fill="#127EFF" points="56.8056 0 65.7746 5.232 50.8266 13.918 41.8536 8.756"></polygon>
-            <polygon id="Fill-32" fill="#3E96FF" points="32.8847 59.0679 29.8967 60.8009 32.8847 62.5359 35.8747 60.8009"></polygon>
-            <polygon id="Fill-34" fill="#0E65E5" points="29.8965 60.7856 32.8845 59.0566 32.8845 55.5896 29.8965 57.3176"></polygon>
-            <polygon id="Fill-36" fill="#0D59B5" points="35.875 60.7856 32.885 59.0566 32.885 55.5896 35.875 57.3176"></polygon>
-            <polygon id="Fill-38" fill="#3E96FF" points="49.4736 35.7212 49.4426 38.8722 52.1596 37.2972"></polygon>
-            <polygon id="Fill-40" fill="#0D59B5" points="52.1591 37.2827 49.4421 35.7117 52.1591 34.1317"></polygon>
-            <polygon id="Fill-42" fill="#3E96FF" points="6.6259 9.2412 3.6019 10.9752 6.5919 12.7092"></polygon>
-            <polygon id="Fill-44" fill="#0E65E5" points="3.6015 10.9595 6.5915 9.2305 6.5915 5.7625 3.6015 7.4915"></polygon>
-            <polygon id="Fill-46" fill="#0D59B5" points="6.5918 9.2305 6.5918 5.7625 9.5808 7.4915"></polygon>
-            <polygon id="Fill-48" fill="#3E96FF" points="22.7695 34.3379 19.7465 36.0719 22.7355 37.8049 25.7245 36.0719"></polygon>
-            <polygon id="Fill-50" fill="#0E65E5" points="19.7461 36.0561 22.7351 34.3271 22.7351 28.2001 19.7461 29.9291"></polygon>
-            <polygon id="Fill-52" fill="#0D59B5" points="25.7246 36.0561 22.7356 34.3271 22.7356 28.2001 25.7246 29.9291"></polygon>
-        </g>
-    </g>
-</svg>
--- a/website/source/assets/images/logo-header@2x.png
+++ b/website/source/assets/images/logo-header@2x.png
--- a/website/source/assets/images/logo-text.svg
+++ b/website/source/assets/images/logo-text.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230.4 68">
+  <path class="front" d="M65.8,11.5V5.2l-15,8.7v5.3l-12,26.6-5.9,3.3V68l12.8-7.4ZM14.9,13.9v5.3l12,26.9,6-2.9V35.7l-9-21V8.8L9,0,0,5.2Z" />
+  <polygon class="shadow" points="32.9 49.1 38.8 45.8 50.8 19.2 50.8 13.9 65.8 5.2 56.8 0 41.9 8.7 41.8 8.8 41.9 8.8 41.9 14.7 38.7 21.7 35.6 29.2 32.9 35.7 32.9 43.2 26.9 46.1 26.8 45.9 15 19.2 15 13.9 0 5.2 0 11.6 5.9 26.1 9 33.4 20.2 60.7 32.9 68 32.9 49.4 32.9 49.1"/>
+  <path class="text" d="M105,20.2h6.3l-9.6,32H92.8l-9.6-32h6.3l7.7,26.6Zm25.7,32h-4.8l-.4-1.6a12.74,12.74,0,0,1-7,2.1c-4.3,0-6.1-2.9-6.1-7,0-4.8,2.1-6.6,6.8-6.6h5.6V36.7c0-2.6-.7-3.5-4.5-3.5a35.9,35.9,0,0,0-6.5.7l-.7-4.5a29.18,29.18,0,0,1,8-1.1c7.3,0,9.5,2.6,9.5,8.4V52.2Zm-5.9-8.8h-4.3c-1.9,0-2.4.5-2.4,2.3,0,1.6.5,2.4,2.4,2.4a9.51,9.51,0,0,0,4.4-1.2V43.4Zm17,2.5a2.56,2.56,0,0,0-1.4,1.9c0,.6.4.9,1.3,1,2.6.3,4,.4,6.8.7,3.8.4,5,2.3,5,5.7,0,5-1.8,7-10.6,7a34.24,34.24,0,0,1-9-1.2l.7-4.4a33.5,33.5,0,0,0,7.9,1c4.7,0,5.6-.3,5.6-1.9,0-1.4-.4-1.7-2.2-1.9-2.7-.3-3.8-.4-6.8-.8-3.3-.4-4.6-1.5-4.6-4.5a5.07,5.07,0,0,1,2.4-4c-2.2-1.3-3.2-3.5-3.2-6.3V36c.1-4.8,2.6-7.8,9.4-7.8a15.59,15.59,0,0,1,4,.5h7.2v2.9c-.8.2-1.8.5-2.6.7a8.29,8.29,0,0,1,.8,3.6v2.2c0,4.8-2.9,7.6-9.4,7.6a1.48,1.48,0,0,1-1.3.2ZM143.2,33c-2.9,0-3.9,1.1-3.9,3.3v1.8c0,2.3,1.2,3.2,3.9,3.2s3.9-.9,3.9-3.2V36.3C147.1,34.1,146.1,33,143.2,33Zm25.9.7a46.46,46.46,0,0,0-6.2,3.4V52.2H157V28.8h4.9l.4,2.6a26.73,26.73,0,0,1,6.1-3.1l.7,5.4Zm19.5,18.5h-4.8l-.4-1.6a12.74,12.74,0,0,1-7,2.1c-4.3,0-6.1-2.9-6.1-7,0-4.8,2.1-6.6,6.8-6.6h5.6V36.7c0-2.6-.7-3.5-4.5-3.5a35.9,35.9,0,0,0-6.5.7l-.7-4.5a29.18,29.18,0,0,1,8-1.1c7.3,0,9.5,2.6,9.5,8.4V52.2Zm-5.8-8.8h-4.3c-1.9,0-2.4.5-2.4,2.3,0,1.6.5,2.4,2.4,2.4a9.51,9.51,0,0,0,4.4-1.2V43.4ZM207,52.2V35.9c0-1.2-.5-1.9-1.9-1.9a16.54,16.54,0,0,0-6.1,2V52.2h-5.9V28.8h4.5l.6,2a23.78,23.78,0,0,1,9.4-2.4c3.9,0,5.3,2.7,5.3,6.9V52.2H207Zm23.1-.4a16.51,16.51,0,0,1-5.1.9c-4.3,0-6.4-2-6.4-6.2v-13H215V28.8h3.5V23l5.9-.8v6.6h6l-.4,4.7h-5.6V45.7a1.9,1.9,0,0,0,2.1,2.1,10.4,10.4,0,0,0,2.9-.5l.7,4.5Z" />
+</svg>
--- a/website/source/assets/images/logo_docs.png
+++ b/website/source/assets/images/logo_docs.png
--- a/website/source/assets/images/logo_docs_small.png
+++ b/website/source/assets/images/logo_docs_small.png
--- a/website/source/assets/images/logo_large.png
+++ b/website/source/assets/images/logo_large.png
--- a/website/source/assets/images/logo_small.png
+++ b/website/source/assets/images/logo_small.png
--- a/website/source/assets/images/logo_vagrant.png
+++ b/website/source/assets/images/logo_vagrant.png
--- a/website/source/assets/images/open_close.png
+++ b/website/source/assets/images/open_close.png
--- a/website/source/assets/images/parity.svg
+++ b/website/source/assets/images/parity.svg
@ -0,0 +1,46 @@
+<svg viewBox="0 0 811 452" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <rect id="path-1" x="16.8776371" y="0" width="316.455696" height="210.970464"></rect>
+    <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="316.455696" height="210.970464" fill="white">
+      <use xlink:href="#path-1"></use>
+    </mask>
+    <rect id="path-3" x="0" y="0" width="123" height="192"></rect>
+    <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="123" height="192" fill="white">
+      <use xlink:href="#path-3"></use>
+    </mask>
+    <rect id="path-5" x="0" y="0" width="123" height="192"></rect>
+    <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="123" height="192" fill="white">
+      <use xlink:href="#path-5"></use>
+    </mask>
+  </defs>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="laptop" transform="translate(0.000000, 202.000000)">
+      <polygon id="Polygon" fill="#555555" points="350.670408 226.793249 254.219409 249.771311 95.9915612 249.771311 0 226.793249"></polygon>
+      <use id="Rectangle" stroke="#555555" mask="url(#mask-2)" stroke-width="30" xlink:href="#path-1"></use>
+    </g>
+    <g id="lines" transform="translate(340.000000, 96.000000)" stroke="#555555" stroke-width="15" stroke-linecap="square">
+      <path d="M185.5,1.5 L79.5,1.5" id="Line"></path>
+      <path d="M79.5,209.5 L0.5,209.5" id="Line"></path>
+      <path d="M79.5,209.5 L79.5,2.98255955" id="Line" transform="translate(79.500000, 106.000000) scale(-1, 1) translate(-79.500000, -106.000000) "></path>
+      <path d="M343.5,1.5 L318.5,1.5" id="Line"></path>
+    </g>
+    <g id="server" transform="translate(528.000000, 0.000000)">
+      <g>
+        <use id="Rectangle-2" stroke="#555555" mask="url(#mask-4)" stroke-width="10" xlink:href="#path-3"></use>
+        <path d="M24.5,25.5 L98.5,25.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <path d="M24.5,49.5 L98.5,49.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <path d="M47.5,74.5 L98.5,74.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <circle id="Oval" fill="#555555" cx="24.5" cy="74.5" r="7.5"></circle>
+      </g>
+    </g>
+    <g id="server" transform="translate(688.000000, 0.000000)">
+      <g>
+        <use id="Rectangle-2" stroke="#555555" mask="url(#mask-6)" stroke-width="10" xlink:href="#path-5"></use>
+        <path d="M24.5,25.5 L98.5,25.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <path d="M24.5,49.5 L98.5,49.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <path d="M47.5,74.5 L98.5,74.5" id="Line" stroke="#555555" stroke-width="15" stroke-linecap="square"></path>
+        <circle id="Oval" fill="#555555" cx="24.5" cy="74.5" r="7.5"></circle>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/website/source/assets/images/search_icon.png
+++ b/website/source/assets/images/search_icon.png
--- a/website/source/assets/images/sidebar_background_docs.png
+++ b/website/source/assets/images/sidebar_background_docs.png
--- a/website/source/assets/images/sidebar_background_inner.png
+++ b/website/source/assets/images/sidebar_background_inner.png
--- a/website/source/assets/images/sponsors/fastly.png
+++ b/website/source/assets/images/sponsors/fastly.png
--- a/website/source/assets/images/sponsors/kiip.png
+++ b/website/source/assets/images/sponsors/kiip.png
--- a/website/source/assets/images/sponsors/softlayer.jpg
+++ b/website/source/assets/images/sponsors/softlayer.jpg
--- a/website/source/assets/images/sponsors/typekit.png
+++ b/website/source/assets/images/sponsors/typekit.png
--- a/website/source/assets/images/steps_background.png
+++ b/website/source/assets/images/steps_background.png
--- a/website/source/assets/images/systems/apple.svg
+++ b/website/source/assets/images/systems/apple.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 150">
+  <path d="M124.47 116.895c-2.268 5.24-4.954 10.064-8.065 14.5-4.24 6.045-7.712 10.23-10.388 12.554-4.148 3.814-8.593 5.768-13.352 5.88-3.416 0-7.536-.973-12.333-2.946-4.81-1.963-9.234-2.935-13.277-2.935-4.24 0-8.79.97-13.653 2.934-4.872 1.973-8.797 3-11.798 3.102-4.564.195-9.113-1.815-13.653-6.037-2.897-2.528-6.522-6.862-10.865-13-4.66-6.556-8.49-14.157-11.49-22.824C2.38 98.766.77 89.7.77 80.926c0-10.053 2.172-18.723 6.523-25.99 3.42-5.835 7.968-10.438 13.662-13.818 5.693-3.38 11.845-5.102 18.47-5.212 3.624 0 8.378 1.122 14.285 3.325 5.89 2.212 9.673 3.333 11.33 3.333 1.24 0 5.443-1.31 12.566-3.924 6.736-2.425 12.42-3.43 17.078-3.034 12.62 1.02 22.1 5.994 28.406 14.956-11.286 6.84-16.87 16.417-16.758 28.705.1 9.57 3.574 17.536 10.397 23.86 3.092 2.935 6.546 5.203 10.388 6.814-.833 2.418-1.713 4.732-2.648 6.955zM95.526 3c0 7.502-2.74 14.506-8.203 20.99-6.592 7.706-14.566 12.16-23.213 11.457-.11-.9-.174-1.847-.174-2.843 0-7.2 3.135-14.908 8.702-21.21 2.78-3.19 6.315-5.844 10.602-7.96C87.517 1.35 91.564.196 95.37 0c.11 1.002.156 2.005.156 3z"/>
+</svg>
--- a/website/source/assets/images/systems/linux.svg
+++ b/website/source/assets/images/systems/linux.svg
--- a/website/source/assets/images/systems/windows.svg
+++ b/website/source/assets/images/systems/windows.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
+  <path d="M0 21.387l61.34-8.39v59.075H0m68.73-60.24L150 0v71.575H68.73M0 78.322h61.34v59.246L0 129.008M68.73 79.11H150V150l-81.27-11.473"/>
+</svg>
--- a/website/source/assets/images/vagrant_header_background.png
+++ b/website/source/assets/images/vagrant_header_background.png
--- a/website/source/assets/images/vagrant_vmware_background.png
+++ b/website/source/assets/images/vagrant_vmware_background.png
--- a/website/source/assets/images/vmware.svg
+++ b/website/source/assets/images/vmware.svg
@ -0,0 +1,33 @@
+<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.25 31">
+<g transform="matrix(1.25, 0, 0, -1.25, -375.855, 370.03)">
+  <defs>
+    <rect x="-193.841" y="-199.548" width="956.25" height="1237.498"/>
+  </defs>
+  <clipPath>
+    <use xlink:href="#SVGID_1_" overflow="visible"/>
+  </clipPath>
+  <g clip-path="url(#SVGID_2_)">
+    <g transform="translate(388.349, 250.856)">
+      <path fill="#696566" d="M-21.716,23.2l-6.571,18.298c-0.084,0.253-0.209,0.587-0.209,0.88        c0,0.793,0.67,1.546,1.63,1.546c0.838,0,1.384-0.544,1.634-1.337l5.445-15.767l5.484,15.811        c0.25,0.75,0.753,1.294,1.586,1.294h0.17c0.881,0,1.425-0.544,1.675-1.294l5.439-15.811l5.531,15.85        c0.209,0.673,0.666,1.255,1.548,1.255c0.92,0,1.591-0.708,1.591-1.505c0-0.292-0.127-0.625-0.209-0.88L-3.585,23.2        c-0.338-0.958-1.005-1.461-1.76-1.461H-5.47c-0.838,0-1.467,0.503-1.762,1.461l-5.397,15.549L-18.073,23.2        c-0.293-0.958-0.923-1.461-1.758-1.461h-0.088C-20.712,21.739-21.379,22.242-21.716,23.2"/>
+    </g>
+    <g transform="translate(436.249, 269.985)">
+      <path fill="#696566" d="M-21.717,23.2c0,0.883,0.712,1.637,1.591,1.637c0.927,0,1.637-0.713,1.637-1.637v-3.713        c1.592,3.606,5.123,5.308,7.463,5.308c0.969,0,1.598-0.712,1.598-1.634c0-0.882-0.584-1.508-1.43-1.634        c-4.195-0.503-7.63-3.65-7.63-9.9V4.274c0-0.881-0.67-1.634-1.592-1.634c-0.923,0-1.636,0.716-1.636,1.634L-21.717,23.2        L-21.717,23.2z"/>
+    </g>
+    <g transform="translate(458.898, 249.221)">
+      <path fill="#696566" d="M-21.716,23.2c-5.837,0-10.603,4.527-10.603,11.166v0.086        c0,6.183,4.316,11.164,10.192,11.164c6.283,0,9.861-5.184,9.861-10.873c0-0.874-0.705-1.499-1.481-1.499h-15.362        c0.448-4.645,3.692-7.259,7.477-7.259c2.631,0,4.556,1.038,6.12,2.491c0.247,0.205,0.534,0.371,0.906,0.371        c0.778,0,1.397-0.623,1.397-1.373c0-0.372-0.164-0.747-0.497-1.034C-15.717,24.491-18.103,23.2-21.716,23.2 M-15.43,35.611        c-0.33,3.905-2.55,7.305-6.783,7.305c-3.698,0-6.492-3.111-6.898-7.305H-15.43z"/>
+    </g>
+    <g transform="translate(413.36, 255.941)">
+      <path fill="#696566" d="M-21.717,23.2v0.084c0,4.556,3.764,6.984,9.239,6.984c2.761,0,4.725-0.376,6.652-0.923        v0.756c0,3.885-2.39,5.895-6.441,5.895c-2.175,0-3.441-0.277-5.033-0.986c-0.206-0.084-0.417-0.127-0.58-0.127        c-0.753,0-1.425,0.629-1.425,1.38c0,0.667,0.291,1.08,0.88,1.341c2.129,0.924,3.734,1.231,6.492,1.231        c3.05,0,5.392-0.792,6.978-2.382c1.466-1.463,2.219-3.553,2.219-6.314V18.211c0-0.917-0.669-1.588-1.552-1.588        c-0.916,0-1.537,0.67-1.537,1.505v2.062c-1.508-1.969-4.019-3.722-7.816-3.722C-17.657,16.471-21.717,18.768-21.717,23.2         M-5.785,24.873v2.091c-1.592,0.459-3.727,0.92-6.359,0.92c-4.05,0-6.311-1.758-6.311-4.473v-0.083        c0-2.717,2.506-4.306,5.436-4.306C-9.049,19.022-5.785,21.448-5.785,24.873"/>
+    </g>
+    <g transform="translate(329.779, 270.223)">
+      <path fill="#696566" d="M-21.716,23.2c-0.708,1.552-2.458,2.255-4.092,1.529        c-1.636-0.727-2.238-2.541-1.499-4.094l6.861-14.913c1.079-2.337,2.216-3.562,4.35-3.562c2.28,0,3.274,1.334,4.352,3.562        c0,0,5.984,13.03,6.044,13.166c0.061,0.138,0.253,0.559,0.862,0.555c0.515-0.003,0.948-0.414,0.948-0.966V5.735        c0-1.964,1.089-3.575,3.185-3.575c2.094,0,3.226,1.611,3.226,3.575v10.427c0,2.011,1.441,3.316,3.405,3.316        s3.271-1.352,3.271-3.316V5.735c0-1.964,1.093-3.575,3.185-3.575c2.094,0,3.232,1.611,3.232,3.575v10.427        c0,2.011,1.435,3.316,3.4,3.316c1.961,0,3.273-1.352,3.273-3.316V5.735c0-1.964,1.092-3.575,3.186-3.575        c2.093,0,3.229,1.611,3.229,3.575v11.867c0,4.361-3.507,7.416-7.727,7.416c-4.215,0-6.855-2.916-6.855-2.916        c-1.403,1.819-3.337,2.912-6.61,2.912c-3.454,0-6.477-2.912-6.477-2.912c-1.404,1.819-3.794,2.912-5.773,2.912        c-3.061,0-5.492-1.346-6.975-4.737l-4.381-10.327L-21.716,23.2z"/>
+    </g>
+    <g transform="translate(468.609, 268.931)">
+      <path fill="#696566" d="M-21.716,23.2v0.018c0,1.459,1.184,2.688,2.672,2.688c1.509,0,2.677-1.216,2.677-2.677        v-0.011c0-1.464-1.181-2.693-2.677-2.693C-20.553,20.525-21.716,21.737-21.716,23.2 M-16.881,23.218v0.007        c0,1.2-0.927,2.184-2.163,2.184c-1.225,0-2.166-1.001-2.166-2.191v-0.014c0-1.197,0.93-2.181,2.166-2.181        C-17.823,21.023-16.881,22.022-16.881,23.218"/>
+    </g>
+    <g transform="translate(470.257, 270.007)">
+      <path fill="#696566" d="M-21.715,23.2c0,0.159,0.127,0.286,0.288,0.286h0.892c0.336,0,0.595-0.095,0.756-0.265        c0.147-0.143,0.227-0.35,0.227-0.59v-0.008c0-0.408-0.206-0.657-0.517-0.788l0.394-0.48c0.055-0.072,0.092-0.131,0.092-0.219        c0-0.158-0.134-0.262-0.27-0.262c-0.127,0-0.213,0.065-0.28,0.147l-0.555,0.702h-0.455v-0.564        c0-0.159-0.123-0.284-0.283-0.284c-0.161,0-0.288,0.126-0.288,0.284V23.2z M-20.567,22.228c0.278,0,0.431,0.145,0.431,0.366        v0.009c0,0.241-0.164,0.371-0.441,0.371h-0.569v-0.745H-20.567z"/>
+    </g>
+  </g>
+</g>
+</svg>
--- a/website/source/assets/javascripts/_vmware.js
+++ b/website/source/assets/javascripts/_vmware.js
@ -0,0 +1,47 @@
+var HashiVMware = function() {
+  var selectedProduct = "";
+
+  var $buyButton = $('#buy-fusion');
+  var $products = $('#buy-now input[name=product]');
+
+  function setSelectedProduct() {
+    selectedProduct = $("input[name=product]:checked").val();
+  }
+
+  $products.unbind().on('change', function() {
+    setSelectedProduct();
+
+    var text = selectedProduct.charAt(0).toUpperCase() + selectedProduct.slice(1);
+  });
+
+  $buyButton.unbind().on('click', function(e) {
+    e.preventDefault();
+
+    var seats = parseInt($("#seats").val(), 10);
+    if (isNaN(seats)) {
+      alert("The number of seats you want to purchase must be a number.");
+      return;
+    } else if (seats <= 0) {
+      alert("The number of seats you want must be greater than zero.");
+      return;
+    }
+
+    var productId = "";
+    if (selectedProduct == "fusion") {
+      productId = "279661674";
+    } else if (selectedProduct == "workstation") {
+      productId = "302167489";
+    } else {
+      alert("Unknown product selected. Please refresh and try again.");
+      return;
+    }
+
+    window.location = "http://shopify.hashicorp.com/cart/" + productId + ":" + seats;
+  });
+
+  if ($buyButton.length > 0) {
+    setSelectedProduct();
+  }
+}
+
+$(document).on('ready turbolinks:load', HashiVMware)
--- a/website/source/assets/javascripts/app/_app.js
+++ b/website/source/assets/javascripts/app/_app.js
@ -1,16 +0,0 @@
-//
-// app.js
-//
-
-var APP = (function() {
-
-  function initialize() {
-    new Sidebar();
-  }
-
-  //api
-  return {
-    initialize: initialize
-  }
-
-})();
--- a/website/source/assets/javascripts/app/_docs.js
+++ b/website/source/assets/javascripts/app/_docs.js
@ -1,48 +0,0 @@
-(function(){
-
-  var mainContentMin = 600;
-
-  var Init = {
-
-    start: function(){
-      var classname = this.hasClass(document.body, 'page-sub');
-
-      if (classname) {
-        this.addEventListeners();
-      }
-    },
-
-    hasClass: function (elem, className) {
-      return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
-    },
-
-    addEventListeners: function(){
-      var _this = this;
-      //console.log(document.querySelectorAll('.navbar-static-top')[0]);
-      window.addEventListener('resize', _this.resizeImage, false);
-
-      this.resizeImage();
-    },
-
-    resizeImage: function(){
-
-      var header = document.getElementById('header'),
-          footer = document.getElementById('footer'),
-          main = document.getElementById('main-content'),
-          vp = window.innerHeight,
-          bodyHeight = document.body.clientHeight,
-          hHeight = header.clientHeight,
-          fHeight = footer.clientHeight,
-          withMinHeight = hHeight + fHeight + mainContentMin;
-
-      if(withMinHeight <  vp &&  bodyHeight < vp){
-        var newHeight = mainContentMin + (vp-withMinHeight) + 'px';
-        main.style.height = newHeight;
-      }
-    }
-
-  };
-
-  Init.start();
-
-})();
--- a/website/source/assets/javascripts/app/_sidebar.js
+++ b/website/source/assets/javascripts/app/_sidebar.js
@ -1,50 +0,0 @@
-(function(){
-
-  Sidebar = Base.extend({
-
-    $body: null,
-    $overlay: null,
-    $sidebar: null,
-    $sidebarHeader: null,
-    $sidebarImg: null,
-    $toggleButton: null,
-
-    constructor: function(){
-      this.$body = $('body');
-      this.$overlay = $('.sidebar-overlay');
-      this.$sidebar = $('#sidebar');
-      this.$sidebarHeader = $('#sidebar .sidebar-header');
-      this.$toggleButton = $('.navbar-toggle');
-      this.sidebarImg = this.$sidebarHeader.css('background-image');
-
-      this.addEventListeners();
-    },
-
-    addEventListeners: function(){
-      var _this = this;
-
-      _this.$toggleButton.on('click', function() {
-        _this.$sidebar.toggleClass('open');
-        if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
-          _this.$overlay.addClass('active');
-          _this.$body.css('overflow', 'hidden');
-        } else {
-          _this.$overlay.removeClass('active');
-          _this.$body.css('overflow', 'auto');
-        }
-
-        return false;
-      });
-
-      _this.$overlay.on('click', function() {
-        $(this).removeClass('active');
-        _this.$body.css('overflow', 'auto');
-        _this.$sidebar.removeClass('open');
-      });
-    }
-
-  });
-
-  window.Sidebar = Sidebar;
-
-})();
--- a/website/source/assets/javascripts/app/_util.js
+++ b/website/source/assets/javascripts/app/_util.js
@ -1,33 +0,0 @@
-//
-// util.js
-//
-var APP = APP || {};
-
-APP.Utils =  (function () {
-  return {
-    //check for mobile user agents
-    isMobile : (function(){
-      if( navigator.userAgent.match(/Android/i)
-      || navigator.userAgent.match(/webOS/i)
-      || navigator.userAgent.match(/iPhone/i)
-      //|| navigator.userAgent.match(/iPad/i)
-      || navigator.userAgent.match(/iPod/i)
-      || navigator.userAgent.match(/BlackBerry/i)
-      || navigator.userAgent.match(/Windows Phone/i)
-    ){
-      return true;
-    }
-    else {
-      return false;
-    }
-  })(),
-
-  runIfClassNamePresent: function(selector, initFunction) {
-    var elms = document.getElementsByClassName(selector);
-    if (elms.length > 0) {
-      initFunction();
-    }
-  }
-}
-
-}());
--- a/website/source/assets/javascripts/application.js
+++ b/website/source/assets/javascripts/application.js
@ -1,56 +1,7 @@
 //= require jquery
-//= require bootstrap
-
-//= require lib/_Base
+//= require turbolinks

 //= require hashicorp/mega-nav
+//= require hashicorp/sidebar

-//= require app/_app
-//= require app/_docs
-//= require app/_sidebar
-//= require app/_util
-
-//= require_self
-
-// Redirect to the proper checkout screen for quantity
-$(document).ready(function() {
-  var selectedProduct = "";
-
-  function setSelectedProduct() {
-    selectedProduct = $("input[name=product]:checked").val();
-  }
-
-  $(".buy-form input[name=product]").change(function() {
-    setSelectedProduct();
-
-    var text = selectedProduct.charAt(0).toUpperCase() + selectedProduct.slice(1);
-    $("#buy-fusion").text("Buy " + text + " Licenses Now");
-  });
-
-  $("#buy-fusion").click(function() {
-    var seats = parseInt($("#seats").val(), 10);
-    if (isNaN(seats)) {
-      alert("The number of seats you want to purchase must be a number.");
-      return;
-    } else if (seats <= 0) {
-      alert("The number of seats you want must be greater than zero.");
-      return;
-    }
-
-    var productId = "";
-    if (selectedProduct == "fusion") {
-      productId = "279661674";
-    } else if (selectedProduct == "workstation") {
-      productId = "302167489";
-    } else {
-      alert("Unknown product selected. Please refresh and try again.");
-      return;
-    }
-
-    window.location = "http://shopify.hashicorp.com/cart/" + productId + ":" + seats;
-  });
-
-  if ($("#buy-fusion").length > 0) {
-    setSelectedProduct();
-  }
-});
+//= require _vmware
--- a/website/source/assets/javascripts/lib/_Base.js
+++ b/website/source/assets/javascripts/lib/_Base.js
@ -1,145 +0,0 @@
-/*
-  Based on Base.js 1.1a (c) 2006-2010, Dean Edwards
-  Updated to pass JSHint and converted into a module by Kenneth Powers
-  License: http://www.opensource.org/licenses/mit-license.php
-*/
-/*global define:true module:true*/
-/*jshint eqeqeq:true*/
-(function (name, global, definition) {
-  if (typeof module !== 'undefined') {
-    module.exports = definition();
-  } else if (typeof define !== 'undefined' && typeof define.amd === 'object') {
-    define(definition);
-  } else {
-    global[name] = definition();
-  }
-})('Base', this, function () {
-  // Base Object
-  var Base = function () {};
-
-  // Implementation
-  Base.extend = function (_instance, _static) { // subclass
-    var extend = Base.prototype.extend;
-    // build the prototype
-    Base._prototyping = true;
-    var proto = new this();
-    extend.call(proto, _instance);
-    proto.base = function () {
-      // call this method from any other method to invoke that method's ancestor
-    };
-    delete Base._prototyping;
-    // create the wrapper for the constructor function
-    //var constructor = proto.constructor.valueOf(); //-dean
-    var constructor = proto.constructor;
-    var klass = proto.constructor = function () {
-        if (!Base._prototyping) {
-          if (this._constructing || this.constructor === klass) { // instantiation
-            this._constructing = true;
-            constructor.apply(this, arguments);
-            delete this._constructing;
-          } else if (arguments[0] !== null) { // casting
-            return (arguments[0].extend || extend).call(arguments[0], proto);
-          }
-        }
-      };
-    // build the class interface
-    klass.ancestor = this;
-    klass.extend = this.extend;
-    klass.forEach = this.forEach;
-    klass.implement = this.implement;
-    klass.prototype = proto;
-    klass.toString = this.toString;
-    klass.valueOf = function (type) {
-      return (type === 'object') ? klass : constructor.valueOf();
-    };
-    extend.call(klass, _static);
-    // class initialization
-    if (typeof klass.init === 'function') klass.init();
-    return klass;
-  };
-
-  Base.prototype = {
-    extend: function (source, value) {
-      if (arguments.length > 1) { // extending with a name/value pair
-        var ancestor = this[source];
-        if (ancestor && (typeof value === 'function') && // overriding a method?
-        // the valueOf() comparison is to avoid circular references
-        (!ancestor.valueOf || ancestor.valueOf() !== value.valueOf()) && /\bbase\b/.test(value)) {
-          // get the underlying method
-          var method = value.valueOf();
-          // override
-          value = function () {
-            var previous = this.base || Base.prototype.base;
-            this.base = ancestor;
-            var returnValue = method.apply(this, arguments);
-            this.base = previous;
-            return returnValue;
-          };
-          // point to the underlying method
-          value.valueOf = function (type) {
-            return (type === 'object') ? value : method;
-          };
-          value.toString = Base.toString;
-        }
-        this[source] = value;
-      } else if (source) { // extending with an object literal
-        var extend = Base.prototype.extend;
-        // if this object has a customized extend method then use it
-        if (!Base._prototyping && typeof this !== 'function') {
-          extend = this.extend || extend;
-        }
-        var proto = {
-          toSource: null
-        };
-        // do the "toString" and other methods manually
-        var hidden = ['constructor', 'toString', 'valueOf'];
-        // if we are prototyping then include the constructor
-        for (var i = Base._prototyping ? 0 : 1; i < hidden.length; i++) {
-          var h = hidden[i];
-          if (source[h] !== proto[h])
-            extend.call(this, h, source[h]);
-        }
-        // copy each of the source object's properties to this object
-        for (var key in source) {
-          if (!proto[key]) extend.call(this, key, source[key]);
-        }
-      }
-      return this;
-    }
-  };
-
-  // initialize
-  Base = Base.extend({
-    constructor: function () {
-      this.extend(arguments[0]);
-    }
-  }, {
-    ancestor: Object,
-    version: '1.1',
-    forEach: function (object, block, context) {
-      for (var key in object) {
-        if (this.prototype[key] === undefined) {
-          block.call(context, object[key], key, object);
-        }
-      }
-    },
-    implement: function () {
-      for (var i = 0; i < arguments.length; i++) {
-        if (typeof arguments[i] === 'function') {
-          // if it is a function, call it
-          arguments[i](this.prototype);
-        } else {
-          // add the interface using the extend method
-          this.prototype.extend(arguments[i]);
-        }
-      }
-      return this;
-    },
-    toString: function () {
-      return String(this.valueOf());
-    }
-  });
-
-  // Return Base implementation
-  return Base;
-});
--- a/website/source/assets/stylesheets/_about.scss
+++ b/website/source/assets/stylesheets/_about.scss
@ -1,69 +0,0 @@
-body.layout-about,
-body.layout-vmware {
-  background: $vagrant-blue image-url("sidebar_background_inner.png") top left no-repeat;
-
-  >.container {
-    #main-content {
-      background-color: $white;
-      min-height: 800px;
-      padding: 0 40px 40px 40px;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -9999px;
-        right: 0;
-        border-left: none;
-        box-shadow: 9999px 0 0 $white;
-      }
-
-      > div {
-        position: relative;
-        z-index: 10;
-      }
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  body.layout-about,
-  body.layout-vmware {
-    >.container{
-      padding-left: 0;
-      padding-right: 0;
-
-      #main-content {
-        min-height: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  body.layout-about,
-  body.layout-vmware {
-    .equal-height {
-      display: inherit;
-    }
-  }
-}
-
-body.page-community {
-  .people {
-    margin-top: 30px;
-
-    .person {
-      margin-bottom: 40px;
-
-      h3 {
-        text-transform: none;
-      }
-
-      .bio {
-        padding-left: 150px;
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_buttons.scss
+++ b/website/source/assets/stylesheets/_buttons.scss
@ -1,97 +1,37 @@
-.no-hover-underline {
-  &:hover {
+.button {
+  background: $button-background;
+  border: 1px solid $button-font-color;
+  box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+  color: $button-font-color;
+  display: inline-block;
+  font-family: $button-font-family;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+  padding: 10px 30px;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  &:hover,
+  &:active,
+  &:focus {
    text-decoration: none;
  }
-}
-
-.button {
-  color: $white;
-  text-align: center;
-  background-color: $primary-button-color;
-  display: block;
-  padding: 15px 0;
-  margin-top: 20px !important;
-  text-decoration: none;
-  text-transform: uppercase;
-  font-size: 25px;
-  letter-spacing: 2px;
-
-  @include rounded;
-  @include hover;
-
-  &.inline-button {
-    background-color: $vagrant-blue;
-    padding: 5px 20px;
-    color: $white !important;
-    font-size: 15px;
-    letter-spacing: 1px;
-    @include rounded;
-
-    a,
-    a:hover,
-    a:focus, {
-      color: $white;
-      text-decoration: none;
-    }
-
-    &.next-button,
-    &.prev-button {
-      max-width: 33%;
-      white-space: nowrap;
-    }
-
-    &.next-button {
-      float: right;
-
-      &:before {
-        content: "Next:";
-        display: inline-block;
-        padding-right: 3px;
-      }
-
-      &:after {
-        content: "\00BB";
-        display: inline-block;
-        padding-left: 3px;
-      }
-    }
-
-    &.prev-button {
-      float: left;
-      &:before {
-        content: "\00AB\0020Previous: ";
-        display: inline-block;
-        padding-right: 3px;
-      }
-    }
-  }
-
-  &.white-button {
-    background: fade($white, 20%);
-
-    &:hover {
-      background: fade($white, 30%);
-    }
-  }
-
-  &.secondary-button {
-    background: $light-gray;
-
-    &:hover {
-      background: $purple;
-    }
-  }
-
-  &.with-carat span {
-    margin-right: -10px;
-  }

  &:hover {
-    background-color: $purple;
-    @include animate-background-color;
+    background: $button-font-color;
+    border: 1px solid $button-font-color;
+    color: $button-background;
  }

-  &.disabled {
-    background-color: $light-gray-background;
+  &.primary {
+    background: $button-primary-background;
+    border: 1px solid darken($button-primary-background, 5%);
+    color: $button-primary-font-color;
+
+    &:hover {
+      background: lighten($button-primary-background, 5%);
+    }
  }
 }
--- a/website/source/assets/stylesheets/_community.scss
+++ b/website/source/assets/stylesheets/_community.scss
@ -0,0 +1,22 @@
+#inner {
+  .people {
+    margin-top: 30px;
+
+    .person {
+      &:after {
+        display: block;
+        clear: both;
+        content: ' ';
+      }
+
+      img {
+        width: 125px;
+        margin: auto auto;
+      }
+
+      .bio {
+        padding-left: 150px;
+      }
+    }
+  }
+}
--- a/website/source/assets/stylesheets/_docs.scss
+++ b/website/source/assets/stylesheets/_docs.scss
@ -1,274 +1,75 @@
-body.layout-docs,
-body.layout-intro {
-  background: #0c5593 image-url("sidebar_background_docs.png") top left no-repeat;
-
-  #main-content {
-    background-color: $white;
-    min-height: 800px;
-    padding: 0 40px 40px 40px;
-  }
-
-  .equal-height {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display:         flex;
-  }
-
-  >.container {
-    #main-content {
-      min-height: 800px;
-      background-color: white;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -9999px;
-        right: 0;
-        border-left: none;
-        box-shadow: 9999px 0 0 white;
-      }
-
-      > div {
-        position: relative;
-        z-index: 10;
-      }
-    }
-  }
-}
-
-.docs-sidebar {
-  position: relative;
-  z-index: 20;
+#docs-sidebar {
  margin-bottom: 30px;
  margin-top: 50px;
-  margin-right: 4%;

-  a {
-    color: $white;
-  }
-
-  .docs-sidenav {
-    padding-top: 15px;
+  ul.nav.docs-sidenav {
+    display: block;
    padding-bottom: 15px;

-    :last-child{
-      border-bottom: none;
-    }
-
-    //all li > a
    li {
-      position: relative;
+      a {
+        color: $sidebar-link-color;
+        font-size: $sidebar-font-size;
+        padding: 10px 0 10px 15px;

-      > a {
-        color: $white;
-        @include transition( color 0.5s ease );
-      }
+        &:before {
+          color: $sidebar-link-color-active;
+          content: '\203A';
+          font-size: $font-size;
+          left: 0;
+          line-height: 100%;
+          opacity: 0.4;
+          position: absolute;

-      > a:hover,
-      > a:focus {
-        background-color: transparent !important;
-        color: rgba($white, 0.5);
-        @include transition( color 0.5s ease );
-      }
-    }
+          height: 100%;
+          width: 8px
+        }

+        &:focus,
+        &:hover {
+          background-color: transparent;
+          color: $sidebar-link-color-hover;

-    > li {
-      padding: 10px 0;
-      margin: 0 30px;
-      border-bottom: 1px solid rgba($white, 0.4);
-
-      >.nav {
-        li {
-          a {
-            color: $white;
+          &:before {
+            opacity: 1;
          }
        }
      }

-      &.active {
-        > a {
-          font-weight: bold;
-          -webkit-font-smoothing: antialiased;
-        }
-
-      .nav {
+      // For forcing sub-navs to appear - in the long term, this should not
+      // be a thing anymore...
+      > ul.nav-visible {
        display: block;
-
-        li.active a {
-          font-weight: $font-weight-b;
-        }
-
-        li a {
-          &:hover, &:focus {
-            text-decoration: none;
-            background-color: transparent !important;
-            color: rgba($white, 0.5);
-            @include transition( color 0.5s ease );
-          }
-        }
-
-        li.active .subnav {
-          display: block;
-
-          li a {
-            font-weight: normal;
-
-            &:hover {
-              text-decoration: none;
-            }
-          }
-
-          li.active a {
-            font-weight: $font-weight-b;
-          }
-        }
      }
    }

-    > a {
-      text-transform: uppercase;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-
-  .nav {
-    display: none;
-    margin-bottom: 15px;
-
-    > li {
-      margin-left: 20px;
-
+    li.active {
      > a {
-        -webkit-font-smoothing: antialiased;
-        padding: 6px 15px;
+        color: $sidebar-link-color-active;
+
+        &:before {
+          opacity: 1;
+        }
      }

-      .subnav {
-        display: none;
-        margin-bottom: 15px;
-        list-style: none;
+      // Open nested navigations
+      > ul.nav {
+        display: block;
+      }
+    }

-        > li {
-          padding: 6px 0;
+    // subnav
+    ul.nav {
+      display: none;
+      margin: 10px;

-          > a {
-            -webkit-font-smoothing: antialiased;
-          }
+      li {
+        margin-left: 10px;
+
+        a {
+          padding: 6px 15px;
        }
      }
    }
  }
 }
-}
-
-.bs-docs-section {
-  padding-top: 10px;
-  padding-left: 3%;
-  padding-bottom: 80px;
-
-  .lead {
-    margin-bottom: 48px
-  }
-
-  .doc-sectional {
-    margin-bottom: 48px;
-  }
-
-  p, li, .alert {
-    font-size: 20px;
-    font-family: $font-family-open-sans;
-    line-height: 1.5em;
-    margin: 0 0 18px;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  li p a, li a {
-    text-decoration: none;
-  }
-
-  pre {
-    margin: 0 0 18px;
-  }
-
-  a {
-    font-family: $font-family-open-sans;
-    color: $vagrant-blue;
-
-    &:hover{
-      border-bottom: 1px solid $vagrant-blue;
-      text-decoration: none;
-    }
-  }
-
-  img {
-    max-width: 650px;
-    margin-top: 25px;
-    margin-bottom: 25px;
-  }
-
-  h1, h2, h3, h4, h5 {
-    font-family: $font-family-open-sans;
-    font-weight: $font-weight-b;
-  }
-
-  h1 {
-    color: $vagrant-blue;
-    text-transform: uppercase;
-    padding-bottom: 24px;
-    margin-top: 40px;
-    margin-bottom: 24px;
-    border-bottom: 1px solid #eeeeee;
-  }
-
-  h2, h3, h4 {
-    margin-bottom: 16px;
-  }
-
-  #graph {
-    margin-top: 30px;
-  }
-
-  .alert p {
-    margin-bottom: 0;
-  }
-}
-
-
-@media (max-width: 992px) {
-  body.layout-docs,
-  body.layout-intro{
-    >.container{
-      padding-left: 0;
-      padding-right: 0;
-
-      #main-content {
-        min-height: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  body.layout-docs,
-  body.layout-intro {
-    .equal-height {
-      display: inherit;
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .bs-docs-section{
-    img{
-      max-width: 450px;
-    }
-
-    h1{
-      font-size: 32px;
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_downloads.scss
+++ b/website/source/assets/stylesheets/_downloads.scss
@ -1,109 +1,60 @@
-body.page-download {
-  background: $vagrant-blue image-url("sidebar_background_inner.png") top left no-repeat;
-
-  >.container {
-    #main-content {
-      background-color: $white;
-      min-height: 800px;
-      padding: 0 40px 40px 40px;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: -9999px;
-        right: 0;
-        border-left: none;
-        box-shadow: 9999px 0 0 $white;
-      }
-
-      > div {
-        position: relative;
-        z-index: 10;
-      }
-    }
-  }
-
-  .downloads {
-    margin-top: 20px;
-
-    .description {
-      margin-bottom: 20px;
-    }
-
-    .download {
-      border-bottom: 1px solid #b2b2b2;
-      padding-bottom: 15px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-
-      .details {
-        padding-left: 95px;
-
-        h2 {
-          margin-top: 0px;
-        }
-
-        ul {
-          padding-left: 0px;
-        }
-
-        li {
-          display: inline-block;
-
-          &:after {
-            content: " | ";
-          }
-
-          &:last-child:after {
-            content: "";
-          }
-        }
-      }
-
-      .icon {
-        img {
-          width: 75px;
-        }
-      }
-
-      .os-name {
-        font-size: 40px;
-        padding-top: 27px;
-        margin-bottom: -3px;
-      }
-    }
-
-    .poweredby {
+body.layout-downloads {
+  #inner {
+    .downloads {
      margin-top: 20px;

-      img {
-        display: block;
-        margin: 0 auto;
-        width: 122px;
+      .description {
+        margin-bottom: 20px;
+      }
+
+      .download {
+        border-bottom: 1px solid #b2b2b2;
+        padding-bottom: 15px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+
+        .details {
+          padding-left: 95px;
+
+          h2 {
+            margin-top: 25px;
+            border: none;
+          }
+
+          ul {
+            padding-left: 0px;
+            margin: -8px 0 0 0;
+          }
+
+          li {
+            display: inline-block;
+
+            &:after {
+              content: " | ";
+            }
+
+            &:last-child:after {
+              content: "";
+            }
+          }
+        }
+
+        .icon {
+          img {
+            width: 75px;
+          }
+        }
+
+        .os-name {
+          font-size: 40px;
+          margin-bottom: -3px;
+        }
+      }
+
+      .poweredby {
+        margin-top: 20px;
+        text-align: center;
      }
    }
  }
 }
-
-@media (max-width: 992px) {
-  body.page-download {
-    >.container{
-      padding-left: 0;
-      padding-right: 0;
-
-      #main-content {
-        min-height: 0;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  body.page-download {
-    .equal-height {
-      display: inherit;
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_fonts.scss
+++ b/website/source/assets/stylesheets/_fonts.scss
@ -1,36 +0,0 @@
-//typogrpahy
-@mixin museo-sans-light {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: normal;
-  font-weight: 100;
-}
-
-@mixin museo-sans-regular {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: normal;
-  font-weight: 300;
-}
-
-@mixin museo-sans-bold {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: normal;
-  font-weight: 700;
-}
-
-@mixin museo-sans-light-italic {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: italic;
-  font-weight: 100;
-}
-
-@mixin museo-sans-regular-italic {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: italic;
-  font-weight: 300;
-}
-
-@mixin museo-sans-bold-italic {
-  font-family: "museo-sans", helvetica, arial, sans-serif;
-  font-style: italic;
-  font-weight: 700;
-}
--- a/website/source/assets/stylesheets/_footer.scss
+++ b/website/source/assets/stylesheets/_footer.scss
@ -1,84 +1,22 @@
 #footer {
-  padding: 64px 0;
-  background-color: $black;
+  padding-top: 50px;

-  .hashicorp-project {
-    margin-top: 24px;
-  }
-
-  .pull-right {
-    padding-right: 15px;
-  }
-
-  ul {
+  ul.footer-links {
    li {
      a {
-        font-weight: 600;
-        color: $white;
-      }
-    }
-  }
-}
+        color: $footer-link-color;
+        font-size: $footer-font-size;
+        font-family: $font-family-open-sans;
+        text-decoration: none;

-.edit-page-link {
-  font-size: 12px;
-  position: absolute;
-  top: -100px;
-  right: 20px;
-  z-index: 9999;
-
-  a {
-    text-transform: uppercase;
-    color: $gray;
-  }
-}
-
-@media (max-width: 768px) {
-  #footer{
-    text-align: center;
-
-    .footer-hashi {
-      float: none !important;
-      display: block;
-
-      .pull-right {
-        float: none !important;
-        padding-right: 0;
-      }
-    }
-
-    ul {
-      float: none;
-      display: inline-block;
-      margin-bottom: 36px;
-    }
-  }
-}
-
-@media (max-width: 414px) {
-  #footer {
-    ul {
-      display: block;
-
-      li {
-        display: block;
-        height: 40px;
-        float: none;
-
-        a {
-          padding: 0;
+        &:hover, &:focus, &:active {
+          background-color: transparent;
+          color: $footer-link-color-hover;
+          outline: 0;
        }
-      }

-      &.external-links {
-        li {
-          svg {
-            position: relative;
-            left: 0;
-            top: 2px;
-            margin-top: 0;
-            margin-right: 4px;
-          }
+        @media (max-width: 992px) {
+          text-align: center;
        }
      }
    }
--- a/website/source/assets/stylesheets/_global.scss
+++ b/website/source/assets/stylesheets/_global.scss
@ -1,92 +1,35 @@
-//
-// Global Site
-// --------------------------------------------------
-
-/*html{
-text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-}*/
+html {
+  height: 100%;
+  min-height: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}

 body {
-  color: $black;
+  -webkit-font-smoothing: antialiased;
+  color: $body-font-color;
+  background-color: $white;
+  font-size: $font-size;
  font-family: $font-family-open-sans;
-  font-size: 18px;
-  font-weight: 400;
+  font-weight: $font-weight-reg;
+  height: 100%;
+  min-height: 100%;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: $font-family-klavika;
+  -webkit-font-smoothing: antialiased;
 }

 h1 {
-  font-size: 48px;
-  line-height: 1;
  margin-bottom: 24px;
 }

-h2 {
-  font-size: 36px;
-  line-height: 1.2;
-  margin-top: 70px;
+// Avoid FOUT
+.wf-loading {
+  visibility: hidden;
 }

-h1 + h2 {
-  margin-top: 10px;
-}
-
-h3 {
-  font-size: 24px;
-  line-height: 1.2;
-}
-
-.highlight{
-  margin-bottom: 18px;
-}
-
-pre {
-  background-color: $black;
-  color: $white;
-  font-size: 14px;
-  font-weight: normal;
-  font-family: $font-family-mono;
-  border: none;
-  padding: 20px;
-  margin-bottom: 0;
-}
-
-*:focus {
-  outline: none;
-}
-
-//fixed grid below 992 to prevent smaller responsive sizes
-@media (max-width: 992px) {
-  .container{
-    max-width: 970px;
-  }
-}
-
-//all below styles are overriding corrections for below (min-width: 992px)
-//below (min-width: 992px) these styles change
-.navbar-nav {
-  margin: 0;
-}
-
-.navbar-right {
-  float: right !important;
-}
-
-.navbar-nav > li {
-  float: left;
-}
-
-.navbar-nav > li > a {
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.center {
-  text-align: center;
-}
-
-.edit-this-page{
-  padding-top: 48px;
-  a{
-    text-transform: uppercase;
-  }
+.wf-active, .wf-inactive {
+  visibility: visible;
 }
--- a/website/source/assets/stylesheets/_header.scss
+++ b/website/source/assets/stylesheets/_header.scss
@ -1,71 +1,78 @@
-//
-// Header
-// - Project Specific
-// - edits should be made here
-// --------------------------------------------------
-
 #header {
-  background: $white;
-  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
-  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
+  background: $header-background-color;
+
+  .navbar-toggle {
+    height: $header-height;
+    margin: 0;
+    padding-right: 15px;
+    border-radius: 0;
+
+    .icon-bar {
+      border: 1px solid $white;
+      border-radius: 0;
+    }
+  }

  .navbar-brand {
-    .logo {
-      width: $project-logo-width;
+    display: block;
+    margin: 0;
+    padding: 0;
+
+    a {
+      display: flex;
+      align-items: center;
      height: $header-height;
-      padding: 0;
      line-height: $header-height;
-      font-size: 0;
-      text-transform: uppercase;
-      background: image-url("logo-header.svg") center no-repeat;
-      background-size: 100%;

-      &:hover{
-        opacity: .4;
-      }
-    }
+      svg.logo {
+        transition: opacity 0.15s ease-in-out;
+        @extend svg.logo.white;

-    .by-hashicorp {
-      color: $gray;
-
-      &:hover {
-        svg {
-          .svg-bg-line {
-            opacity: .4;
-          }
+        &:hover, &:focus, &:active {
+          opacity: 0.6;
+          outline: 0;
+          text-decoration: none;
        }
      }
    }
  }

-  .buttons{
-    margin-top: 2px; //baseline everything
-  }
-}
+  ul.nav {
+    li {
+      a {
+        color: $header-link-color;
+        font-size: $header-font-size;
+        font-family: $font-family-open-sans;
+        font-weight: $font-weight-bold;
+        height: $header-height;
+        line-height: $header-height;
+        padding: 0 10px;
+        margin: 0;
+        text-decoration: none;

-@media (min-width: 769px) and (max-width: 805px) {
-  #header {
-    .main-links,
-    .external-links {
-      li > a {
-        font-size: 12px;
+        &:hover, &:focus, &:active {
+          background-color: transparent;
+          color: $header-link-color-hover;
+          outline: 0;
+
+          svg {
+            fill: $header-link-color-hover;
+          }
+        }
+
+        svg {
+          fill: $header-link-color;
+          position: relative;
+          top: 2px;
+          width: 14px;
+          height: 14px;
+          margin-right: 3px;
+        }
      }
    }
  }
-}

-@media (max-width: 414px) {
-  #header {
-    .navbar-brand {
-      .logo{
-        width: $project-logo-width * .75;
-        height: $header-mobile-height;
-      }
-
-      .by-hashicorp {
-        margin-top: 2px;
-      }
-    }
+  .buttons {
+    margin-top: 2px;
  }
 }
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@ -1,148 +1,229 @@
-.page-home {
+#page-home {
+  // Override the main header
+  #header {
+    background: $home-header-background-color;

-  h1, h2, h3, h4, h5 {
-    color: $purple-text;
-    font-family: $font-family-klavika;
-    text-transform: uppercase;
-  }
-
-  .hero {
-    @include padded;
-    background: $gray-background image-url("vagrant_header_background.png") no-repeat center -20px;
-    background-size: 1292px 532px;
-    text-align: center;
-    border-bottom: 1px solid #c6e0f0;
-
-    .hero-content {
-      top: 50%;
-
-      hgroup {
-        margin: ($baseline * 4) 0 20px 0;
-        text-shadow: 0 1px 10px rgba(255, 255, 255, 0.4);
-
-        h1 {
-          color: $purple-text;
-          line-height: 1;
-          margin-top: 350px;
-        }
-
-        p {
-          color: $vagrant-blue;
-        }
-      }
-
-      #button-download {
-        margin-right: 10px;
-      }
-
-      #button-get-started {
-        margin-left: 10px;
+    .navbar-toggle {
+      .icon-bar {
+        border: 1px solid $home-header-link-color;
      }
    }
-  }

-  .why-vagrant {
-    @include padded;
-    background: $light-blue-background image-url("steps_background.png") center -120px;
-
-    h2 {
-      color: $blue-text;
-      text-align: center;
-
-    }
-
-    hgroup {
-      margin: ($baseline * 3) 0;
-      // width: 530px;
-
-      h3 {
-        font-weight: bold;
-        margin-bottom: $baseline;
-        text-align: center;
-      }
-
-      h4 {
-        font-size: 20px;
-        text-align: center;
-        line-height: $baseline * 1.5;
-      }
-      p {
-        color: $purple-text;
-      }
-    }
-  }
-
-  .get-started {
-    @include padded;
-    @include get-started-bg;
-
-    h2 {
-      color: $white;
-      text-align: center;
-    }
-
-    pre {
-      font-size: 20px;
-      padding: 40px 40px 10px 40px;
-      margin: 40px auto;
-      background: rgba($black, 0.6);
-    }
-  }
-
-  .customers {
-    @include padded;
-    background-color: $black;
-    border-bottom: 1px solid #333;
-
-    h2 {
-      color: $dark-gray-text;
-      text-align: center;
-    }
-
-    .customer-logos {
-      margin-top: $baseline * 3;
-
-      img {
-        width:100%;
-        height: auto;
-        -khtml-opacity: .5;
-        -moz-opacity: .5;
-        opacity: .5;
-        filter: alpha(opacity=50);
-      }
-    }
-  }
-}
-
-@media (max-width: 991px) {
-  .page-home {
-    .hero {
-      .hero-content {
-        #button-download {
-          margin-right: 0;
-        }
-
-        #button-get-started {
-          margin-left: 0;
+    .navbar-brand {
+      a {
+        svg.logo {
+          @extend svg.logo.color;
        }
      }
    }
-  }
-}

-@media (max-width: 480px) {
-  .page-home {
-    .hero {
-      background: $gray-background image-url("vagrant_header_background.png") no-repeat center -60px;
-      background-size: 1292px 532px;
+    ul.nav {
+      li {
+        a {
+          color: $home-header-link-color;

-      .hero-content {
-        hgroup {
-          h1 {
-            margin-top: 280px;
+          &:hover, &:focus, &:active {
+            background-color: transparent;
+            color: $home-header-link-color-hover;
+
+            svg {
+              fill: $home-header-link-color-hover;
+            }
+          }
+
+          svg {
+            fill: $home-header-link-color;
          }
        }
      }
    }
  }
+
+  header {
+    .hero {
+      margin: 140px auto 160px auto;
+      text-align: center;
+
+      .button {
+        margin: 5px;
+
+        @media (max-width: 768px) {
+          display: block;
+          margin-top: 10px;
+          text-align: center;
+        }
+      }
+
+      svg {
+        max-width: 90%;
+      }
+    }
+  }
+
+  section {
+    background: $white;
+    padding: 100px 0;
+  }
+
+  section.marketing {
+    h2 {
+      font-family: $font-family-klavika;
+      font-size: 36px;
+      font-weight: $font-weight-bold;
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+      margin: 20px 0 10px 0;
+      padding: 0;
+    }
+
+    p {
+      font-family: $font-family-open-sans;
+      font-size: 16px;
+      letter-spacing: 0.01em;
+      line-height: 1.8;
+      margin: 0 0 10px;
+    }
+
+    span.callout {
+      background: $black;
+      color: $white;
+      display: inline-block;
+      font-family: $font-family-klavika;
+      font-size: 18px;
+      font-weight: $font-weight-bold;
+      line-height: 1;
+      margin: 0;
+      padding: 5px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+
+    &.black {
+      background: $black;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+
+      span.callout {
+        background: $white;
+        color: $black;
+      }
+    }
+
+    &.blue-dark {
+      background: $vagrant-blue-dark;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    &.blue {
+      background: $vagrant-blue;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+    }
+
+    &#simple {
+      .terminal {
+        border: 1px solid $white;
+        background-color: $black;
+        box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+        box-sizing: border-box;
+        color: $white;
+        font-family: $font-family-monospace;
+        font-size: 14px;
+        line-height: 1.8;
+        margin-top: 55px;
+        padding: 10px 20px 20px 20px;
+
+        .terminal-content {
+          margin-top: 15px;
+          overflow-x: scroll;
+          width: 100%;
+          white-space: nowrap;
+
+          span {
+            display: block;
+          }
+        }
+
+        span.circle {
+          &:before {
+            content: '\25CF';
+            color: $white;
+            font-size: 20px;
+            line-height: 1;
+            height: 100%;
+          }
+        }
+
+        span.command {
+          font-weight: $font-weight-bold;
+        }
+      }
+    }
+
+    &#parity {
+      display: flex;
+      align-items: center;
+
+      .parity-image {
+        text-align: center;
+
+        svg {
+          display: inline-block;
+          max-width: 400px;
+          margin: 40px;
+        }
+      }
+    }
+
+    &#cross {
+      .systems {
+        margin-top: 70px;
+        text-align: center;
+
+        svg {
+          max-width: 130px;
+          min-width: 20px;
+          height: auto;
+
+          fill: $white;
+          padding: 0 20px;
+        }
+      }
+    }
+
+    &#trusted {
+      p.logos {
+        margin-top: 40px;
+        text-align: center;
+
+        img {
+          max-width: 941px;
+          height: auto;
+          width: 100%;
+        }
+      }
+    }
+  }
 }
--- a/website/source/assets/stylesheets/_inner.scss
+++ b/website/source/assets/stylesheets/_inner.scss
@ -0,0 +1,89 @@
+#inner {
+  p, li, .alert {
+    font-size: $font-size;
+    font-family: $font-family-open-sans;
+    font-weight: $font-weight-reg;
+    line-height: 1.84em;
+    margin: 0 0 $font-size;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .alert p:last-child {
+    margin-bottom: 0;
+  }
+
+  pre {
+    font-family: $font-family-monospace;
+    font-size: ($font-size - 3);
+    font-weight: normal;
+    padding: 20px;
+    margin: 0 0 $font-size;
+
+    // This will force the code to scroll horizontally on small screens
+    // instead of wrapping.
+    code {
+      overflow-wrap: normal;
+      white-space: pre;
+    }
+  }
+
+  a {
+    color: $body-link-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      background: inherit;
+      color: $body-link-color;
+    }
+  }
+
+  img {
+    display: block;
+    margin: 25px auto;
+    max-width: 650px;
+    height: auto;
+    width: 90%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: $body-font-color;
+    margin-top: 54px;
+    margin-bottom: $font-size;
+    line-height: 1.3;
+  }
+
+  h2 {
+    padding-bottom: 3px;
+    border-bottom: 1px solid $gray-light;
+  }
+
+  h1 > code,
+  h2 > code,
+  h3 > code,
+  h4 > code,
+  h5 > code
+  h6 > code,
+  li code,
+  table code,
+  p code,
+  tt,
+  .alert code {
+    font-family: $font-family-monospace;
+    font-size: 90%;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-striped;
+  }
+}
--- a/website/source/assets/stylesheets/_logos.scss
+++ b/website/source/assets/stylesheets/_logos.scss
@ -0,0 +1,39 @@
+svg.logo {
+  &.color {
+    opacity: 1.0;
+
+    path.text {
+      fill: $black;
+      opacity: 1.0;
+    }
+
+    path.front {
+      fill: $vagrant-blue;
+      opacity: 1.0;
+    }
+
+    polygon.shadow {
+      fill: $vagrant-blue-dark;
+      opacity: 1.0;
+    }
+  }
+
+  // The default logo class is the colored version
+  @extend .color;
+
+  &.white {
+    opacity: 1.0;
+
+    path.text {
+      fill: $white;
+    }
+
+    path.front, polygon.shadow {
+      fill: $white;
+    }
+
+    path.front {
+      opacity: 0.7;
+    }
+  }
+}
--- a/website/source/assets/stylesheets/_mixins.scss
+++ b/website/source/assets/stylesheets/_mixins.scss
@ -1,265 +0,0 @@
-// styles and effects
-.round-corners {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  border-radius: 3px;
-}
-
-@mixin rounded {
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  -khtml-border-radius: 50px;
-  border-radius: 50px;
-}
-
-.rounded {
-  @include rounded;
-}
-
-@mixin animate-background-color {
-  transition: background-color .3s ease-in-out;
-  -moz-transition: background-color .3s ease-in-out;
-  -webkit-transition: background-color .3s ease-in-out;
-  -o-transition: background-color .3s ease-in-out;
-}
-
-.animate-background-color {
-  @include animate-background-color;
-}
-
-@mixin animate-text-color {
-  transition: color .2s ease-in-out;
-  -moz-transition: color .2s ease-in-out;
-  -webkit-transition: color .2s ease-in-out;
-  -o-transition: color .2s ease-in-out;
-}
-
-.animate-text-color {
-  @include animate-text-color;
-}
-
-@mixin animate-opacity {
-  transition: opacity .2s ease-in-out;
-  -moz-transition: opacity .2s ease-in-out;
-  -webkit-transition: opacity .2s ease-in-out;
-  -o-transition: opacity .2s ease-in-out;
-}
-
-.animate-opacity {
-  @include animate-opacity;
-}
-
-@mixin drop-shadow {
-  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
-  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) !important;
-  @include animate-opacity;
-}
-
-.drop-shadow {
-  @include drop-shadow;
-}
-@mixin hyphenate {
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
-}
-
-.hyphenate {
-  @include hyphenate;
-}
-
-@mixin uppercase {
-  text-transform: uppercase;
-}
-
-.uppercase {
-  @include uppercase;
-}
-
-@mixin padded {
-  padding: ($baseline * 3) 0;
-}
-
-.padded {
-  @include padded;
-}
-
-@mixin padded-medium {
-  padding: ($baseline * 2) 0;
-}
-
-.padded-medium {
-  @include padded-medium;
-}
-
-@mixin padded-small{
-  padding: $baseline 0;
-}
-
-.padded-small {
-  @include padded-small;
-}
-
-@mixin transition($transition) {
-  -webkit-transition: $transition;
-  -o-transition: $transition;
-  transition: $transition;
-}
-
-@mixin translate3d($x, $y: 0, $z: 0) {
-  -webkit-transform:       translate3d($x, $y, $z);
-  -moz-transform:    translate3d($x, $y, $z);
-  -ms-transform:      translate3d($x, $y, $z);
-  -o-transform:      translate3d($x, $y, $z);
-}
-
-@mixin clearfix {
-  zoom:1;
-  &:before, &:after{ content:""; display:table; }
-  &:after{ clear: both; }
-}
-
-.clearfix {
-  @include clearfix;
-}
-
-@mixin inner-bg-large {
-  background-image: #c1b4d5; /* Old browsers */
-  background-image: image-url("sidebar_background_inner.png"), -moz-linear-gradient(45deg,  #c1b4d5 0%, #98d3f8 100%); /* FF3.6+ */
-  background-image: image-url("sidebar_background_inner.png"), -webkit-gradient(linear, left bottom, right top, color-stop(0%,#c1b4d5), color-stop(100%,#98d3f8)); /* Chrome,Safari4+ */
-  background-image: image-url("sidebar_background_inner.png"), -webkit-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* Chrome10+,Safari5.1+ */
-  background-image: image-url("sidebar_background_inner.png"), -o-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* Opera 11.10+ */
-  background-image: image-url("sidebar_background_inner.png"), -ms-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* IE10+ */
-  background-image: image-url("sidebar_background_inner.png"), linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b4d5', endColorstr='#98d3f8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}
-
-.inner-bg-large {
-  @include inner-bg-large;
-}
-
-@mixin inner-bg-small {
-  background: #c1b4d5; /* Old browsers */
-  background: -moz-linear-gradient(45deg,  #c1b4d5 0%, #98d3f8 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#c1b4d5), color-stop(100%,#98d3f8)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* IE10+ */
-  background: linear-gradient(45deg,  #c1b4d5 0%,#98d3f8 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b4d5', endColorstr='#98d3f8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-}
-
-.inner-bg-small {
-}
-
-
-@mixin docs-bg-large {
-  background-image: image-url("sidebar_background_docs.png"), #362d6c; /* Old browsers */
-  background-image: image-url("sidebar_background_docs.png"), -moz-linear-gradient(45deg,  #362d6c 0%, #0c5593 100%); /* FF3.6+ */
-  background-image: image-url("sidebar_background_docs.png"), -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */
-  background-image: image-url("sidebar_background_docs.png"), -webkit-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */
-  background-image: image-url("sidebar_background_docs.png"), -o-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */
-  background-image: image-url("sidebar_background_docs.png"), -ms-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* IE10+ */
-  background-image: image-url("sidebar_background_docs.png"), linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-  background-repeat: no-repeat;
-  background-position: 0 140px, 0 0;
-}
-
-.docs-bg-large {
-  @include docs-bg-large;
-}
-
-@mixin docs-bg-small {
-  background: #362d6c; /* Old browsers */
-  background: -moz-linear-gradient(45deg,  #362d6c 0%, #0c5593 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* IE10+ */
-  background: linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-}
-
-.docs-bg-small {
-  @include docs-bg-small;
-}
-
-@mixin get-started-bg {
-  background-image: #362d6c; /* Old browsers */
-  background-image: -moz-linear-gradient(45deg,  #362d6c 0%, #0c5593 100%); /* FF3.6+ */
-  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#362d6c), color-stop(100%,#0c5593)); /* Chrome,Safari4+ */
-  background-image: -webkit-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Chrome10+,Safari5.1+ */
-  background-image: -o-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* Opera 11.10+ */
-  background-image: -ms-linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* IE10+ */
-  background-image: linear-gradient(45deg,  #362d6c 0%,#0c5593 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362d6c', endColorstr='#0c5593',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
-  background-position: center 0;
-  background-repeat: no-repeat;
-}
-
-.get-started-bg {
-  @include get-started-bg;
-}
-
-/*
-.sidebar-nav-selected {
-background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(71,101,118,1) 100%);
-background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(71,101,118,1)));
-background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
-background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
-background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
-background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#476576',GradientType=1 );
-}
-*/
-
-
-// helpers
-@mixin reset {
-  margin: 0;
-  padding: 0;
-}
-
-.reset {
-  @include reset;
-}
-
-@mixin kill-effects {
-  -webkit-box-shadow: 0 0;
-  -moz-box-shadow: 0 0;
-  box-shadow: 0 0;
-  -webkit-border-radius: 0px;
-  -moz-border-radius: 0px;
-  border-radius: 0px;
-  font-family: inherit;
-  color: inherit;
-  background-color: transparent;
-  background-image: none;
-  border: 0;
-  text-shadow: none;
-}
-
-.kill-effects {
-  @include kill-effects;
-}
-
-.debug {
-  border: 1px solid #ff0000;
-}
-
-
-@mixin hover {
-  &:hover {
-    cursor: pointer;
-    @include animate-text-color;
-  }
-}
-
-.hover {
-  @include hover;
-}
--- a/website/source/assets/stylesheets/_pages.scss
+++ b/website/source/assets/stylesheets/_pages.scss
@ -1,31 +0,0 @@
-/* page */
-.page {
-  .page-contents {
-    h1, h2 {
-      color: $blue-text;
-      text-transform: uppercase;
-      text-align: left;
-      @include museo-sans-light;
-    }
-
-    h1 {
-      font-size: 40px;
-      line-height: 45px;
-      margin: ($baseline * 2) 0 $baseline;
-
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    h2 {
-      font-size: 30px;
-      line-height: 40px;
-      margin: ($baseline * 2) 0 $baseline;
-
-      &:first-child {
-        margin-top: $baseline * .5;
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@ -1,18 +0,0 @@
-.sidebar {
-  .sidebar-nav {
-    li {
-      text-align: left;
-
-      a {
-        color: $vagrant-blue;
-        padding-left: 25px;
-
-        svg {
-          path {
-            fill: $vagrant-blue;
-          }
-        }
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_sponsors.scss
+++ b/website/source/assets/stylesheets/_sponsors.scss
@ -1,17 +0,0 @@
-.page-sponsors {
-  .sponsors {
-    ul {
-      list-style: none;
-
-      li {
-        text-align: center;
-
-        a {
-          img {
-            height: 80px;
-          }
-        }
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/_syntax.scss.erb
+++ b/website/source/assets/stylesheets/_syntax.scss.erb
@ -0,0 +1,14 @@
+pre.highlight code {
+  color: #333333;
+}
+
+<%= Rouge::Themes::Github.render(scope: ".highlight") %>
+
+pre.highlight {
+  border: 1px solid #CCCCCC;
+}
+
+pre.highlight code span.c1 {
+  font-style: normal;
+  opacity: 0.8;
+}
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/website/source/assets/stylesheets/_utilities.scss
@ -1,12 +0,0 @@
-//
-// Utility classes
-// --------------------------------------------------
-
-
-//
-// -------------------------
-
-@mixin anti-alias() {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@ -1,47 +1,58 @@
-// Global values
-// --------------------------------------------------
+// Colors
+$white: #FFFFFF;
+$black: #000000;
+$gray-darker: #555555;

-$header-height: 92px;
-$btn-border-radius: 4px;
-$el-border-radius: 6px;
-$baseline: 20px;
-
-//grayscale
-$black: #000;
-$white: #fff;
-$gray-background: #f7f6f1;
-$dark-gray-text: #7f7f7f;
-$light-gray-background: #f0f0f0;
-$light-gray: #ccc;
-$light-gray-text: #eeeeee;
-$dark-gray-background: #333;
-$medium-gray-text: #666;
-
-//vagrant colors
-$blue-text: #2490cc;
-$dark-blue-text: #476576;
-$light-blue-background: #dbf1ff;
-$vagrant-blue: #0094bf;
-$light-sidebar-background: #a1ccf0;
-$docs-blue: #22407f;
-$blue-background: #1e71a1;
-$purple-text: #270836;
-$purple: #735f9f;
-
-//misc colors
-$blue: #48b4fb;
-$green: #43d193;
-$code-highlight-text: #73c5dd;
-$current-color: inherit;
-$button-color: $vagrant-blue;
-$primary-button-color: #48b4fb;
+$packer-blue: #1DAEFF;
+$packer-blue-dark: #1D94DD;
+$vagrant-blue: #1563FF;
+$vagrant-blue-dark: #104EB2;
+$vault-black: #000000;
+$vault-blue: #00ABE0;

 // Typography
-// -------------------------
-$font-family-open-sans:       "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-klavika:         "klavika-web", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-family-mono:            "Courier New", Monaco, Menlo, Consolas, monospace;
-$font-weight-l:               300;
-$font-weight-reg:             400;
-$font-weight-b:               600;
-$font-weight-xb:              700;
+$font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace;
+$font-size:             15px;
+$font-weight-reg:       400;
+$font-weight-bold:      600;
+
+// Body
+$body-font-color: $gray-darker;
+$body-link-color: $vagrant-blue;
+
+// Home
+$home-header-background-color: transparent;
+$home-header-link-color: $gray-darker;
+$home-header-link-color-hover: $black;
+
+// Sidebar
+$sidebar-background-color: $white;
+$sidebar-font-size: $font-size - 2;
+$sidebar-link-color: $body-font-color;
+$sidebar-link-color-hover: $black;
+$sidebar-link-color-active: $body-link-color;
+$sidebar-font-family: $font-family-open-sans;
+$sidebar-font-weight: $font-weight-reg;
+
+// Header
+$header-background-color: $vagrant-blue;
+$header-font-size: $font-size - 2;
+$header-height: 92px;
+$header-link-color: rgba($white, 0.85);
+$header-link-color-hover: $white;
+
+// Footer
+$footer-font-size: $font-size - 2;
+$footer-link-color: $body-font-color;
+$footer-link-color-hover: $black;
+
+// Button
+$button-background: $white;
+$button-font-color: #7b8A8E;
+$button-font-family: $font-family-klavika;
+$button-font-size: $font-size;
+$button-font-weight: $font-weight-bold;
+$button-primary-background: $vagrant-blue;
+$button-primary-font-color: $white;
--- a/website/source/assets/stylesheets/_vmware.scss
+++ b/website/source/assets/stylesheets/_vmware.scss
@ -1,213 +1,237 @@
-.page-vmware-integration {
+#vmware-integration {
  h1 {
    text-align: center;
  }

-  .hero {
-    background: $gray-background image-url("vagrant_vmware_background.png") no-repeat center -20px;
-    text-align: center;
-    border-bottom: 1px solid #c6e0f0;
-    height: auto;
-    background-position: center 0px;
-    padding-bottom: 20px;
-
-    .hero-content {
-      top: 50%;
-
-      hgroup {
-        margin: 375px 0 20px 0;
-
-        h1 {
-          color: $white;
-          font-weight: normal;
-          font-size: 50px;
-          line-height: 52px;
-        }
-
-        h2 {
-          @include museo-sans-light;
-          color: #48b4fb;
-          font-size: 22px;
-          font-weight: 400;
-          margin-top: 0;
-          text-transform: none;
-          line-height: 28px;
-        }
-      }
+  header {
+    .hero {
+      margin: 140px auto 160px auto;
+      text-align: center;

      .button {
-        font-size: 18px;
-        font-weight: 400;
-        padding: 13px 0;
-        letter-spacing: 2px;
+        margin: 5px;
      }
+    }

-      #learn-more-button {
-        margin-right: 10px;
-      }
+    span.plus {
+      color: $black;
+      font-family: $font-family-monospace;
+      font-size: 32px;
+      margin: 0 36px
+    }

-      #buy-now-button {
-        background-color: #F26C4F;
-        margin-left: 10px;
-      }
+    .logos {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    span.tagline {
+      display: block;
+      font-family: $font-family-klavika;
+      font-size: 20px;
+      font-weight: $font-weight-reg;
+      margin: 15px 0 30px 0;
    }
  }

-  .why, .faq {
-    @include padded;
-    background: $light-blue-background;
-
-
-    h1 {
-      color: $blue-text;
-      text-transform: uppercase;
-      text-align: center;
-      font-size: 40px;
-      line-height: 40px;
-      margin-bottom: 40px;
-    }
+  section.marketing {
+    background: $white;
+    padding: 100px 0;

    h2 {
-      font-size: 20px;
-      letter-spacing: 1px;
-      line-height: 1.6;
-      margin-top: 30px;
+      font-family: $font-family-klavika;
+      font-size: 36px;
+      font-weight: $font-weight-bold;
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+      margin: 20px 0 10px 0;
+      padding: 0;
    }

    p {
-      line-height: 1.6;
+      font-family: $font-family-open-sans;
+      font-size: 16px;
+      letter-spacing: 0.01em;
+      line-height: 1.8;
+      margin: 0 0 10px;
    }

-    .footnotes {
-      margin-top: 40px;
-      font-size: 12px;
-    }
-  }
-
-  .pricing {
-    @include padded;
-    @include get-started-bg;
-
-    color: $white;
-
-    h1 {
+    span.callout {
+      background: $black;
      color: $white;
+      display: inline-block;
+      font-family: $font-family-klavika;
+      font-size: 18px;
+      font-weight: $font-weight-bold;
+      line-height: 1;
+      margin: 0;
+      padding: 5px;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
    }

-    pre {
-      padding: 60px 80px 40px;
-      margin: 40px auto;
-      background: rgba($black, 0.6);
-    }
+    &.black {
+      background: $black;

-    .buy-form {
-      p {
-        line-height: 1.4;
-        margin-top: 20px;
+      h2 {
+        color: $white;
      }

-      .form {
-        margin-top: 20px;
+      p {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }

-        .products {
-          padding-left: 20px;
-          margin-bottom: 15px;
+      span.callout {
+        background: $white;
+        color: $black;
+      }
+    }
+
+    &.blue-dark {
+      background: $vagrant-blue-dark;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+      }
+    }
+
+    &.blue {
+      background: $vagrant-blue;
+
+      h2 {
+        color: $white;
+      }
+
+      p {
+        color: $white;
+      }
+    }
+
+    &#learn-more {
+      h3 {
+        color: $white;
+        font-weight: $font-weight-bold;
+      }
+
+      .footnotes {
+        p {
+          color: $white;
+          font-size: 12px;
+          margin-top: 40px;
+
+          a {
+            color: $white;
+            border-bottom: 1px solid #DDDDDD;
+            text-decoration: none;
+
+            &:hover {
+              border: none;
+              text-decoration: none;
+            }
+          }
        }
+      }
+    }
+
+    &#buy-now {
+      div.form {
+        padding: 50px;

        label {
-          font-size: 18px;
-          margin-bottom: 15px;
-        }
-
-        input.text {
-          margin: 0;
-          padding: 0;
-
-          border-top-left-radius: 5px;
-          border-bottom-left-radius: 5px;
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-
-          border: none;
-          color: #000000;
-          letter-spacing: 0;
-          height: 50px;
-          line-height: 50px;
-          width: 80px;
-          text-align: center;
-          font-size: 20px;
-          font-weight: bold;
-          -webkit-box-shadow:
-          inset 0 3px 5px rgba(0, 0, 0, 0.4);
-        }
-
-        button {
-          margin: 0;
-          padding: 0 25px;
-
-          margin-top: -6px;
-          margin-left: -5px;
-
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-
          color: $white;
-          font-size: 16px;
-          font-weight: bold;
-          height: 50px;
-          line-height: 50px;
-          background-color: #07B15F;
-          background-image: none;
-          border: none;
-          text-shadow: none;
-          -webkit-box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.3),
-          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-          -moz-box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.3),
-          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-          -ms-box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.3),
-          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-          box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.3),
-          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+          padding: 7px 0;
+        }
+
+        .inputs {
+          &:after {
+            clear: both;
+            content: ' ';
+            display: block;
+          }
+
+          input {
+            border: none;
+            box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+            font-family: $font-family-klavika;
+            font-size: 18px;
+            height: 50px;
+            line-height: 50px;
+            padding: 0 15px;
+            text-align: center;
+            width: 60px;
+            float: left;
+
+            &:hover, &:focus, &:active {
+              outline: none;
+            }
+          }
+
+          button {
+            background: $vagrant-blue;
+            border: none;
+            border-radius: 0;
+            box-shadow: 3px 4px 0 rgba(0,0,0,0.1);
+            color: $white;
+            font-family: $font-family-klavika;
+            font-size: 18px;
+            height: 50px;
+            line-height: 50px;
+            padding: 0 15px;
+            float: left;
+
+            &:hover, &:focus, &:active {
+              outline: none;
+            }
+          }
        }
      }
-    }

-    .subtext {
-      margin-top: 20px;
-      font-size: 12px;
-      line-height: 16px;
-
-      a {
-        border-bottom: 1px solid rgba($white, 0.5);
+      .subtext {
        color: $white;
+        font-size: 12px;
+        line-height: 1.8;
+        margin: 20px 0;

-        &:hover {
-          border-bottom: none;
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        a {
+          color: $white;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
          text-decoration: none;
+          transition: border 0.15s ease-in-out;
+
+          &:hover {
+            border-bottom: 1px solid transparent;
+            text-decoration: none;
+            transition: border 0.15s ease-in-out;
+          }
        }
      }
    }
+
+    &#faq {
+      h3 {
+        line-height: 1.4;
+        margin-top: 25px;
+      }
+    }
  }
 }

-@media (max-width: 991px) {
-  .page-vmware-integration {
-    .hero {
-      .hero-content {
-        #learn-more-button {
-          margin-right: 0;
-        }
-
-        #buy-now-button {
-          margin-left: 0;
-        }
-      }
+.layout-vmware {
+  #inner {
+    .legal-text p {
+      font-family: $font-family-monospace;
+      font-size: $font-size - 2;
+      margin-bottom: 25px;
    }
  }
 }
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@ -1,63 +1,34 @@
-// Import bootstrap
-@import "bootstrap-sprockets";
-@import "bootstrap";
+@import 'bootstrap-sprockets';
+@import 'bootstrap';

-// Remote fonts
-@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600");
-@import url("//fonts.googleapis.com/css?family=Inconsolata:400,700");
+@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600');

 // Mega Nav
@import 'hashicorp/mega-nav';

+// Anchor links
+@import 'hashicorp/anchor-links';
+
 // Core variables and mixins
-@import "_variables";
+@import '_variables';

-// Utility classes
-@import "_mixins";
-@import "_utilities";
-
-// Core CSS
-@import "_fonts";
+// Sidebar
+@import 'hashicorp/sidebar';

 // Global Site
-@import "_global";
-
-// Hashicorp Shared Project Styles
-@import "hashicorp-shared/_hashicorp-utility";
-@import "hashicorp-shared/_project-utility";
-@import "hashicorp-shared/_hashicorp-header";
-@import "hashicorp-shared/_hashicorp-sidebar";
+@import '_global';

 // Components
-@import "_buttons";
-@import "_header";
-@import "_footer";
-@import "_sidebar";
+@import '_header';
+@import '_footer';
+@import '_inner';
+@import '_buttons';
+@import '_syntax';
+@import '_logos';

 // Pages
-@import "_about";
-@import "_docs";
-@import "_downloads";
-@import "_home";
-@import "_pages";
-@import "_sponsors";
-@import "_vmware";
-
-code {
-  background-color: rgba($vagrant-blue, 0.1);
-  color: $vagrant-blue;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  code {
-    background-color: transparent;
-    color: inherit;
-  }
-}
-
-.legal-text {
-  p {
-    font-family: $font-family-monospace;
-    font-size: 16px;
-  }
-}
+@import '_community';
+@import '_docs';
+@import '_downloads';
+@import '_home';
+@import '_vmware';
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
@ -1,341 +0,0 @@
-//
-// Hashicorp header
-// - Shared throughout projects
-// - Edits should not be made here
-// --------------------------------------------------
-
-#header {
-  position: relative;
-  margin-bottom: 0;
-}
-
-.navigation {
-  color: #8d9ba8;
-  text-rendering: optimizeLegibility;
-  transition: all 1s ease;
-
-  &.white {
-    .navbar-brand {
-      .logo {
-        color: white;
-      }
-    }
-
-    .main-links,
-    .external-links {
-      li > a {
-        &:hover{
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.gray {
-    .navbar-brand {
-      .logo {
-        color: #8d9ba8;
-      }
-    }
-
-    .main-links,
-    .external-links {
-      li > a {
-        &:hover{
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .navbar-toggle{
-    height: $header-height;
-    margin: 0;
-    border-radius: 0;
-    .icon-bar{
-      border: 1px solid $black;
-      border-radius: 0;
-    }
-  }
-
-  .external-links {
-    &.gray {
-      svg path {
-        fill: #8d9ba8;
-      }
-    }
-
-    li {
-      position: relative;
-
-      svg path{
-        @include transition( all 300ms ease-in );
-      }
-
-      &:hover{
-        svg path{
-          @include transition( all 300ms ease-in );
-        }
-      }
-
-      &.download{
-        margin-right: 10px;
-      }
-
-      > a {
-        padding-left: 12px !important;
-        svg{
-          position: absolute;
-          left: -12px;
-          top: 50%;
-          margin-top: -7px;
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
-  }
-
-  .main-links{
-    margin-right: $nav-margin-right * 2;
-  }
-
-  .main-links,
-  .external-links {
-    &.gray{
-      li > a {
-        color: #8d9ba8;
-      }
-    }
-    li > a {
-      @include hashi-a-style;
-      color: #8d9ba8;
-      font-weight: 400;
-      margin: 0 8px;
-      padding-top: 1px;
-      line-height: $header-height;
-    }
-  }
-
-  .nav > li > a:hover, .nav > li > a:focus {
-    background-color: transparent;
-    @include transition( all 300ms ease-in );
-  }
-}
-
-.navbar-brand {
-  display: block;
-  height: $header-height;
-  padding: 0;
-  margin: 0 10px 0 0;
-
-  .logo {
-    display: inline-block;
-    height: $header-height;
-    vertical-align:top;
-    padding: 0;
-    line-height: $header-height;
-    padding-left: $project-logo-width + $project-logo-pad-left;
-    background-position: 0 center;
-    @include transition(all 300ms ease-in);
-
-    &:hover {
-      @include transition(all 300ms ease-in);
-      text-decoration: none;
-    }
-  }
-}
-
-.navbar-toggle{
-  &.white{
-    .icon-bar{
-      border: 1px solid white;
-    }
-  }
-}
-
-.by-hashicorp{
-  display: inline-block;
-  vertical-align:top;
-  height: $header-height;
-  margin-left: 3px;
-  padding-top: 2px;
-  color: black;
-  line-height: $header-height;
-  font-family: $header-font-family;
-  font-weight: 600;
-  font-size: 0;
-  text-decoration: none;
-
-  &.gray{
-    color: #8d9ba8;
-    font-weight: 300;
-    svg{
-      path,
-      polygon,
-      rect{
-        fill: #8d9ba8;
-      }
-    }
-  }
-
-  &:focus,
-  &:hover{
-    text-decoration: none;
-  }
-
-  .svg-wrap{
-    font-size: 13px;
-  }
-
-  svg{
-    &.svg-by{
-      width: $by-hashicorp-width;
-      height: $by-hashicorp-height;
-      margin-bottom: -4px;
-      margin-left: 4px;
-    }
-
-    &.svg-logo{
-      width: 16px;
-      height: 16px;
-      margin-bottom: -3px;
-      margin-left: 4px;
-    }
-
-    path,
-    polygon{
-      fill: black;
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-    .svg-bg-line{
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-  }
-}
-
-.hashicorp-project{
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  text-decoration: none;
-  font-size: 14px;
-  color: $black;
-  font-weight: 600;
-
-  &.white{
-    color: white;
-    svg{
-      path,
-      polygon,
-      rect{
-        fill: white;
-      }
-    }
-  }
-
-  &:focus{
-    text-decoration: none;
-  }
-
-  &:hover{
-    text-decoration: none;
-    svg{
-      &.svg-by{
-        line{
-          stroke: $vagrant-blue;
-        }
-      }
-    }
-  }
-
-  span{
-    margin-right: 4px;
-    font-family: $header-font-family;
-    font-weight: 500;
-  }
-
-  span,
-  svg{
-    display: inline-block;
-  }
-
-  svg{
-    &.svg-by{
-      width: $by-hashicorp-width;
-      height: $by-hashicorp-height;
-      margin-bottom: -4px;
-      margin-left: -3px;
-    }
-
-    &.svg-logo{
-      width: 30px;
-      height: 30px;
-      margin-bottom: -10px;
-      margin-left: -1px;
-    }
-
-    path,
-    line{
-      fill: $black;
-      @include transition(all 300ms ease-in);
-
-      &:hover{
-        @include transition(all 300ms ease-in);
-      }
-    }
-  }
-}
-
-@media (max-width: 992px) {
-  .navigation {
-    > .container{
-      width: 100%;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .navigation {
-    .main-links{
-      margin-right: 0;
-    }
-  }
-}
-
-@media (max-width: 414px) {
-  #header {
-    .navbar-toggle{
-      padding-top: 10px;
-      height: $header-mobile-height;
-    }
-
-    .navbar-brand {
-      height: $header-mobile-height;
-
-      .logo{
-        height: $header-mobile-height;
-        line-height: $header-mobile-height;
-      }
-      .by-hashicorp{
-        height: $header-mobile-height;
-        line-height: $header-mobile-height;
-        padding-top: 0;
-      }
-    }
-    .main-links,
-    .external-links {
-      li > a {
-        line-height: $header-mobile-height;
-      }
-    }
-  }
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
@ -1,293 +0,0 @@
-//
-// Hashicorp Sidebar
-// - Shared throughout projects
-// - Edits should not be made here
-// --------------------------------------------------
-
-// Base variables
-// --------------------------------------------------
-$screen-tablet:          768px;
-
-$gray-darker:               #212121; // #212121 - text
-$gray-secondary:            #757575; // #757575 - secondary text, icons
-$gray:                      #bdbdbd; // #bdbdbd - hint text
-$gray-light:                #e0e0e0; // #e0e0e0 - divider
-$gray-lighter:              #f5f5f5; // #f5f5f5 - background
-$link-color:                $gray-darker;
-$link-bg:                   transparent;
-$link-hover-color:          $gray-lighter;
-$link-hover-bg:             $gray-lighter;
-$link-active-color:         $gray-darker;
-$link-active-bg:            $gray-light;
-$link-disabled-color:       $gray-light;
-$link-disabled-bg:          transparent;
-
-/* -- Sidebar style ------------------------------- */
-
-// Sidebar variables
-// --------------------------------------------------
-$zindex-sidebar-fixed: 1035;
-
-$sidebar-desktop-width: 280px;
-$sidebar-width: 240px;
-
-$sidebar-padding: 16px;
-$sidebar-divider: $sidebar-padding/2;
-
-$sidebar-icon-width: 40px;
-$sidebar-icon-height: 20px;
-
-@mixin sidebar-nav-base {
-  text-align: center;
-
-  &:last-child{
-    border-bottom: none;
-  }
-
-  li > a {
-    background-color: $link-bg;
-  }
-  li:hover > a {
-    background-color: $link-hover-bg;
-  }
-  li:focus > a, li > a:focus {
-    background-color: $link-bg;
-  }
-
-  > .open > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-hover-bg;
-    }
-  }
-
-  > .active > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-active-bg;
-    }
-  }
-  > .disabled > a {
-    &,
-    &:hover,
-    &:focus {
-      background-color: $link-disabled-bg;
-    }
-  }
-
-  // Dropdown menu items
-  > .dropdown {
-    // Remove background color from open dropdown
-    > .dropdown-menu {
-      background-color: $link-hover-bg;
-
-      > li > a {
-        &:focus {
-          background-color: $link-hover-bg;
-        }
-        &:hover {
-          background-color: $link-hover-bg;
-        }
-      }
-
-      > .active > a {
-        &,
-        &:hover,
-        &:focus {
-          color: $link-active-color;
-          background-color: $link-active-bg;
-        }
-      }
-    }
-  }
-}
-
-//
-// Sidebar
-// --------------------------------------------------
-
-// Sidebar Elements
-//
-// Basic style of sidebar elements
-.sidebar {
-  position: relative;
-  display: block;
-  min-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: none;
-  @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
-  @include clearfix();
-  background-color: $white;
-
-  ul{
-    padding-left: 0;
-    list-style-type: none;
-  }
-
-  .sidebar-divider, .divider {
-    width: 80%;
-    height: 1px;
-    margin: 8px auto;
-    background-color: lighten($gray, 20%);
-  }
-
-  // Sidebar heading
-  //----------------
-  .sidebar-header {
-    position: relative;
-    margin-bottom: $sidebar-padding;
-    @include transition(all .2s ease-in-out);
-  }
-
-  .sidebar-image {
-    padding-top: 24px;
-    img {
-      display: block;
-      margin: 0 auto;
-    }
-  }
-
-
-  // Sidebar icons
-  //----------------
-  .sidebar-icon {
-    display: inline-block;
-    height: $sidebar-icon-height;
-    margin-right: $sidebar-divider;
-    text-align: left;
-    font-size: $sidebar-icon-height;
-    vertical-align: middle;
-
-    &:before, &:after {
-      vertical-align: middle;
-    }
-  }
-
-  .sidebar-nav {
-    margin: 0;
-    padding: 0;
-
-    @include sidebar-nav-base();
-
-    // Links
-    //----------------
-    li {
-      position: relative;
-      list-style-type: none;
-      text-align: center;
-
-      a {
-        position: relative;
-        cursor: pointer;
-        user-select: none;
-        @include hashi-a-style-core();
-
-        svg{
-          top: 2px;
-          width: 14px;
-          height: 14px;
-          margin-bottom: -2px;
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-}
-
-// Sidebar toggling
-//
-// Hide sidebar
-.sidebar {
-  width: 0;
-  @include translate3d(-$sidebar-desktop-width, 0, 0);
-
-  &.open {
-    min-width: $sidebar-desktop-width;
-    width: $sidebar-desktop-width;
-    @include translate3d(0, 0, 0);
-  }
-}
-
-// Sidebar positions: fix the left/right sidebars
-.sidebar-fixed-left,
-.sidebar-fixed-right,
-.sidebar-stacked {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: $zindex-sidebar-fixed;
-}
-.sidebar-stacked {
-  left: 0;
-}
-.sidebar-fixed-left {
-  left: 0;
-  box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-  -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-}
-.sidebar-fixed-right {
-  right: 0;
-  box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-  -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-
-  @include translate3d($sidebar-desktop-width, 0, 0);
-  &.open {
-    @include translate3d(0, 0, 0);
-  }
-  .icon-material-sidebar-arrow:before {
-    content: "\e614"; // icon-material-arrow-forward
-  }
-}
-
-// Sidebar size
-//
-// Change size of sidebar and sidebar elements on small screens
-@media (max-width: $screen-tablet) {
-  .sidebar.open {
-    min-width: $sidebar-width;
-    width: $sidebar-width;
-  }
-
-  .sidebar .sidebar-header {
-    //height: $sidebar-width * 9/16; // 16:9 header dimension
-  }
-
-  .sidebar .sidebar-image {
-    /* img {
-    width: $sidebar-width/4 - $sidebar-padding;
-    height: $sidebar-width/4 - $sidebar-padding;
-  } */
-  }
-}
-
-.sidebar-overlay {
-  visibility: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-  background: $white;
-  z-index: $zindex-sidebar-fixed - 1;
-
-  -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-.sidebar-overlay.active {
-  opacity: 0.3;
-  visibility: visible;
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  transition-delay: 0;
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
@ -1,86 +0,0 @@
-//
-// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
-//
-// Notes:
-// - Include this in Application.scss before header and feature-footer
-// - Open Sans and Klavika fonts needs to be included if not already
-// --------------------------------------------------
-
-// Variables
-$header-font-family: $font-family-open-sans;
-$header-font-weight: 600; // semi-bold
-
-$header-height: 74px;
-$header-mobile-height: 60px;
-$by-hashicorp-width: 74px;
-$by-hashicorp-height: 16px;
-$nav-margin-right: 12px;
-
-// Mixins
-@mixin hashi-a-style-core{
-  font-family: $header-font-family;
-  font-weight: $header-font-weight;
-  font-size: 14px;
-  //letter-spacing: 0.0625em;
-}
-
-@mixin hashi-a-style{
-  margin: 0 15px;
-  padding: 0;
-  line-height: 22px;
-  @include hashi-a-style-core();
-  @include transition( all 0.3s ease );
-
-  &:hover{
-    @include transition( all 0.3s ease );
-    background-color: transparent;
-  }
-}
-
-//general shared project mixins
-@mixin img-retina($image1x, $image, $width, $height) {
-  background-image: image-url($image1x);
-  background-size: $width $height;
-  background-repeat: no-repeat;
-
-  @media (min--moz-device-pixel-ratio: 1.3),
-  (-o-min-device-pixel-ratio: 2.6/2),
-  (-webkit-min-device-pixel-ratio: 1.3),
-  (min-device-pixel-ratio: 1.3),
-  (min-resolution: 1.3dppx) {
-    /* on retina, use image that's scaled by 2 */
-    background-image: image-url($image);
-    background-size: $width $height;
-  }
-}
-
-//
-// -------------------------
-@mixin anti-alias() {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
-
-@mixin open-light() {
-  font-family: $font-family-open-sans;
-  font-weight: 300;
-}
-
-@mixin open() {
-  font-family: $font-family-open-sans;
-  font-weight: 400;
-}
-
-@mixin open-sb() {
-  font-family: $font-family-open-sans;
-  font-weight: 600;
-}
-
-@mixin open-bold() {
-  font-family: $font-family-open-sans;
-  font-weight: 700;
-}
-
-@mixin bez-1-transition{
-  @include transition( all 300ms ease-in-out );
-}
--- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
+++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
@ -1,10 +0,0 @@
-//
-// Mixins Specific to project
-//  - make edits to mixins here
-// --------------------------------------------------
-
-// Variables
-$project-logo-width: 151px;
-$project-logo-height: 45px;
-$project-logo-pad-left: 0px;
-$header-height: 80px;
--- a/website/source/community.html.erb
+++ b/website/source/community.html.erb
@ -1,26 +1,26 @@
 ---
-layout: "about"
+layout: "inner"
 sidebar_current: "about-community"
 page_title: "Community"
 description: |-
-  Vagrant is a stable project with a vibrant and growing community. While it is
-  impossible to name them all here, there are key members of the Vagrant project
-  whose success would not be possible without them.
+  Vagrant is an open source project with a growing community. There are
+  active, dedicated users willing to help you through various mediums.
 ---

 <h1>Community</h1>
 <p>
-  Vagrant is a stable project with a vibrant and growing community. While
-  it is impossible to name them all here, there are key members of the
-  Vagrant project whose success would not be possible without them. In
-  the interest of privacy and respect, please do not contact individual
-  maintainers for issues; use one of the following mediums instead.
+  Vagrant is an open source project with a growing community. There are
+  active, dedicated users willing to help you through various mediums.
 </p>
 <p>
  <strong>IRC:</strong> <code>#vagrant</code> on Freenode
 </p>
 <p>
-  <strong>Mailing list:</strong>
+  <strong>Announcement list:</strong>
+  <a href="https://groups.google.com/group/hashicorp-announce">HashiCorp Announcement Google Group</a>
+</p>
+<p>
+  <strong>Discussion list:</strong>
  <a href="https://groups.google.com/forum/#!forum/vagrant-up">Vagrant Google Group</a>
 </p>
 <p>
@ -29,78 +29,78 @@ description: |-
  on GitHub</a>. Please only use this for reporting bugs. Do not ask
  for general help here. Use IRC or the mailing list for that.
 </p>
+<p>
+  <strong>Training:</strong>
+  Paid <a href="https://www.hashicorp.com/training.html">HashiCorp training courses</a>
+  are also available in a city near you. Private training courses are also available.
+</p>

 <h2>People</h2>
 <p>
  The following people are some of the faces behind Vagrant. They each
  contribute to Vagrant in some core way. Over time, faces may appear and
-  disappear from this list as contributors come and go.
+  disappear from this list as contributors come and go. In addition to
+  the faces below, Vagrant is a project by
+  <a href="https://www.hashicorp.com">HashiCorp</a>, so many HashiCorp
+  employees actively contribute to Vagrant.
 </p>
 <div class="people">
-<div class="person">
-  <img class="pull-left" src="//www.gravatar.com/avatar/54079122b67de9677c1f93933ce8b63a.png?s=125">
-  <div class="bio">
-    <h3>Mitchell Hashimoto (<a href="https://github.com/mitchellh">@mitchellh</a>)</h3>
-    <p>
-      Mitchell Hashimoto is a creator of Vagrant. He has been with the
-      Vagrant project from the very beginning. Mitchell is also the
-      creator of
-      <a href="https://www.consul.io">Consul</a>,
-      <a href="https://www.packer.io">Packer</a>,
-      <a href="https://www.serf.io">Serf</a>, and
-      <a href="https://www.ottoproject.io">Otto</a>.
-    </p>
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/54079122b67de9677c1f93933ce8b63a.png?s=125">
+    <div class="bio">
+      <h3>Mitchell Hashimoto (<a href="https://github.com/mitchellh">@mitchellh</a>)</h3>
+      <p>
+        Mitchell Hashimoto is a creator of Vagrant. He has been with the
+        Vagrant project from the very beginning. Mitchell is also the
+        creator of
+        <a href="https://www.consul.io">Consul</a>,
+        <a href="https://www.packer.io">Packer</a>,
+        <a href="https://www.serf.io">Serf</a>, and
+        <a href="https://www.ottoproject.io">Otto</a>.
+      </p>
+    </div>
+  </div>
+
+  <div class="person">
+    <img class="pull-left" src="//www.gravatar.com/avatar/2acc31dd6370a54b18f6755cd0710ce6.png?s=125">
+    <div class="bio">
+      <h3>Jack Pearkes (<a href="https://github.com/pearkes">@pearkes</a>)</h3>
+      <p>
+        Jack Pearkes created and maintains many projects at HashiCorp. He
+        is the original author of Vagrant Cloud (now
+        <a href="https://atlas.hashicorp.com">Atlas</a>). He is also a
+        core committer to <a href="https://www.packer.io">Packer</a>
+        and maintains many successful
+        <a href="https://github.com/pearkes">open source projects</a>
+        while also being an employee of
+        <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>
+
+  <div class="person">
+    <img class="pull-left" src="//avatars1.githubusercontent.com/u/408570?v=3&amp;s=125">
+    <div class="bio">
+      <h3>Seth Vargo (<a href="https://github.com/sethvargo">@sethvargo</a>)</h3>
+      <p>
+        Seth Vargo is a core committer to Vagrant, with his main focus
+        being the core plugin system, pushes, and provisioners. Seth is
+        also a contributor to Consul, Packer, and Vault, all while being
+        an employee at <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
+  </div>
+
+  <div class="person">
+    <img class="pull-left" src="//avatars3.githubusercontent.com/u/37534?v=3&amp;s=125">
+    <div class="bio">
+      <h3>Paul Hinze (<a href="https://github.com/phinze">@phinze</a>)</h3>
+      <p>
+        Paul Hinze is a contributor to Vagrant, with his main focus being
+        provisioners and working on HashiCorp's external plugins.  He is
+        also a core committer to <a href="https://www.terraform.io">Terraform</a>,
+        all while being an employee at <a href="https://www.hashicorp.com">HashiCorp</a>.
+      </p>
+    </div>
  </div>
 </div>
-
-<div class="clearfix"></div>
-
-<div class="person">
-  <img class="pull-left" src="//www.gravatar.com/avatar/2acc31dd6370a54b18f6755cd0710ce6.png?s=125">
-  <div class="bio">
-    <h3>Jack Pearkes (<a href="https://github.com/pearkes">@pearkes</a>)</h3>
-    <p>
-      Jack Pearkes created and maintains many projects at HashiCorp. He
-      is the original author of Vagrant Cloud (now
-      <a href="https://atlas.hashicorp.com">Atlas</a>). He is also a
-      core committer to <a href="https://www.packer.io">Packer</a>
-      and maintains many successful
-      <a href="https://github.com/pearkes">open source projects</a>
-      while also being an employee of
-      <a href="https://www.hashicorp.com">HashiCorp</a>.
-    </p>
-  </div>
-</div>
-
-<div class="clearfix"></div>
-
-<div class="person">
-  <img class="pull-left" src="//avatars1.githubusercontent.com/u/408570?v=3&amp;s=125">
-  <div class="bio">
-    <h3>Seth Vargo (<a href="https://github.com/sethvargo">@sethvargo</a>)</h3>
-    <p>
-      Seth Vargo is a core committer to Vagrant, with his main focus
-      being the core plugin system, pushes, and provisioners. Seth is
-      also a contributor to Consul, Packer, and Vault, all while being
-      an employee at <a href="https://www.hashicorp.com">HashiCorp</a>.
-    </p>
-  </div>
-</div>
-
-<div class="clearfix"></div>
-
-<div class="person">
-  <img class="pull-left" src="//avatars3.githubusercontent.com/u/37534?v=3&amp;s=125">
-  <div class="bio">
-    <h3>Paul Hinze (<a href="https://github.com/phinze">@phinze</a>)</h3>
-    <p>
-      Paul Hinze is a contributor to Vagrant, with his main focus being
-      provisioners and working on HashiCorp's external plugins.  He is
-      also a core committer to <a href="https://www.terraform.io">Terraform</a>,
-      all while being an employee at <a href="https://www.hashicorp.com">HashiCorp</a>.
-    </p>
-  </div>
-</div>
-
-<div class="clearfix"></div>
-</div>
--- a/website/source/docs/index.html.md
+++ b/website/source/docs/index.html.md
@ -15,10 +15,10 @@ Welcome to the documentation for Vagrant - the command line utility for managing
 the lifecycle of virtual machines. This website aims to document every feature
 of Vagrant from top-to-bottom, covering as much detail as possible. If you are
 just getting started with Vagrant, it is highly recommended that you start with
-the [getting started guide](/docs/getting-started/) first, and then return to
-this page.
+the [getting started guide](/intro/getting-started/index.html) first, and then
+return to this page.

 The navigation will take you through each component of Vagrant. Click on a
 navigation item to get started, or read more about
-[why developers, designers, and operators choose Vagrant](/docs/why-vagrant/)
+[why developers, designers, and operators choose Vagrant](/intro/index.html)
 for their needs.
--- a/website/source/docs/multi-machine/index.html.md
+++ b/website/source/docs/multi-machine/index.html.md
@ -73,11 +73,13 @@ below:

 ```ruby
 Vagrant.configure("2") do |config|
-    config.vm.provision :shell, inline: "echo A"
-    config.vm.define :testing do |test|
-        test.vm.provision :shell, inline: "echo B"
-    end
-    config.vm.provision :shell, inline: "echo C"
+  config.vm.provision :shell, inline: "echo A"
+
+  config.vm.define :testing do |test|
+    test.vm.provision :shell, inline: "echo B"
+  end
+
+  config.vm.provision :shell, inline: "echo C"
 end
 ```

--- a/website/source/docs/networking/public_network.html.md
+++ b/website/source/docs/networking/public_network.html.md
@ -138,6 +138,7 @@ other networks over the public network. To do so, you can use a shell
 provisioner script:

 ```ruby
+Vagrant.configure("2") do |config|
  config.vm.network "public_network", ip: "192.168.0.17"

  # default router
@ -154,6 +155,7 @@ provisioner script:
  config.vm.provision "shell",
    run: "always",
    inline: "eval `route -n | awk '{ if ($8 ==\"eth0\" && $2 != \"0.0.0.0\") print \"route del default gw \" $2; }'`"
+end
 ```

 Note the above is fairly complex and may be guest OS specific, but we
--- a/website/source/docs/other/debugging.html.md
+++ b/website/source/docs/other/debugging.html.md
@ -11,9 +11,7 @@ description: |-
 # Debugging

 As much as we try to keep Vagrant stable and bug free, it is inevitable
-that issues will arise and Vagrant will behave in unexpected ways. In
-these cases, Vagrant has amazing [support](/support.html)
-channels available to assist you.
+that issues will arise and Vagrant will behave in unexpected ways.

 When using these support channels, it is generally helpful to include
 debugging logs along with any error reports. These logs can often help you
@ -65,7 +63,7 @@ stdout using `&>`:
 $ vagrant up --debug &> vagrant.log
 ```

-On Windows: 
+On Windows:
 ```
 $ vagrant up --debug > vagrant.log 2>&1
 ```
--- a/website/source/docs/synced-folders/nfs.html.md
+++ b/website/source/docs/synced-folders/nfs.html.md
@ -18,11 +18,8 @@ than ideal performance with synced folders, [NFS](https://en.wikipedia.org/wiki/
 can offer a solution. Vagrant has built-in support to orchestrate the
 configuration of the NFS server on the host and guest for you.

-<div class="alert alert-info">
-  <strong>Windows users:</strong> NFS folders do not work on Windows
-  hosts. Vagrant will ignore your request for NFS synced folders on
-  Windows.
-</div>
+~> **Windows users:** NFS folders do not work on Windows hosts. Vagrant will
+ignore your request for NFS synced folders on Windows.

 ## Prerequisites

@ -44,8 +41,6 @@ To enable NFS, just add the `type: "nfs"` flag onto your synced folder:

 ```ruby
 Vagrant.configure("2") do |config|
-  # ...
-
  config.vm.synced_folder ".", "/vagrant", type: "nfs"
 end
 ```
@ -94,10 +89,10 @@ In addition to the options specified above, it is possible for Vagrant to
 specify alternate NFS arguments when mounting the NFS share by using the
 `mount_options` key. For example, to use the `actimeo=2` client mount option:

-```
+```ruby
 config.vm.synced_folder ".", "/vagrant",
-    :nfs => true,
-    :mount_options => ['actimeo=2']
+  nfs: true,
+  mount_options: ['actimeo=2']
 ```

 This would result in the following `mount` command being executed on the guest:
@ -112,10 +107,10 @@ when the mount is added, by using the OS-specific `linux__nfs_options` or
 arguments that are added by Vagrant automatically. For example, to make the
 NFS share asynchronous:

-```
+```ruby
 config.vm.synced_folder ".", "/vagrant",
-    :nfs => true,
-    :linux__nfs_options => ['rw','no_subtree_check','all_squash','async']
+  nfs: true,
+  linux__nfs_options: ['rw','no_subtree_check','all_squash','async']
 ```

 This would result in the following content in `/etc/exports` on the host (note
@ -206,11 +201,11 @@ mount.nfs: an incorrect mount option was specified

 When using NFSv4, ensure the `nfs_udp` option is set to false. For example:

-```
+```ruby
 config.vm.synced_folder ".", "/vagrant",
-    :nfs => true,
-    :nfs_version => 4,
-    :nfs_udp => false
+  nfs: true,
+  nfs_version: 4,
+  nfs_udp: false
 ```

 For more information about transport protocols and NFS version 4 see:
--- a/website/source/docs/vmware/installation.html.md
+++ b/website/source/docs/vmware/installation.html.md
@ -125,7 +125,7 @@ $ vagrant plugin install vagrant-vmware-workstation

 ## Support
 If you have any issues purchasing, installing, or using the Vagrant VMware
-plugins, please [contact support](/support.html). To
+plugins, please [contact support](mailto:support@hashicorp.com). To
 expedite the support process, please include the
-[Vagrant debug output](/docs/other/debugging.html) as a Gist or pastebin if
+[Vagrant debug output](/docs/other/debugging.html) as a Gist if
 applicable. This will help us more quickly diagnose your issue.
--- a/website/source/docs/why-vagrant/index.html.md
+++ b/website/source/docs/why-vagrant/index.html.md
@ -1,52 +0,0 @@
---
-layout: "docs"
-page_title: "Why Vagrant?"
-sidebar_current: "why"
-description: |-
-  Vagrant provides easy to configure, reproducible, and portable work
-  environments built on top of industry-standard technology and controlled by a
-  single consistent workflow to help maximize the productivity and flexibility
-  of you and your team.
---
-
-# Why Vagrant?
-
-Vagrant provides easy to configure, reproducible, and portable work environments
-built on top of industry-standard technology and
-controlled by a single consistent workflow to help maximize the productivity
-and flexibility of you and your team.
-
-To achieve its magic, Vagrant stands on the shoulders of giants. Machines
-are provisioned on top of VirtualBox, VMware, AWS, or
-[any other provider](/docs/providers/). Then, industry-standard
-[provisioning tools](/docs/provisioning/)
-such as shell scripts, Chef, or Puppet, can be used to automatically install
-and configure software on the machine.
-
-## How Vagrant Benefits You
-
-If you are a **developer**, Vagrant will isolate dependencies and their
-configuration within a single disposable, consistent environment, without
-sacrificing any of the tools you are used to working with (editors, browsers,
-debuggers, etc.). Once you or someone else creates a single [Vagrantfile](/docs/vagrantfile/), you just need to `vagrant up` and everything is installed and
-configured for you to work. Other members of your team create their
-development environments from the same configuration, so whether you are working
-on Linux, Mac OS X, or Windows, all your team members are running code in
-the same environment, against the same dependencies, all configured the same way.
-Say goodbye to "works on my machine" bugs.
-
-If you are an **operations engineer**, Vagrant gives you a disposable environment
-and consistent workflow for developing and testing infrastructure management
-scripts. You can quickly test things like shell scripts, Chef cookbooks,
-Puppet modules, and more using local virtualization such as VirtualBox or
-VMware. Then, with the _same configuration_, you can test these scripts
-on remote clouds such as AWS or RackSpace with the _same workflow_. Ditch
-your custom scripts to recycle EC2 instances, stop juggling SSH prompts
-to various machines, and start using Vagrant to bring sanity to your life.
-
-If you are a **designer**, Vagrant will automatically set everything up that is required
-for that web app in order for you to focus on doing what you do best:
-design. Once a developer configures Vagrant, you do not need to worry about
-how to get that app running ever again. No more bothering other developers
-to help you fix your environment so you can test designs. Just check out the
-code, `vagrant up`, and start designing.
--- a/website/source/downloads.html.erb
+++ b/website/source/downloads.html.erb
@ -47,9 +47,11 @@ description: |-
    </div>
  <% end %>

-  <div class="poweredby">
-    <a href="https://www.fastly.com?utm_source=hashicorp" target="_blank" rel="nofollow noopener noreferrer">
-      <%= image_tag "fastly_logo.png" %>
-    </a>
+  <div class="row">
+    <div class="poweredby">
+      <a href="https://www.fastly.com?utm_source=hashicorp" target="_blank" rel="nofollow noopener noreferrer">
+        <%= inline_svg "fastly.svg", height: 50 %>
+      </a>
+    </div>
  </div>
 </div>
--- a/website/source/favicon.ico
+++ b/website/source/favicon.ico
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@ -4,109 +4,127 @@ description: |-
  portable development environments.
 ---

-<div class="page home">
+<header>
+  <div class="container hero">
+    <div class="row">
+      <div class="col-md-offset-2 col-md-8">
+        <%= inline_svg "logo-text.svg", height: 120, class: "logo" %>

-  <section class="hero">
-    <div class="container">
-      <div class="hero-content">
+        <h1>Development Environments Made Easy</h1>

-        <div class="row">
-          <div class="col-md-12">
-            <hgroup>
-            <h1>Development environments made easy.</h1>
-            <p>Create and configure lightweight, reproducible, and portable development environments.</p>
-            </hgroup>
-          </div>
-        </div>
-
-        <div class="row">
-          <a href="/downloads.html" class="no-hover-underline">
-            <div id="button-download" class="button col-md-3 col-md-offset-3">
-              <span>Download</span>
-            </div>
-          </a>
-
-          <a href="/docs/getting-started/" class="no-hover-underline">
-            <div id="button-get-started" class="button button col-md-3">
-              <span>Get Started</span>
-            </div>
-          </a>
-        </div>
+        <a class="button primary" href="/intro/index.html">Get Started</a>
+        <a class="button" href="/downloads.html">Download <%= latest_version %></a>
+        <a class="button" href="https://atlas.hashicorp.com/boxes/search" target="_TOP">Find Boxes</a>
      </div>
    </div>
-    </section>
+  </div>
+</header>

-    <section class="why-vagrant">
-    <div class="container">
-      <div class="row">
-        <h2 class="col-md-12">
-          Vagrant will change how you work
-        </h2>
+<section id="simple" class="marketing blue">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <span class="callout">Unified Workflow</span>
+        <h2>Simple and Powerful</h2>
+        <p>
+          Vagrant provides the same, easy workflow regardless of your role as
+          a developer, operator, or designer. It leverages a declarative
+          configuration file which describes all your software requirements,
+          packages, operating system configuration, users, and more.
+        </p>
      </div>
-      <div class="row">
-        <div class="col-sm-8 col-sm-offset-2">
-          <hgroup>
-          <h3>Set Up</h3>
-          <p>
-            Download and install Vagrant within minutes on Mac OS X, Windows, or a popular distribution of Linux. No complicated setup process, just a simple to use OS-standard installer.
-          </p>
-          </hgroup>
-
-          <hgroup>
-          <h3>Configure</h3>
-          <p>
-            Create a single file for your project to describe the type of machine you want, the software that needs to be installed, and the way you want to access the machine. Store this file with your project code.
-          </p>
-          </hgroup>
-
-          <hgroup>
-          <h3>Work</h3>
-          <p>
-            Run a single command &mdash; "vagrant up" &mdash; and sit back as Vagrant puts together your complete development environment. Say goodbye to the "works on my machine" excuse as Vagrant creates identical development environments for everyone on your team.
-          </p>
-          </hgroup>
-        </div>
-      </div>
-    </div>
-    </section>
-
-    <section class="get-started">
-    <div class="container">
-      <div class="row">
-        <div class="col-md-12">
-
-          <h2 class="all-caps">
-            See how easy it is
-          </h2>
-          <pre>
-$ vagrant init hashicorp/precise64
-$ vagrant up
-          </pre>
-          </div>
-        </div>
-        <div class="row">
-          <a href="/docs/getting-started/" class="no-hover-underline">
-            <div class="button white-button with-carat col-md-6 col-md-offset-3">
-              <span>get started&raquo;</span>
-            </div>
-          </a>
-        </div>
-      </div>
-      </section>
-
-      <section class="customers black">
-      <div class="container">
-        <div class="row">
-          <div class="customers-content col-md-12">
-            <h2 class="all-caps">
-              Trusted by
-            </h2>
-            <div class="customer-logos">
-              <%= image_tag "customers.png", alt: "customers", width: 941, height: 111 %>
-            </div>
+      <div class="col-md-6">
+        <div class="terminal">
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <span class="circle"></span>
+          <div class="terminal-content">
+            <span class="command">$ vagrant init hashicorp/precise64</span>
+            <span>&nbsp;</span>
+            <span class="command">$ vagrant up</span>
+            <span>Bringing machine 'default' up with 'virtualbox' provider...</span>
+            <span>==> default: Importing base box 'hashicorp/precise64'...</span>
+            <span>==> default: Forwarding ports...</span>
+            <span>    default: 22 (guest) => 2222 (host) (adapter 1)</span>
+            <span>==> default: Waiting for machine to boot...</span>
+            <span>&nbsp;</span>
+            <span class="command">$ vagrant ssh</span>
+            <span>vagrant@precise64:~$ _</span>
          </div>
        </div>
      </div>
-      </section>
-
    </div>
+  </div>
+</section>
+
+<section id="parity" class="marketing">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <div class="parity-image">
+          <%= inline_svg "parity.svg" %>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <span class="callout">Enforce Consistency</span>
+        <h2>Production Parity</h2>
+        <p>
+          The cost of fixing a bug exponentially increases the closer it gets to
+          production. Vagrant aims to mirror production environments by
+          providing the same operating system, packages, users, and
+          configurations, all while giving users the flexibility to use their
+          favorite editor, IDE, and browser. Vagrant also integrates with your
+          existing configuration management tooling like Chef, Puppet, Ansible,
+          or Salt, so you can use the same scripts to configure Vagrant as
+          production.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="cross" class="marketing blue-dark">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-6">
+        <span class="callout">Cross-Platform</span>
+        <h2>Works where you work</h2>
+        <p>
+          Vagrant works on Mac, Linux, Windows, and more. Remote development
+          environments force users to give up their favorite editors and
+          programs. Vagrant works on your local system with the tools you're
+          already familiar with. Easily code in your favorite text editor, edit
+          images in your favorite manipulation program, and debug using your
+          favorite tools, all from the comfort of your local laptop.
+        </p>
+      </div>
+      <div class="col-md-6">
+        <div class="systems">
+          <%= inline_svg "systems/apple.svg" %>
+          <%= inline_svg "systems/linux.svg" %>
+          <%= inline_svg "systems/windows.svg" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="trusted" class="marketing black">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-12">
+        <span class="callout">Trusted at Scale</span>
+        <h2>Trusted By</h2>
+        <p>
+          Vagrant is trusted by thousands of developers, operators, and
+          designers everyday. Here are just a few of the organizations that
+          choose Vagrant to automate their development environments, in
+          lightweight and reproducible ways.
+        </p>
+        <p class="logos">
+          <%= image_tag "customers.png", alt: "customers" %>
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
--- a/website/source/intro/getting-started/boxes.html.md
+++ b/website/source/intro/getting-started/boxes.html.md
@ -1,5 +1,5 @@
 ---
-layout: "docs"
+layout: "intro"
 page_title: "Boxes - Getting Started"
 sidebar_current: "gettingstarted-boxes"
 description: |-
@ -20,7 +20,7 @@ the first step after creating a new Vagrantfile.

 ## Installing a Box

-If you ran the commands on the [getting started overview page](/docs/getting-started/),
+If you ran the commands on the [getting started overview page](/intro/getting-started/),
 then you've already installed a box before, and you do not need to run
 the commands below again. However, it is still worth reading this section
 to learn more about how boxes are managed.
@ -116,4 +116,4 @@ own organization.

 You have successfully downloaded your first Vagrant box and configured the
 Vagrantfile to utilize that box. Read on to learn about [bringing up and access
-the Vagrant machine via SSH](/docs/getting-started/up.html).
+the Vagrant machine via SSH](/intro/getting-started/up.html).
--- a/website/source/intro/getting-started/index.html.md
+++ b/website/source/intro/getting-started/index.html.md
@ -1,5 +1,5 @@
 ---
-layout: "docs"
+layout: "intro"
 page_title: "Getting Started"
 sidebar_current: "gettingstarted"
 description: |-
@ -15,12 +15,12 @@ Vagrant project, and show off the basics of the major features Vagrant
 has to offer.

 If you are curious what benefits Vagrant has to offer, you
-should also read the ["Why Vagrant?"](/docs/why-vagrant/) page.
+should also read the ["Why Vagrant?"](/intro/index.html) page.

 The getting started guide will use Vagrant with [VirtualBox](https://www.virtualbox.org),
 since it is free, available on every major platform, and built-in to
 Vagrant. After reading the guide though, do not forget that Vagrant
-can work with [many other providers](/docs/getting-started/providers.html).
+can work with [many other providers](/intro/getting-started/providers.html).

 Before diving into your first project, please [install the latest version of Vagrant](/docs/installation/).
 And because we will be using [VirtualBox](https://www.virtualbox.org) as our
@ -58,4 +58,4 @@ complete project, covering more features of Vagrant.
 ## Next Steps

 You have just created your first virtual environment with Vagrant. Read on to
-learn more about [project setup](/docs/getting-started/project_setup.html).
+learn more about [project setup](/intro/getting-started/project_setup.html).
--- a/website/source/intro/getting-started/install.html.md
+++ b/website/source/intro/getting-started/install.html.md
@ -0,0 +1,55 @@
+---
+layout: "intro"
+page_title: "Install Vagrant - Getting Started"
+sidebar_current: "gettingstarted-install"
+description: |-
+  Installing Vagrant is extremely easy. Head over to the Vagrant downloads page
+  and get the appropriate installer or package for your platform. Install the
+  package using standard procedures for your operating system.
+---
+
+# Install Vagrant
+
+Vagrant must first be installed on the machine you want to run it on. To make
+installation easy, Vagrant is distributed as a [binary package](/downloads.html)
+for all supported platforms and architectures. This page will not cover how to
+compile Vagrant from source, as that is covered in the
+[README](https://github.com/mitchellh/vagrant/blob/master/README.md) and is only
+recommended for advanced users.
+
+## Installing Vagrant
+
+To install Vagrant, first find the [appropriate package](/downloads.html) for
+your system and download it. Vagrant is packaged as an operating-specific
+package. Run the installer for your system. The installer will automatically add
+`vagrant` to your system path so that it is available in terminals. If it is not
+found, please try logging out and logging back in to your system (this is
+particularly necessary sometimes for Windows).
+
+## Verifying the Installation
+
+After installing Vagrant, verify the installation worked by opening a new command prompt or console, and checking that `vagrant` is available:
+
+```text
+$ vagrant
+Usage: vagrant [options] <command> [<args>]
+
+    -v, --version                    Print the version and exit.
+    -h, --help                       Print this help.
+
+# ...
+```
+
+## Caveats
+
+~> **Beware of system package managers!** Some operating system distributions
+include a vagrant package in their upstream package repos. Please do not install
+Vagrant in this manner. Typically these packages are missing dependencies or
+include very outdated versions of Vagrant. If you install via your system's
+package manager, it is very likely that you will experience issues. Please use
+the official installers on the downloads page.
+
+## Next Steps
+
+You have successfully downloaded and installed Vagrant! Read on to learn about
+[setting up your first Vagrant project](/intro/getting-started/project_setup.html).
--- a/website/source/intro/getting-started/networking.html.md
+++ b/website/source/intro/getting-started/networking.html.md
@ -1,5 +1,5 @@
 ---
-layout: "docs"
+layout: "intro"
 page_title: "Networking - Getting Started"
 sidebar_current: "gettingstarted-networking"
 description: |-
@ -56,4 +56,4 @@ read the [networking](/docs/networking/) page.

 You have successfully configured networking for your virtual machine using
 Vagrant. Read on to learn about
-[setting up shares with Vagrant](/docs/getting-started/share.html).
+[setting up shares with Vagrant](/intro/getting-started/share.html).
--- a/website/source/intro/getting-started/project_setup.html.md
+++ b/website/source/intro/getting-started/project_setup.html.md
@ -1,5 +1,5 @@
 ---
-layout: "docs"
+layout: "intro"
 page_title: "Project Setup - Getting Started"
 sidebar_current: "gettingstarted-projectsetup"
 description: |-
@ -43,4 +43,4 @@ with that project can benefit from Vagrant without any upfront work.
 ## Next Steps

 You have successfully created your first project environment. Read on to learn
-more about [Vagrant boxes](/docs/getting-started/boxes.html).
+more about [Vagrant boxes](/intro/getting-started/boxes.html).
--- a/Show More
+++ b/Show More