From 61fbba418f78e602e7aed326acb79bf1d6f46ddb Mon Sep 17 00:00:00 2001 From: Seth Call Date: Wed, 3 Feb 2016 14:57:36 -0600 Subject: [PATCH] * VRFS-3903 - free landing page for students styling --- ...lassStudentLandingBottomPage.js.jsx.coffee | 55 +++++---- .../JamClassStudentLandingPage.js.jsx.coffee | 104 ++++++++++++------ web/app/controllers/landings_controller.rb | 15 +++ .../landings/jam_class_students.html.slim | 5 +- web/config/routes.rb | 1 + 5 files changed, 129 insertions(+), 51 deletions(-) diff --git a/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingBottomPage.js.jsx.coffee b/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingBottomPage.js.jsx.coffee index b65179dce..a204cdd44 100644 --- a/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingBottomPage.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingBottomPage.js.jsx.coffee @@ -4,14 +4,45 @@ rest = context.JK.Rest() @JamClassStudentLandingBottomPage = React.createClass({ render: () -> + if this.props.free + find_teacher_header = "Find the Best Teacher For You - Free" + find_teacher_text = "With JamClass, you can search our community of outstanding instructors, find the one who is the best fit for you - regardless of where they live - and then use our free lesson offer to take your first lesson with this instructor at no cost to make sure you click. It's free, easy, and kind of amazing!" + what_now = + `
+

What Now?

+ +

If you're ready to sign up for your free lesson, just scroll back up to the top of this page, and sign up. Once you've done this, there are three more things to do:

+
    +
  1. Search for the instructor who looks best for you, and book your lesson with him or her.
    2. +
  2. Work with a JamKazam staff person, who will give you all the 1:1 help you need to get set up and ready for your online lesson.
    3. +
  3. Enter your credit card information. You will not be charged unless you choose to book more lessons after the first free one. We have to collect credit card info to avoid fraud. Unfortunately we've found that some folks will keep signing up with new accounts to keep getting free lessons.
    4. +
+

While you're getting this done, if you want to learn more about all the nifty features you can access in JamClass and in JamKazam in general, you can check out our online JamClass User Guide.

+
` + else + find_teacher_header = "TestDrive to Find the Right Teacher" + test_drive_point = "You often settle on the first teacher you try as it's too hard and expensive to engage multiple teachers." + find_teacher_text = "And whether traditional or online, students often just settle on the first teacher they try, as it's hard and expensive to \"try out\" multiple teachers. Our unique TestDrive program lets you try lessons with 4 different teachers for just $49.99. Then you pick the one with whom you find that you work best. It's inexpensive, easy, and no one gets their feelings hurt." + what_now = + `
+

What Now?

+ +

If you're ready to sign up for TestDrive, just scroll back up to the top of this page, and sign up. Once + you've done this, there are three more things to do:

+
    +
  1. Search for the 4 instructors who look best for you, and sign up for a TestDrive lesson with each of them.
    2. +
  2. Work with a JamKazam staff person, who will give you all the 1:1 help you need to get set up for online lessons.
    3. +
  3. Plug in your credit card info to pay for your TestDrive
    4. +
+

While you're getting this done, if you want to learn more about all the nifty features you can access in JamClass and in JamKazam in general, you can check out our online JamClass User Guide.

+
` `

What Makes JamClass Awesome?

Online music lessons offer obvious advantages. Connecting with the right teacher is the most important factor in the value of lessons, yet with traditional lessons, you have to settle for a teacher who lives close to you - rather than selecting the best teacher. You often settle on the first teacher you try as it's too hard and - expensive to engage multiple teachers. Travel to and from lessons takes far more time than the lessons + rather than selecting the best teacher. {test_drive_point} Travel to and from lessons takes far more time than the lessons themselves. You often forget important teachings and demonstrations between lessons. The list goes on, as traditional lessons have many drawbacks.

@@ -139,7 +170,7 @@ rest = context.JK.Rest()

3
- TestDrive to Find the Right Teacher + {find_teacher_header}

@@ -158,10 +189,7 @@ rest = context.JK.Rest()

Connecting with the right teacher is the single most important factor in the effectiveness of lessons. But with traditional lessons, you are stuck choosing a teacher within a 30-minute drive - choosing the - closest vs. the best. And whether traditional or online, students often just settle on the first teacher - they try, as it's hard and expensive to "try out" multiple teachers. Our unique TestDrive program lets you - try lessons with 4 different teachers for just $49.99. Then you pick the one with whom you find that you - work best. It's inexpensive, easy, and no one gets their feelings hurt.

+ closest vs. the best.{find_teacher_text}

@@ -364,17 +392,6 @@ rest = context.JK.Rest() prior to signup, thank you!

-
-

What Now?

- -

If you're ready to sign up for TestDrive, just scroll back up to the top of this page, and sign up. Once - you've done this, there are three more things to do:

-
    -
  1. Search for the 4 instructors who look best for you, and sign up for a TestDrive lesson with each of them.
    2. -
  2. Work with a JamKazam staff person, who will give you all the 1:1 help you need to get set up for online lessons.
    3. -
  3. Plug in your credit card info to pay for your TestDrive
    4. -
-

While you're getting this done, if you want to learn more about all the nifty features you can access in JamClass and in JamKazam in general, you can check out our online JamClass User Guide.

-
+ {what_now}
` }) \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee b/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee index a6bce445a..1f1800ff5 100644 --- a/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee @@ -4,77 +4,119 @@ rest = context.JK.Rest() @JamClassStudentLandingPage = React.createClass({ render: () -> - - - loggedIn = context.JK.currentUserId? - if this.state.done ctaButtonText = 'sending you in...' else if this.state.processing ctaButtonText = 'hold on...' else if loggedIn - ctaButtonText = 'TRY TESTDRIVE' + if this.props.free + ctaButtonText = 'TRY A LESSON' + else + ctaButtonText = 'TRY TESTDRIVE' + else ctaButtonText = 'SIGN UP' - if loggedIn - register = `` - else + loggedIn = context.JK.currentUserId? + if loggedIn + register = `` + else if this.state.loginErrors? for key, value of this.state.loginErrors break - errorText = context.JK.getFullFirstError(key, this.state.loginErrors, {email: 'Email', password: 'Password', 'terms_of_service' : 'The terms of service'}) + errorText = context.JK.getFullFirstError(key, this.state.loginErrors, + {email: 'Email', password: 'Password', 'terms_of_service': 'The terms of service'}) register = `
{errorText}
- - + + +
- + +
- +
` + if this.props.free + lesson_type = "free lesson offer" + cta_header = "Sign Up for Free Lesson" + cta_body = + `
+

Sign up now and take a lesson from the instructor of your choice from our community of outstanding teachers at no cost.

+ +

We're so confident that you will love online lessons using JamKazam that we're giving you the first lesson completely free of charge.

+ +

We will not share your email. See our privacy policy

+ {register} +

Please note that you will need to provide a credit card to redeem your free lesson, but you will not be charged unless you choose to book more lessons after the first free one. We have to collect credit card info to avoid fraud - i.e. unfortunately we've found that some folks will keep signing up with new accounts to keep getting free lessons.

+
` + else + lesson_type = "TestDrive program" + cta_header = "Sign Up for TestDrive" + cta_body = + `
+

Sign up now and take lessons from 4 different instructors for just $49.99.
Then pick the one that's + best for you.

+ +

Connecting with the right teacher is the most important factor in making your lessons successful, and we + make it inexpensive and painless.

+ +

Sign up now for our special TestDrive offer. We will not share your email. See our privacy policy

+ {register} +

And pick your 4 teachers now!

+ +

We'll give you 1:1 help to get set up and ready to go with our free app.

+
` + `
- teacher instructing a jam class + teacher instructing a jam class +

JAMCLASS

+

Finally, online music lessons
that really work!

+
- + +
- Sign Up for TestDrive -
-
-

Sign up now and take lessons from 4 different instructors for just $49.99.
Then pick the one that's best for you.

-

Connecting with the right teacher is the most important factor in making your lessons successful, and we make it inexpensive and painless.

-

Sign up now for our special TestDrive offer. We will not share your email. See our privacy policy

- {register} -

And pick your 4 teachers now!

-

We'll give you 1:1 help to get set up and ready to go with our free app.

+ {cta_header}
+ {cta_body}

- JamClass by JamKazam is by far the best way to take online music lessons. Using our unique, patented technologies, you can play live in sync with your teacher over the Internet with incredible audio quality. Find and connect with the best teacher (not the closest) painlessly using our TestDrive program. Refer back to recorded demonstrations and concepts between lessons. Apply what you're learning to play along with a virtual band on your favorite songs. All while avoiding the time and cost of travel to and from lessons. + JamClass by JamKazam is by far the best way to take online music lessons. Using our unique, patented + technologies, you can play live in sync with your teacher over the Internet with incredible audio quality. + Find and connect with the best teacher (not the closest) painlessly using our {lesson_type}. Refer back to + recorded demonstrations and concepts between lessons. Apply what you're learning to play along with a virtual + band on your favorite songs. All while avoiding the time and cost of travel to and from lessons.

` getInitialState: () -> - {loginErrors: null, processing:false} + {loginErrors: null, processing: false} privacyPolicy: (e) -> e.preventDefault() @@ -86,12 +128,12 @@ rest = context.JK.Rest() context.JK.popExternalLink('/corp/terms') - componentDidMount:() -> + componentDidMount: () -> $root = $(this.getDOMNode()) $checkbox = $root.find('.terms-checkbox') context.JK.checkbox($checkbox) - # add item to cart, create the user if necessary, and then place the order to get the free JamTrack. +# add item to cart, create the user if necessary, and then place the order to get the free JamTrack. ctaClick: (e) -> e.preventDefault() @@ -106,7 +148,7 @@ rest = context.JK.Rest() else @createUser() - @setState({processing:true}) + @setState({processing: true}) markStudent: () -> rest.updateUser({student: true}) @@ -125,12 +167,12 @@ rest = context.JK.Rest() password = $form.find('input[name="password"]').val() terms = $form.find('input[name="terms"]').is(':checked') - rest.signup({email: email, password: password, first_name: null, last_name: null, terms:terms, student: true}) + rest.signup({email: email, password: password, first_name: null, last_name: null, terms: terms, student: true}) .done((response) => @setState({done: true}) context.location = '/client#/home' ).fail((jqXHR) => - @setState({processing:false}) + @setState({processing: false}) if jqXHR.status == 422 response = JSON.parse(jqXHR.responseText) if response.errors diff --git a/web/app/controllers/landings_controller.rb b/web/app/controllers/landings_controller.rb index 798f050a1..5bd83e549 100644 --- a/web/app/controllers/landings_controller.rb +++ b/web/app/controllers/landings_controller.rb @@ -73,6 +73,21 @@ class LandingsController < ApplicationController @no_landing_tag = true @landing_tag_play_learn_earn = true @show_after_black_bar_border = true + @free = false + + @page_data = {free: @free} + + render 'jam_class_students', layout: 'web' + end + + def jam_class_students_free + @olark_enabled = true + @no_landing_tag = true + @landing_tag_play_learn_earn = true + @show_after_black_bar_border = true + @free = true + + @page_data = {free: @free} render 'jam_class_students', layout: 'web' end diff --git a/web/app/views/landings/jam_class_students.html.slim b/web/app/views/landings/jam_class_students.html.slim index da397ade6..65c228104 100644 --- a/web/app/views/landings/jam_class_students.html.slim +++ b/web/app/views/landings/jam_class_students.html.slim @@ -6,7 +6,10 @@ - content_for :after_black_bar do .row.cta-row - h2 SIGN UP FOR TESTDRIVE NOW! + - if @free + h2 SIGN UP FOR YOUR FREE LESSON NOW! + - else + h2 SIGN UP FOR TESTDRIVE NOW! p And join 20,000+ other musicians in the JamKazam community. p.cta-text Not sure if JamClass is for you? Scroll down to learn more. diff --git a/web/config/routes.rb b/web/config/routes.rb index 1a83d235b..adb4cffe0 100644 --- a/web/config/routes.rb +++ b/web/config/routes.rb @@ -43,6 +43,7 @@ SampleApp::Application.routes.draw do match '/landing/jamtracks/:instrument/:plan_code', to: 'landings#individual_jamtrack', via: :get, as: 'individual_jamtrack_instrument' match '/landing/gift-card', to: 'landings#buy_gift_card', via: :get, as: 'buy_gift_card' match '/landing/jamclass/students', to: 'landings#jam_class_students', via: :get + match '/landing/jamclass/free/students', to: 'landings#jam_class_students_free', via: :get match '/landing/jamclass/teachers', to: 'landings#jam_class_teachers', via: :get match '/landing/jamclass/affiliates', to: 'landings#jam_class_affiliates', via: :get