<template>
  <Hero size="l" :slots="[['1fr', '1fr'], ['2fr']]" :tablet-slots="[['1fr']]">
    <template #1-1>
      <ShortcutsListing
        :background="true"
        :background-color="$_theme('colorLight')"
      />
    </template>

    <template #1-2>
      <NewcomersWidget />
    </template>

    <template #2-1>
      <WidgetBirthdaysContainer />
    </template>

    <template #1-1-tablet>
      <NewcomersWidget />

      <WidgetBirthdaysContainer />
    </template>
  </Hero>
</template>

<script>
import Hero from '@inside-commons/components/lib/Hero'

import ShortcutsListing from '@inside-users/components/lib/ShortcutsListing'
import NewcomersWidget from '@inside-newcomers/components/lib/Widget'
import WidgetBirthdaysContainer from '@inside-birthdays/components/lib/WidgetBirthdaysContainer'

export default {
  name: 'HomeHero',
  components: {
    Hero,
    ShortcutsListing,
    NewcomersWidget,
    WidgetBirthdaysContainer
  }
}
</script>
