seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* iphone/mobile optimzation of landing pagse

This commit is contained in:
Seth Call 2016-02-23 15:48:55 -06:00
parent 8942ed4ccf
commit 18a92e4cc1
8 changed files with 252 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/assets/javascripts/react-components/landing/HomePage.js.jsx.coffee
View File

@ -13,7 +13,7 @@ context = window
@celery()
window.modernNavInit();
jamClassClicked: (e) ->
e.preventDefault()
alertify.alert("COMING SOON!");
@ -233,8 +233,8 @@ context = window
<div className="span1">&nbsp;</div>
<div className="span10 text-center"><a href="/products/jamtracks" className="cta-button cta-smaller">LEARN MORE</a><a
href="/client#/jamtrack/search" className="cta-button cta-smaller">GET FIRST JAMTRACK FREE!</a>
<a href="/downloads" className="cta-button cta-smaller">DOWNLOAD DESKTOP APP</a>
<a href="https://itunes.apple.com/us/app/jamtracks/id1060927816?ls=1&mt=8" className="cta-button cta-smaller">DOWNLOAD IOS APP</a>
<a href="/downloads" className="cta-button cta-smaller">GET DESKTOP APP</a>
<a href="https://itunes.apple.com/us/app/jamtracks/id1060927816?ls=1&mt=8" className="cta-button cta-smaller">GET IOS APP</a>
</div>
<div className="span1">&nbsp;</div>
</div>

2
web/app/assets/javascripts/react-components/landing/JamClassStudentLandingPage.js.jsx.coffee
View File

@ -36,7 +36,7 @@ rest = context.JK.Rest()
<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="checkbox-wrap"><input className="terms-checkbox" type="checkbox" name="terms" /></div><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>

2
web/app/assets/javascripts/react-components/landing/JamClassTeacherLandingPage.js.jsx.coffee
View File

@ -36,7 +36,7 @@ rest = context.JK.Rest()
<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="checkbox-wrap"><input className="terms-checkbox" type="checkbox" name="terms" /></div><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>

62
web/app/assets/javascripts/react-components/landing/JamTrackLandingBottomPage.js.jsx.coffee
View File

