Merge pull request #57 from nextcloud/add-wizard-steps

Make the first run wizard more helpful

11 files changed, 639 insertions, 158 deletions

diff --git a/css/firstrunwizard.css b/css/firstrunwizard.css
deleted file mode 100644
index 4181dec2..00000000
--- a/css/firstrunwizard.css
+++ /dev/null
@@ -1,82 +0,0 @@
-#firstrunwizard {
-	text-align: center;
-}
-
-#cboxLoadedContent {
-	border-radius: 3px;
-}
-
-#firstrunwizard .firstrunwizard-header {
-	padding: 20px 12px;
-	background-color: #0082c9;
-	background-image: url('../../../core/img/background.jpg');
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	background-size: cover;
-	color: #fff;
-}
-#firstrunwizard .firstrunwizard-header .logo {
-	background-image: url('../../../core/img/logo.svg');
-	background-repeat: no-repeat;
-	background-size: 175px;
-	background-position: center;
-	width: 252px;
-	height: 120px;
-	margin: 0 auto;
-}
-
-#firstrunwizard .firstrunwizard-content {
-	margin: 12px;
-}
-
-#firstrunwizard h1 {
-	font-size: 40px;
-	font-weight: 300;
-	line-height: 120%;
-	padding: 0 0 10px
-}
-
-#firstrunwizard h2 {
-	margin: 35px 0 10px;
-	line-height: 120%;
-}
-
-.clientslinks .appsmall,
-#firstrunwizard .appsmall {
-	height: 32px;
-	width: 32px;
-	position: relative;
-	opacity: .5;
-	vertical-align: middle;
-}
-.clientslinks .button,
-#firstrunwizard .button {
-	display: inline-block;
-	padding: 8px;
-	font-weight: normal;
-	font-size: 14px;
-}
-
-#firstrunwizard p a {
-	font-weight: bold;
-	color: #0082c9;
-}
-#firstrunwizard p a:hover,
-#firstrunwizard p a:focus {
-	color: #444;
-}
-#firstrunwizard .footnote {
-	margin-top: 40px;
-}
-
-#firstrunwizard .close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: 10px;
-}
-
-.clientslinks {
-	margin-top: 20px;
-	margin-bottom: 20px;
-}
\ No newline at end of file
diff --git a/css/firstrunwizard.scss b/css/firstrunwizard.scss
new file mode 100644
index 00000000..2e0cc71e
--- /dev/null
+++ b/css/firstrunwizard.scss
@@ -0,0 +1,240 @@
+#cboxLoadedContent {
+	border-radius: 3px;
+}
+
+#firstrunwizard .firstrunwizard-header {
+	padding: 20px 12px;
+	background-color: #0082c9;
+	background-image: url($image-login-background);
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	background-size: cover;
+	color: #fff;
+	text-align: center;
+}
+#firstrunwizard .firstrunwizard-header .logo {
+	background-image: url($image-logo);
+	background-repeat: no-repeat;
+	background-size: 175px;
+	background-position: center;
+	width: 252px;
+	height: 120px;
+	margin: 0 auto;
+}
+
+#firstrunwizard .firstrunwizard-content {
+	margin: 12px;
+}
+
+#firstrunwizard h1 {
+	font-size: 40px;
+	font-weight: 300;
+	line-height: 120%;
+	padding: 0 0 10px
+}
+
+#firstrunwizard h2 {
+	margin: 30px 0 10px;
+	line-height: 120%;
+	padding: 0;
+}
+
+.clientslinks .appsmall {
+	height: 32px;
+	width: 32px;
+	position: relative;
+	opacity: .5;
+	vertical-align: middle;
+}
+.clientslinks .button {
+	display: inline-block;
+	padding: 8px;
+	font-weight: normal;
+	font-size: 14px;
+}
+
+#firstrunwizard .page {
+	margin-bottom: 60px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	h2 {
+		margin: 0 0 10px 0;
+	}
+	.image {
+		padding: 20px;
+		max-width: calc(50% - 40px);
+		flex-grow: 1;
+		img {
+			width: 100%;
+		}
+	}
+	.content {
+		padding: 20px;
+	}
+	p {
+		margin-bottom: 20px;
+	}
+	.description-block {
+		margin-bottom: 40px;
+	}
+	.description {
+		margin: 20px;
+		width: auto;
+		flex-grow: 1;
+		max-width: calc(50% - 40px);
+	}
+	ul {
+		margin: 10px;
+		li {
+			margin-left: 20px;
+			margin-bottom: 10px;
+			list-style-type: circle;
+			list-style-position: outside;
+		}
+	}
+	a:not(.button) {
+		text-decoration: underline;
+	}
+	.button {
+		display: inline-block;
+
+		img {
+			width: 16px;
+			height: 16px;
+			opacity: .5;
+			margin-top: -3px;
+			vertical-align: middle;
+		}
+	}
+}
+#firstrunwizard {
+	.content-clients {
+		width: 100%;
+		text-align: center;
+		a {
+			text-decoration: none;
+			display: inline-block;
+		}
+	}
+	.content-final {
+		h2 {
+			background-position: 0;
+			background-size: 16px 16px;
+			padding-left: 26px;
+			opacity: .7;
+		}
+	}
+}
+
+.wizard-navigation {
+	display: flex;
+	position: absolute;
+	bottom: 10px;
+	width: calc(100% - 24px);
+	.prev, .next {
+		flex-grow: 1;
+		flex-basis: 200px;
+	}
+	.next {
+		text-align: right;
+	}
+	.position-indicator {
+		list-style-type: circle;
+		list-style-position: inside;
+		padding: 0;
+		margin: 10px 0 0;
+		color: $color-primary;
+		font-size: 120%;
+		li {
+			float:left;
+			&.active {
+				list-style-type: disc;
+			}
+		}
+	}
+}
+#firstrunwizard p a {
+	font-weight: bold;
+	color: #0082c9;
+}
+#firstrunwizard p a:hover,
+#firstrunwizard p a:focus {
+	color: #444;
+}
+#firstrunwizard .footnote {
+	margin-top: 40px;
+}
+
+#firstrunwizard .close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 10px;
+}
+
+.clientslinks {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+#firstrunwizard .page #wizard-values {
+	list-style-type: none;
+	display: flex;
+	flex-wrap: wrap;
+	li {
+		display: block;
+		min-width: 250px;
+		width: 33%;
+		flex-grow: 1;
+		margin: 20px 0 20px 0;
+		span {
+			opacity: .7;
+			display: block;
+			height: 50px;
+			background-size: 40px;
+		}
+		h2 {
+			margin: 10px 0 10px 0;
+			font-size: 130%;
+			text-align: center;
+		}
+	}
+}
+
+.details-link {
+	text-align: center;
+}
+
+.icon-source {
+	background-image: url('../img/source.svg');
+}
+.icon-world {
+	background-image: url('../img/world.svg');
+}
+
+@media only screen and (max-width: 680px) {
+	#firstrunwizard {
+		.firstrunwizard-header div.logo {
+			background-size: 120px;
+		}
+		h1 {
+			font-size: 20px;
+		}
+		.page > div {
+			max-width: 100% !important;
+			width: 100%;
+		}
+		#wizard-values li {
+			min-width: 100%;
+			overflow: hidden;
+			span, h2 {
+				font-size: 12px;
+				float:left;
+			}
+		}
+		.page .content {
+			padding: 0;
+		}
+	}
+}
diff --git a/img/appstore.png b/img/appstore.png
new file mode 100644
index 00000000..f5fcdf1e
--- /dev/null
+++ b/img/appstore.png
diff --git a/img/world.svg b/img/world.svg
new file mode 100644
index 00000000..eeaef018
--- /dev/null
+++ b/img/world.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" viewBox="0 0 32 32">
+ <path d="m16.004 2c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zm1.6042 1.7865c2.4022 0.053416 4.525 1.4964 6.6718 2.4428l3.464 4.7942-0.548 2.06 1.058 0.6562-0.018 2.4426c-0.0242 0.69874 0.01 1.3984-0.018 2.0964-0.3327 1.3247-1.1013 2.5332-1.75 3.737-0.43978 0.21682 0.04-1.437-0.23698-1.9505 0.064-1.1868-0.942-1.132-1.622-0.4728-0.842 0.4908-2.692 0.6388-2.752-0.6928-0.478-1.6002-0.07-3.3052 0.582-4.7942l-1.074-1.3126 0.382-3.3724-1.714-1.7316 0.402-1.896-2.0056-1.1302c-0.3954-0.3104-1.1476-0.4332-1.3126-0.8568 0.1628-0.0092 0.332-0.0218 0.4922-0.0182zm-4.9218 0.01824c0.0628 0.00918 0.14 0.052862 0.2552 0.14583 0.676 0.3714-0.165 0.7928-0.3646 1.185-1.0796 0.7302 0.332 1.3282 0.802 1.914 0.7534-0.2164 1.507-1.2934 2.6068-0.966 1.4068-0.439 1.1826 1.1782 1.987 1.8958 0.1044 0.3378 1.76 1.437 0.7656 1.0754-0.819-0.6348-1.7298-0.587-2.3152 0.3282-1.5818 0.8572-0.6456-1.6504-1.4036-2.2604-1.1458-1.2784-0.6656 0.955-0.802 1.6224-0.745-0.0162-2.1362-0.5732-2.8984 0.3282l0.7472 1.2212 0.8934-1.3672c0.217-0.4948 0.4894 0.3846 0.729 0.547 0.2862 0.5518 1.646 1.4868 0.6198 1.75-1.5212 0.8438-2.7178 2.1236-4.0104 3.263-0.436 0.92-1.326 0.8148-1.8776 0.0546-1.3344-0.821-1.2354 1.3132-1.1666 2.1146l1.1667-0.72916v1.2031c-0.033 0.2276-0.004 0.4644-0.018 0.6928-0.8174 0.854-1.6414-1.199-2.3516-1.659l-0.0546-3.0078c0.0258-0.845-0.1526-1.7102 0.018-2.5338 1.6076-1.725 3.2404-3.5122 4.1928-5.7058h1.5677c1.0956 0.5308 0.4714-1.1762 0.9114-1.112zm-2.3152 15.641c0.1902-0.02028 0.40656 0.02314 0.63802 0.14584 1.4759 0.21124 2.5794 1.2818 3.7552 2.0964 0.93744 0.92904 2.9656 0.63156 3.1902 2.2058-0.34122 1.7075-2.021 2.6244-3.5 3.2266-0.3692 0.206-0.766 0.37-1.185 0.438-1.3712 0.342-1.964-1.064-2.2422-2.116-0.6208-1.3-2.1724-2.284-1.9504-3.882 0.0364-0.794 0.47-2.0268 1.2942-2.1146z" fill="#000"/>
+</svg>
diff --git a/js/activate.js b/js/activate.js
index c852d61d..167757eb 100644
--- a/js/activate.js
+++ b/js/activate.js
@@ -1,3 +1,3 @@
 $(document).ready(function() {
-	showFirstRunWizard();
+	OCA.FirstRunWizard.Wizard.showFirstRunWizard();
 });
