From 7e8de1fe2f2e09bd4e0f05e3a6b7cd48816db8a0 Mon Sep 17 00:00:00 2001
From: Christian Nunciato <c@nunciato.org>
Date: Mon, 1 Jul 2019 15:55:51 -0700
Subject: [PATCH 1/3] Add an About link to the headerr

Signed-off-by: Christian Nunciato <c@nunciato.org>
---
 content/about.md             | 4 ++++
 layouts/partials/header.html | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/content/about.md b/content/about.md
index 6209fb2381ef..92a373a37ee0 100644
--- a/content/about.md
+++ b/content/about.md
@@ -1,4 +1,8 @@
 ---
 title: About
 layout: about
+
+menu:
+    header:
+        weight: 6
 ---
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 04a134143b03..92bbd2394662 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -18,8 +18,8 @@
 
 <nav class="nav-main bg-purple-700 py-6 px-4 lg:px-0 border-t border-purple-500">
     <div class="container mx-auto">
-        <header class="flex items-center justify-between flex-wrap">
-            <div class="flex items-center flex-shrink-0 text-white mr-6">
+        <header class="flex items-center justify-between flex-wrap md:flex-no-wrap">
+            <div class="flex items-center flex-shrink-0 text-white lg:mr-6">
                 <a class="block" href="/">
                     <img class="h-10 block" src="/images/logo/logo-inv.svg" alt="Pulumi logo">
                 </a>
@@ -33,7 +33,7 @@
 
             <ul class="nav-header-items hidden w-full flex-grow md:flex md:items-center md:w-auto text-white text-sm md:text-xs lg:text-sm uppercase pt-4 md:pt-0">
                 {{ range $.Site.Menus.header }}
-                    <li>
+                    <li class="whitespace-no-wrap">
                         {{ $active := hasPrefix $.RelPermalink .URL }}
                         <a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 my-2 md:my-0 lg:mx-4 border hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
                             {{ .Name }}

From 3a1a6fd2573704be2b22a5e6f05402255a3aacdd Mon Sep 17 00:00:00 2001
From: Christian Nunciato <c@nunciato.org>
Date: Mon, 1 Jul 2019 20:50:47 -0700
Subject: [PATCH 2/3] Add home-page carousel

Signed-off-by: Christian Nunciato <c@nunciato.org>
---
 assets/js/main.js                             |  33 +++++
 assets/sass/styles.scss                       |   4 +
 layouts/index.html                            |  21 ++-
 layouts/partials/chrome.html                  |   7 +
 layouts/partials/code-display.html            |  25 ----
 layouts/partials/code.html                    |   8 +-
 layouts/partials/hero.html                    | 125 ------------------
 .../home/{Home2-CLI.png => carousel-cli.png}  | Bin
 .../{Home1-Code.png => carousel-code.png}     | Bin
 ...Home3-Console.png => carousel-console.png} | Bin
 10 files changed, 59 insertions(+), 164 deletions(-)
 create mode 100644 layouts/partials/chrome.html
 delete mode 100644 layouts/partials/code-display.html
 delete mode 100644 layouts/partials/hero.html
 rename static/images/home/{Home2-CLI.png => carousel-cli.png} (100%)
 rename static/images/home/{Home1-Code.png => carousel-code.png} (100%)
 rename static/images/home/{Home3-Console.png => carousel-console.png} (100%)

