context = window

@JamTrackLandingBottomPage = React.createClass({

  render: () ->
    `<div className="top-container">
      <div className="row awesome">
        <h2 className="awesome">What Makes JamTracks Awesome?</h2>

        <p>JamTracks by JamKazam deliver an unparalleled combination of multitrack pro audio and whiz bang technology -
          all with an eye toward the things that really matter to musicians who love to play. Below are the top 10 great
          things about JamTracks.
        </p>

      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">1</div>Huge, High Quality Multi-Track Catalog</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 1.png" className="awesome-image" width="405" height="212"/>
            JamKazam offers a catalog of 3,700+ songs. Each song is reviewed for quality, and every recording
            is a complete multi-track, with fully isolated tracks for each part of the music - e.g. lead vocal,
            backing vocals, lead guitar, rhythm guitar, keys, bass, drums, etc. This gives you complete creative control
            over every aspect of the music and how you want to use it for learning, practice, recording, and other creative endeavors.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">2</div>Solo, Mute, Pan or Set Level on Any Part</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 2.png" className="awesome-image left" width="150" height="191" />
            When learning to play a part, it's incredibly valuable to be able to hear just one part in isolation.
            Once you've learned your part, you can turn around and mute just that one part, and then play along with the rest of the band.
            Or if you prefer, you can turn that part down low but keep it around as a subtle hint. Or pan the recorded track into
            your left ear while your live performance is panned into your right ear. Whatever you like! You are in control.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">3</div>Make Custom Mixes</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 3.png" className="awesome-image" width="224" height="276" />
            When you've customized the JamTrack mix, you can easily save your custom mixes to use them again later without
            having to recreate them. Your custom mixes are saved to the JamKazam cloud, so you can access them from almost
            any Internet-connected device. If you want to use your mixes outside the JamKazam app, you can also export custom mixes
            as a simple .mp3, .wav, or .ogg audio file to use anywhere.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">4</div>Slow Down For Practice</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 4.png" className="awesome-image left" width="220" height="203" />
            You can easily slow down playback of your JamTrack by a specific % without changing pitch, so that the song still
            sounds "right", just slower. This is great for building your technique on tougher sections while gradually increasing tempo.
            You can also make JamTracks play faster if you want to hit the jets.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">5</div>Change Pitch/Key</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 5.png" className="awesome-image" width="228" height="200" />
            If you're a singer and you need to bring the song down into your vocal range, or if you're an instrumentalist
            and want to change the piece to a different key, the JamKazam app lets you change the pitch of any JamTrack up or down
            by a specified number of semitones (half steps).
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">6</div>Apply VST &amp; 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" />
            The free JamKazam app lets you easily apply VST &amp; AU plugin effects to your live performance, mixed together
            seamlessly with JamTrack playback.  For example, guitarists can apply popular amp sims like AmpliTube to get
            just the right guitar tone to match the song, and vocalists can apply effects like reverb, pitch correction, etc.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <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" />
            The free JamKazam app also lets you use MIDI instruments, and mix and record this instrumental audio with JamTracks.
            For example, keys players can use MIDI keyboard controllers with VST &amp; 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.
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">8</div>Make &amp; Share Recordings</h3>
          <p>
            <div className="video-wrapper left">
              <div className="video-container">
                <Conditional test={gon.env != 'test'}>
                  <iframe src="//www.youtube.com/embed/ysptXwFYDhQ" frameborder="0" allowfullscreen="allowfullscreen" />
                </Conditional>
              </div>
              <div className="cta-text">watch this sample video made by one of our users</div>
            </div>
            <p>Use the JamKazam app to make either audio-only or video + audio recordings. The app captures video from built-in
            or external webcams and combines this video with the mixed audio from the JamTrack and your live performance
            into a single integrated video, and will even upload the video to YouTube for you!</p>
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">9</div>Play Live In Sync With Others Over the Internet</h3>
          <p>
            <div className="video-wrapper">
              <div className="video-container">
                <Conditional test={gon.env != 'test'}>
                  <iframe src="//www.youtube.com/embed/MASQJnlUBAM" frameborder="0" allowfullscreen="allowfullscreen" />
                </Conditional>
              </div>
              <div className="cta-text">watch this sample video made by three of our users</div>
            </div>
            <p>Perhaps the most mind-blowing thing you can do with JamKazam is that you can play live in sync with others
            from different locations over the Internet using the free JamKazam app and Internet service. And you can play
            with your JamTracks in these sessions, with others playing different parts.</p>
            <div className="clearall" />
          </p>
        </div>
      </div>
      <div className="row awesome-thing">
        <div className="awesome-item">
          <h3>          <div className="awesome-number">10</div>JamTracks Work With All Your Stuff</h3>
          <p><img src="/assets/landing/Top 10 Image - Number 10.png" className="awesome-image" width="160" height="326" />
            You can use your JamTracks with any device that can run a standard web browser for playback of the JamTracks.
            If you want to mix your live performance with the JamTrack for recordings, and to access other advanced
            features, you'll need to use a JamKazam app. Our app is currently available for Mac and Windows computers,
            and we will have iOS and Android apps coming very soon as well.  So you can access your JamTracks on just about any device.
            <br/>
            <br/>
            <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 className="clearall" />
          </p>
        </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">
              <Conditional test={gon.env != 'test'}>
                <iframe src="//www.youtube.com/embed/07zJC7C2ICA" frameborder="0" allowfullscreen="allowfullscreen" />
              </Conditional>
            </div>
          </div>
          <br className="clearall"/>
        </div>
      </div>
    </div>`
})