GuidesTours: Show a preview of the frontend for the first step

_WIP_

- After 'Next', the preview exits
- Super hacky CSS

client/guidestours/config.js

@@ -2,6 +2,7 @@ const config = {
 	init: {
 		text: 'Welcome to WordPress.com!',
 		next: 'my-sites',
+		showPreview: true,
 	},
 	'my-sites': {
 		target: 'my-sites',

client/guidestours/index.js

@@ -2,13 +2,16 @@
  * External dependencies
  */
 import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
 import Card from 'components/card';
 import Button from 'components/button';
+import WebPreview from 'components/web-preview';
 import guideConfig from './config';
+import { getSelectedSite } from 'state/ui/selectors';
 
 // Magic numbers make me sad
 const BULLSEYE_RADIUS = 6;
@@ -188,7 +191,7 @@ export default class GuidesTours extends Component {
 		const pointerCoords = posToCss( bullseye );
 
 		return (
-			<div>
+			<div className="guidestours">
 				<GuidesStep
 						{ ...this.state.currentStep }
 						key={ this.state.target }
@@ -199,7 +202,14 @@ export default class GuidesTours extends Component {
 				{ this.state.currentStep.type === 'bullseye' &&
 					<GuidesPointer style={ pointerCoords } />
 				}
+				<WebPreview showPreview={ this.state.currentStep.showPreview } previewUrl={ this.props.selectedSite ? `${ this.props.selectedSite.URL }/?iframe=true&preview=true` : '' } />
 			</div>
 		);
 	}
 }
+
+export default connect( ( state ) => {
+	return {
+		selectedSite: getSelectedSite( state )
+	};
+} )( GuidesTours );

client/guidestours/style.scss

@@ -1,7 +1,7 @@
 .guidestours__step {
 	position: fixed;
 	width: 400px;
-	z-index: z-index( 'root', '.web-preview' );
+	z-index: z-index( 'root', '.web-preview' ) + 1;
 }
 
 // variables for the guidestours__pointer
@@ -18,7 +18,7 @@ $zoom-scale: 5; // the multiplier determining the size of the animated rings
 
 .guidestours__pointer {
 	position: fixed;
-	z-index: z-index( 'root', '.web-preview' );
+	z-index: z-index( 'root', '.web-preview' ) + 1;
 	width: $size;
 	height: $size;
 	pointer-events: none;
@@ -58,3 +58,19 @@ $zoom-scale: 5; // the multiplier determining the size of the animated rings
 .guidestours__pointer__ring:after {
 	animation-delay: #{ $animation-speed / 4 };
 }
+
+.guidestours .web-preview__backdrop {
+  display: none;
+}
+
+.guidestours .web-preview__toolbar {
+  display: none;
+}
+
+.guidestours .web-preview__placeholder {
+  top: 0px;
+}
+
+.guidestours .web-preview {
+  left: 273px;
+}