<template>
  <div class="home">
      <HeroCloud/>
      <ZorroDoggos/>
      <TheImpact/>
      <CarrosselRoad/>
      <TheTeam/>
  </div>
</template>

<script>

import HeroCloud from "@/components/HeroCloud.vue";
import TheTeam from "@/components/TheTeam.vue";
import ZorroDoggos from "@/components/ZorroDoggos.vue";
import TheImpact from "@/components/TheImpact.vue";
import CarrosselRoad from "@/components/CarrosselRoad.vue";

export default {
  name: 'Home',
  components: {
    HeroCloud,
    TheTeam,
    ZorroDoggos,
    TheImpact,
    CarrosselRoad
  },
  created: function () { 
     document.title = this.$route.name + " - Cuddle";
  }
}
</script>

<style lang="scss">

$black: #2E3240;
$pink: #D551AD;
$bg: #ffe2d1;
$green: #97D26F;

@media(min-width: 1200px) {
  .owl-prev {
    transition: all ease-in-out 0.5s;
    &:hover {
        animation-name: animation-nav;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }
  }
  .owl-next {
      transition: all ease-in-out 0.5s;
      &:hover {
          animation-name: animation-nav;
          animation-duration: 1s;
          animation-fill-mode: forwards;
      }
  }

  @keyframes animation-nav {
      0%   {
          transform: scale(1);
      }
      30%  {
          transform: scale(1.1);
      }
      100% {
          transform: scale(0.8);
      }
  }
}

</style>
