<template>
  <div class="portfolio-onboarding">
    <h1
      class="portfolio-onboarding__heading"
      data-cy="page-title">Portfolio</h1>
    <portfolio-illustration
      data-cy="portfolio-onboarding-illustration"
      class="portfolio-onboarding__illustration" />
    <h2
      class="portfolio-onboarding__subheading"
      data-cy="portfolio-onboarding-subtitle">Woran denken Sie gerade?</h2>
    <p
      class="portfolio-onboarding__text"
      data-cy="portfolio-onboarding-text">
      Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
    </p>

    <create-project-button data-cy="create-project-button-onboarding" />
  </div>
</template>

<script>
  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration');
  const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton');
  export default {
    components: {CreateProjectButton, PortfolioIllustration},
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .portfolio-onboarding {
    @include onboarding-page;

    &__heading {
      @include heading-1;
    }

    &__subheading {
      @include heading-2;
    }

    &__illustration {
      @include onboarding-illustration;
    }

    &__text {
      @include onboarding-text;
    }
  }
</style>
