Add primeflex css, header & NewSmile view

3 files changed, 36 insertions, 17 deletions

diff --git a/client/src/views/About.vue b/client/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/client/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 65a73a1..06ca2a3 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,17 +1,36 @@
 <template>
-  <div class="home">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+<div class="home">
+  <p id="subtitle">Vela is a place to share smiles.</p>
+
+  <div class="card">
+    <div class="grid">
+      <div class="col-12 md:col-8 lg:col-6">
+        <p>
+          The idea is simple, users create a <em>Smile</em> and receive two
+          links: public, upload. They can share the public link with their
+          friends. The upload link should be kept private.
+        </p>
+        <p>
+          They can upload pictures of them or anything that they want to
+          share with the private link. Visitors on the public link can view
+          the <em>Smiles</em> but only once, pictures are deleted after it's
+          viewed once.
+        </p>
+      </div>
+      <div class="col-12 md:col-4 lg:col-6 flex align-items-center justify-content-center">
+        <router-link to="/new">
+          <Button label="New Smile" icon="pi pi-user-plus" iconPos="left" />
+        </router-link>
+      </div>
+    </div>
   </div>
+</div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
+<style scoped>
+#subtitle {
+    font-size: 1.5rem;
+    text-align: center;
+    margin: 2rem 0;
 }
-</script>
+</style>
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
new file mode 100644
index 0000000..6927007
--- /dev/null
+++ b/client/src/views/NewSmile.vue
@@ -0,0 +1,5 @@
+<template>
+<div class="new-smile">
+  <h1>New Smile</h1>
+</div>
+</template>