Preliminary discover featured intro

src/js/views/discover/DiscoverFeatured.js

@@ -3,8 +3,10 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
-import Header from '../../components/Header'
 import PlaylistGrid from '../../components/PlaylistGrid'
+import SidebarToggleButton from '../../components/SidebarToggleButton'
+import Parallax from '../../components/Parallax'
+import Thumbnail from '../../components/Thumbnail'
 import * as helpers from '../../helpers'
 import * as spotifyActions from '../../services/spotify/actions'
 
@@ -19,11 +21,31 @@ class DiscoverFeatured extends React.Component{
 		this.props.spotifyActions.getFeaturedPlaylists();
 	}
 
+	renderIntro(playlist = null){
+		if (playlist){
+			return (
+				<div className="intro">
+					<Parallax image={helpers.sizedImages(playlist.images).huge} />
+					<div className="content cf">
+						<Thumbnail images={playlist.images} />
+						<h1>{playlist.name}</h1>
+						<h3>{playlist.tracks_total} tracks</h3>
+					</div>
+				</div>
+			)
+		} else {
+			return (
+				<div className="intro">
+					<Parallax />
+				</div>
+			)
+		}
+	}
+
 	render(){
 		if (helpers.isLoading(this.props.load_queue,['spotify_browse/featured-playlists'])){
 			return (
 				<div className="view discover-featured-view">
-					<Header icon="star" title="Featured playlists" />
 					<div className="body-loader">
 						<div className="loader"></div>
 					</div>
@@ -41,11 +63,18 @@ class DiscoverFeatured extends React.Component{
 			}
 		}
 
+		// Pull the first playlist out and we'll use this as a banner
+		var first_playlist = playlists.splice(0,1)
+		if (first_playlist){
+			first_playlist = first_playlist[0]
+		}
+
 		return (
 			<div className="view discover-featured-view">
-				<Header icon="star" title="Featured playlists" />
+				<SidebarToggleButton />
+				{this.renderIntro(first_playlist)}
 				<section className="grid-wrapper">
-					{ playlists ? <PlaylistGrid playlists={playlists} /> : null }
+					{playlists ? <PlaylistGrid playlists={playlists} /> : null }
 				</section>
 			</div>
 		);

src/scss/views/_discover.scss

@@ -103,4 +103,32 @@
 			padding: 20px;
 		}
 	}
+}
+
+.discover-featured-view {
+	.intro {
+		position: relative;
+
+		.parallax {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+		}
+
+		.content {
+			padding: 40px;
+			color: $white;
+			position: relative;
+			z-index: 2;
+
+			.thumbnail {
+				float: left;
+				max-width: 200px;
+				margin-right: 40px;
+			}
+		}
+	}
 }