* VRFS-3903 - free landing page for students styling
This commit is contained in:
parent
93880bddf0
commit
61fbba418f
|
|
@ -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 =
|
||||
`<div id="what-now" className="row awesome jam-class">
|
||||
<h2 className="awesome">What Now?</h2>
|
||||
|
||||
<p>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:</p>
|
||||
<ol>
|
||||
<li>Search for the instructor who looks best for you, and book your lesson with him or her.</li>
|
||||
<li>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.</li>
|
||||
<li>Enter your credit card information. You will <b>not</b> 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.</li>
|
||||
</ol>
|
||||
<p>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 <a href="" target="_blank" onClick={alert.bind('not yet')}>JamClass User Guide</a>.</p>
|
||||
</div>`
|
||||
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 =
|
||||
`<div id="what-now" className="row awesome jam-class">
|
||||
<h2 className="awesome">What Now?</h2>
|
||||
|
||||
<p>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:</p>
|
||||
<ol>
|
||||
<li>Search for the 4 instructors who look best for you, and sign up for a TestDrive lesson with each of them.</li>
|
||||
<li>Work with a JamKazam staff person, who will give you all the 1:1 help you need to get set up for online lessons.</li>
|
||||
<li>Plug in your credit card info to pay for your TestDrive</li>
|
||||
</ol>
|
||||
<p>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 <a href="" target="_blank" onClick={alert.bind('not yet')}>JamClass User Guide</a>.</p>
|
||||
</div>`
|
||||
`<div className="top-container">
|
||||
<div className="row awesome jam-class">
|
||||
<h2 className="awesome">What Makes JamClass Awesome?</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
|
|
@ -139,7 +170,7 @@ rest = context.JK.Rest()
|
|||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">3</div>
|
||||
TestDrive to Find the Right Teacher
|
||||
{find_teacher_header}
|
||||
</h3>
|
||||
<p>
|
||||
<div className="teacher-icons">
|
||||
|
|
@ -158,10 +189,7 @@ rest = context.JK.Rest()
|
|||
</div>
|
||||
<p>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.</p>
|
||||
closest vs. the best.{find_teacher_text}</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
|
|
@ -364,17 +392,6 @@ rest = context.JK.Rest()
|
|||
prior to signup, thank you!</p>
|
||||
</div>
|
||||
|
||||
<div id="what-now" className="row awesome jam-class">
|
||||
<h2 className="awesome">What Now?</h2>
|
||||
|
||||
<p>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:</p>
|
||||
<ol>
|
||||
<li>Search for the 4 instructors who look best for you, and sign up for a TestDrive lesson with each of them.</li>
|
||||
<li>Work with a JamKazam staff person, who will give you all the 1:1 help you need to get set up for online lessons.</li>
|
||||
<li>Plug in your credit card info to pay for your TestDrive</li>
|
||||
</ol>
|
||||
<p>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 <a href="" target="_blank" onClick={alert.bind('not yet')}>JamClass User Guide</a>.</p>
|
||||
</div>
|
||||
{what_now}
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -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 = `<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>`
|
||||
else
|
||||
loggedIn = context.JK.currentUserId?
|
||||
|
||||
if loggedIn
|
||||
register = `<button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
|
||||
onClick={this.ctaClick}>{ctaButtonText}</button>`
|
||||
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 = `<div className="register-area jam-class">
|
||||
<div className={classNames({'errors': true, 'active': this.state.loginErrors})}>
|
||||
{errorText}
|
||||
</div>
|
||||
<form className="jamtrack-signup-form">
|
||||
<label>Email: </label><input type="text" name="email" />
|
||||
<label>Password: </label><input type="password" name="password" />
|
||||
<label>Email: </label><input type="text" name="email"/>
|
||||
<label>Password: </label><input type="password" name="password"/>
|
||||
|
||||
<div className="clearall"/>
|
||||
<input className="terms-checkbox" type="checkbox" name="terms" /><label className="terms-help">I have read and agree to the JamKazam <a href="/corp/terms" onClick={this.termsClicked}>terms of service</a></label>
|
||||
<input className="terms-checkbox" type="checkbox" name="terms"/><label className="terms-help">I have read and
|
||||
agree to the JamKazam <a href="/corp/terms" onClick={this.termsClicked}>terms of service</a></label>
|
||||
|
||||
<div className="clearall"/>
|
||||
<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>
|
||||
<button className={classNames({'cta-button' : true, 'processing': this.state.processing})}
|
||||
onClick={this.ctaClick}>{ctaButtonText}</button>
|
||||
</form>
|
||||
</div>`
|
||||
|
||||
if this.props.free
|
||||
lesson_type = "free lesson offer"
|
||||
cta_header = "Sign Up for Free Lesson"
|
||||
cta_body =
|
||||
`<div className={classNames({'preview-area': true, 'jam-class': true})}>
|
||||
<p>Sign up now and take a lesson from the instructor of your choice from our community of outstanding teachers at no cost.</p>
|
||||
|
||||
<p>We're so confident that you will love online lessons using JamKazam that we're giving you the first lesson completely free of charge.</p>
|
||||
|
||||
<p>We will not share your email. See our <a
|
||||
href="/corp/privacy" onClick={this.privacyPolicy}>privacy policy</a></p>
|
||||
{register}
|
||||
<p>Please note that you will need to provide a credit card to redeem your free lesson, but you will <b>not</b> 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.</p>
|
||||
</div>`
|
||||
else
|
||||
lesson_type = "TestDrive program"
|
||||
cta_header = "Sign Up for TestDrive"
|
||||
cta_body =
|
||||
`<div className={classNames({'preview-area': true, 'jam-class': true})}>
|
||||
<p>Sign up now and take lessons from 4 different instructors for just $49.99.<br/>Then pick the one that's
|
||||
best for you.</p>
|
||||
|
||||
<p>Connecting with the right teacher is the most important factor in making your lessons successful, and we
|
||||
make it inexpensive and painless.</p>
|
||||
|
||||
<p>Sign up now for our special TestDrive offer. We will not share your email. See our <a
|
||||
href="/corp/privacy" onClick={this.privacyPolicy}>privacy policy</a></p>
|
||||
{register}
|
||||
<p>And pick your 4 teachers now!</p>
|
||||
|
||||
<p>We'll give you 1:1 help to get set up and ready to go with our free app.</p>
|
||||
</div>`
|
||||
|
||||
|
||||
`<div className="top-container">
|
||||
<div className="full-row name-and-artist">
|
||||
<div>
|
||||
<img className="jam-class-teacher" width="375" height="215" src="/assets/landing/jam_class.png" alt="teacher instructing a jam class"/>
|
||||
<img className="jam-class-teacher" width="375" height="215" src="/assets/landing/jam_class.png"
|
||||
alt="teacher instructing a jam class"/>
|
||||
|
||||
<h1 className="jam-track-name">JAMCLASS</h1>
|
||||
|
||||
<h2 className="original-artist">Finally, online music lessons<br/>that really work!</h2>
|
||||
|
||||
<div className="clearall"/>
|
||||
</div>
|
||||
<div className="preview-and-action-box jamclass">
|
||||
<img src="/assets/landing/arrow-1-student.png" className="arrow1-jamclass" />
|
||||
<img src="/assets/landing/arrow-1-student.png" className="arrow1-jamclass"/>
|
||||
|
||||
<div className="preview-jamtrack-header">
|
||||
Sign Up for TestDrive
|
||||
</div>
|
||||
<div className={classNames({'preview-area': true, 'jam-class': true})}>
|
||||
<p>Sign up now and take lessons from 4 different instructors for just $49.99.<br/>Then pick the one that's best for you.</p>
|
||||
<p>Connecting with the right teacher is the most important factor in making your lessons successful, and we make it inexpensive and painless.</p>
|
||||
<p>Sign up now for our special TestDrive offer. We will not share your email. See our <a href="/corp/privacy" onClick={this.privacyPolicy}>privacy policy</a></p>
|
||||
{register}
|
||||
<p>And pick your 4 teachers now!</p>
|
||||
<p>We'll give you 1:1 help to get set up and ready to go with our free app.</p>
|
||||
{cta_header}
|
||||
</div>
|
||||
{cta_body}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row summary-text">
|
||||
<p className="top-summary">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue