finish home

Author: IgorHalfeld

dashboard/src/assets/images/blue_balloons.png

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex justify-center w-full">
+    <div class="flex flex-col items-center w-4/5 max-w-6xl my-16">
+      <h1 class="text-4xl font-black text-center text-gray-800">
+        Alguma dúvida?
+      </h1>
+      <p class="text-lg text-center text-gray-800 font-regular">
+        Quer saber melhor como funciona e quais são os preços?
+      </p>
+      <div class="mt-10">
+        <a href="mailto:" class="px-6 py-2 mt-10 font-bold text-white rounded-full bg-brand-main focus:outline-none">
+          Nos mande um e-mail!
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

dashboard/src/assets/images/logo_white.png

@@ -0,0 +1,70 @@
+<template>
+  <header class="header">
+    <div class="header-group">
+      <div class="flex items-center justify-between py-10">
+        <div class="w-28 lg:w-36">
+          <img class="w-full" src="../../assets/images/logo_white.png" alt="logo">
+        </div>
+
+        <div class="flex">
+          <button
+            class="px-6 py-2 font-bold rounded-full text-white focus:outline-none"
+          >
+            Crie uma conta
+          </button>
+          <button
+            class="px-6 py-2 font-bold bg-white rounded-full text-brand-main focus:outline-none"
+          >
+            Entrar
+          </button>
+        </div>
+      </div>
+
+      <div class="flex flex-col mt-28">
+        <h1 class="text-4xl font-black text-white">
+          Tenha um feedback. <br>
+          E faça seus clientes mais <br class="hidden lg:inline-block">
+          felizes!
+        </h1>
+        <p class="text-lg font-medium text-white">
+          Receba ideias, reclamações e feedbacks com um <br class="hidden lg:inline-block">
+          simples widget na página.
+        </p>
+        <div>
+          <button
+            class="px-6 py-2 mt-10 font-bold bg-white rounded-full text-brand-main focus:outline-none"
+          >
+            Crie uma conta grátis
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="postcss" scoped>
+.header {
+  @apply bg-brand-main w-full flex justify-center;
+  height: 700px;
+}
+
+.header-group {
+  @apply flex flex-col w-4/5 max-w-6xl;
+}
+
+@media (min-width: 640px) {
+  .header-group {
+    background-image: url(../../assets/images/blue_balloons.png);
+    background-size: 628px;
+    background-position: 90% 100%;
+    background-repeat: no-repeat;
+  }
+}
+</style>

dashboard/src/views/Home/Contact.vue

@@ -1,9 +1,42 @@
 <template>
-  <h1 class="font-black text-brand-main">Aqui é a home</h1>
+  <custom-header
+    @create-account="handleAccountCreate"
+    @login="handleLogin"
+  />
+  <contact />
+  <div class="flex justify-center py-10 bg-brand-gray">
+    <p class="font-medium text-center text-gray-800">feedbacker © 2021</p>
+  </div>
 </template>
 
 <script>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import CustomHeader from './CustomHeader.vue'
+import Contact from './Contact.vue'
+
 export default {
+  components: { CustomHeader, Contact },
+  setup () {
+    const router = useRouter()
+
+    onMounted(() => {
+      const token = window.localStorage.getItem('token')
+      if (token) {
+        router.push({ name: 'Feedbacks' })
+      }
+    })
+
+    function handleLogin () {
+    }
+
+    function handleAccountCreate () {
+    }
 
+    return {
+      handleLogin,
+      handleAccountCreate
+    }
+  }
 }
 </script>