<template>
  <div>
    <div class="logo">
      <img
        class="img-responsive img-logo"
        alt="Vue logo"
        src="../assets/NTFLIXLogo.png"
      />

      <h2 class="title">NTFlix - Plataforma de Animes</h2>
    </div>

    <div class="films">
      <AnimeList />
    </div>

    <div class="plans">
      <Plans />
    </div>
  </div>
</template>

<script>
import AnimeList from "@/components/AnimeList.vue";
import Plans from "@/components/Plans.vue";

export default {
  name: "Home",
  components: {
    AnimeList,
    Plans,
  },
};
</script>

<style>
.logo {
  height: 70%;
  text-align: center;
  margin: 40px 0;
}

.title {
  padding: 30px 0;
}

.films {
  display: flex;
  justify-content: center;
  background-color: #1f283b;
}

.plans {
  margin-bottom: 35px;
}
</style>