diff --git a/js/firstrunwizard.js b/js/firstrunwizard.js
index 983d7bee..9b82ce6d 100644
--- a/js/firstrunwizard.js
+++ b/js/firstrunwizard.js
@@ -1,26 +1,151 @@
-function showFirstRunWizard(){
-	$.colorbox({
-		opacity: 0.7,
-		transition: 'elastic',
-		speed: 100,
-		width: '80%',
-		height: '80%',
-		href: OC.generateUrl('/apps/firstrunwizard/wizard'),
-		onClosed : function() {
-			$.ajax({
-				url: OC.generateUrl('/apps/firstrunwizard/wizard'),
-				type: 'delete'
+(function() {
+	if (!OCA.FirstRunWizard) {
+		OCA.FirstRunWizard = {};
+	}
+	OCA.FirstRunWizard.Wizard = {
+
+		initialize: function () {
+
+		},
+		getTotal: function() {
+			return this.$pages.length;
+		},
+		getCurrent: function () {
+			return $('#firstrunwizard .page.active').index('#firstrunwizard .page');
+		},
+		isLast: function() {
+			return this.getCurrent() >= this.getTotal()-1;
+		},
+		isFirst: function() {
+			return this.getCurrent() === 0;
+		},
+		updateTitle: function() {
+			var active = $('#firstrunwizard .page.active');
+			var header = this.$wizard.find('.firstrunwizard-header');
+			header.find('h1').text(active.data('title'));
+			header.find('p').text(active.data('subtitle'));
+		},
+		goNext: function() {
+			if (this.isLast()) {
+				return;
+			}
+			var active = $('#firstrunwizard .page.active');
+			var next = active.next();
+			this.$prev.show();
+			if (this.getCurrent() < this.getTotal()-1) {
+				active.hide().removeClass('active');
+				next.show().addClass('active');
+			}
+
+			this.$position.find('li').removeClass('active');
+			this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active');
+
+			if (this.isLast()) {
+				this.$next.hide();
+				this.$finish.show();
+			} else {
+				this.$next.show();
+				this.$finish.hide();
+			}
+			this.updateTitle();
+			$.colorbox.resize();
+		},
+		goPrevious: function() {
+			if (this.isFirst()) {
+				return;
+			}
+			var active = $('#firstrunwizard .page.active');
+			var prev = active.prev();
+			active.hide().removeClass('active');
+			prev.show().addClass('active');
+			this.$next.show();
+			this.$finish.hide();
+			if (!this.isFirst()) {
+				active.hide().removeClass('active');
+				prev.show().addClass('active');
+			}
+
+			this.$position.find('li').removeClass('active');
+			this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active');
+
+			if (this.isFirst()) {
+				this.$prev.hide();
+			} else {
+				this.$prev.show();
+			}
+			this.updateTitle();
+			$.colorbox.resize();
+		},
+		handleKeydown: function(e) {
+			switch (e.keyCode) {
+				case 37: // arrow left
+					this.goPrevious();
+					break;
+				case 13:
+				case 39:
+					this.goNext();
+					break;
+				case 27:
+					this.closeWizard();
+					break;
+			}
+		},
+		onComplete: function() {
+			this.$wizard = $('#firstrunwizard');
+			this.$finish = this.$wizard.find('#finish');
+			this.$prev = this.$wizard.find('#prev');
+			this.$next = this.$wizard.find('#next');
+			this.$pages = this.$wizard.find('.page');
+			this.$position = this.$wizard.find('.position-indicator');
+
+			this.$finish.hide();
+			this.$pages.hide();
+			this.$prev.hide();
+			this.$pages.first().fadeIn().addClass('active');
+			$.colorbox.resize();
+			var self = this;
+			this.$pages.each(function() {
+				self.$position.append('<li></li>');
+			});
+			this.$position.find('>li:first-child').addClass('active');
+
+			this.$wizard.on('click', '#next', this.goNext.bind(this));
+			this.$wizard.on('click', '#prev', this.goPrevious.bind(this));
+			this.$wizard.on('click', '#finish', this.closeWizard.bind(this));
+			this.$wizard.on('click', '#closeWizard', this.closeWizard.bind(this));
+			$('body').off('keydown', this.handleKeydown).on('keydown', this.handleKeydown.bind(this));
+			this.updateTitle();
+		},
+		closeWizard: function() {
+			$('body').off('keydown', this.handleKeydown);
+			$.colorbox.close();
+		},
+
+		showFirstRunWizard: function(){
+			var self = this;
+			$.colorbox({
+				opacity: 0.7,
+				transition: 'elastic',
+				speed: 100,
+				width: '80%',
+				height: '80%',
+				maxWidth: '900px',
+				href: OC.generateUrl('/apps/firstrunwizard/wizard'),
+				onClosed : function() {
+					$.ajax({
+						url: OC.generateUrl('/apps/firstrunwizard/wizard'),
+						type: 'delete'
+					});
+				},
+				onComplete: self.onComplete.bind(self),
 			});
 		}
-	});
-}
+	};
+})();
 
 $(document).ready(function() {
-	$('#showWizard').live('click', function () {
-		showFirstRunWizard();
-	});
 
-	$('#closeWizard').live('click', function () {
-		$.colorbox.close();
+	$('#showWizard').on('click', function () {
+		OCA.FirstRunWizard.Wizard.showFirstRunWizard();
 	});
 });
diff --git a/templates/page.apps.php b/templates/page.apps.php
new file mode 100644
index 00000000..3944291b
--- /dev/null
+++ b/templates/page.apps.php
@@ -0,0 +1,44 @@
+<?php
+/**
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @var array $_
+ * @var \OCP\IL10N $l
+ * @var \OCP\Defaults $theme
+ */
+?>
+<div class="page" data-title="Extend your cloud" data-subtitle="">
+	<div class="image"><img src="<?php p(image_path('firstrunwizard', 'appstore.svg')); ?>" /></div>
+	<div class="description">
+		<p><?php p($l->t('Find more than 100 apps in the Nextcloud app store to customize your cloud:')); ?></p>
+		<ul>
+			<li><?php p($l->t('Groupware apps like Calendar, Contacts, Mail')); ?></li>
+			<li><?php p($l->t('Communication with Nextcloud Talk')); ?></li>
+			<li><?php p($l->t('Collaboration apps for document editing')); ?></li>
+			<li><?php p($l->t('Security and authentication features like two-factor authentication, SSO and randsomware protection')); ?></li>
+			<li><?php p($l->t('Many others like a music players, password managers, a kanban app, download manager or a markdown editor')); ?></li>
+
+		</ul>
+		<p class="details-link"><a href="/index.php/settings/apps" target="_blank"><?php p($l->t('Browse the app store')); ?></a></p>
+	</div>
+</div>
diff --git a/templates/page.clients.php b/templates/page.clients.php
new file mode 100644
index 00000000..53c7a2dc
--- /dev/null
+++ b/templates/page.clients.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @var array $_
+ * @var \OCP\IL10N $l
+ * @var \OCP\Defaults $theme
+ */
+?>
+
+<div class="page" data-title="<?php p($l->t('Stay in sync')); ?>" data-subtitle="">
+	<div class="content content-clients">
+		<p><?php p($l->t('Nextcloud gives you access to your files wherever you are.')); ?><br />
+			<?php p($l->t('Our easy to use desktop and mobile clients are available for all major platforms at zero cost!')); ?></p>
+		<div class="description-block">
+			<h2><?php p($l->t('Get the apps to sync your files')); ?></h2>
+			<a target="_blank" href="<?php p($_['desktop']); ?>">
+				<img src="<?php p(image_path('core', 'desktopapp.svg')); ?>"
+					 alt="<?php p($l->t('Desktop client')); ?>"/>
+			</a>
+			<a target="_blank" href="<?php p($_['android']); ?>">
+				<img src="<?php p(image_path('core', 'googleplay.svg')); ?>"
+					 alt="<?php p($l->t('Android app')); ?>"
+					 style="height:60px"/>
+			</a>
+			<a target="_blank" href="<?php p($_['ios']); ?>">
+				<img src="<?php p(image_path('core', 'appstore.svg')); ?>"
+					 alt="<?php p($l->t('iOS app')); ?>" style="height:60px"/>
+			</a>
+		</div>
+		<div class="description-block">
+			<h2><?php p($l->t('Connect your desktop apps to %s', array($theme->getName()))); ?></h2>
+			<a target="_blank" class="button"
+			   href="<?php p(link_to_docs('user-sync-calendars')) ?>">
+				<img class="appsmall appsmall-calendar svg" alt=""
+					 src="<?php p(image_path('core', 'places/calendar-dark.svg')); ?>"/>
+				<?php p($l->t('Connect your calendar')); ?>
+			</a>
+			<a target="_blank" class="button"
+			   href="<?php p(link_to_docs('user-sync-contacts')) ?>">
+				<img class="appsmall appsmall-contacts svg" alt=""
+					 src="<?php p(image_path('core', 'places/contacts-dark.svg')); ?>"/>
+				<?php p($l->t('Connect your contacts')); ?>
+			</a>
+			<a target="_blank" class="button"
+			   href="<?php p(link_to_docs('user-webdav')); ?>">
+				<img class="appsmall svg" alt=""
+					 src="<?php p(image_path('files', 'folder.svg')); ?>"/>
+				<?php p($l->t('Access files via WebDAV')); ?>
+			</a>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/page.final.php b/templates/page.final.php
new file mode 100644
index 00000000..126a5ff4
--- /dev/null
+++ b/templates/page.final.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * @var array $_
+ * @var \OCP\IL10N $l
+ * @var \OCP\Defaults $theme
+ */
+?>
+
+<div class="page content-final" data-title="<?php p($l->t('Get help')); ?>" data-subtitle="">
+	<div class="description">
+		<div class="description-block">
+			<h2 class="icon-info"><?php p($l->t('Get more information')); ?></h2>
+			<p><?php p($l->t('The Nextcloud documentation for home users:')); ?></p>
+			<ul>
+				<li><a href="<?php p(link_to_docs('user-')) ?>"><?php p($l->t('User manual')); ?></a></li>
+				<li><a href="<?php p(link_to_docs('admin-')) ?>"><?php p($l->t('Admin manual')); ?></a></li>
+				<li><a href="<?php p(link_to_docs('developer-')) ?>"><?php p($l->t('Developer manual')); ?></a></li>
+			</ul>
+			<p><?php p($l->t('You can also ask for help in our community support channels:')); ?></p>
+			<ul>
+				<li><a href="https://help.nextcloud.com"><?php p($l->t('the Nextcloud forums')); ?></a></li>
+				<li><a href="https://nextcloud.com/contribute/"><?php p($l->t('the Nextcloud IRC chat channel on freenode.net')); ?></a></li>
+			</ul>
+		</div>
+	</div>
+	<div class="description">
+		<div class="description-block">
+			<h2 class="icon-user"><?php p($l->t('Start contributing')); ?></h2>
+			<p><?php p($l->t('Do you want to get a certain improvement in Nextcloud? Did you find a problem? Do you want to help translate, promote or document Nextcloud?')); ?></p>
+			<a href="https://nextcloud.com/contribute/" class="button"><?php p($l->t('Become part of the Community.')); ?></a>
+		</div>
+		<div class="description-block">
+			<h2 class="icon-world"><?php p($l->t('Enterprise support')); ?></h2>
+			<p><?php p($l->t('If you run Nextcloud in a mission critical environment with large numbers of users and big amounts of data and need the certainty of support from the experts behind the Nextcloud technology, a Enterprise Subscription from Nextcloud is available with email and phone support.')); ?></p>
+			<a href="https://nextcloud.com/enterprise/buy" class="button"><?php p($l->t('Get enterprise support')); ?></a>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/page.values.php b/templates/page.values.php
new file mode 100644
index 00000000..7ed10507
--- /dev/null
+++ b/templates/page.values.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * @var array $_
+ * @var \OCP\IL10N $l
+ * @var \OCP\Defaults $theme
+ */
+?>
+
+<div class="page" data-title="A safe home for all your data" data-subtitle="">
+	<div class="content content-values">
+		<p>
+			<?php p($l->t('Nextcloud puts your data at your fingertips, under your control. Store your documents, calendar, contacts and photos on a server in your company, at home, at one of our providers or in a data center you know.')); ?>
+		</p>
+
+		<ul id="wizard-values">
+			<li>
+				<span class="icon-world"></span>
+				<h2><?php p($l->t('Host you data and files where you decide')); ?></h2>
+			</li>
+			<li>
+				<span class="icon-share"></span>
+				<h2><?php p($l->t('Open Standards and Interoperability')); ?></h2>
+			</li>
+			<li>
+				<span class="icon-user"></span>
+				<h2><?php p($l->t('100%% Open Source & community-focused')); ?></h2>
+			</li>
+		</ul>
+
+		<p class="details-link"><a href="<?php p($theme->getBaseUrl()); ?>"><?php p($l->t('Learn more about %s', $theme->getName())); ?></a></p>
+	</div>
+</div>
diff --git a/templates/wizard.php b/templates/wizard.php
index 39d8440d..1af6e38b 100644
--- a/templates/wizard.php
+++ b/templates/wizard.php
@@ -7,59 +7,44 @@
 ?>
 <div id="firstrunwizard">
 
-<div class="firstrunwizard-header">
-
-<a id="closeWizard" class="close">
-	<img class="svg" src="<?php p(image_path('core', 'actions/view-close.svg')); ?>">
-</a>
-<div class="logo">
-	<p class="hidden-visually">
-		<?php p($theme->getName()); ?>
-	</p>
-</div>
-
-<h1><?php p($theme->getSlogan()); ?></h1>
-<p><?php p($l->t('Access & share your files, calendars, contacts, mail & more from any device, on your terms'));?></p>
-
-</div>
-
-<div class="firstrunwizard-content">
-
-<h2><?php p($l->t('Get the apps to sync your files'));?></h2>
-<a target="_blank" href="<?php p($_['desktop']); ?>">
-	<img src="<?php p(image_path('core', 'desktopapp.svg')); ?>"
-		alt="<?php p($l->t('Desktop client'));?>" />
-</a>
-<a target="_blank" href="<?php p($_['android']); ?>">
-	<img src="<?php p(image_path('core', 'googleplay.svg')); ?>"
-		alt="<?php p($l->t('Android app'));?>" style="height:60px"/>
-</a>
-<a target="_blank" href="<?php p($_['ios']); ?>">
-	<img src="<?php p(image_path('core', 'appstore.svg')); ?>"
-		alt="<?php p($l->t('iOS app'));?>" style="height:60px"/>
-</a>
-
-
-<h2><?php p($l->t('Connect your desktop apps to %s', array($theme->getName()))); ?></h2>
-<a target="_blank" class="button" href="<?php p(link_to_docs('user-sync-calendars')) ?>">
-	<img class="appsmall appsmall-calendar svg" alt=""
-		src="<?php p(image_path('core', 'places/calendar-dark.svg')); ?>" />
-	<?php p($l->t('Connect your calendar'));?>
-</a>
-<a target="_blank" class="button" href="<?php p(link_to_docs('user-sync-contacts')) ?>">
-	<img class="appsmall appsmall-contacts svg" alt=""
-		src="<?php p(image_path('core', 'places/contacts-dark.svg')); ?>" />
-	<?php p($l->t('Connect your contacts'));?>
-</a>
-<a target="_blank" class="button" href="<?php p(link_to_docs('user-webdav')); ?>">
-	<img class="appsmall svg" alt=""
-		src="<?php p(image_path('files', 'folder.svg')); ?>" />
-	<?php p($l->t('Access files via WebDAV'));?>
-</a>
-
-<p class="footnote">
-<?php print_unescaped($l->t('There’s more information in the <a target="_blank" href="%s">documentation</a> and on our <a target="_blank" href="%s">website</a>.', array($theme->getDocBaseUrl(), $theme->getBaseUrl()))); ?><br>
-<?php print_unescaped($l->t('If you like Nextcloud, <a href="mailto:?subject=Nextcloud &body=Nextcloud is a great open software to sync and share your files. You can freely get it from https://nextcloud.com"> recommend it to your friends</a> and <a href="https://nextcloud.com/contribute/" target="_blank">contribute back</a>!')); ?>
-</p>
-
-</div>
+	<div class="firstrunwizard-header">
+
+		<a id="closeWizard" class="close">
+			<img class="svg"
+				 src="<?php p(image_path('core', 'actions/view-close.svg')); ?>">
+		</a>
+		<div class="logo">
+			<p class="hidden-visually">
+				<?php p($theme->getName()); ?>
+			</p>
+		</div>
+
+		<h1><?php p($theme->getSlogan()); ?></h1>
+		<p></p>
+
+	</div>
+
+	<div class="firstrunwizard-content">
+		<?php
+		print_unescaped($this->inc('page.values'));
+		print_unescaped($this->inc('page.clients'));
+
+		$uid = \OC::$server->getUserSession()->getUser()->getUID();
+		if (OC_User::isAdminUser($uid)) {
+			print_unescaped($this->inc('page.apps'));
+		}
+		print_unescaped($this->inc('page.final'));
+		?>
+
+		<div class="wizard-navigation">
+			<div class="prev">
+				<button id="prev"><?php p($l->t('Previous')); ?></button>
+			</div>
+			<div><ul class="position-indicator"></ul></div>
+			<div class="next">
+				<button class="primary" id="next"><?php p($l->t('Next')); ?></button>
+				<button class="primary" id="finish"><?php p($l->t('Start using Nextcloud')); ?></button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file