diff --git a/assets/js/main.js b/assets/js/main.js
index f740ff78cc73..213034c997b2 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -50,4 +50,37 @@ function generateMiniToc() {
     $(".blog-sidebar-toggle").click(function () {
         $(".blog-sidebar-content").toggleClass("hidden");
     });
+
+    // Home-page carousel. Items cycle every four seconds. Clicking a label stops the
+    // cycling and shows the selected item.
+    var carouselIndex = 1;
+
+    var carouselInterval = window.setInterval(function() {
+        showCarouselItem(carouselIndex);
+        carouselIndex++;
+
+        if (carouselIndex > 2) {
+            carouselIndex = 0;
+        }
+    }, 4000);
+
+    $(".carousel-item-label").click(function() {
+        clearInterval(carouselInterval);
+
+        var i = $(".carousel-item-label").index(this);
+        showCarouselItem(i);
+    });
+
+    function showCarouselItem(i) {
+        $(".carousel-item")
+            .css("opacity", 0)
+            .eq(i)
+            .css("opacity", 1);
+
+        $(".carousel-item-label")
+            .removeClass("border-b-2")
+            .eq(i)
+            .addClass("border-b-2");
+    }
+
 }(jQuery));
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index e8ed057d24a8..ca779da50ed9 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -112,6 +112,10 @@ main {
 
 .transition-all {
     @include transition(all);
+
+    &-200 {
+        @include transition($duration: 200ms);
+    }
 }
 
 .github-widget {
diff --git a/layouts/index.html b/layouts/index.html
index b89e320ebd2d..7ecec1405da0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,5 @@
 {{ define "hero" }}
-    <header class="header-hero">
+    <header class="header-hero header-hero-glow">
         <div class="header-hero-items container mx-auto">
             <div class="header-hero-item">
                 <h1>Modern Infrastructure as Code</h1>
@@ -13,12 +13,19 @@ <h1>Modern Infrastructure as Code</h1>
                 </div>
             </div>
             <div class="header-hero-item">
-                <iframe class="rounded shadow-lg max-w-full"
-                    width="648" height="356"
-                    src="https://www.youtube.com/embed/B2Z2bT4Q-NY?rel=0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                    frameborder="0"
-                    allowfullscreen></iframe>
+                <div class="max-w-xl text-center">
+                    {{ partial "chrome.html" . }}
+                    <div class="relative overflow-auto relative rounded-b">
+                        <img class="carousel-item opacity-1 transition-all-200" src="/images/home/carousel-code.png" alt="Pulumi code">
+                        <img class="carousel-item opacity-0 transition-all-200 absolute inset-0" src="/images/home/carousel-cli.png" alt="Pulumi CLI">
+                        <img class="carousel-item opacity-0 transition-all-200 absolute inset-0" src="/images/home/carousel-console.png" alt="Pulumi Console">
+                    </div>
+                    <div class="inline-flex text-sm font-bold my-6">
+                        <a class="carousel-item-label cursor-pointer pb-1 border-b-2 border-orange-500">Code</a>
+                        <a class="carousel-item-label cursor-pointer pb-1 mx-4 border-orange-500">CLI</a>
+                        <a class="carousel-item-label cursor-pointer pb-1 border-orange-500">Console</a>
+                    </ul>
+                </div>
             </div>
         </div>
     </header>
diff --git a/layouts/partials/chrome.html b/layouts/partials/chrome.html
new file mode 100644
index 000000000000..36cf73e329ba
--- /dev/null
+++ b/layouts/partials/chrome.html
@@ -0,0 +1,7 @@
+<div class="bg-gray-400 rounded-t">
+    <div class="flex p-3">
+        <div class="bg-red-600 rounded-full h-3 w-3"></div>
+        <div class="bg-yellow-600 rounded-full h-3 w-3 mx-2"></div>
+        <div class="bg-green-600 rounded-full h-3 w-3"></div>
+    </div>
+</div>
diff --git a/layouts/partials/code-display.html b/layouts/partials/code-display.html
deleted file mode 100644
index f9e7fb78835c..000000000000
--- a/layouts/partials/code-display.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="content hero_anim_content">
-    <div class="trigger-container">
-        <div class="code_container">
-            <div class="anim_headbar">
-                <div class="dot-container">
-                    <div class="window-dot dot-red"></div>
-                    <div class="window-dot dot-yellow"></div>
-                    <div class="window-dot dot-green"></div>
-                </div>
-            </div>
-            <div class="anim_textbox code_display_textbox">
-                <img src="/images/home/Home1-Code.png" class="code-display" width="600">
-                <img src="/images/home/Home2-CLI.png" class="code-display" width="600">
-                <img src="/images/home/Home3-Console.png" class="code-display" width="600">
-            </div>
-        </div>
-    </div>
-    <div class="trigger-container trig-main">
-        <div class="trigger-list text-center trig-display">
-            <a href="#" class="trigger-link small-trigger">Code</a>
-            <a href="#" class="trigger-link small-trigger">CLI</a>
-            <a href="#" class="trigger-link small-trigger">Console</a>
-        </div>
-    </div>
-</div>
diff --git a/layouts/partials/code.html b/layouts/partials/code.html
index d32564c602e9..7140bb3ed796 100644
--- a/layouts/partials/code.html
+++ b/layouts/partials/code.html
@@ -5,13 +5,7 @@
 
 <div class="code-mode-{{ default "light" .mode }} {{ if .chrome }} code-chrome {{ end }} code-{{ .lang }}">
     {{ if .chrome }}
-        <div class="bg-gray-400 rounded-t">
-            <div class="flex p-3">
-                <div class="bg-red-600 rounded-full h-3 w-3"></div>
-                <div class="bg-yellow-600 rounded-full h-3 w-3 mx-2"></div>
-                <div class="bg-green-600 rounded-full h-3 w-3"></div>
-            </div>
-        </div>
+        {{ partial "chrome.html" . }}
     {{ end }}
     {{ highlight .code $lang (default "" .opts) }}
 </div>
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
deleted file mode 100644
index 31cb2631ce61..000000000000
--- a/layouts/partials/hero.html
+++ /dev/null
@@ -1,125 +0,0 @@
-{{ if and (isset .Params "hero_title") (isset .Params "hero_img") (not (isset .Params "hero_codeblock")) }}
-<section class="hero white-text {{ with .Params.hero_classes }}{{ . }}{{ end }} {{ if .Params.hero_footer_waves }}has-footer-waves{{ end }}">
-	<div class="container-fluid">
-		<div class="row valign-center cols-are-spaced-md">
-			<div class="col col-md-5 col-md-push-7 col-lg-5 col-lg-push-7 col-right col-img hidden-xs hidden-sm">
-				<div class="content">
-					<img src="{{ .Params.hero_img }}" alt="{{ .Params.hero_img_alt }}" width="{{ .Params.hero_img_width }}">
-				</div>
-			</div>
-			<div class="col col-md-7 col-md-pull-5 col-lg-7 col-lg-pull-5 col-left col-text">
-				<div class="content">
-
-					<h1>{{ .Params.hero_title | safeHTML }}</h1>
-					{{ with .Params.hero_description}}<p class="intro">{{ . | safeHTML }}</p>{{ end }}
-					{{ if .Params.hero_buttons }}{{ partial "get-started-button.html" . }}{{ end }}
-					{{ with .Params.hero_buttons }}{{ . | safeHTML }}{{ end }}
-				</div>
-				
-			</div>
-		</div>
-	</div>
-	{{ if .Params.hero_footer_waves }}<div class="footer-waves"></div>{{ end }}
-</section>
-
-{{ else if and (isset .Params "hero_title") (not (isset .Params "hero_img")) (not (isset .Params "hero_codeblock")) (not (isset .Params "hero_right_content")) (not (isset .Params "hero_bg_video")) }}
-
-<section class="content-block text-center {{ with .Params.hero_classes }}{{ . }}{{ end }} {{ if .Params.hero_footer_waves }}has-footer-waves{{ end }}">
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-				<div class="content">
-					{{ if and (isset .Params "hero_display_breadcrumb") (eq .Params.hero_display_breadcrumb true) }}
-						{{ partial "breadcrumb.html" . }}
-					{{end}}
-					<h1 class="{{ with .Params.hero_title_class }}{{ . }}{{else}}h2{{ end }}">{{ .Params.hero_title | safeHTML }}</h1>
-					{{ with .Params.hero_description }}<p class="intro">{{ . | safeHTML }}</p>{{ end }}
-					{{ if .Params.hero_buttons }}{{ partial "get-started-button.html" . }}{{ end }}
-					{{ with .Params.hero_buttons }}{{ . | safeHTML }}{{ end }}
-				</div>
-				
-			</div>
-		</div>
-	</div>
-	{{ if .Params.hero_footer_waves }}<div class="footer-waves"></div>{{ end }}
-</section>
-
-{{ else if and (isset .Params "hero_title") (isset .Params "hero_codeblock") }}
-<section class="hero white-text {{ with .Params.hero_classes }}{{ . }}{{ end }} {{ if .Params.hero_footer_waves }}has-footer-waves{{ end }}">
-    <div class="container-fluid">
-        <div class="row cols-are-spaced-md">
-            <div class="col col-md-7 col-lg-7 col-left col-text">
-                <div class="content">
-                    <h1>{{ .Params.hero_title | safeHTML }}</h1>
-                    {{ with .Params.hero_description }}<p class="intro">{{ . | safeHTML }}</p>{{ end }}
-                    {{if and (isset .Params "code_display") }}
-                        <div class="trigger-container trig-main">
-                            {{ with .Params.hero_mininav}}{{ partial "mininav-hero.html" . }}{{ end }}
-                        </div>
-                    {{ end }}
-                    {{ if .Params.hero_buttons }}{{ partial "get-started-button.html" . }}{{ end }}
-                    {{ with .Params.hero_buttons }}{{ . | safeHTML }}{{ end }}
-                </div>
-            </div>
-            <div class="col col-md-5 col-lg-5 col-right col-img">
-                <div class="content hero_anim_content">
-                    {{if and (isset .Params "code_display") }}
-                        <div class="trigger-container trig-hidden">
-                            {{ with .Params.hero_mininav}}{{ partial "mininav-hero.html" . }}{{ end }}
-                        </div>
-                    {{ end }}
-                    {{ if and (isset .Params "code_anim") }}
-                        {{ partial "code-anim.html" . }}
-                    {{ else if and (isset .Params "code_display") }}
-                        {{ partial "code-display.html" . }}
-                    {{end}}
-                </div>
-            </div>
-        </div>
-    </div>
-    {{ if .Params.hero_footer_waves }}<div class="footer-waves"></div>{{ end }}
-</section>
-
-{{ else if and (isset .Params "hero_title") (isset .Params "hero_right_content") }}
-<section class="hero white-text {{ with .Params.hero_classes }}{{ . }}{{ end }} {{ if .Params.hero_footer_waves }}has-footer-waves{{ end }}">
-	<div class="container-fluid">
-		<div class="row cols-are-spaced-md">
-			<div class="col col-md-7 col-lg-7 col-left col-text before-glare">
-				<div class="content">
-					{{ with .Params.topic }}<sup>{{ . | safeHTML }}</sup>{{ end }}
-					<h1>{{ .Params.hero_title | safeHTML }}</h1>
-					{{ with .Params.hero_description }}<p class="intro">{{ . | safeHTML }}</p>{{ end }}
-					{{ if .Params.hero_buttons }}{{ partial "get-started-button.html" . }}{{ end }}
-					{{ with .Params.hero_buttons }}{{ . | safeHTML }}{{ end }}
-				</div>
-				
-			</div>
-			<div class="col col-md-5 col-lg-5 col-right">
-				<div class="content">
-					{{ .Params.hero_right_content | safeHTML }}
-				</div>
-			</div>
-		</div>
-	</div>
-	{{ if .Params.hero_footer_waves }}<div class="footer-waves"></div>{{ end }}
-</section>
-
-{{ else if and (isset .Params "hero_title") (isset .Params "hero_bg_video") }}
-<section class="hero white-text bg-video text-center valign-center-md {{ with .Params.hero_classes }}{{ . }}{{ end }} {{ if .Params.hero_footer_waves }}has-footer-waves{{ end }}">
-	<div class="vbwrapper {{ if .Params.hero_bg_video_classes }}{{ .Params.hero_bg_video_classes }}{{ end }}"><div id="video-background" video="{{ .Params.hero_bg_video }}" class="video-background bg-cover" {{ if .Params.hero_bg_video_fb_img }} style="background-image: url({{ .Params.hero_bg_video_fb_img }});" {{ end }}><div class="video-overlay"></div></div></div>
-	<div class="container-fluid">
-		<div class="row">
-			<div class="col col-sm-12">
-				<div class="content">
-					<h1>{{ .Params.hero_title | safeHTML }}</h1>
-					{{ with .Params.hero_description }}<p class="intro">{{ . | safeHTML }}</p>{{ end }}
-					{{ if .Params.hero_buttons }}{{ partial "get-started-button.html" . }}{{ end }}
-					{{ with .Params.hero_buttons }}{{ . | safeHTML }}{{ end }}
-				</div>
-				
-			</div>
-		</div>
-	</div>
-	{{ if .Params.hero_footer_waves }}<div class="footer-waves"></div>{{ end }}
-</section>
-{{end}}
diff --git a/static/images/home/Home2-CLI.png b/static/images/home/carousel-cli.png
similarity index 100%
rename from static/images/home/Home2-CLI.png
rename to static/images/home/carousel-cli.png
diff --git a/static/images/home/Home1-Code.png b/static/images/home/carousel-code.png
similarity index 100%
rename from static/images/home/Home1-Code.png
rename to static/images/home/carousel-code.png
diff --git a/static/images/home/Home3-Console.png b/static/images/home/carousel-console.png
similarity index 100%
rename from static/images/home/Home3-Console.png
rename to static/images/home/carousel-console.png

From 24c6b8f25ffaf184f9e5132eb8ab092a2842c5b7 Mon Sep 17 00:00:00 2001
From: Christian Nunciato <c@nunciato.org>
Date: Mon, 1 Jul 2019 20:51:59 -0700
Subject: [PATCH 3/3] Remove About from menu

Signed-off-by: Christian Nunciato <c@nunciato.org>
---
 content/about.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/content/about.md b/content/about.md
index 92a373a37ee0..6209fb2381ef 100644
--- a/content/about.md
+++ b/content/about.md
@@ -1,8 +1,4 @@
 ---
 title: About
 layout: about
-
-menu:
-    header:
-        weight: 6
 ---