content: import React from 'react';
  
  import VerticalSplit from '../../../../components/Layout/VerticalSplit';
  import ContentBlock from '../../../../components/Layout/ContentBlock';
  import Gutter from '../../../../components/Layout/Gutter';
  import ProjectCTA from '../../../../components/Elements/ProjectCTA';
  import ViewSite from '../../../../components/Elements/ViewSite';
  
  import randomArray from '../../../../utilities/randomNumberArray';
  
  import logo from './images/logo.jpg';
  import logoB from './images/logo-b.jpg';
  import styleguide from './images/styleguide.jpg';
  import pamphlet from './images/pamphlet.jpg';
  import pamphletB from './images/pamphlet-b.jpg';
  import pamphletC from './images/pamphlet-c.jpg';
  import pamphletD from './images/pamphlet-d.jpg';
  import pamphletE from './images/pamphlet-e.jpg';
  import pamphletGif from './images/pamphlet.gif';
  import website from './images/website.png';
  import websiteB from './images/website-b.png';
  import photoshootA from './images/photoshoot-a.jpg';
  import photoshootB from './images/photoshoot-b.jpg';
  import photoshootC from './images/photoshoot-c.jpg';
  
  import './TheThirdDimension.css';
  
  const TheThirdDimension = (props) => {
  
  	let animateOrder = randomArray(6);
  
  	return (
  		<article className="the-third-dimension">
  
  			<Gutter
  			data-animate={animateOrder[0]}
  			primaryColor={props.primaryColor}
  			secondaryColor={props.secondaryColor} >
  
  				<VerticalSplit
  					primaryColor={props.secondaryColor}
  					secondaryColor={props.primaryColor}
  					content={
  						<ContentBlock className="styleguide-intro">
  							<h4>We worked closely with a regional 3d-printing business to represent their three dimensional printing business in two dimensions</h4>
  							<div className="row">
  								<p>Begining with style exploration and market research, we produced a package of brand elements that includes logo design, stationary, brochure, and website.</p>
  								<p>Our goal was to provide a visual aesthetic that augments their competitive business offerings and services in a way that gives instant clarity into the value that the company provides.</p>
  							</div>
  						</ContentBlock>
  					}
  					split={
  						<div className="labs-styleguide">
  							<img src={styleguide} alt="3d Labs Brochure" />
  						</div>
  					}
  				/>
  				<div className="logo-block">
  					<ContentBlock className="logo-intro" data-animate={animateOrder[2]}>
  						<h4>As with any new brand, we begin by collecting information through interviews of company stakeholders and identifying strengths and differentiators.</h4>
  						<div className="row">
  							<p>The results of our initial discovery are written down and coalesced into a visual exploration through sketching and whiteboarding with the goal of landing on a memorable visual mark, befitting of the company and its strengths.</p>
  							<p>A logo not only provides a visual representation of a business name, but it also provides visual cues that should carry over into other communcation vehicles such as type, iconography, photography and illustration.</p>
  						</div>
  					</ContentBlock>
  					<div className="gallery">
  						<div className="printed-images row">
  							<article>
  								<img src={photoshootA} alt="3d Labs Logo"/>
  							</article>
  							<article>
  								<img src={photoshootB} alt="3d Labs Logo"/>
  							</article>
  							<article>
  								<img src={photoshootC} alt="3d Labs Logo"/>
  							</article>
  						</div>
  						<img src={logo} className="logo-single" alt="3d Labs Logo"/>
  						<div className="logo-images row">
  							<article>
  								<img src={logoB} alt="3d Labs Logo"/>
  							</article>
  						</div>
  					</div>
  				</div>
  			</Gutter>
  
  			<Gutter
  			data-animate={animateOrder[1]}
  			primaryColor={props.secondaryColor}
  			secondaryColor={props.primaryColor}>
  
  				<div className="pamphlet-section">
  					<ContentBlock className="pamphlet-intro">
  						<div className="row">
  							<h4>After type, color and aesthetic were defined, we got started incorporating them into a variety of collateral to be used as sales tools by 3D Labs.</h4>
  							<p>A printed pamphlet was designed in accordion style format, with 12 panels in total.  The panels are meant to continuously draw the reader through the piece and also allude to the concept of dimension.</p>
  						</div>
  					</ContentBlock>
  					<div className="pamphlet-images">
  						<div className="row gifRow">
  							<article>
  								<img src={pamphletGif} alt="3d Labs Pamphlet Gif"/>
  							</article>
  						</div>
  						<img src={pamphlet} className="pamphlet-full" alt="3d Labs Pamphlet Full"/>
  						<div className="row">
  							<article>
  								<img src={pamphletB} alt="3d Labs Pamphlet Cover"/>
  							</article>
  							<article>
  								<img src={pamphletC} alt="3d Labs Pamphlet Closeup"/>
  							</article>
  						</div>
  						<div className="row">
  							<article>
  								<img src={pamphletD} alt="3d Labs Pamphlet Backside"/>
  							</article>
  							<article>
  								<img src={pamphletE} alt="3d Labs Pamphlet Frontside"/>
  							</article>
  						</div>
  					</div>
  				</div>
  			</Gutter>
  
  			<Gutter
  			data-animate={animateOrder[2]}
  			className="screenshots">
  				<img className="screenshot-1" src={website} alt="Website Intro Section" />
  				<img className="screenshot-2" src={websiteB} alt="Website What We Do Section" />
  			</Gutter>
  
  			<ViewSite url="http://3dlabsusa.com" label="Visit 3dlabsusa.com" />
  
  			<ProjectCTA className="branding" />
  		</article>
  	)
  }
  
  export default TheThirdDimension;
  