396 lines
15 KiB
CoffeeScript
396 lines
15 KiB
CoffeeScript
context = window
|
|
|
|
@HomePage = React.createClass({
|
|
|
|
celery: () ->
|
|
script = document.createElement("script");
|
|
script.src = "https://www.trycelery.com/js/celery.js";
|
|
script.async = true;
|
|
document.body.appendChild(script);
|
|
|
|
componentDidMount: () ->
|
|
@root =$(@getDOMNode())
|
|
@celery()
|
|
|
|
jamClassClicked: (e) ->
|
|
e.preventDefault()
|
|
alertify.alert("COMING SOON!");
|
|
|
|
render: () ->
|
|
|
|
items = []
|
|
|
|
for item in gon.news
|
|
items.push(`<div dangerouslySetInnerHTML={{__html: "<strong>" + item.title + "</strong>" + item.body}} key={item.position}></div>`)
|
|
|
|
news = `<div><h5 className="widget-title">WHAT'S NEW</h5>
|
|
{items}</div>`
|
|
|
|
|
|
|
|
`<div>
|
|
<div id="header-top">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="span6" id="header-top-widget-area-1">
|
|
<div className="widget ewf_widget_contact_info">
|
|
</div>
|
|
</div>
|
|
<div className="span6" id="header-top-widget-area-2">
|
|
<div className="widget ewf_widget_social_media">
|
|
<div className="fixed">
|
|
<a href="https://www.facebook.com/JamKazam" className="facebook-icon social-icon">
|
|
<i className="fa fa-facebook"></i>
|
|
</a>
|
|
<a href="https://www.twitter.com/jamkazam" className="twitter-icon social-icon">
|
|
<i className="fa fa-twitter"></i>
|
|
</a>
|
|
<a href="https://plus.google.com/+Jamkazam" className="googleplus-icon social-icon">
|
|
<i className="fa fa-google-plus"></i>
|
|
</a>
|
|
<a href="https://www.youtube.com/channel/UC38nc9MMZgExJAd7ca3rkUA" className="youtube-icon social-icon">
|
|
<i className="fa fa-youtube"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="header">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="span3">
|
|
<div id="logo">
|
|
<a href="#top"><img src="/assets/modern/logo.png" alt="website logo"/></a>
|
|
</div>
|
|
</div>
|
|
<div className="span9">
|
|
|
|
<a className="mobile-menu-closed" href="#" id="mobile-menu-trigger">
|
|
<i className="fa fa-bars" style={{color:"white"}}></i>
|
|
</a>
|
|
|
|
<nav>
|
|
<ul className="sf-menu fixed" id="menu">
|
|
<li>
|
|
<a href="/products/platform" title="jamkazam">JamKazam</a>
|
|
</li>
|
|
<li>
|
|
<a href="/products/jamblaster" title="jamblaster">JamBlaster</a>
|
|
</li>
|
|
<li>
|
|
<a href="/products/jamtracks" title="jamtracks">JamTracks</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="jamclass" className="last jamclass" id="jamclass-link" onClick={this.jamClassClicked}>JamClass</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul className="fixed" id="mobile-menu">
|
|
<li>
|
|
<a href="/products/platform" title="jamkazam">JamKazam</a>
|
|
</li>
|
|
<li>
|
|
<a href="/products/jamblaster" title="jamblaster">JamBlaster</a>
|
|
</li>
|
|
<li>
|
|
<a href="/products/jamtracks" title="jamtracks">JamTracks</a>
|
|
</li>
|
|
<li>
|
|
<a href="" title="jamclass" className="last" onClick={this.jamClassClicked}>JamClass</a>
|
|
</li>
|
|
</ul>
|
|
<div id="content">
|
|
<div className="fullwidthbanner main">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="span12">
|
|
<div className="main-message">
|
|
Revolutionizing the way musicians connect, play, learn and earn. Across a city or across a nation.
|
|
<br/>
|
|
<br/>
|
|
<a className="button" href="/signup">JOIN TODAY, PLAY FREE!</a>
|
|
|
|
<div className="text-center"><a href="/signin" className="sign-in">or already a member? sign in.</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="fullwidth-section orange" id="jamkazam">
|
|
|
|
<div className="fullwidth-section-content">
|
|
|
|
<div className="container">
|
|
<div className="center"><h1>JAMKAZAM</h1></div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span5"><img src="/assets/modern/jk-image.png" alt=""/></div>
|
|
|
|
<div className="span5">
|
|
<h2>Play music live and in sync with others from different locations</h2>
|
|
<ul>
|
|
<li>Rehearse without travel or space</li>
|
|
<li>Co-write and produce music live</li>
|
|
<li>Join open sessions to jam with others</li>
|
|
<li>Record and live broadcast sessions</li>
|
|
<li>Connect with other musicians and bands</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span10 text-center"><a href="/products/platform" className="cta-button">LEARN MORE</a><a href="/signup"
|
|
className="cta-button">SIGN
|
|
UP NOW, IT'S FREE!</a></div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="fullwidth-section white" id="jamblaster">
|
|
|
|
<div className="fullwidth-section-content">
|
|
|
|
<div className="container">
|
|
<div className="center"><h1>JAMBLASTER</h1></div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span5">
|
|
<h2>The ultimate smartphone accessory for any musician</h2>
|
|
<ul>
|
|
<li>Play online with the lowest possible latency</li>
|
|
<li>Make pro quality audio recordings</li>
|
|
<li>Live broadcast yourself or your band thru YouTube</li>
|
|
<li>Play along with 4,000+ of your favorite songs</li>
|
|
<li>Teach or take online music lessons</li>
|
|
<li>No computer required, plug-and-play ease of use</li>
|
|
</ul>
|
|
</div>
|
|
<div className="span5"><img src="/assets/modern/jamblaster.png" alt=""/></div>
|
|
|
|
<div className="span1"> </div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span10 text-center"><a href="/products/jamblaster" className="cta-button">LEARN MORE</a><a
|
|
data-celery="5675ffb8004f6711002918b6" data-celery-version="v2" className="cta-button">ORDER
|
|
NOW</a></div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="fullwidth-section teal" id="jamtracks">
|
|
|
|
<div className="fullwidth-section-content">
|
|
|
|
<div className="container">
|
|
<div className="center"><h1>JAMTRACKS</h1></div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span5">
|
|
<img src="/assets/modern/jamtracks.png" alt=""/>
|
|
</div>
|
|
|
|
<div className="span5">
|
|
<h2>The best way to learn and play with your favorite songs</h2>
|
|
<ul>
|
|
<li>Choose your favorites from 4,000+ songs</li>
|
|
<li>Complete multitracks, solo or mute any part(s)</li>
|
|
<li>Slow down playback to practice</li>
|
|
<li>Change pitch up or down</li>
|
|
<li>Save custom mixes to use anywhere</li>
|
|
<li>Make and share audio and/or video recordings</li>
|
|
</ul>
|
|
</div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span10 text-center"><a href="/product/jamtracks" className="cta-button">LEARN MORE</a><a
|
|
href="/client#/jamtrack/search" className="cta-button">GET
|
|
YOUR FIRST JAMTRACK FREE!</a></div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="fullwidth-section gray" id="jamclass">
|
|
|
|
<div className="fullwidth-section-content">
|
|
|
|
<div className="container">
|
|
<div className="center"><h1>JAMCLASS</h1></div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
|
|
<div className="span3">
|
|
<h2>For Students</h2>
|
|
<ul>
|
|
<li>Take online lessons from the best teacher, not the closest</li>
|
|
<li>Avoid the wasted time and cost of travel</li>
|
|
<li>Refer back to recorded portions of lessons</li>
|
|
<li>Use TestDrive to find a great teacher</li>
|
|
</ul>
|
|
</div>
|
|
<div className="span4"><img src="/assets/modern/jamclass.png" alt=""/></div>
|
|
|
|
<div className="span3"><h2>For Teachers</h2>
|
|
<ul>
|
|
<li>Give lessons to students anywhere to earn more</li>
|
|
<li>Avoid the wasted time and cost of travel</li>
|
|
<li>Teach during normal "off hours"</li>
|
|
<li>Let JamKazam bring you new students from marketplace</li>
|
|
</ul>
|
|
</div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div className="row">
|
|
<div className="span1"> </div>
|
|
<div className="span5 text-left">
|
|
<a href="#" className="cta-button cta-smaller" onClick={this.jamClassClicked}>LEARN MORE</a><a href="#" className="cta-button cta-smaller" onClick={this.jamClassClicked}>SIGN UP TO TEACH</a>
|
|
</div>
|
|
<div className="span5 text-right">
|
|
<a href="#" className="cta-button cta-smaller" onClick={this.jamClassClicked}>LEARN MORE</a><a href="#" className="cta-button cta-smaller" onClick={this.jamClassClicked}>SEARCH TEACHERS</a>
|
|
</div>
|
|
<div className="span1"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="span4" id="footer-widget-area-1">
|
|
|
|
<div className="widget widget_text">
|
|
|
|
<h5 className="widget-title">ABOUT JAMKAZAM</h5>
|
|
|
|
<div className="textwidget">
|
|
|
|
<p>The JamKazam team loves music, and in particular live music.
|
|
We've combined our passion for live music
|
|
and technology to make it far easier for musicians to play live
|
|
with each other.</p>
|
|
|
|
<p>Using JamKazam, you can now play music with other musicians from
|
|
your homes across the Internet as if
|
|
you were sitting in the same room. You can record your
|
|
performances at the track level, share your
|
|
recordings, and even broadcast your live sessions to family,
|
|
friends, and fans.</p>
|
|
|
|
<p>We hope you enjoy using the service, making more musician
|
|
friends, and making more live music!</p>
|
|
|
|
<p><a href="#" className="sign-in">Visit our corporate site for more
|
|
about us</a></p>
|
|
<br/>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="span1"></div>
|
|
<div className="span7" id="footer-widget-area-3">
|
|
|
|
<div className="widget ewf_widget_contact_info">
|
|
|
|
{news}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<img className="bottom-row-item" src="/assets/modern/logo-2.png" alt=""/>
|
|
|
|
<div className="bottom-row-item widget ewf_widget_social_media">
|
|
<div className="fixed">
|
|
<a href="https://www.facebook.com/JamKazam" className="facebook-icon social-icon">
|
|
<i className="fa fa-facebook"></i>
|
|
</a>
|
|
|
|
<a href="https://www.twitter.com/jamkazam" className="twitter-icon social-icon">
|
|
<i className="fa fa-twitter"></i>
|
|
</a>
|
|
|
|
<a href="https://plus.google.com/+Jamkazam" className="googleplus-icon social-icon">
|
|
<i className="fa fa-google-plus"></i>
|
|
</a>
|
|
|
|
<a href="https://www.youtube.com/channel/UC38nc9MMZgExJAd7ca3rkUA" className="youtube-icon social-icon">
|
|
<i className="fa fa-youtube"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer-bottom">
|
|
<div className="container">
|
|
|
|
<div className="row">
|
|
<div className="span6">
|
|
<div className="text-left">© 2016 JamKazam. All Rights Reserved</div>
|
|
</div>
|
|
<div className="span6">
|
|
<div id="footer-links" className="text-right">
|
|
<a href="/corp/about" rel="external">about</a> | <a
|
|
href="/corp/news"
|
|
rel="external">news</a> | <a
|
|
href="/corp/media_center"
|
|
rel="external">media</a> | <a
|
|
href="/corp/contact"
|
|
rel="external">contact</a> | <a
|
|
href="/corp/privacy"
|
|
rel="external">privacy</a> | <a
|
|
href="/corp/terms" rel="external">terms of
|
|
service</a> | <a
|
|
href="http://forums.jamkazam.com/" rel="external">community
|
|
forum</a> | <a
|
|
href="/corp/help" rel="external">help</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a className="gone" id="back-to-top" href="#">
|
|
<i className="ifc-up4"></i>
|
|
</a>
|
|
</div>
|
|
`
|
|
|
|
}) |