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, remix and share your designs and help grow this library!</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>