Create NewSmile view

2 files changed, 32 insertions, 3 deletions

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 06ca2a3..c16d336 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="home">
-  <p id="subtitle">Vela is a place to share smiles.</p>
+  <p id="subtitle">Vela is a place to share smiles :)</p>
 
   <div class="card">
     <div class="grid">
@@ -17,7 +17,8 @@
           viewed once.
         </p>
       </div>
-      <div class="col-12 md:col-4 lg:col-6 flex align-items-center justify-content-center">
+      <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>
diff --git a/client/src/views/NewSmile.vue b/client/src/views/NewSmile.vue
index 6927007..4a5e700 100644
--- a/client/src/views/NewSmile.vue
+++ b/client/src/views/NewSmile.vue
@@ -1,5 +1,33 @@
 <template>
 <div class="new-smile">
-  <h1>New Smile</h1>
+  <p id="subtitle">Create a new Smile :)</p>
+
+  <div class="card">
+    <div class="grid">
+      <div class="col-12 md:col-6">
+        <p>
+          Filling this form will create a new "Smile Collection" for
+          you, you can add your smiles to the collection using
+          the <strong>private</strong> and your friends can view them
+          using the <strong>public</strong> link.
+        </p>
+      </div>
+      <div class="col-12 md:col-6 flex align-items-center justify-content-center">
+        <div class="p-inputgroup">
+          <Button icon="pi pi-user-plus" />
+          <InputText placeholder="Name" />
+          <Button label="Create" class="p-button-success" />
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 </template>
+
+<style scoped>
+#subtitle {
+    font-size: 1.5rem;
+    text-align: center;
+    margin: 2rem 0;
+}
+</style>