* working on new jamblaster landing page
This commit is contained in:
parent
4208391c44
commit
89b48619a6
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -3,6 +3,7 @@
|
|||
//= require_directory ./react-components/helpers
|
||||
//= require_directory ./react-components/actions
|
||||
//= require ./react-components/stores/AppStore
|
||||
//= require ./react-components/stores/PlatformStore
|
||||
//= require ./react-components/stores/BrowserMediaStore
|
||||
//= require ./react-components/stores/RecordingStore
|
||||
//= require ./react-components/stores/VideoStore
|
||||
|
|
@ -17,7 +18,6 @@
|
|||
//= require ./react-components/stores/SessionMyTracksStore
|
||||
//= require ./react-components/stores/SessionOtherTracksStore
|
||||
//= require ./react-components/stores/SessionMediaTracksStore
|
||||
//= require ./react-components/stores/PlatformStore
|
||||
//= require ./react-components/stores/VideoUploaderStore
|
||||
//= require ./react-components/stores/JamTrackPlayerStore
|
||||
//= require_directory ./react-components/stores
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
context = window
|
||||
|
||||
@ProductJamBlasterBottomPage = React.createClass({
|
||||
|
||||
render: () ->
|
||||
`<div className="top-container">
|
||||
|
||||
<div className="row awesome-thing">
|
||||
<div className="awesome-item">
|
||||
<h3> Play Music Live in Sync from Different Locations over the Internet</h3>
|
||||
|
||||
<p>
|
||||
The ability to play live together from different locations enables many new possibilities including:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Rehearse without needing to pack gear, travel, and find rehearsal space</li>
|
||||
|
||||
<li>Co-write new music interactively as if you're sitting in the same room rather than just sharing
|
||||
files, which limits both creativity and speed
|
||||
</li>
|
||||
<li>Join open jam sessions any time to play live with others, make new connections, learn, and just have
|
||||
fun playing more music
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Latency issues have historically prevented musicians from playing together over the Internet, but the
|
||||
JamBlaster and JamKazam's patent pending software innovations have brought this dream to life.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To demonstrate the kind of live distributed performances that are possible with the JamBlaster, we flew
|
||||
the members of the band Big Cat to Austin TX, Atlanta GA, Chicago IL, and Brooklyn NY, and had them play
|
||||
together using a JamBlaster at each location. They played from the homes of friends in those cities
|
||||
using normal consumer Internet connections. We used a headphone splitter to record the audio that
|
||||
Malford (singer) heard in real-time while singing, so you can hear exactly what he heard while
|
||||
performing. Watch the video below to see and hear it!
|
||||
</p>
|
||||
|
||||
<div className="video-wrapper">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/2Zk7-04IAx4" frameborder="0" allowfullscreen="allowfullscreen"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="clearall" />
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
context = window
|
||||
rest = context.JK.Rest()
|
||||
|
||||
@ProductJamBlasterPage = React.createClass({
|
||||
|
||||
render: () ->
|
||||
|
||||
`<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"/>
|
||||
<h1 className="jam-track-name">JAMBLASTER</h1>
|
||||
<h2 className="original-artist">by JAMKAZAM</h2>
|
||||
<div className="clearall"/>
|
||||
</div>
|
||||
<div className="preview-and-action-box">
|
||||
<h2>See What You Can Do With The JamBlaster</h2>
|
||||
<div className="video-wrapper">
|
||||
<div className="video-container">
|
||||
<iframe src="//www.youtube.com/embed/iteR0ciRhtw" frameborder="0" allowfullscreen="allowfullscreen" />
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/landing/jamtrack_landing_arrow_2.png" className="arrow2" />
|
||||
<div className="know-more-about-latency">
|
||||
<h2>Want to Know More About Latency?</h2>
|
||||
<p>
|
||||
How is it possible that someone hundreds of miles away could feel like they are 20 feet away from you? Check out this video on latency to understand more:
|
||||
<div className="linked-video-holder">
|
||||
<a onClick={this.watchLatencyVideo} href="https://www.youtube.com/watch?v=mB3_KMse-J4" rel="external"> Watch Video About Latency - It's Pretty Fascinating</a>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<a className="white-bordered-button" href="https://shop.trycelery.com/page/jamblaster">
|
||||
Place Order for JamBlaster
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row summary-text">
|
||||
<p className="product-description">
|
||||
With your smartphone and a JamBlaster, you can:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Play live in sync with other musicians from different locations over the Internet – great for rehearsals without travel or space, co-writing, or joining open jams for fun</li>
|
||||
<li>Make pro quality audio (and optionally video) recordings of yourself and others – both master mix and fully isolated stems</li>
|
||||
<li>Learn and play along with 4,000+ of your favorite songs – with the ability to solo or mute any part, slow down playback for practice, change pitch/key, and more</li>
|
||||
<li>Teach or take online music lessons that really work – unlike Skype and Google Hangouts, which suffer from very high latency and poor audio quality</li>
|
||||
<li>Broadcast live video performances with pro quality audio through YouTube to family, friends, and fans – either yourself or your band playing in one location, or your online distributed JamKazam sessions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
|
||||
ctaClick: (e) ->
|
||||
e.preventDefault()
|
||||
|
||||
|
||||
watchLatencyVideo: (e) ->
|
||||
e.preventDefault()
|
||||
context.JK.popExternalLink($(e.target).attr('href'))
|
||||
})
|
||||
|
|
@ -7,7 +7,6 @@ MAX_TRACKS = context.JK.MAX_TRACKS
|
|||
MAX_OUTPUTS = context.JK.MAX_OUTPUTS
|
||||
gearUtils = context.JK.GearUtils
|
||||
AUDIO_UNIT_TYPE_ID = 0
|
||||
VST_TYPE_ID = 1
|
||||
MIDI_TRACK = context.JK.MIDI_TRACK
|
||||
|
||||
###
|
||||
|
|
@ -45,6 +44,7 @@ void removeSearchPath(int typeId, QString pathToRemove);
|
|||
init: () ->
|
||||
this.listenTo(context.AppStore, this.onAppInit)
|
||||
this.listenTo(context.MixerStore, this.onMixersChanged)
|
||||
this.listenTo(context.PlatformStore, this.onPlatformChanged)
|
||||
|
||||
onAppInit: (@app) ->
|
||||
|
||||
|
|
@ -56,6 +56,9 @@ void removeSearchPath(int typeId, QString pathToRemove);
|
|||
@loadTrackInstruments()
|
||||
@changed()
|
||||
|
||||
onPlatformChanged: (platform) ->
|
||||
@platform = platform
|
||||
|
||||
onReset: (loadProfile) ->
|
||||
logger.debug("ConfigureTracksStore:reset", this)
|
||||
@trackNumber = null
|
||||
|
|
@ -142,15 +145,24 @@ void removeSearchPath(int typeId, QString pathToRemove);
|
|||
listPaths: () ->
|
||||
@scanPaths = context.jamClient.VSTListSearchPaths()
|
||||
|
||||
# this comes from the JUCE library behavior
|
||||
vstTypeId: () ->
|
||||
if @platform.isWindows
|
||||
logger.debug("vstTypeId is windows")
|
||||
0
|
||||
else
|
||||
logger.debug("vstTypeId is not-windows")
|
||||
1
|
||||
|
||||
onAddSearchPath: (path) ->
|
||||
logger.debug("VSTAddSearchPath: " + path)
|
||||
context.jamClient.VSTAddSearchPath(VST_TYPE_ID, path)
|
||||
context.jamClient.VSTAddSearchPath(vstTypeId(), path)
|
||||
@listPaths()
|
||||
@changed()
|
||||
|
||||
onRemoveSearchPath: (path) ->
|
||||
logger.debug("VSTRemoveSearchPath: " + path)
|
||||
context.jamClient.VSTRemoveSearchPath(VST_TYPE_ID, path)
|
||||
context.jamClient.VSTRemoveSearchPath(vstTypeId(), path)
|
||||
@listPaths()
|
||||
@changed()
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,348 @@
|
|||
@import "client/common";
|
||||
|
||||
$row-width: 600px;
|
||||
|
||||
body.web.product_jamblaster {
|
||||
|
||||
$copy-color-on-dark: #b9b9b9;
|
||||
$copy-color-on-white: #575757;
|
||||
$cta-color: #e03d04;
|
||||
$chunkyBorderWidth: 6px;
|
||||
|
||||
ul, li {
|
||||
font-size:16px;
|
||||
line-height:125%;
|
||||
color:$ColorTextTypical;
|
||||
}
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
li {
|
||||
margin-left:20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.full-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: $row-width;
|
||||
}
|
||||
|
||||
.name-and-artist {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
|
||||
p {
|
||||
color: $copy-color-on-dark;
|
||||
clear: both;
|
||||
font-size: 20px;
|
||||
line-height: 175%;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.row.awesome {
|
||||
h2 {
|
||||
color: $copy-color-on-white;
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
color: $copy-color-on-white;
|
||||
font-size: 18px;
|
||||
line-height: 175%;
|
||||
}
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.awesome-thing {
|
||||
color: $copy-color-on-white;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.awesome-item {
|
||||
//background-color: #dedede;
|
||||
//border-radius: 12px;
|
||||
@include border_box_sizing;
|
||||
width: 670px;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
margin-left: 10px;
|
||||
margin-bottom:80px;
|
||||
|
||||
.cta-text {
|
||||
margin-left: 10px;
|
||||
text-align:center;
|
||||
margin-top:20px;
|
||||
}
|
||||
&.left {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
.cta-text {
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
padding-bottom: 60%;
|
||||
|
||||
}
|
||||
.awesome-image {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.awesome-number {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
display: inline-block;
|
||||
background-color: $cta-color;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
border-color: white;
|
||||
border-style: solid;
|
||||
margin-right: 10px;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top:40px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
color:$copy-color-on-white;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
li {
|
||||
color:$copy-color-on-white;
|
||||
}
|
||||
ul {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
padding: 40px 0;
|
||||
background-color: #262626;
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $copy-color-on-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.white-bar {
|
||||
p {
|
||||
color: $copy-color-on-white;
|
||||
}
|
||||
|
||||
.top-container {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.white-bordered-button {
|
||||
margin-top: 163px;
|
||||
margin-left: 189px;
|
||||
width: 165px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.red-bar {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: #e03c02;
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img.app-preview {
|
||||
width: 340px;
|
||||
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;
|
||||
}
|
||||
h1.jam-track-name {
|
||||
color: white;
|
||||
font-size: 30px !important;
|
||||
padding-top: 0;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
h2.original-artist {
|
||||
margin-top: 10px;
|
||||
color: #8d8d8d;
|
||||
font-size: 24px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.preview-text {
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
cursor:pointer;
|
||||
background-color: $cta-color;
|
||||
margin-top: 182px;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
color: $cta-color !important;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 150%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.bottom-banner {
|
||||
background-color: #e03c02;
|
||||
}
|
||||
|
||||
.arrow1 {
|
||||
position:absolute;
|
||||
left: -371px;
|
||||
top: -80px;
|
||||
}
|
||||
|
||||
.arrow2 {
|
||||
position:absolute;
|
||||
left: -14px;
|
||||
top: 667px;
|
||||
}
|
||||
.testimonials {
|
||||
background-color:white;
|
||||
position:absolute;
|
||||
width:350px;
|
||||
right:55px;
|
||||
top:287px;
|
||||
@include border_box_sizing;
|
||||
z-index:1;
|
||||
|
||||
.jamtrack-overview-video {
|
||||
|
||||
h3 {
|
||||
font-size:21px;
|
||||
width:400px;
|
||||
}
|
||||
.video-wrapper {
|
||||
|
||||
.video-container {
|
||||
width: 400px;
|
||||
padding-bottom: 53.33%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color:$copy-color-on-white;
|
||||
text-align:center;
|
||||
margin-bottom:20px;
|
||||
font-size:24px;
|
||||
line-height:125%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
position:absolute;
|
||||
top: 161px;
|
||||
left: 173px;
|
||||
font-size:14px;
|
||||
color:$copy-color-on-white;
|
||||
strong {
|
||||
font-weight:bold;
|
||||
}
|
||||
white-space:nowrap;
|
||||
}
|
||||
.testimonial {
|
||||
position:relative;
|
||||
width:350px;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
.testimonial-speech-bubble {
|
||||
width:350px;
|
||||
}
|
||||
.testimonial-avatar {
|
||||
width:60px;
|
||||
position:relative;
|
||||
top:5px;
|
||||
left:92px;
|
||||
}
|
||||
.testimonial-youtube {
|
||||
width:143px;
|
||||
position:relative;
|
||||
left:112px;
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
.preview-and-action-box {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
width: 460px;
|
||||
top: 59px;
|
||||
@include border_box_sizing;
|
||||
z-index: 1;
|
||||
|
||||
h2 {
|
||||
overflow:visible;
|
||||
white-space: nowrap;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size:16px;
|
||||
line-height:125%;
|
||||
color:$ColorTextTypical;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width:100%;
|
||||
padding-bottom:60%;
|
||||
}
|
||||
}
|
||||
|
||||
.know-more-about-latency {
|
||||
p {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -189,6 +189,9 @@ class LandingsController < ApplicationController
|
|||
end
|
||||
|
||||
def product_platform
|
||||
@no_landing_tag = true
|
||||
@landing_tag_play_learn_earn = true
|
||||
@show_after_black_bar_border = true
|
||||
render 'product_platform', layout: 'web'
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,21 @@
|
|||
- provide(:page_name, 'landing_page full landing_product product_jamblaster')
|
||||
- provide(:description, 'Learn more about the JamBlaster, a device designed from the ground up to meet the unique requirements of real-time, online, distributed music performance')
|
||||
- provide(:page_name, 'landing_page full product_jamblaster')
|
||||
- provide(:description, 'The JamBlaster enables music lessons over the internet, in real-time')
|
||||
- provide(:title, "Pre-order your JamBlaster now!")
|
||||
|
||||
.two_by_two
|
||||
.row
|
||||
.column
|
||||
h1.product-headline
|
||||
| The JamBlaster by JamKazam
|
||||
p.product-description
|
||||
| With your smartphone and a JamBlaster, you can:
|
||||
ul
|
||||
li Play live in sync with other musicians from different locations over the Internet – great for rehearsals without travel or space, co-writing, or joining open jams for fun
|
||||
li Make pro quality audio (and optionally video) recordings of yourself and others – both master mix and fully isolated stems
|
||||
li Learn and play along with 4,000+ of your favorite songs – with the ability to solo or mute any part, slow down playback for practice, change pitch/key, and more
|
||||
li Teach or take online music lessons that really work – unlike Skype and Google Hangouts, which suffer from very high latency and poor audio quality
|
||||
li Broadcast live video performances with pro quality audio through YouTube to family, friends, and fans – either yourself or your band playing in one location, or your online distributed JamKazam sessions
|
||||
.column
|
||||
h1 See What You Can Do With The JamBlaster
|
||||
.video-wrapper
|
||||
.video-container
|
||||
iframe src="//www.youtube.com/embed/iteR0ciRhtw" frameborder="0" allowfullscreen="allowfullscreen"
|
||||
br clear="all"
|
||||
.row
|
||||
.column
|
||||
.cta-big-button
|
||||
a.white-bordered-button href="https://www.kickstarter.com/projects/1091884999/jamblaster-the-ultimate-smartphone-accessory-for-m" Get JamBlaster On Kickstarter
|
||||
.column
|
||||
h1 Want To Know More About Latency?
|
||||
p
|
||||
| How is it possible that someone hundreds of miles away could feel like they are 20 feet away from you? Check out this video on latency to understand more:
|
||||
.linked-video-holder
|
||||
a href="https://www.youtube.com/watch?v=mB3_KMse-J4" rel="external" Watch Video About Latency - It's Pretty Fascinating
|
||||
br clear="all"
|
||||
br clear="all"
|
||||
= react_component 'ProductJamBlasterPage', @page_data.to_json
|
||||
|
||||
- content_for :after_black_bar do
|
||||
.row.cta-row
|
||||
h2 PRE-ORDER YOUR JAMBLASTER NOW!
|
||||
p The JamBlaster hit 347% of its Kickstarter goal.
|
||||
p.cta-text Not sure if JamBlaster is for you? Scroll down to learn more.
|
||||
|
||||
- content_for :white_bar do
|
||||
= react_component 'ProductJamBlasterBottomPage', @page_data.to_json
|
||||
|
||||
- content_for :red_bar do
|
||||
.full-row
|
||||
| Pre-order the JamBlaster today!
|
||||
|
||||
javascript:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue