diff --git a/web/app/assets/images/content/guitar-on-beach.png b/web/app/assets/images/content/guitar-on-beach.png new file mode 100644 index 000000000..51efdf814 Binary files /dev/null and b/web/app/assets/images/content/guitar-on-beach.png differ diff --git a/web/app/assets/stylesheets/basic/basic.scss b/web/app/assets/stylesheets/basic/basic.scss index a30817f3d..b4483923e 100644 --- a/web/app/assets/stylesheets/basic/basic.scss +++ b/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 { diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb index e94adfd42..b07fc3e04 100644 --- a/web/app/controllers/landings_controller.rb +++ b/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 diff --git a/web/app/views/landings/amazon_promo_splash.slim b/web/app/views/landings/amazon_promo_splash.slim new file mode 100644 index 000000000..f96b780a5 --- /dev/null +++ b/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") \ No newline at end of file diff --git a/web/config/routes.rb b/web/config/routes.rb index 82a99e267..77516b8cb 100644 --- a/web/config/routes.rb +++ b/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'