Re-usable hero component that adds CPU-light parallax effect and requires background image URLs added to the child component's scss file.

hero.component.html

<div [class]="heroClass">
  <div class="hero-content">
    <ng-content select="[hero]"></ng-content>
  </div>
</div>

hero.component.scss

@import '~./src/app/scss/mixins.scss';

.hero {
  @include hero;

  &.home {
    &::before {
      // Add background image here
      @include after-hero-img;
    }
  }

  &.blog-posts { // For every new parent component, another &.<parent-class> is added like this:
    &::before {
      background: 
      linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), 
      url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fme-ponytail.jpg?alt=media&token=04c801f0-8ecb-40d6-a53e-2bf9ff672fef') no-repeat center center;
      @include after-hero-img;
    }
  }

  &.book-reviews {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fmodel-photo.jpg?alt=media&token=ed454150-8227-4c84-a03e-3d4fc69b3560') no-repeat center center;
      @include after-hero-img;
    }
  }

  &.shareholder-letters {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Ftwo-jack-stars.jpg?alt=media&token=70b06e31-001a-4dea-9ec9-7dd417aedf00') no-repeat center center;
      @include after-hero-img;
    }
  }

  &.coding-docs {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fhackerman.jpg?alt=media&token=c54b9c88-d156-4755-b527-9b8e056ca2ef') no-repeat center center;
      @include after-hero-img;
    }
  }

  &.design {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2FCover_DarkMockupScene.png?alt=media&token=670c87e3-0a64-44b9-854d-afaf30081b11') no-repeat center center;
      @include after-hero-img;
    }
  }
  &.photography {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fmoon-quality.png?alt=media&token=a98c8dcc-0ac6-48da-a553-185c91fc3427') no-repeat center center;
      @include after-hero-img;
    }
  }
  &.art {
    &::before {
      background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fpaint-cover-dark.png?alt=media&token=37d2fd4b-2568-40e3-a94d-466001c401ed') no-repeat center center;
      @include after-hero-img;
    }
  }
  &.mailer {
    &::before {
      background: 
        linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), 
        url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fmailboxes.jpg?alt=media&token=46266ff2-a9d9-4d0f-a3be-37d0dde53a83') no-repeat center center;
      @include after-hero-img;
    }
  }
  &.reports {
    &::before {
      background: 
        linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), 
        url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2F1862-print.jpg?alt=media&token=3b9b6437-b5d8-484d-b0cb-47fe83666f02') no-repeat center center;
      @include after-hero-img;
    }
  }
  &.cv {
    &::before {
      background:
        linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), 
        url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fneville.jpg?alt=media&token=aecc44cf-eaec-4d13-827e-a146d5ffa393') no-repeat top center;
      @include after-hero-img;
    }
  }
  &.recos {
    &::before {
      background:
      linear-gradient(to bottom right, rgba(0, 0, 0, 0.733), rgba(128, 128, 128, 0.226)), 
      url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Ftriumph-vase.jpg?alt=media&token=e98774a2-d410-489c-9ee3-addd1c19d763') no-repeat top center;
      @include after-hero-img;
    }
  }
}

.hero-content {
  @include hero-content-layer;
}

hero.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit {
  @Input() heroClass = ['hero'];

  constructor() { }

  ngOnInit(): void {
  }

}

mixins.scss

// For added convenience 

@mixin hero {
  // overflow: hidden;
  position: relative;
  height: 100vh;

  &::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: white;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.267), rgba(0, 0, 0, 0.561)), url('https://firebasestorage.googleapis.com/v0/b/ng-ria/o/content%2Fsunflowers_school.jpg?alt=media&token=5f042044-e39d-44fd-8ca5-197cf0493c0e') no-repeat center center;
    background-size: cover;
    will-change: transform;
    z-index: -1;
  }
}

@mixin after-hero-img {
  background-size: cover;
  will-change: transform;
  z-index: -1;
}

// Div inside main hero class (content projection assumed)
@mixin hero-content-layer {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
}