Homepage hero section complete (#241)

assets/scss/_homepage-hero.scss

@@ -0,0 +1,51 @@
+.homepage-hero {
+ overflow: hidden;
+ margin-top: 50px;
+ @include media-breakpoint-between(xs, md) {
+ margin-top: 107px;
+ }
+ &-background {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ img {
+ object-fit: cover;
+ }
+ }
+
+ h1 {
+ font-size: 60px;
+
+ @include media-breakpoint-between(sm, lg) {
+ font-size: 48px;
+ }
+
+ @include media-breakpoint-between(xs, sm) {
+ font-size: 32px;
+ }
+
+ span {
+ font-weight: 400;
+ }
+ }
+
+ &-btn {
+ &-group {
+ .btn-white {
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ .help {
+ &-text {
+ font-weight: 300;
+ font-size: 14px;
+ span {
+ font-weight: 700;
+ }
+ }
+ }
+ }
+ }
+}

assets/scss/_styles_project.scss

@@ -1,5 +1,6 @@
 @import 'success-stories';
 @import 'promo-banner';
+@import 'homepage-hero';
 @import 'slick-theme';
 @import 'slick';
 @import 'docs';
@@ -9,7 +10,7 @@ h3 {
  margin-bottom: 1.6rem;
 }
 
-.jumbotron>* {
+.jumbotron > * {
  margin: 0 3rem;
 
  h3 {
@@ -307,4 +308,4 @@ div.captains-log {
  }
  }
  }
-}
+}

layouts/index.html

@@ -15,7 +15,7 @@
 
 <!-- Who should use Spinnaker? row -->
 
-<div class="jumbotron jumbotron-fluid">
+<div class="jumbotron jumbotron-fluid bg-info">
  <div>
  <h3 class="display-4">{{.Params.who_should_use_header}}</h3>
  <p class="lead">{{.Params.who_should_use_text | markdownify }}</p>

layouts/partials/hero-homepage.html

@@ -1,52 +1,63 @@
-<div
- class="
- hero
- home
- p-5
- position-relative
- text-white
- d-flex
- justify-content-center
- align-items-center
- bg-secondary
- "
->
- <div class="intro-text mb-4 d-flex justify-content-center align-items-center">
- <div class="intro-text-panel col-12 text-center">
- <img
- class="mx-auto d-inline-block"
- src="/images/spinnaker-horizontal-white.png"
- alt="Spinnaker Logo white"
- />
-
- <h1 class="subtitle text-center m-0">{{.Params.subtitle}}</h1>
- </div>
+<div class="row bg-secondary position-relative w-100 homepage-hero">
+ <div class="position-absolute w-100 h-100 top-0 start-0 homepage-hero-background">
+ <img
+ class="w-100 h-100 "
+ src="/images/hero-background.jpg"
+ alt="Hero background Image"
+ />
  </div>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col-sm-6 col-md-4 py-2">
- <a
- style="width: 100%"
- class="btn btn-primary btn-lg ga-btn-track"
- href="/docs/setup/install/"
- role="button"
- >
- Install Spinnaker</a
- >
+ <div class="container mx-auto py-5">
+ <div class="row justify-content-center mb-2 align-items-center">
+ <div class="col-12 col-lg-1 "></div>
+ <div class="col-6 col-lg-3 mb-3">
+ <div>
+ <!-- Image -->
+ <img
+ class="mx-auto w-100"
+ src="/images/spinnaker-logo-stacked.png"
+ alt="Spinnaker Logo Stacked"
+ />
+ </div>
+ </div>
+ <div class="col-lg-8 col-xl-7">
+ <div class="text-white px-3">
+ <h1 class="m-0 ">{{.Params.subtitle}}</h1>
+ </div>
+ </div>
  </div>
- <div class="col-sm-6 col-md-4 py-2">
- <a
- style="width: 100%"
- target="_blank"
- class="btn btn-light btn-lg ga-btn-track mb-2"
- href="https://join.slack.com/t/spinnakerteam/shared_invite/zt-7juwxmx0-nQ4Ud4pJcbuPykX3SXwQrg"
- role="button"
- >
- Join Slack</a
- >
- <p class="px-4 text-center">
- Need help? Slack is the fastest way to get your questions answered
- </p>
+ <div class="row justify-content-center homepage-hero-btn-group">
+ <div class="col-sm-6 col-lg-5 col-xl-4 py-2">
+ <a
+ style="width: 100%"
+ class="btn btn-primary btn-lg ga-btn-track"
+ href="/docs/setup/install/"
+ role="button"
+ data-label="Install Spinnaker"
+ >
+ Install Spinnaker</a
+ >
+ </div>
+ <div class="col-sm-6 col-lg-5 col-xl-4 py-2">
+ <a
+
+ target="_blank"
+ class="btn bg-white btn-lg ga-btn-track mb-2 w-100 btn-white"
+ href="https://join.slack.com/t/spinnakerteam/shared_invite/zt-7juwxmx0-nQ4Ud4pJcbuPykX3SXwQrg"
+ role="button"
+ data-label="Join Slack"
+ >
+ <img
+ class="mx-auto "
+ src="/images/slack-logo-text.png"
+ alt="Slack logo horizontal"
+ width="142"
+ /></a
+ >
+ <p class="px-4 text-center text-white help-text">
+ <span>Need help?</span> Slack is the fastest way to get
+ your questions answered
+ </p>
+ </div>
  </div>
  </div>
  </div>

layouts/partials/navbar.html

@@ -3,8 +3,13 @@
 
 <nav id="navbar" class=" js-navbar-scroll navbar navbar-expand navbar-light flex-column flex-lg-row td-navbar">
 
- <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
- <span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/spinnaker-text-white.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span><span class="text-uppercase font-weight-bold sr-only">{{ .Site.Title }}</span>
+ <a class="" href="{{ .Site.Home.RelPermalink }}">
+ <img
+ class="mx-auto "
+ src="/images/spinnaker-logo-horizontal.png"
+ alt="Spinnaker Logo Horizontal"
+ width="120"
+ />
  </a>
  <div class="td-navbar-nav-scroll ml-lg-auto" id="main_navbar">
  <ul class="navbar-nav mt-2 mt-lg-0 " role="navigation">

static/js/ga-events.js

@@ -3,6 +3,6 @@ const gaBtnTrack = Array.prototype.slice.call(
 )
 gaBtnTrack.forEach((btn) => {
  btn.addEventListener('click', (e) => {
- ga('send', 'event', e.target.role, e.type, e.target.innerText)
+ ga('send', 'event', e.target.role, e.type, e.target.dataset.label)
  })
 })