@ -12,38 +12,6 @@ context = window
things about JamTracks.
</p>
<div className="testimonials">
<h3>Leading Musicians &amp; Teachers Love JamTracks</h3>
<div className="testimonial">
<img src="/assets/landing/Andy Crowley - Speech Bubble.png" className="testimonial-speech-bubble" />
<img src="/assets/landing/Andy Crowley - Avatar.png" className="testimonial-avatar" />
<a rel="external" href="https://www.youtube.com/user/andycrowley"><img src="/assets/landing/Andy Crowley - YouTube.png" className="testimonial-youtube" /></a>
<h4><strong>Andy Crowley</strong> of AndyGuitar</h4>
</div>
<div className="testimonial">
<img src="/assets/landing/Ryan Jones - Speech Bubble.png" className="testimonial-speech-bubble" />
<img src="/assets/landing/Ryan Jones - Avatar.png" className="testimonial-avatar" />
<a rel="external" href="https://www.youtube.com/user/gotitans999"><img src="/assets/landing/Ryan Jones - PianoKeyz - YouTube.png" className="testimonial-youtube" /></a>
<h4><strong>Ryan Jones</strong> of PianoKeyz</h4>
</div>
<div className="testimonial">
<img src="/assets/landing/Carl Brown - 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="jamtrack-overview-video">
<h3>Watch A JamTracks Overview Video</h3>
<div className="video-wrapper left">
<div className="video-container">
<iframe src="//www.youtube.com/embed/07zJC7C2ICA" frameborder="0" allowfullscreen="allowfullscreen" />
</div>
</div>
</div>
</div>
</div>
<div className="row awesome-thing">
<div className="awesome-item">
@ -178,5 +146,35 @@ context = window
</div>
</div>
<div className="testimonials">
<h3>Leading Musicians &amp; Teachers Love JamTracks</h3>
<div className="testimonial">
<img src="/assets/landing/Andy Crowley - Speech Bubble.png" className="testimonial-speech-bubble" />
<img src="/assets/landing/Andy Crowley - Avatar.png" className="testimonial-avatar" />
<a rel="external" href="https://www.youtube.com/user/andycrowley"><img src="/assets/landing/Andy Crowley - YouTube.png" className="testimonial-youtube" /></a>
<h4><strong>Andy Crowley</strong> of AndyGuitar</h4>
</div>
<div className="testimonial">
<img src="/assets/landing/Ryan Jones - Speech Bubble.png" className="testimonial-speech-bubble" />
<img src="/assets/landing/Ryan Jones - Avatar.png" className="testimonial-avatar" />
<a rel="external" href="https://www.youtube.com/user/gotitans999"><img src="/assets/landing/Ryan Jones - PianoKeyz - YouTube.png" className="testimonial-youtube" /></a>
<h4><strong>Ryan Jones</strong> of PianoKeyz</h4>
</div>
<div className="testimonial">
<img src="/assets/landing/Carl Brown - 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="jamtrack-overview-video">
<h3>Watch A JamTracks Overview Video</h3>
<div className="video-wrapper">
<div className="video-container">
<iframe src="//www.youtube.com/embed/07zJC7C2ICA" frameborder="0" allowfullscreen="allowfullscreen" />
</div>
</div>
<br className="clearall"/>
</div>
</div>
</div>`
})

115
web/app/assets/javascripts/react-components/landing/JamTrackLandingPage.js.jsx.coffee
View File

@ -19,64 +19,61 @@ rest = context.JK.Rest()
else
ctaButtonText = 'Add To Cart'
if loggedIn
loggedInCtaButton = `<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>`
if !hasFree
loggedInPriceAdvisory = `<div className="price-advisory">$1.99</div>`
else
if !hasFree
loggedOutPriceAdvisory = `<div className="price-advisory">$1.99</div>`
if @state.iOS
iosBadge = `<a className="ios-appstore-badge" href="https://itunes.apple.com/us/app/jamtracks/id1060927816?ls=1&mt=8">
<img src="/assets/content/badge-download-on-the-app-store.svg" />
</a>`
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">
<p>Register for a free account to get this JamTrack free. We will not share your email. See our <a className="privacy-policy" onClick={this.privacyPolicy}>privacy policy</a>.</p>
<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>
{loggedOutPriceAdvisory}
</form>
<a className="browse-all" href="/client?search=#/jamtrack/search">or browse our catalog of 3,700+ songs</a>
register = `<div className="register-area ios">
<div className="">Download our free iOS app now, and get this JamTrack free! See why our JamTracks are so much better than traditional backing tracks - with no risk.</div>
<a className="ios-appstore-badge" href="https://itunes.apple.com/us/app/jamtracks/id1060927816?ls=1&mt=8">
<img src="/assets/content/badge-download-on-the-app-store.svg" />
</a>
</div>`
else
if loggedIn
loggedInCtaButton = `<button className={classNames({'cta-button' : true, 'processing': this.state.processing})} onClick={this.ctaClick}>{ctaButtonText}</button>`
if !hasFree
loggedInPriceAdvisory = `<div className="price-advisory">$1.99</div>`
else
if !hasFree
loggedOutPriceAdvisory = `<div className="price-advisory">$1.99</div>`
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">
<p>Register for a free account to get this JamTrack free. We will not share your email. See our <a className="privacy-policy" onClick={this.privacyPolicy}>privacy policy</a>.</p>
<div className={classNames({'errors': true, 'active': this.state.loginErrors})}>
{errorText}
</div>
<form className="jamtrack-signup-form">
<label>Email: </label><input type="text" name="email" />
<br/>
<label>Password: </label><input type="password" name="password" />
<div className="clearall"/>
<div className="checkbox-wrap"><input className="terms-checkbox" type="checkbox" name="terms" /></div><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>
{loggedOutPriceAdvisory}
</form>
<a className="browse-all" href="/client?search=#/jamtrack/search">or browse our catalog of 3,700+ songs</a>
</div>`
`<div className="top-container">
<div className="full-row name-and-artist">
<div>
<img className="app-preview" width="340" height="178" src="/assets/landing/JK_FBAd_Guitar_with_Keys.png" alt="screenshot of app"/>
<img className="app-preview" src="/assets/landing/JK_FBAd_Guitar_with_Keys.png" alt="screenshot of app"/>
<h1 className="jam-track-name">{this.props.jam_track.name.toUpperCase()}</h1>
<h2 className="original-artist">by {this.props.jam_track.original_artist.toUpperCase()}</h2>
{iosBadge}
<div className="clearall"/>
</div>
<div className="preview-and-action-box">
<img src="/assets/landing/jamtrack_landing_arrow_1.png" className="arrow1" />
<img src="/assets/landing/jamtrack_landing_arrow_2.png" className="arrow2" />
<div className="preview-jamtrack-header">
Preview JamTrack
</div>
<div className={classNames({'preview-area': true, 'logged-in' : loggedIn})}>
<p>Click the play buttons below to preview the master mix and 20-second samples of all the isolated tracks.</p>
<div className="tracks previews">
</div>
{loggedInCtaButton}
{loggedInPriceAdvisory}
</div>
{register}
</div>
</div>
<div className="row summary-text">
<p className="top-summary">
@ -85,10 +82,32 @@ rest = context.JK.Rest()
And our free app and Internet service are packed with features that give you unmatched creative freedom to learn, practice, record, play with others, and share your performances.
</p>
</div>
<div className="preview-and-action-box">
<img src="/assets/landing/jamtrack_landing_arrow_1.png" className="arrow1" />
<img src="/assets/landing/jamtrack_landing_arrow_2.png" className="arrow2" />
<div className="preview-jamtrack-header">
Preview JamTrack
</div>
<div className={classNames({'preview-area': true, 'logged-in' : loggedIn})}>
<p>Click the play buttons below to preview the master mix and 20-second samples of all the isolated tracks.</p>
<div className="tracks previews">
</div>
{loggedInCtaButton}
{loggedInPriceAdvisory}
</div>
{register}
</div>
</div>`
getInitialState: () ->
{loginErrors: null, processing:false}
try
iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
catch e
iOS = false
{ loginErrors: null, processing:false, iOS: iOS }
privacyPolicy: (e) ->
e.preventDefault()

