<template>
  <v-container fluid>
    <v-card tile flat>
      <v-img
        class="white--text"
        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
        height="480px"
        :lazy-src="require('@/assets/img/newsletter.jpg')"
      >
        <div class="d-flex justify-space-between flex-column fill-height">
          <span class="display-1 ma-4 pa-4">In the mood for black and yellow..</span>
          <div class="d-flex justify-space-between ma-4 pa-4">
            <v-btn
              v-for="(btn, i) in buttons"
              :key="i"
              tile
              depressed
              light
              class="px-6"
              color="#ffcc00"
              x-large
            >{{btn.label}}</v-btn>
          </div>
        </div>
      </v-img>
    </v-card>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    buttons: [
      { label: 'Sierkussens', link: '' },
      { label: 'Vloerkleden', link: '' },
      { label: 'Salontafels', link: '' },
      { label: 'Banken', link: '' },
      { label: 'Leeslampen', link: '' }
    ]
  })
}
</script>