✨ Add features to welcome screen

WebCrateApp · Aug 21, 2021 · 4a708bf · 4a708bf
1 parent 61839d1
commit 4a708bf
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 6 deletions.
diff --git a/client/components/Icon/adjustments.vue b/client/components/Icon/adjustments.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" :stroke="color">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+  </svg>
+</template>
+
+<script>
+export default {
+	props: {
+		color: {
+			type: String,
+			default: 'currentColor'
+		}
+	}
+}
+</script>
diff --git a/client/components/Icon/lockClosed.vue b/client/components/Icon/lockClosed.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" :stroke="color">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+  </svg>
+</template>
+
+<script>
+export default {
+	props: {
+		color: {
+			type: String,
+			default: 'currentColor'
+		}
+	}
+}
+</script>
diff --git a/client/components/WelcomeFeature.vue b/client/components/WelcomeFeature.vue
@@ -0,0 +1,53 @@
+<template>
+  <a :href="href" target="_blank" rel="noopener" class="feature">
+    <Icon :name="icon" />
+    <div class="text">
+      <p class="title">
+        {{ title }}
+      </p>
+      <p class="description">
+        {{ description }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<script>
+/* eslint-disable vue/require-default-prop */
+export default {
+	props: {
+		title: String,
+		description: String,
+		icon: String,
+		href: String
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    .feature {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        text-align: left;
+        padding: 1rem;
+        padding-right: 1.5rem;
+        background: var(--background-2nd);
+        border-radius: var(--border-radius);
+        flex-shrink: 0;
+        min-width: 350px;
+
+        & .icon-wrapper {
+            flex-shrink: 0;
+            margin-right: 1rem;
+        }
+
+        & .title {
+            font-weight: 550;
+        }
+
+        & .description {
+            color: var(--text-light);
+        }
+    }
+</style>
diff --git a/client/pages/welcome.vue b/client/pages/welcome.vue
@@ -41,6 +41,13 @@
       <p class="light">
         It only takes a few seconds!
       </p>
+      <div>
+        <div class="features">
+          <WelcomeFeature title="Private" description="This is your own instance of WebCrate" icon="lockClosed" href="https://webcrate.app/docs/faq#space" />
+          <WelcomeFeature title="Controllable" description="You control when you want to update" icon="adjustments" href="https://webcrate.app/docs/faq#updates" />
+          <WelcomeFeature title="Transparent" description="View all of your data at any time" icon="eye" href="https://webcrate.app/docs/faq#data" />
+        </div>
+      </div>
     </div>
     <div v-if="state === 'name'" class="basics">
       <h1>Your own WebCrate</h1>
@@ -51,7 +58,7 @@
         <Icon name="info" />
         <p>You can always change this later</p>
       </div>
-      <button v-if="name" class="button" @click="saveName">
+      <button v-if="name" class="primary-button" @click="saveName">
         Next Step
       </button>
       <button v-else class="button" @click="saveName">
@@ -75,7 +82,7 @@
         <Icon name="info" />
         <p>You can also create a new crate later</p>
       </div>
-      <button class="button" @click="state = 'links'">
+      <button class="primary-button" @click="state = 'links'">
         Next Step
       </button>
     </div>
@@ -107,7 +114,7 @@
         <Icon name="info" />
         <p>You can also add a new link later</p>
       </div>
-      <button class="button" @click="state = 'end'">
+      <button class="primary-button" @click="state = 'end'">
         Next Step
       </button>
     </div>
@@ -119,7 +126,7 @@
         <Icon name="info" />
         <p><a href="https://webcrate.app/docs" target="_blank" rel="noopener">View Documentation</a></p>
       </div>
-      <button class="button" @click="done">
+      <button class="primary-button" @click="done">
         Start using WebCrate
       </button>
     </div>
@@ -229,12 +236,17 @@ export default {
 
 	.welcome {
 		position: absolute;
-		top: 40%;
+		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		max-width: 700px;
+		max-width: 1000px;
 		width: 95%;
 		margin: auto;
+
+		& button {
+			font-size: 1rem;
+			padding: 0.7rem 1.3rem;
+		}
 	}
 
 	.basics {
@@ -271,6 +283,33 @@ export default {
 		}
 	}
 
+	.features {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-top: 3rem;
+
+		& a {
+			margin: 0 0.5rem;
+			margin-bottom: 1rem;
+		}
+	}
+
+	@media screen and (max-width: 1100px) {
+		.welcome {
+			max-width: 1000px;
+			width: 95%;
+			margin: auto;
+			margin-top: 5rem;
+
+			& button {
+				font-size: 1rem;
+				padding: 0.7rem 1.3rem;
+			}
+		}
+	}
+
 	.basics {
 		& h1 {
 			font-size: 1.5rem;