From 5c49fd6f14015b2436ba07bf163aa8db074145aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 16 Sep 2015 18:31:46 +0200 Subject: [PATCH] implement ikonotv landing page according to mockups --- .../components/ikonotv/ikonotv_landing.js | 106 ++++++++++++++++++ .../whitelabel/wallet/wallet_routes.js | 4 +- sass/whitelabel/index.scss | 1 + .../wallet/ikonotv/ikonotv_landing.scss | 81 +++++++++++++ 4 files changed, 190 insertions(+), 2 deletions(-) create mode 100644 js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js create mode 100644 sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js new file mode 100644 index 00000000..81f52e5e --- /dev/null +++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js @@ -0,0 +1,106 @@ +'use strict'; + +import React from 'react'; + +import ButtonLink from 'react-router-bootstrap/lib/ButtonLink'; + +import UserActions from '../../../../../actions/user_actions'; +import UserStore from '../../../../../stores/user_store'; + +import { getLangText } from '../../../../../utils/lang_utils'; + + +let IkonotvLanding = React.createClass({ + + getInitialState() { + return UserStore.getState(); + }, + + componentDidMount() { + UserStore.listen(this.onChange); + }, + + componentWillUnmount() { + UserStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + getEnterButton() { + console.log(this.state.currentUser); + if(this.state.currentUser && this.state.currentUser.email) { + return ( + + {getLangText('ENTER')} + + ); + } else { + return ( + + {getLangText('ENTER')} + + ); + } + }, + + render() { + return ( +
+
+ +
+

PROTECT

+ +

& SHARE

+
+

Welcome to the ikonoTV

+

Registration Page

+
+
+
+

+ ONLINE-ONLY FOR YOUR PROTECTION +

+

+ As an entirely digital broadcasting and licensing company we’re always keen to properly handle the content that artists, museums, and archives consign to us. The main concern with art online is the risk it will be misused. Thanks to our partnership with ascribe.io, we can address that issue in a way that is faster and more efficient for our users. + Using ascribe means we can do away with paper contracts and replace them with an online-only version. Partnering with ascribe also means we can encrypt digital work once it is uploaded. This revolutionary service will allow you to keep track of your works and share without worry. +

+
+
+

+ NEW SUBSCRIPTION SERVICE +

+

+ IkonoTV has developed an app that provides playlists on demand—soon to be available on all online devices and SmartTVs. The app is a paid service; in view of the interest in distributing this service in public spaces (hospitals, airports, hotels, etc.), we can now offer the possibility of a share in revenue to compensate for the artist’s work. +

+
+
+

+ THE RAPID GROWTH OF IkonoTV +

+

+ In October 2014, our first app was installed on Amazon Fire TV. During the first month it was downloaded 200 times, and jumped to 5,000 by the second month. Today, we’re well over the 175,000 mark, making us the number one app in our category in the US, Canada, UK and Germany. +

+
+
+

+ FULL TRANSPARENCY +

+

+ We expect a similar success with each SmartTV brand. For us, this marks the beginning of a new way to offer hassle-free licensing to visual artists—and we’re very proud to be an integral part of this virtual market. In the future, should we plan anything not directly mentioned in the contract, we will always make sure to secure the artist’s approval first. ikonoTV was developed to serve art and artists, and for this reason it’s of the utmost importance to us to respect this relationship. Thanks to you, we now look forward to our next big step. +

+
+
+

Elizabeth Markevitch

+

Founder & CEO Markevitch Media GmbH

+ {this.getEnterButton()} +
+
+
+ ); + } +}); + +export default IkonotvLanding; \ No newline at end of file diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 25fc1d80..9434615f 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -19,6 +19,7 @@ import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piec import CylandRegisterPiece from './components/cyland/cyland_register_piece'; import CylandPieceList from './components/cyland/cyland_piece_list'; +import IkonotvLanding from './components/ikonotv/ikonotv_landing'; import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list'; import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan'; import IkonotvPieceContainer from './components/ikonotv/ascribe_detail/ikonotv_piece_container'; @@ -66,8 +67,7 @@ let ROUTES = { ), 'ikonotv': ( - - + diff --git a/sass/whitelabel/index.scss b/sass/whitelabel/index.scss index 54b9f41e..9fa1b68f 100644 --- a/sass/whitelabel/index.scss +++ b/sass/whitelabel/index.scss @@ -1 +1,2 @@ @import 'prize/index'; +@import 'wallet/ikonotv/ikonotv_landing'; \ No newline at end of file diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss new file mode 100644 index 00000000..b0d60983 --- /dev/null +++ b/sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss @@ -0,0 +1,81 @@ +.ikonotv-landing { + /* center all text on the page */ + text-align: center; + background-color: #c40050; + color: white; + + padding: 5em 5em 5em 5em; + + header { + /* center all images on the page */ + img { + display: block; + margin-left: auto; + margin-right: auto; + } + + /* Ikonotv logo */ + img:first-child { + width: 200px; + } + + > .tagline { + margin-top: 2em; + margin-bottom: 2em; + + > h1 { + font-size: 9em; + font-weight: bold; + + margin-top: 10px; + margin-bottom: 10px; + } + } + + > h2 { + font-weight: 600; + font-size: 2.75em; + } + + > h2 + h2 { + margin-top: 0; + } + } + + article { + > section { + width: 65%; + margin: 3em auto 1em auto; + + > h1 { + text-align: center; + font-size: 1.35em; + font-weight: 600; + } + + > p { + text-align: left; + font-size: 1.3em; + line-height: 1.8; + } + } + } + + footer { + margin-top: 5em; + margin-bottom: 3em; + + > p { + font-size: 1.3em; + } + + > p + p { + margin-bottom: 3em; + } + + > .btn-default { + font-size: 1.5em; + font-weight: 500; + } + } +} \ No newline at end of file