amazon-promo splash page

web/app/assets/stylesheets/basic/basic.scss

@@ -6,6 +6,7 @@
 
 $base-font-family: 'arial', sans-serif;
 
+$large-font-size: 1.5rem;
 $standard-font-size: 1rem;
 $smaller-font-size: .8rem;
 $small-font-size: .7rem;
@@ -14,7 +15,7 @@ $amazon-btn-line-height:160%;
 $submit-button-width:9rem;
 $checkbox-label-width:14rem;
 $create-account-width:10rem;
-
+$start-promo-btn-width:13rem;
 html,
 body {
  min-height: 100%;
@@ -168,6 +169,32 @@ div.root {
   text-align: center;
 }
 
+.header {
+  font-size: $large-font-size;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 90%;
+  max-width: 700px;
+  text-align: center;
+}
+
+.splash {
+  width:33%;
+  position:absolute;
+  top:0;
+  right:1rem;
+
+  display:flex;
+  align-items:center;
+  height:100%;
+  flex-direction:row;
+  img {
+    width:100%;
+  }
+}
+
 .code-form {
   font-size: $standard-font-size;
   margin-top: 2rem;
@@ -244,6 +271,39 @@ label.promo-code {
   }
 }
 
+
+.summary-row {
+  font-size: $standard-font-size;
+
+  margin-top: 1rem;
+
+  width: 100%;
+  max-width: 1200px;
+  padding:.5rem 2rem 0;
+  display:flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.jamkazam-summary {
+  position:relative;
+  max-width:700px;
+  ul {
+    width:50%;
+    margin:0;
+    padding:0 0 0 2rem;
+  }
+  li {
+    margin-bottom:.5rem;
+  }
+  img {
+    float:right;
+    width:33%;
+    margin-right:1rem;
+    margin-left:1rem;
+  }
+}
+
 .submit {
   color: #111;
   text-decoration: none;
@@ -256,6 +316,9 @@ label.promo-code {
   text-align: center;
   white-space: nowrap;
 
+  &.promo-start {
+    width:$start-promo-btn-width;
+  }
   &.submit-code {
     width:$submit-button-width;
   }
@@ -278,6 +341,10 @@ label.promo-code {
   text-align: center;
   white-space: nowrap;
   box-sizing: border-box;
+  text-decoration: none;
+  &:visited, &:link, &:active {
+    color:black;
+  }
 }
 
 .amazon-button-stack {

web/app/controllers/landings_controller.rb

@@ -621,5 +621,13 @@ class LandingsController < ApplicationController
 
     render 'amazon_lessons_promo_3', layout: 'basic'
   end
+
+
+  def amazon_offer_splash
+    @description = 'Redeem Your Lessons Code From Amazon - Start Here!'
+    @responsive = true
+
+    render 'amazon_promo_splash', layout: 'basic'
+  end
 end
 

web/app/views/landings/amazon_promo_splash.slim

@@ -0,0 +1,37 @@
+- provide(:page_name, 'amazon_lessons_promo_1')
+- provide(:description, @description)
+- provide(:title, @title)
+
+#root
+  .logo-holder
+    = image_tag("content/amazon_logo.jpg")
+
+  .header
+    = 'Claim your free two private music lessons now!'
+
+  .summary-row
+    .jamkazam-summary
+      = image_tag("content/guitar-on-beach.png")
+      ul
+        li
+          = 'Choose and learn from a world-class instructor'
+        li
+          = 'Get two private, 30-minute, fully interactive lessons'
+        li
+          = 'Take lessons online from the comfort of your home'
+        li
+          = 'Enjoy studio quality audio and play in sync with teacher'
+        li
+          = 'Used by 75,000+ musicians'
+
+  .submit-row
+    .submit.promo-start
+      .amazon-button-stack
+        span.amazon-button
+          span.amazon-button-inner
+            a.amazon-a-button-text href="/account/activate/code"
+              = 'Claim Your Free Lessons'
+  .powered-by
+    p
+      = 'powered by '
+      = image_tag("web/logo_inverted.png")

web/config/routes.rb

@@ -28,6 +28,7 @@ Rails.application.routes.draw do
   match '/account/activate/signup', to: 'landings#amazon_lessons_promo_2', via: :get
   match '/account/activate/signup', to: 'landings#amazon_lessons_promo_2_post', via: :post
   match '/account/activate/done', to: 'landings#amazon_lessons_promo_3', via: :get
+  match '/amazon-offer', to: 'landings#amazon_offer_splash', via: :get
 
   # landing pageslanding
   get '/jamtracks', to: 'landings#simple_jamtracks',            as: 'landing_simple_jamtracks'