* VRFS-3865 - initial version of jam class student landing page
This commit is contained in:
parent
d93f64c2e5
commit
5a0259aa54
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -50,7 +50,6 @@ rest = window.JK.Rest()
|
|||
checkbox = $(e.target)
|
||||
name = checkbox.attr('name')
|
||||
checked = checkbox.is(':checked')
|
||||
logger.debug("check change", e.target.name, e.target.checked)
|
||||
this.setState({"#{e.target.name}": e.target.checked})
|
||||
|
||||
|
||||
|
|
@ -106,7 +105,6 @@ rest = window.JK.Rest()
|
|||
pricePerLessonCents = context.JK.ProfileUtils.normalizeMoneyForSubmit(lessonValue)
|
||||
pricePerMonthCents = context.JK.ProfileUtils.normalizeMoneyForSubmit(monthlyValue)
|
||||
|
||||
console.log("minute #{minutes} lessonValue=#{lessonValue} monthlyValue=#{monthlyValue} pricePerLessonCents=#{pricePerLessonCents}, pricePerMonthCents=#{pricePerMonthCents}")
|
||||
|
||||
this.setState({
|
||||
"price_per_lesson_#{minutes}_cents": pricePerLessonCents
|
||||
|
|
@ -145,12 +143,10 @@ rest = window.JK.Rest()
|
|||
handleCheckChange: (e) ->
|
||||
if @iCheckIgnore
|
||||
return
|
||||
logger.debug("check change", e.target.name, e.target.checked)
|
||||
this.setState({"#{e.target.name}": e.target.checked})
|
||||
|
||||
render: () ->
|
||||
priceRows = []
|
||||
logger.debug("Current State is", this.state)
|
||||
for minutes in [30, 45, 60, 90, 120]
|
||||
pricePerLessonName = "price_per_lesson_#{minutes}_cents"
|
||||
pricePerMonthName = "price_per_month_#{minutes}_cents"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ rest = context.JK.Rest()
|
|||
<div>
|
||||
<img className="gift-card-preview" width="300" height="191" src="/assets/landing/gift_card.png" alt="gift card "/>
|
||||
<h1 className="jam-track-name">$10 or $20 JAMTRACKS GIFT CARDS</h1>
|
||||
<h2 className="original-artist">A PERFECT GIFT FOR THE HOLIDAYS</h2>
|
||||
<h2 className="original-artist">A PERFECT GIFT FOR MUSICIANS</h2>
|
||||
<div className="clearall"/>
|
||||
</div>
|
||||
<div className="preview-and-action-box">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,380 @@
|
|||
context = window
|
||||
rest = context.JK.Rest()
|
||||
|
||||
@JamClassStudentLandingBottomPage = React.createClass({
|
||||
|
||||
render: () ->
|
||||
`<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
|
||||
themselves. You often forget important teachings and demonstrations between lessons. The list goes on, as
|
||||
traditional lessons have many drawbacks.</p>
|
||||
|
||||
<p>Historically, online lessons have had major issues too. Several companies have built online marketplaces of
|
||||
music teachers, but every one of these companies relies on Skype or similar apps – built for voice
|
||||
conferencing – to deliver online lessons. This is a major problem. The voice technology of these apps makes
|
||||
music sound awful in online sessions – so bad that teachers can’t assess the student’s tone and sometimes even
|
||||
the pitch of what they are playing, and so bad that it steals away the joy of playing music. These apps also
|
||||
have very high latency – a technical term that means that the student and teacher cannot play together,
|
||||
another critical requirement for productive lessons. Since Skype wasn’t built for music, it also lacks many
|
||||
other basic features to support effective lessons, like a metronome, support for backing tracks, etc.</p>
|
||||
|
||||
<p>At JamKazam, we’ve spent years designing, patenting, and building technology specifically to enable musicians
|
||||
to play online live in sync with studio quality audio. We’ve built a wide variety of critical online music
|
||||
performance features into this platform. And we’ve built a lesson marketplace on top of this foundation, and
|
||||
attracted and vetted a terrific set of instructors to teach using our unparalleled technology platform.
|
||||
Following are some of the top features of JamClass by JamKazam.</p>
|
||||
|
||||
<div className="testimonials jam-class">
|
||||
<h3>JamClass Kudos</h3>
|
||||
|
||||
<div className="testimonial">
|
||||
<img src="/assets/landing/Julie Bonk - Jam Class - Speech Bubble.png" className="testimonial-speech-bubble"/>
|
||||
<img src="/assets/landing/Julie Bonk - Avatar.png" className="testimonial-avatar"/>
|
||||
<h4><strong>Julie Bonk</strong></h4>
|
||||
<div className="testiminal-background">
|
||||
Oft-recorded pianist, teacher, mentor to Grammy winner Norah Jones and Scott Hoying of Pentatonix
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial">
|
||||
<img src="/assets/landing/Carl Brown - Jam Class - Speech Bubble.png" className="testimonial-speech-bubble"/>
|
||||
<img src="/assets/landing/Carl Brown - Avatar.png" className="testimonial-avatar"/>
|
||||
<a rel="external" href="https://www.youtube.com/channel/UCvnfBBzEizi1T5unOXNCxdQ"><img
|
||||
src="/assets/landing/Carl Brown - YouTube.png" className="testimonial-youtube"/></a>
|
||||
<h4><strong>Carl Brown</strong> of GuitarLessions365</h4>
|
||||
</div>
|
||||
<div className="testimonial">
|
||||
<img src="/assets/landing/Justin Pierce - Jam Class - Speech Bubble.png" className="testimonial-speech-bubble"/>
|
||||
<img src="/assets/landing/Justin Pierce - Avatar.png" className="testimonial-avatar"/>
|
||||
<h4><strong>Justin Pierce</strong></h4>
|
||||
<div className="testiminal-background">
|
||||
Masters degree in jazz studies, performer in multiple bands, saxophone instructor
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial">
|
||||
<img src="/assets/landing/Dave Sebree - Jam Class - Speech Bubble.png" className="testimonial-speech-bubble"/>
|
||||
<img src="/assets/landing/Dave Sebree - Avatar.png" className="testimonial-avatar"/>
|
||||
<h4><strong>Dave Sebree</strong></h4>
|
||||
<div className="testiminal-background">
|
||||
Founder of Austin School of Music, Gibson-endorsed guitarist, touring musician
|
||||
</div>
|
||||
</div>
|
||||
<div className="testimonial">
|
||||
<img src="/assets/landing/Sara Nelson - Jam Class - Speech Bubble.png" className="testimonial-speech-bubble"/>
|
||||
<img src="/assets/landing/Sara Nelson - Avatar.png" className="testimonial-avatar"/>
|
||||
<h4><strong>Sara Nelson</strong></h4>
|
||||
<div className="testiminal-background">
|
||||
Cellist for Austin Lyric Opera, frequently recorded with major artists
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">1</div>
|
||||
Play Live In Sync From Different Locations
|
||||
</h3>
|
||||
<p>
|
||||
<div className="video-wrapper right">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen="allowfullscreen"/>
|
||||
</div>
|
||||
</div>
|
||||
<p>Teacher and student need to be able to play together to enable effective lessons. As any teacher who has
|
||||
attempted to teach using Skype will tell you, Skype doesn't let you play together. JamKazam's patented
|
||||
technologies deliver on this requirement at an amazing level. Click the video above to watch 6 bands play
|
||||
together from different locations to see our tech in action. And for an even more impressive feat, <a
|
||||
href="https://www.youtube.com/watch?v=2Zk7-04IAx4" target="_blank">watch this video</a> with a band
|
||||
playing together from Austin, Atlanta, Chicago, and Brooklyn using JamKazam tech.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">2</div>
|
||||
Studio Quality Audio
|
||||
</h3>
|
||||
<p>
|
||||
<div className="audio-wrapper">
|
||||
<a href="https://www.jamkazam.com/recordings/94c5d5aa-2c61-440a-93a4-c661bf77d4a8" target="_blank">Sample
|
||||
Session Audio #1</a>
|
||||
|
||||
<div className="sample-audio-text">Electric Guitars & Drum</div>
|
||||
<a href="https://www.jamkazam.com/recordings/4916dbfe-0eeb-4bfb-b08a-4085dfecedcb" target="_blank">Sample
|
||||
Session Audio #2</a>
|
||||
|
||||
<div className="sample-audio-text">Acoustic Guitar, Bass & Voice</div>
|
||||
<a href="https://www.jamkazam.com/recordings/5875be7e-2cc3-4555-825c-046bd2f849e7" target="_blank">Sample
|
||||
Session Audio #3</a>
|
||||
|
||||
<div className="sample-audio-text">Trumpet & Keys</div>
|
||||
|
||||
<p className="listening-note">These audio links will open a new tab in your browser. When done listening,
|
||||
close the tab and return to this page.</p>
|
||||
</div>
|
||||
<p>Skype was built for voice - for people talking with each other. It uses something called a "voice codec".
|
||||
This just means it processes all audio as a spoken human voice, and the result is that music, whether
|
||||
instrumental or vocal, sounds very bad in Skype, as it has been processed through tech built for talking.
|
||||
JamKazam delivers very high quality audio. You will be amazed at how good it sounds. It sounds like you're
|
||||
sitting next to each other playing. This is also critical for a good lesson. Poor audio is hard to endure
|
||||
in lessons.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">3</div>
|
||||
TestDrive to Find the Right Teacher
|
||||
</h3>
|
||||
<p>
|
||||
<div className="teacher-icons">
|
||||
<div className="top-teacher-row">
|
||||
<img className="teacher-icon top-left" src="/assets/landing/teacher-icon-small.png"/>
|
||||
<img className="teacher-icon top-right" src="/assets/landing/teacher-icon-small.png"/>
|
||||
</div>
|
||||
<div className="bottom-teacher-row">
|
||||
<img className="teacher-icon bottom-left" src="/assets/landing/teacher-icon-small.png"/>
|
||||
<img className="teacher-icon bottom-right" src="/assets/landing/teacher-icon-small.png"/>
|
||||
<br className="clearall"/>
|
||||
</div>
|
||||
<div className="testdrive-note">Lessons with 4 instructors for just $49.99. A phenomenal value. You
|
||||
wouldn't marry the first person you ever date, right?
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">4</div>
|
||||
Record & Refer Back to Lessons
|
||||
</h3>
|
||||
<p>
|
||||
<div className="video-wrapper left bottomed">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/OcnIxqmfkfU" frameborder="0" allowfullscreen="allowfullscreen"/>
|
||||
</div>
|
||||
<div className="cta-text">watch this sample video recording from a lesson</div>
|
||||
</div>
|
||||
<p>Students rarely take notes during lessons, and often notes won't really capture what's being taught. Many
|
||||
times a student thinks they've got it, but they get home and realize "I don't got it", and then you've
|
||||
wasted a week. In JamClass the instructor can record all or portions of a lesson that the student can
|
||||
easily refer back to later.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">5</div>
|
||||
Play Along with Your Favorite Songs/Artists
|
||||
</h3>
|
||||
<p>
|
||||
<div className="video-wrapper right">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/07zJC7C2ICA" frameborder="0" allowfullscreen="allowfullscreen"/>
|
||||
</div>
|
||||
</div>
|
||||
<p>When taking lessons, you usually apply the techniques you are learning to playing songs - ideally songs
|
||||
you love. JamKazam makes this better too, as we offer a catalog of 3,700+ songs. Each song is is a
|
||||
complete multi-track recording, with fully isolated tracks for each part of the music - e.g. lead vocal,
|
||||
backing vocals, lead guitar, rhythm guitar, keys, bass, drums, etc. So you can listen to just the part
|
||||
you're learning in isolation, turn around and mute that one part to play along with the rest of the band,
|
||||
slow down playback for practice, record and share your performances, and more. It's really fun! And a
|
||||
great way to reward yourself and reinforce what you're learning from your lessons.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">6</div>
|
||||
Apply VST & AU Audio Plug-In Effects
|
||||
</h3>
|
||||
<p>
|
||||
<img src="/assets/landing/Top 10 Image - Number 6.png" className="awesome-image left" width="350"
|
||||
height="240"/>
|
||||
|
||||
<p>The free JamKazam app lets you easily apply VST & AU plugin effects to your live performance in lessons.
|
||||
For example, guitarists can apply popular amp sims like AmpliTube to get any kind of guitar tone without
|
||||
pedal boards or amps, and vocalists can apply effects like reverb, pitch correction, etc.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">7</div>
|
||||
Use MIDI Instruments
|
||||
</h3>
|
||||
<p>
|
||||
<img src="/assets/landing/Top 10 Image - Number 7.png" className="awesome-image" width="320" height="257"/>
|
||||
|
||||
<p>The free JamKazam app also lets you use MIDI instruments in online lesson sessions. For example, keys
|
||||
players can use MIDI keyboard controllers with VST & AU plugins to generate traditional piano sounds,
|
||||
Rhodes electric piano, Hammond organ, and other classic keys tones. And drummers who use electronic kits
|
||||
can use their favorite plugins to power their percussive audio.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome-thing jam-class multi-para">
|
||||
<div className="awesome-item">
|
||||
<h3>
|
||||
<div className="awesome-number">8</div>
|
||||
And So Much More...
|
||||
</h3>
|
||||
<p>
|
||||
<p>There are many other features that are specifically useful for online lessons built into JamClass by
|
||||
JamKazam, including a metronome feature, the ability for either teacher or student to open any audio file
|
||||
and use it as a backing track for session acccompaniment, and too many more to list.</p>
|
||||
|
||||
<p>In addition to the lesson features, the awesome bonus is that once a student is set up to play in online
|
||||
lessons, he or she can also play completely FREE with anyone else in the JamKazam community any time to
|
||||
practice skills learned in lessons, or just for fun. There are thousands of online sessions played every
|
||||
month on the JamKazam service, including open jam sessions set up by our user community, and you can hop
|
||||
into these sessions, create your own improptu sessions, schedule sessions with a particular focus or song
|
||||
list, etc. It's a vibrant and welcoming community of fellow musicians, and it's open to you anytime,
|
||||
anywhere.</p>
|
||||
|
||||
<div className="clearall"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome jam-class">
|
||||
<h2 className="awesome">What Do You Need to Play in JamClass Lessons?</h2>
|
||||
|
||||
<p>
|
||||
At a mininum, you need:</p>
|
||||
<ul>
|
||||
<li>A computer running either
|
||||
<ul>
|
||||
<li>Windows 7 or a later version (32-bit or 64-bit)
|
||||
</li>
|
||||
<li>Mac OS X 10.7 or a later version (64-bit)<br/>
|
||||
<a className="how-do-i" href="https://support.apple.com/en-us/HT201948" target="_blank">how do I know
|
||||
which version I'm running and if it's 64-bit on Mac?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>A built-in microphone and built-in webcam on your computer</li>
|
||||
<li>Internet service with at least 500kbps upload bandwidth<br/>
|
||||
<a className="how-do-i" href="http://www.speedtest.net/" target="_blank">how do I know how much upload
|
||||
bandwidth my Internet service delivers?</a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
To have very high quality audio in your sessions, rather than using the built-in microphone on your computer
|
||||
to capture your instrumental and/or vocal audio, we strongly recommend using an external audio interface. An
|
||||
audio interface is a hardware product that connects to your computer and processes audio better than your
|
||||
computer alone. If you already own/use an audio interface, you can use the one you have. And if you don't,
|
||||
please <a href="https://jamkazam.desk.com/customer/portal/articles/1292412-choosing-an-audio-device"
|
||||
target="_blank">read this help article on audio interfaces</a> that can guide you to get what you
|
||||
need. You can pick up a perfectly good interface very inexpensively, typically for less than $50. And you can
|
||||
use your new interface not just for JamClass, but also to make home recordings of your performances, etc. So
|
||||
it's a great thing to have for any musician.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If you feel worried or confused about getting set up because you're not a "tech genius", we are happy to work
|
||||
with you 1:1 to answer your questions, and walk you through picking gear and setting it up. We'll even hop
|
||||
into an online test session with you, show you around the key features, and make sure you're ready to rock and
|
||||
roll online! Just email us at support@jamkazam.com, and tell us you need help getting set up for JamClass. We
|
||||
do this all the time.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Here is a video that shows more about how JamClass works from a student's perspective:
|
||||
<div className="video-wrapper">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/07zJC7C2ICA" frameborder="0" allowfullscreen="allowfullscreen"/>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div className="row awesome jam-class">
|
||||
<h2 className="awesome">We Have Fabulous Teachers, Check Them Out!</h2>
|
||||
|
||||
<p>JamClass instructors are a terrific set of teachers from whom you can learn almost anything musically. We run
|
||||
background checks on all teachers for safety reasons. And we review every single teacher individually to
|
||||
ensure they meet high standards in terms of their ability, experience, and desire to teach music.</p>
|
||||
|
||||
<p>When you sign up for TestDrive, you can take lessons from the 4 teachers who look like the best fit for you -
|
||||
for just $49.99. Or if you see a specific teacher who you just <b>know</b> is right for you, you can sign up
|
||||
for lessons directly with that instructor through JamClass, and skip the TestDrive program.</p>
|
||||
|
||||
<p>If you want to check out teachers before signing up, use the link below to search our community of teachers.
|
||||
If you are looking for someone/something specific that you can't find in our set of instructors, please let us
|
||||
know and we'll go add the right teachers to meet your needs. We are constantly reviewing prospective teachers
|
||||
and adding to the community, and we don't mind at all using specific student requests to focus our efforts on
|
||||
filling holes in our coverage.</p>
|
||||
<div className="search-area">
|
||||
<a onClick={alert.bind("not yet!")} target="_blank">Search JamClass Instructors</a>
|
||||
|
||||
<div className="tab-and-return">Please note that clicking this link will open a new tab in your browser.<br/>
|
||||
When you're done searching, just close that tab, and you'll return here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row awesome jam-class">
|
||||
<h2 className="awesome">Guidance for Parents of Music Students</h2>
|
||||
|
||||
<p>If you are the parent of a child who is under the age of 13, you must give consent for your child to use this
|
||||
service, and this must be done in a specific manner, due to the provisions of the Children's Online Privacy
|
||||
Protection Act (COPPA). If this applies to your child, please email us at <a
|
||||
href="mailto:support@jamkazam.com">support@jamkazam.com</a> so that we can handle this process with you
|
||||
prior to signup, thank you!</p>
|
||||
</div>
|
||||
|
||||
<div 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>`
|
||||
})
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
context = window
|
||||
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'
|
||||
else
|
||||
ctaButtonText = 'SIGN UP'
|
||||
|
||||
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'})
|
||||
|
||||
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" />
|
||||
<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>
|
||||
<div className="clearall"/>
|
||||
<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>
|
||||
</form>
|
||||
</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"/>
|
||||
<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" />
|
||||
<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.<br/>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>
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
getInitialState: () ->
|
||||
{loginErrors: null, processing:false}
|
||||
|
||||
privacyPolicy: (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
context.JK.popExternalLink('/corp/privacy')
|
||||
|
||||
termsClicked: (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
context.JK.popExternalLink('/corp/terms')
|
||||
|
||||
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.
|
||||
ctaClick: (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
return if @state.processing
|
||||
|
||||
@setState({loginErrors: null})
|
||||
|
||||
loggedIn = context.JK.currentUserId?
|
||||
|
||||
|
||||
|
||||
createUser: () ->
|
||||
$form = $('.jamtrack-signup-form')
|
||||
email = $form.find('input[name="email"]').val()
|
||||
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})
|
||||
.done((response) =>
|
||||
|
||||
|
||||
).fail((jqXHR) =>
|
||||
@setState({processing:false})
|
||||
if jqXHR.status == 422
|
||||
response = JSON.parse(jqXHR.responseText)
|
||||
if response.errors
|
||||
@setState({loginErrors: response.errors})
|
||||
else
|
||||
context.JK.app.notify({title: 'Unknown Signup Error', text: jqXHR.responseText})
|
||||
else
|
||||
context.JK.app.notifyServerError(jqXHR, "Unable to Sign Up")
|
||||
)
|
||||
|
||||
|
||||
@setState({processing:true})
|
||||
})
|
||||
|
|
@ -40,6 +40,55 @@ body.web.individual_jamtrack {
|
|||
font-size: 18px;
|
||||
line-height: 175%;
|
||||
}
|
||||
|
||||
&.jam-class {
|
||||
padding:20px 0;
|
||||
&:nth-of-type(1) {
|
||||
padding-top:80px;
|
||||
}
|
||||
width:1050px;
|
||||
p {
|
||||
line-height:125%;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color:$cta-color;
|
||||
}
|
||||
|
||||
ol, ul, li {
|
||||
font-size:16px;
|
||||
line-height:125%;
|
||||
color: $copy-color-on-white;
|
||||
}
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
li {
|
||||
margin-left:20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 700px;
|
||||
padding-bottom: 40%;
|
||||
}
|
||||
.tab-and-return {
|
||||
margin-top:20px;
|
||||
font-size:12px;
|
||||
color:$copy-color-on-white;
|
||||
}
|
||||
.search-area {
|
||||
text-align:center;
|
||||
a {
|
||||
color: $cta-color;
|
||||
font-size:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
|
|
@ -47,6 +96,81 @@ body.web.individual_jamtrack {
|
|||
color: $copy-color-on-white;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.jam-class {
|
||||
|
||||
&.multi-para {
|
||||
p:nth-of-type(2) {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
.video-wrapper {
|
||||
margin-bottom:10px;
|
||||
|
||||
&.bottomed {
|
||||
margin-bottom:80px;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
color:$copy-color-on-dark;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color:blue;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.teacher-icons {
|
||||
float:right;
|
||||
max-width:250px;
|
||||
margin-left:20px;
|
||||
.top-left {
|
||||
margin-right:15px;
|
||||
float:left;
|
||||
}
|
||||
.top-right {
|
||||
float:right;
|
||||
}
|
||||
.bottom-left {
|
||||
float:left;
|
||||
margin-right:15px;
|
||||
}
|
||||
.bottom-right {
|
||||
float:right;
|
||||
}
|
||||
.top-teacher-row {
|
||||
}
|
||||
.bottom-teacher-row {
|
||||
}
|
||||
.testdrive-note {
|
||||
font-style:italic;
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.audio-wrapper {
|
||||
float:left;
|
||||
padding:10px 20px 20px;
|
||||
text-align:center;
|
||||
width:200px;
|
||||
a {
|
||||
display:inline-block;
|
||||
margin-top:20px;
|
||||
color: $cta-color;
|
||||
text-decoration:none;
|
||||
}
|
||||
.sample-audio-text {
|
||||
margin-top:3px;
|
||||
text-align:center;
|
||||
}
|
||||
.listening-note {
|
||||
margin-top:20px;
|
||||
font-style:italic;
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
|
||||
.awesome-item {
|
||||
padding: 24px;
|
||||
background-color: #dedede;
|
||||
|
|
@ -173,6 +297,14 @@ body.web.individual_jamtrack {
|
|||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
img.jam-class-teacher {
|
||||
width:375px;
|
||||
height:215px;
|
||||
float:left;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p.gift-getter {
|
||||
margin-top:20px;
|
||||
line-height:125%;
|
||||
|
|
@ -247,6 +379,13 @@ body.web.individual_jamtrack {
|
|||
left:-230px;
|
||||
top:373px;
|
||||
}
|
||||
|
||||
.arrow1-jamclass {
|
||||
position: absolute;
|
||||
left: -256px;
|
||||
top: -61px;
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
background-color:white;
|
||||
position:absolute;
|
||||
|
|
@ -256,6 +395,14 @@ body.web.individual_jamtrack {
|
|||
@include border_box_sizing;
|
||||
z-index:1;
|
||||
|
||||
|
||||
&.jam-class {
|
||||
top:557px;
|
||||
|
||||
h3 {
|
||||
color:$cta-color;
|
||||
}
|
||||
}
|
||||
.jamtrack-overview-video {
|
||||
|
||||
h3 {
|
||||
|
|
@ -274,9 +421,9 @@ body.web.individual_jamtrack {
|
|||
|
||||
h3 {
|
||||
color:$copy-color-on-white;
|
||||
text-align:center;
|
||||
text-align:left;
|
||||
margin-bottom:20px;
|
||||
font-size:24px;
|
||||
font-size:30px;
|
||||
line-height:125%;
|
||||
}
|
||||
|
||||
|
|
@ -311,6 +458,14 @@ body.web.individual_jamtrack {
|
|||
left:112px;
|
||||
top:0;
|
||||
}
|
||||
.testiminal-background {
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
left: 174px;
|
||||
top: 181px;
|
||||
font-size: 12px;
|
||||
color:$copy-color-on-white;
|
||||
}
|
||||
}
|
||||
.preview-and-action-box {
|
||||
background-color: black;
|
||||
|
|
@ -324,6 +479,10 @@ body.web.individual_jamtrack {
|
|||
border-color: $copy-color-on-dark;
|
||||
z-index: 1;
|
||||
|
||||
&.jamclass {
|
||||
top:209px;
|
||||
}
|
||||
|
||||
.preview-jamtrack-header {
|
||||
background-color: $cta-color;
|
||||
color: white;
|
||||
|
|
@ -351,8 +510,13 @@ body.web.individual_jamtrack {
|
|||
|
||||
border-width: 0 0 $chunkyBorderWidth;
|
||||
|
||||
&.gift-card {
|
||||
&.jam-class {
|
||||
border-width: 0 0 2px;
|
||||
p {
|
||||
padding:8px 10px;
|
||||
text-align:center;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
border-style: solid;
|
||||
|
|
@ -402,6 +566,9 @@ body.web.individual_jamtrack {
|
|||
font-size:12px;
|
||||
}
|
||||
.register-area {
|
||||
&.jam-class {
|
||||
padding:0;
|
||||
}
|
||||
padding: 10px;
|
||||
input {
|
||||
background-color: $copy-color-on-dark;
|
||||
|
|
|
|||
|
|
@ -68,6 +68,23 @@ class LandingsController < ApplicationController
|
|||
render 'watch_overview_tight', layout: 'web'
|
||||
end
|
||||
|
||||
def jam_class_students
|
||||
@olark_enabled = true
|
||||
@no_landing_tag = true
|
||||
@landing_tag_play_learn_earn = true
|
||||
@show_after_black_bar_border = true
|
||||
|
||||
render 'jam_class_students', layout: 'web'
|
||||
end
|
||||
|
||||
def jam_class_teachers
|
||||
@olark_enabled = true
|
||||
@no_landing_tag = true
|
||||
@landing_tag_play_learn_earn = true
|
||||
@show_after_black_bar_border = true
|
||||
render 'jam_class_teachers', layout: 'web'
|
||||
end
|
||||
|
||||
|
||||
def individual_jamtrack
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
- provide(:page_name, 'landing_page full individual_jamtrack')
|
||||
- provide(:description, @description)
|
||||
- provide(:title, @title)
|
||||
|
||||
= react_component 'JamClassStudentLandingPage', @page_data.to_json
|
||||
|
||||
- content_for :after_black_bar do
|
||||
.row.cta-row
|
||||
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.
|
||||
|
||||
- content_for :white_bar do
|
||||
= react_component 'JamClassStudentLandingBottomPage', @page_data.to_json
|
||||
|
||||
- content_for :red_bar do
|
||||
.full-row
|
||||
| Sign up for JamClass and start learning today!
|
||||
|
|
@ -42,6 +42,8 @@ SampleApp::Application.routes.draw do
|
|||
match '/landing/jamtracks/band/:plan_code', to: 'landings#individual_jamtrack_band', via: :get, as: 'individual_jamtrack_band'
|
||||
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/teachers', to: 'landings#jam_class_teachers', via: :get
|
||||
|
||||
match '/affiliateProgram', to: 'landings#affiliate_program', via: :get, as: 'affiliate_program'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue