Add page 2

Signed-off-by: Marco <[email protected]>

src/App.vue

@@ -18,6 +18,7 @@
 			<div v-if="page === 0" class="logo" :style="logoStyle" />
 			<Page0 v-if="page === 0" @next="goToNextPage" />
 			<Page1 v-if="page === 1" @next="goToNextPage" />
+			<Page2 v-if="page === 2" @close="close" />
 		</div>
 	</NcModal>
 </template>
@@ -28,6 +29,7 @@ import { imagePath } from '@nextcloud/router'
 
 import Page0 from './components/Page0.vue'
 import Page1 from './components/Page1.vue'
+import Page2 from './components/Page2.vue'
 
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 
@@ -39,6 +41,7 @@ export default {
 		Page1,
 		NcButton,
 		ArrowLeft,
+		Page2,
 	},
 
 	data() {
@@ -68,6 +71,7 @@ export default {
 		},
 
 		close() {
+			this.page = 0
 			this.showModal = false
 		},
 

src/components/Page0.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="page-0">
 		<h2 class="page__heading">
-			{{ t('firstrunwizard', 'A collaboration platform that puts you in control.') }}
+			{{ t('firstrunwizard', 'A collaboration platform that puts you in control') }}
 		</h2>
 		<div class="page__wrapper">
 			<Card :title="t('firstrunwizard', 'Privacy')"

src/components/Page2.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+		<h2 class="page__heading">
+			{{ t('firstrunwizard', 'More about Nextcloud') }}
+		</h2>
+		<div class="page__wrapper">
+			<Card href="https://www.nextcloud.com"
+				:title="t('firstrunwizard', 'Explore more apps ↗')"
+				:subtitle="t('firstrunwizard', 'Extend the functionality of Nextcloud with hundreds of community-developed apps.')" />
+			<Card href="https://www.nextcloud.com"
+				:title="t('firstrunwizard', 'Get involved! ↗')"
+				:subtitle="t('firstrunwizard', 'Be a part of the community that helps build, design, translate and promote Nextcloud!')" />
+			<Card href="https://www.nextcloud.com"
+				:title="t('firstrunwizard', 'Need help? ↗')"
+				:subtitle="t('firstrunwizard', 'Find out more about your Nextcloud setup with the admin, user or developer documentation.')" />
+			<Card href="https://www.nextcloud.com"
+				:title="t('firstrunwizard', 'For large organisations ↗')"
+				:subtitle="t('firstrunwizard', 'Get Nextcloud Enterprise for mission critical environments where advanced security and compliance are important.')" />
+		</div>
+		<NcButton type="primary"
+			alignment="center-reverse"
+			:wide="true"
+			@click="$emit('close')">
+			<template #icon>
+				<ArrowRight :size="20" />
+			</template>
+			{{ t('firstrunwizard', 'Get started!') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import Card from './Card.vue'
+import AppStoreBadge from './AppStoreBadge.vue'
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import { NcButton } from '@nextcloud/vue'
+
+export default {
+	name: 'Page2',
+
+	components: {
+		NcButton,
+		ArrowRight,
+		Card,
+		AppStoreBadge,
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import "pageStyles";
+</style>