152
web/app/assets/stylesheets/landings/individual_jamtrack.css.scss
View File

@ -1,7 +1,31 @@
@import "client/common";
$fluid-break: 1100px;
@mixin layout-small {
@media (max-width: #{$fluid-break - 1px}) {
@content;
}
}
@mixin layout-normal {
@media (min-width: #{$fluid-break}) {
@content;
}
}
body.web.individual_jamtrack {
h1.web-tagline {
@include layout-small {
display:none;
}
}
.wrapper {
@include layout-small {
width:auto;
}
}
$copy-color-on-dark: #b9b9b9;
$copy-color-on-white: #575757;
$cta-color: #e03d04;
@ -13,10 +37,19 @@ body.web.individual_jamtrack {
.row {
width: 663px;
@include layout-small {
width:auto;
}
}
.name-and-artist {
padding-top: 60px;
.ios-appstore-badge {
display:inline !important;
width:25%;
}
}
.summary-text {
@ -41,6 +74,12 @@ body.web.individual_jamtrack {
line-height: 175%;
}
@include layout-small {
h2 {
text-align:center;
}
}
&.jam-class {
padding:20px 0;
@ -186,6 +225,9 @@ body.web.individual_jamtrack {
border-radius: 12px;
@include border_box_sizing;
width: 663px;
@include layout-small {
width:auto;
}
}
.video-wrapper {
@ -218,6 +260,10 @@ body.web.individual_jamtrack {
width: 420px;
padding-bottom: 53.33%;
@include layout-small {
width:200px;
}
}
.awesome-image {
float: right;
@ -278,6 +324,9 @@ body.web.individual_jamtrack {
p {
color: $copy-color-on-dark;
}
@include layout-small {
text-align:center;
}
}
.white-bar {
@ -321,10 +370,15 @@ body.web.individual_jamtrack {
img.app-preview {
width: 340px;
height:178px;
float: left;
margin-left: -15px; // because image has black on the left, which you can't see on back background
margin-right: 20px;
margin-bottom: 30px;
@include layout-small {
width:33%;
}
}
h1.jam-track-name {
color: white;
@ -338,6 +392,10 @@ body.web.individual_jamtrack {
color: #8d8d8d;
font-size: 24px;
margin-left: 35px;
@include layout-small {
margin-bottom:20px;
}
}
.preview-text {
@ -381,12 +439,20 @@ body.web.individual_jamtrack {
position:absolute;
left: -371px;
top: -80px;
@include layout-small {
display:none;
}
}
.arrow2 {
position:absolute;
left:-230px;
top:373px;
@include layout-small {
display:none;
}
}
.arrow1-jamclass {
@ -404,6 +470,11 @@ body.web.individual_jamtrack {
@include border_box_sizing;
z-index:1;
@include layout-small {
width:auto;
position:static;
}
&.jam-class {
top:557px;
@ -422,13 +493,29 @@ body.web.individual_jamtrack {
width:400px;
}
.video-wrapper {
float:left;
.video-container {
width: 400px;
padding-bottom: 53.33%;
}
}
@include layout-small {
display: inline-block;
width: 100%;
text-align:center;
h3 {
width:auto;
text-align:center;
}
.video-wrapper{
float:none;
display:inline-block;
margin:auto;
}
}
}
h3 {
@ -437,6 +524,9 @@ body.web.individual_jamtrack {
margin-bottom:20px;
font-size:30px;
line-height:125%;
@include layout-small {
text-align:center;
}
}
h4 {
@ -454,6 +544,10 @@ body.web.individual_jamtrack {
position:relative;
width:350px;
margin-bottom:40px;
@include layout-small {
margin:0 auto 40px;
}
}
.testimonial-speech-bubble {
width:350px;
@ -479,11 +573,12 @@ body.web.individual_jamtrack {
color:$copy-color-on-white;
}
}
.preview-and-action-box {
background-color: black;
position: absolute;
right: 55px;
width: 330px;
max-width: 330px;
top: 200px;
@include border_box_sizing;
border-width: $chunkyBorderWidth;
@ -491,6 +586,12 @@ body.web.individual_jamtrack {
border-color: $copy-color-on-dark;
z-index: 1;
@include layout-small {
margin:20px auto;
position:static;
max-width:60%;
}
&.jamclass {
top:209px;
}
@ -578,9 +679,39 @@ body.web.individual_jamtrack {
font-size:12px;
}
.register-area {
@include layout-small {
label {
width:40% !important;
text-align:right;
padding-right:20px;
&.terms-help {
height:auto !important;
}
}
input {
width:60% !important;
}
}
&.jam-class {
padding:0;
}
&.ios {
background-color:$cta-color;
font-size:12px;
.ios-appstore-badge {
display:inline-block;
text-align:center;
margin-left:20px;
margin-top:30px;
width: 100%;
img {
width:50%;
}
}
}
padding: 10px;
input {
background-color: $copy-color-on-dark;
@ -593,10 +724,23 @@ body.web.individual_jamtrack {
vertical-align:middle;
}
}
.icheckbox_minimal {
.checkbox-wrap {
float: left;
top: 6px;
margin-top: 6px;
margin-left:64px;
@include border_box_sizing;
text-align:right;
@include layout-small {
width:40%;
margin-left:0;
.icheckbox_minimal {
right: -18px;
}
}
.icheckbox_minimal {
}
}
.cta-button {
font-size: 24px;

2
web/app/views/layouts/web.html.erb
View File

@ -46,7 +46,7 @@
<div class="clearall"></div>
<% elsif @landing_tag_play_learn_earn %>
<div class="landing-tag-play-learn-earn">
<h1>WHERE MUSICIANS CONNECT, PLAY, LEARN, & EARN</h1>
<h1 class="web-tagline">WHERE MUSICIANS CONNECT, PLAY, LEARN, & EARN</h1>
</div>
<% end %>

2
web/config/sitemap.rb
View File

@ -32,7 +32,7 @@ SitemapGenerator::Sitemap.create do
add(product_platform_path, priority: 0.9)
add(product_jamtracks_path, priority: 0.9)
add(corp_about_path, priority: 0.9)
add(buy_gift_card_path, priority, 0.9)
add(buy_gift_card_path, priority: 0.9)
JamTrack.all.each do |jam_track|
slug = jam_track.slug