Hero.vue

<template>
  <div class="text-center has-splash q-pa-xl">
    <img
      src="statics/600x600fabr.png"
      style="max-width: 200px"
    >
    <div class="text-h4">Welcome to the Fabricademy</div>
    <div class="text-h4">Open Source Circular fashion catalogue</div>
    <div style="width: 30%; margin: 32px auto;">
      <q-separator />
    </div>
    <div class="text-h6 text-grey">Browse and share your designs and help grow this library!</div>
    <div class="row">
      <div class="col text-h6 text-grey-6">
        <q-btn flat>Featured</q-btn>
        <q-btn flat>Most Recent</q-btn>
        <q-btn flat>Most Popular</q-btn>
        <q-btn flat>Collections</q-btn>
      </div>
    </div>

    <!-- <SearchBox class="q-mt-xl" /> -->
  </div>
</template>

<script>
import SearchBox from "../components/SearchBox";

export default {
  // name: 'ComponentName',
  components: {
    SearchBox
  },
  data () {
    return {};
  }
};
</script>

<style>
.has-splash {
  /* background-image: url(/statics/splash.jpg); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-blend-mode: saturation;
  background-color: rgba(255, 255, 255, 0.85);
}
</style>