Creating the hero section component

We will create a hero section component. A hero component is a full-width banner that provides visual information on the page to the user:

1. Create a new file named hero-section.vue in the src/components folder and open it.
2. In the <script> section of the single file component, we will export a default JavaScript object, with the name property defined as HeroSection:

<script>
export default {
  name: 'HeroSection',
};
</script>

3. In the <template> section of the single file component, create a section HTML element with the hero is-primary class, then add a div HTML element as a child, with the hero-body class:

<section class="hero is-primary">
  <div class="hero-body">
  </div>
</section>

4. Inside the div.hero-body HTML element, create a child div HTML element with the container class. Then, add an h1 HTML element as a child with the title class and an h2 HTML element with the subtitle...