jam-cloud/web/app/assets/javascripts/react-components/landing/IndividualJamTrackPage.js.j...

54 lines
2.2 KiB
CoffeeScript

context = window
@IndividualJamTrackPage = React.createClass({
watchVideo: (e) ->
e.preventDefault()
window.open("/popups/youtube/player?id=askHvcCoNfw", 'What Are JamTracks?', 'scrollbars=yes,toolbar=no,status=no,height=540,width=960')
render: () ->
header = null
if @props.instrument
header = "We Have #{@props.instrument_count} JamTracks With #{@props.instrument} Parts - Play Along With Your Favorites!"
else if @props.band
header = "#{@props.jam_track.original_artist} Backing Tracks - Complete Multitracks"
else if @props.generic?
header = "Backing Tracks + Free Amazing App = Unmatched Experience"
else
header = "\"#{@props.jam_track.name}\" Backing Track by #{@props.jam_track.original_artist}"
`<div className="one_by_two">
<div className="row header">
<h1>{header}</h1>
</div>
<div className="row">
<div className="column">
<h2>Here's Why 20,000 Musicians Love Our Backing Tracks</h2>
<p>JamKazam gives you a better backing track experience:</p>
<ul>
<li>Full multitrack recordings with isolated track for each part</li>
<li>Free JamKazam app to:
<ul>
<li>Hear just the part you want to play to learn it</li>
<li>Mute the part you want to play, and play live with other parts</li>
<li>Record and mix your live play with unmuted tracks</li>
</ul>
</li>
<li>Free Internet Service to play this track live online with others</li>
</ul>
<a className="watch-video" onClick={this.watchVideo}>Watch A Video To See How It Works</a>
</div>
<div className="column">
<h2>Preview "{this.props.jam_track.name}" Backing Track by {this.props.jam_track.original_artist}</h2>
<p>Click the play buttons below to preview the master mix and fully isolated tracks of the professional backing track recording. All are included in your backing track.</p>
<div className="previews"></div>
</div>
<br className="clearAll" />
</div>
<div className="row">
<JamTrackCta {...this.props} />
</div>
</div>`
})