Merge pull request #34 from fabricadesoftware-ifc/feat-19-2

Add Home Page

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.socqrnbv35"
+    "revision": "0.hn8ddlcqff8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/footer/DeafaultFooter.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { FabricaContact, LinksFabrica, LinksHeader, LogoFabrica } from "@/components";
+</script>
+<template>
+  <footer>
+    <div class="container">
+      <LogoFabrica />
+      <LinksHeader />
+      <FabricaContact />
+    </div>
+    <hr class="footer-hr" />
+    <LinksFabrica />
+  </footer>
+</template>
+<style scoped>
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #22262f;
+  height: 450px;
+}
+.container {
+  display: flex;
+  align-items: center;
+  width: 80vw;
+  justify-content: space-between;
+  margin: 100px;
+}
+.footer-hr {
+  height: 1px;
+  width: 80vw;
+  background-color: rgb(255, 255, 255);
+}
+</style>

src/components/footer/contact/FabricaContact.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { FooterTitles } from '@/components'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+
+defineProps({
+  text: String
+})
+</script>
+<template>
+  <div class="contact">
+    <div>
+      <FooterTitles
+        v-for="(text, index) in templateStore.footerTitles"
+        :key="index"
+        :title="text.contactTitle"
+      />
+      <ul>
+        <li class="footer-li" v-for="(text, index) in templateStore.footerContact" :key="index">
+          {{ text.text }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<style scoped>
+.contact {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.footer-li {
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+
+@media (max-width: 900px) {
+  .contato {
+    min-height: 100px;
+  }
+}
+</style>

src/components/footer/links/FastLinks.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+defineProps({
+  title: String,
+  link: String,
+});
+</script>
+<template>
+  <RouterLink class="router-link" :to="link">
+    <li class="footer-li">{{ title }}</li>
+  </RouterLink>
+</template>
+<style scoped>
+.footer-li {
+  color: white;
+  font-family: "Montserrat", sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+.router-link {
+  text-decoration: none;
+}
+</style>

src/components/footer/links/LinksFabrica.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import GithubImg from '@/assets/logo-github.png'
+import InstagramImg from '@/assets/logo-instagram.png'
+import LinkedIn from '@/assets/logo-linked-in.png'
+import ImgTwiter from '@/assets/logo-twiter.png'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+
+defineProps({
+  img: String,
+  link: String
+})
+</script>
+<template>
+  <div class="container-midia">
+    <a v-for="(text, index) in templateStore.footerMidia" :href="text.link" :key="index"
+      ><img
+        :src="
+          text.img == 'github'
+            ? GithubImg
+            : text.img == 'instagram'
+              ? InstagramImg
+              : text.img == 'linked-in'
+                ? LinkedIn
+                : text.img == 'twiter'
+                  ? ImgTwiter
+                  : ''
+        "
+    /></a>
+  </div>
+</template>
+<style scoped>
+.container-midia img {
+  margin: 20px 10px;
+  width: 55px;
+}
+</style>

src/components/footer/links/LinksHeader.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { FastLinks, FooterTitles } from '@/components'
+import { useTemplateStore } from '@/stores'
+
+const templateStore = useTemplateStore()
+</script>
+<template>
+  <div class="links">
+    <div>
+      <FooterTitles
+        v-for="(text, index) in templateStore.footerTitles"
+        :key="index"
+        :title="text.linksTitle"
+      />
+      <ul>
+        <FastLinks
+          v-for="(text, index) in templateStore.titles"
+          :key="index"
+          :title="text.text"
+          :link="text.link"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
+<style scoped>
+.links {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.footer-li {
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  list-style: none;
+  font-weight: 450;
+  margin: 5px;
+}
+
+@media (max-width: 900px) {
+  .links {
+    min-height: 100px;
+  }
+}
+</style>

src/components/footer/logo/LogoFabrica.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup></script>
+<template>
+  <div class="img-logo-fabrica">
+    <img src="@/assets/logo-fabrica-de-software.png" />
+  </div>
+</template>
+<style scoped>
+.img-logo-fabrica,
+.links,
+.contato {
+  display: flex;
+  min-height: 120px;
+  width: 26.66vw;
+}
+.img-logo-fabrica img {
+  width: 200px;
+}
+
+@media (max-width: 900px) {
+  .img-logo-fabrica img {
+    width: 150px;
+  }
+  .img-logo-fabrica {
+    min-height: 100px;
+  }
+}
+</style>

src/components/footer/titles/FooterTitles.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps({
+  title: String,
+});
+</script>
+<template>
+  <h1 class="footer-titles">{{ title }}</h1>
+</template>
+<style scoped>
+.footer-titles {
+  font-family: "Montserrat", sans-serif;
+  color: #ea6e18;
+  font-size: 20px;
+  font-weight: 550;
+}
+</style>

src/components/header/DesktopHeader.vue

@@ -22,7 +22,8 @@ const templateStore = useTemplateStore()
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 15px 35px;
+    height: 11vh;
+    padding: 15px 170px;
     background-color: white;
     border-bottom: 1px solid rgb(83, 83, 83);
 }
@@ -31,23 +32,26 @@ const templateStore = useTemplateStore()
     display: flex;
     align-items: center;
     justify-content: space-around;
-    width: 100vh;
+    width: 100%;
     margin: 0px 150px;
 }
 
-@media (max-width:1200px) {
+@media (max-width:1450px) {
     .routers-desktop {
-        margin: 0px 100px;
+        margin: 0px 70px;
+    }
+    .header-desktop {
+        padding: 15px 130px;
     }
 }
 
-@media (max-width:1050px) {
+@media (max-width:1370px) {
     .routers-desktop {
         margin: 0px 50px;
     }
 
     .header-desktop {
-        padding: 15px 35px;
+        padding: 15px 110px;
     }
 }
 </style>

src/components/header/logo/TextLogo.vue

@@ -16,12 +16,12 @@ h1 {
 }
 
 .logo-fabrica {
-    font-size: 25px;
+    font-size: 30px;
     font-weight: 500;
 }
 
 .logo-node {
-    font-size: 25px;
+    font-size: 30px;
     font-weight: 800;
     color: #267A7A;
 }