<script>
import feather from "feather-icons";

export default {
  data: () => {
    return {};
  },

  mounted() {
    feather.replace();
  },
  updated() {
    feather.replace();
  },
};
</script>

<template>
    <section
    class="
      background
      static
      grayscale
      min-h-screen
      max-h-screen

      md:pl-12
      xl:pl-16

      md:pt-20
      lg:pt-28
      pt-16
  ">

    <div class="xl:w-3/4 mr-auto mx-4 my-20 text-left animate-slide-up">
      <h1
        class="
          font-general-medium
          text-5xl
          sm:text-7xl
          md:text-7xl
          lg:text-8xl

          text-left

          mb-2
          sm:mb-4

          text-gray-300
        "
      >
        Привет, это Саша.
      </h1>
      <p
        class="
          font-general-medium
          mb-8

          text-2xl
          sm:text-3xl
          md:text-3xl
          xl:text-3xl

          leading-none
          text-gray-300
        "
      >
        Интерьерный и репортажный фотограф
      </p>

      <NuxtLink :to="{path: '/', hash: '#contact'}">
        <RoundButton class="text-xl px-6 sm:px-8">
          Написать мне
        </RoundButton>
      </NuxtLink>

    </div>

    <!-- Banner right illustration -->
    <!--      <div class="w-full md:w-3/5 text-right float-right">-->
    <!--        <img src="/photographer.svg" alt="Photographer illustration"/>-->
    <!--      </div>-->

  </section>
</template>

<style lang="css" scoped>
.background {
  /* TODO: grayscale the file itself to reduce file size */
  /*background-image: url("/background.jpg");*/
  background-image: url("/background-mirrored.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
