PageHeader.vue

<template>
  <div class="page-header">
    <div class="content">
      <h1 class="title mx-2">
        {{ title }}
      </h1>
      <h4 v-if="subtext" class="subtext mx-lg-auto mx-5">
        {{ subtext }}
      </h4>
      <h6 v-if="description" class="description mx-lg-auto mx-5">
        {{ description }}
      </h6>
    </div>

    <div class="wave-divider">
      <svg viewBox="0 70 500 60" preserveAspectRatio="none">
        <rect x="0" y="0" width="500" height="500" />
        <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    subtext: String,
    description: String
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.page-header {
  background-color: #000000;
  background-image: url(~@/assets/images/tech-bg.jpg);
  background-position-y: -240px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: auto;
  margin-bottom: 7rem;
  margin-top: 98px;
  background-size: cover;

  .title,
  .subtext,
  .description {
    color: $secondary-text-color !important;
  }

  @include media-breakpoint-up(lg) {
    .description {
      max-width: 50%;
    }
  }

  .content {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .wave-divider {
    --divider-height: 4rem;

    position: relative;
    height: var(--divider-height);
    width: 100%;
    float: left;
    z-index: 1;

    svg {
      width: 101%; // 101 to fix rounding issues on zooming?
      height: 101%; // 101 to fix rounding issues on zooming?
      transform: scale(-1, -1);
      path {
        fill: $primary-bg-color;
        stroke: none;
      }
      rect {
        fill: transparent;
      }
    }
  }
}
</style>