import { PureComponent } from 'react';
import customerHomeIllustrationBusiness from 'calypso/assets/images/customer-home/illustration--business.svg';
import customerHomeIllustrationChecklistComplete from 'calypso/assets/images/customer-home/illustration--checklist-complete.svg';
import customerHomeIllustrationFireworks from 'calypso/assets/images/customer-home/illustration--fireworks-v2.svg';
import customerHomeIllustrationImportComplete from 'calypso/assets/images/customer-home/illustration--import-complete.svg';
import customerHomeIllustrationRocket from 'calypso/assets/images/customer-home/illustration--rocket.svg';
import customerHomeIllustrationSecondaryEarn from 'calypso/assets/images/customer-home/illustration--secondary-earn.svg';
import customerHomeIllustrationSecondaryFreePhoto from 'calypso/assets/images/customer-home/illustration--secondary-free-photo-library.svg';
import customerHomeIllustrationSecondaryGutenberg from 'calypso/assets/images/customer-home/illustration--secondary-gutenberg.svg';
import customerHomeIllustrationTaskConnect from 'calypso/assets/images/customer-home/illustration--task-connect-social-accounts.svg';
import customerHomeIllustrationTaskEarn from 'calypso/assets/images/customer-home/illustration--task-earn.svg';
import customerHomeIllustrationTaskFindDomain from 'calypso/assets/images/customer-home/illustration--task-find-domain.svg';
import customerHomeIllustrationWebinars from 'calypso/assets/images/customer-home/illustration-webinars.svg';
import adwordsGoogle from 'calypso/assets/images/illustrations/adwords-google.svg';
import apps from 'calypso/assets/images/illustrations/apps.svg';
import blockEditorFade from 'calypso/assets/images/illustrations/block-editor-fade.svg';
import builderReferral from 'calypso/assets/images/illustrations/builder-referral.svg';
import checkEmail from 'calypso/assets/images/illustrations/check-email.svg';
import customDomainBlogger from 'calypso/assets/images/illustrations/custom-domain-blogger.svg';
import customDomain from 'calypso/assets/images/illustrations/custom-domain.svg';
import dashboard from 'calypso/assets/images/illustrations/dashboard.svg';
import dotcomSupport from 'calypso/assets/images/illustrations/dotcom-support.svg';
import dotcomWordAds from 'calypso/assets/images/illustrations/dotcom-wordads.svg';
import fireworks from 'calypso/assets/images/illustrations/fireworks.svg';
import googleAnalytics from 'calypso/assets/images/illustrations/google-analytics.svg';
import googleMyBusinessFeature from 'calypso/assets/images/illustrations/google-my-business-feature.svg';
import helpDomains from 'calypso/assets/images/illustrations/help-domains.svg';
import helpGetStarted from 'calypso/assets/images/illustrations/help-getstarted.svg';
import helpPlugins from 'calypso/assets/images/illustrations/help-plugins.svg';
import helpPrivacy from 'calypso/assets/images/illustrations/help-privacy.svg';
import helpWebsite from 'calypso/assets/images/illustrations/help-website.svg';
import jetpackBackup from 'calypso/assets/images/illustrations/jetpack-backup.svg';
import jetpackConcierge from 'calypso/assets/images/illustrations/jetpack-concierge.svg';
import jetpackScan from 'calypso/assets/images/illustrations/jetpack-scan.svg';
import jetpackSearch from 'calypso/assets/images/illustrations/jetpack-search.svg';
import marketing from 'calypso/assets/images/illustrations/marketing.svg';
import media from 'calypso/assets/images/illustrations/media.svg';
import migratingHostDiy from 'calypso/assets/images/illustrations/migrating-host-diy.svg';
import noMemberships from 'calypso/assets/images/illustrations/no-memberships.svg';
import payments from 'calypso/assets/images/illustrations/payments.svg';
import removedAds from 'calypso/assets/images/illustrations/removed-ads.svg';
import seoPageTitle from 'calypso/assets/images/illustrations/seo-page-title.svg';
import siteActivity from 'calypso/assets/images/illustrations/site-activity.svg';
import themes from 'calypso/assets/images/illustrations/themes.svg';
import updates from 'calypso/assets/images/illustrations/updates.svg';
import videoHosting from 'calypso/assets/images/illustrations/video-hosting.svg';
import whoops from 'calypso/assets/images/illustrations/whoops.svg';
import DocumentHead from 'calypso/components/data/document-head';
import Main from 'calypso/components/main';

export default class Illustrations extends PureComponent {
	render() {
		return (
			<Main className="devdocs design__illustrations devdocs__illustrations">
				<DocumentHead title="Illustrations" />
				<div className="design__illustrations-content devdocs__doc-content">
					<h1>Illustrations</h1>
					<p></p>
					<h2>General</h2>
					<div className="design__illustrations-illustrations">
						<div className="design__illustrations-illustration">
							<img src={ adwordsGoogle } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ apps } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ blockEditorFade } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ builderReferral } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ checkEmail } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customDomain } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customDomainBlogger } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ dashboard } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ dotcomSupport } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ dotcomWordAds } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ fireworks } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ googleAnalytics } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ googleMyBusinessFeature } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ marketing } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ media } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ migratingHostDiy } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ noMemberships } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ payments } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ removedAds } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ seoPageTitle } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ siteActivity } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ themes } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ updates } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ videoHosting } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ whoops } alt="" />
						</div>

						<div className="design__illustrations-illustration">
							<img src={ helpGetStarted } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ helpDomains } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ helpWebsite } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ helpPlugins } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ helpPrivacy } alt="" />
						</div>
					</div>

					<h2>Customer Home</h2>
					<div className="design__illustrations-illustrations">
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationBusiness } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationChecklistComplete } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationFireworks } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationImportComplete } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationRocket } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationSecondaryEarn } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationSecondaryFreePhoto } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationSecondaryGutenberg } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationTaskConnect } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationTaskEarn } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationTaskFindDomain } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ customerHomeIllustrationWebinars } alt="" />
						</div>
					</div>
					<h2>Jetpack</h2>
					<div className="design__illustrations-illustrations">
						<div className="design__illustrations-illustration">
							<img src={ jetpackBackup } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ jetpackConcierge } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ jetpackScan } alt="" />
						</div>
						<div className="design__illustrations-illustration">
							<img src={ jetpackSearch } alt="" />
						</div>
					</div>
				</div>
			</Main>
		);
	}
}
