diff --git a/app/assets/images/product/proposition-alternative.svg b/app/assets/images/product/proposition-alternative.svg new file mode 100644 index 000000000..2019c8c66 --- /dev/null +++ b/app/assets/images/product/proposition-alternative.svg @@ -0,0 +1,397 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/javascripts/homepage.js b/app/assets/javascripts/homepage.js new file mode 100644 index 000000000..dd0a2ab1e --- /dev/null +++ b/app/assets/javascripts/homepage.js @@ -0,0 +1,24 @@ +(function(window) { + "use strict"; + + window.GOVUK.Modules.Homepage = function() { + + this.start = function(component) { + + let $component = $(component); + let iterations = 0; + let timeout = null; + + $component.on('click', () => { + if (++iterations == 5) { + $component.toggleClass('product-page-intro-wrapper--alternative'); + } + clearTimeout(timeout); + timeout = setTimeout(() => iterations = 0, 1500); + }); + + }; + + }; + +})(window); diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss index 190ecf88b..98582a123 100644 --- a/app/assets/stylesheets/views/product-page.scss +++ b/app/assets/stylesheets/views/product-page.scss @@ -12,13 +12,14 @@ $button-shadow-size: $govuk-border-width-form-element; // negative margin-top it overlaps the theme bar at the bottom of the header position: relative; margin: -10px 0 govuk-spacing(6) * 1.5 0; - padding: 0 0 govuk-spacing(9) 0; background: $product-page-blue; color: $white; &-wrapper { @include govuk-width-container; + user-select: none; + padding: 0 0 govuk-spacing(9) 0; @include media(desktop) { background-image: file-url('product/proposition-illustration.png'); @@ -27,6 +28,11 @@ $button-shadow-size: $govuk-border-width-form-element; background-position: right -6px top 100px; } + &--alternative { + background-image: file-url('product/proposition-alternative.svg'); + background-position: right 10px bottom 0; + } + } h1 { diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html index 80ff711cb..4f6e6467a 100644 --- a/app/templates/views/signedout.html +++ b/app/templates/views/signedout.html @@ -12,7 +12,7 @@ {% block content %}
-
+