feat: home layout, plans and animes list, and footer layout

.gitignore

@@ -11,4 +11,6 @@ yarn-error.log
 *.njsproj
 *.sln
 .editorconfig
-.babelrc
+.babelrc
\ No newline at end of file
+.env
+data.json
\ No newline at end of file

src/componentes/AnimeList.vue

+<template>
+  <div class="container">
+    <div v-if="pending" class="loader"></div>
+    <div v-else-if="error" class="error" role="alert">
+      Erro ao tentar carregar a lista de animes
+    </div>
+    <div class="card grow" v-else v-for="anime in animes" :key="anime.name">
+      <div class="card-header">
+        <img :src="anime.image" :alt="anime.name" />
+      </div>
+      <div class="card-body">
+        <span class="tag tag-teal">Tag</span>
+        <h4 class="card-title">{{ anime.name }}</h4>
+        <p>
+          {{ anime.description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AnimeList",
+  data() {
+    return {
+      animes: null,
+      pending: true,
+      error: false,
+      data: null,
+    };
+  },
+  mounted() {
+    this.getAnimesList();
+  },
+  methods: {
+    async getAnimesList() {
+      this.pending = true;
+      await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/animes")
+        .then((res) => res.json())
+        .then((data) => (this.animes = data.animes))
+        .catch(() => (this.error = true));
+
+      this.pending = false;
+    },
+  },
+};
+</script>
+
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: #f7f8fc;
+  font-family: "Roboto", sans-serif;
+  color: #10182f;
+}
+
+.grow {
+  transition: all 0.2s ease-in-out;
+}
+
+.grow:hover {
+  transform: scale(1.05);
+}
+
+.container {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  max-width: 1040px;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.card {
+  margin: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  width: 250px;
+}
+
+.card span {
+  margin-left: 0px;
+}
+
+.card-header img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px;
+  min-height: 250px;
+}
+
+.card-body p {
+  font-size: 13px;
+  margin: 0 0 40px;
+}
+
+.card-title {
+  margin: 10px 0;
+}
+
+.tag {
+  background: #cccccc;
+  border-radius: 50px;
+  font-size: 12px;
+  color: #fff;
+  padding: 2px 10px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.tag-teal {
+  background-color: #47bcd4;
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.error {
+  border: 1px solid;
+  margin: 10px 0px;
+  padding: 15px 10px 15px 50px;
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  color: #d8000c;
+  background-color: #ffbaba;
+  background-image: url("https://i.imgur.com/GnyDvKN.png");
+}
+</style>

src/componentes/Footer.vue

+<template>
+  <footer class="footer-content">
+    <h3>
+      <a href="https://www.ntconsult.com.br" target="_blank"
+        >NTConsult &copy; 2022</a
+      >
+    </h3>
+    <!-- <ul class="socials">
+      <li>
+        <a href="#"><i class="fa fa-facebook"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-twitter"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-google-plus"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-youtube"></i></a>
+      </li>
+      <li>
+        <a href="#"><i class="fa fa-linkedin-square"></i></a>
+      </li>
+    </ul> -->
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "footer",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #fcfcfc;
+  font-family: sans-serif;
+}
+
+footer {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #111;
+  height: auto;
+  width: auto;
+  padding-top: 20px;
+  color: #fff;
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+
+.socials {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1rem 0 3rem 0;
+}
+
+.socials li {
+  margin: 0 10px;
+}
+
+.socials a {
+  text-decoration: none;
+  color: #fff;
+  border: 1.1px solid white;
+  padding: 5px;
+  border-radius: 50%;
+}
+
+.socials a i {
+  font-size: 1.1rem;
+  width: 20px;
+  transition: color 0.4s ease;
+}
+
+.socials a:hover i {
+  color: aqua;
+}
+
+h3 a {
+  color: white;
+  text-decoration: none;
+  background-color: transparent;
+}
+</style>

src/componentes/Plans.vue

+<template>
+  <div class="plans-container">
+    <h2>Planos</h2>
+    <div class="price-row">
+      <div v-if="pending" class="loader"></div>
+      <div v-else-if="error" class="error" role="alert">
+        Erro ao tentar carregar a lista de planos
+      </div>
+      <div class="price-col" v-else v-for="plan in plans" :key="plan.name">
+        <p>{{ plan.name }}</p>
+        <h3>R$ {{ plan.price }}<span>/ mês</span></h3>
+        <ul v-for="reason in plan.reasons" :key="reason.name">
+          <li>{{ reason }}</li>
+        </ul>
+        <button>Selecionar</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Plans",
+  data() {
+    return {
+      plans: null,
+      pending: true,
+      error: false,
+      data: null,
+    };
+  },
+  mounted() {
+    this.getAnimesList();
+  },
+  methods: {
+    async getAnimesList() {
+      this.pending = true;
+
+      await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
+        .then((res) => res.json())
+        .then((data) => (this.plans = data.plans))
+        .catch(() => (this.error = true));
+
+      this.pending = false;
+    },
+  },
+};
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.plans-container {
+  width: 100%;
+  height: auto;
+}
+
+.plans-container h2 {
+  padding: 35px 0;
+  text-align: center;
+}
+
+.price-row {
+  width: 90%;
+  max-width: 1100px;
+  margin: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 25px;
+}
+
+.price-col {
+  background: #1f283b;
+  padding: 10% 15%;
+  border-radius: 10px;
+  color: #fff;
+  text-align: center;
+}
+
+.price-col p {
+  font-size: 22px;
+}
+
+.price-col h3 {
+  font-size: 44px;
+  margin: 20px 0 40px;
+  font-weight: 500;
+}
+
+.price-col h3 span {
+  font-size: 16px;
+}
+
+.price-col ul {
+  /* text-align: left; */
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0;
+  color: #ddd;
+  list-style: none;
+}
+
+.price-col ul li {
+  margin: 15px 0;
+}
+
+.price-col ul li::before {
+  content: "\2022";
+  color: #e33058;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.price-col button {
+  width: 100%;
+  padding: 14px 0;
+  background: transparent;
+  color: #fff;
+  font-size: 15px;
+  border: 1px solid #e33058;
+  border-radius: 6px;
+  margin-top: 30px;
+  cursor: pointer;
+  transition: background 0.5s;
+}
+
+.price-col button:hover {
+  background: #e33058;
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  display: flex;
+}
+
+.error {
+  border: 1px solid;
+  margin: 10px 0px;
+  padding: 15px 10px 15px 50px;
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  color: #d8000c;
+  background-color: #ffbaba;
+  background-image: url("https://i.imgur.com/GnyDvKN.png");
+}
+</style>

src/main.js

-import Vue from 'vue'
-import App from './App.vue'
-
-
-Vue.component('component-a', { /* */})
-Vue.component('component-b', { /* ... */ })
-Vue.component('component-c', { /* ... */ })
-
-new Vue({ el: '#app' })
+import Vue from "vue";
+import App from "./App.vue";
+
+Vue.component("component-a", {
+  /* */
+});
+Vue.component("component-b", {
+  /* ... */
+});
+Vue.component("component-c", {
+  /* ... */
+});
+
+new Vue({ el: "#app" });
 new Vue({
-  el: '#app',
-  render: h => h(App)
-})
-
+  el: "#app",
+  render: (h) => h(App),
+});
 
 new Vue({
-  el: '#app',
+  el: "#app",
   components: {
-    'component-home': home,
-    'component-b': cadastro
-  }
-})
-
-var menu = vue.components ('menu-content', {
-template: '#menuContent',
-  
-
-
-
-
-})
+    "component-home": home,
+    "component-b": cadastro,
+  },
+});
+
+var menu = vue.components("menu-content", {
+  template: "#menuContent",
+});