Portfolio/src/app/features/home/home.html

@if (page(); as copy) {
  <div class="content-container stack page">
    <app-page-hero [hero]="copy.hero" [ctas]="copy.ctas" />
    @for (section of copy.sections; track section.id) {
      <app-content-section [section]="section" />
      @if (section.id === 'areas') {
        <section class="stack" [attr.aria-labelledby]="'home-service-areas'">
          <h2 id="home-service-areas">{{ copy.serviceAreasHeading }}</h2>
          <ul class="home-service-areas">
            @for (area of copy.serviceAreas; track area.id) {
              <li>
                <a
                  class="home-service-card interactive-lift stack"
                  [routerLink]="areaLink(area)"
                  [fragment]="area.fragment"
                >
                  <h3>{{ area.title }}</h3>
                  <p>{{ area.body }}</p>
                </a>
              </li>
            }
          </ul>
        </section>
        <section class="stack" [attr.aria-labelledby]="'home-process'">
          <h2 id="home-process">{{ copy.processHeading }}</h2>
          <app-process-steps [steps]="copy.process" [labelledBy]="'home-process'" />
        </section>
      }
      @if (section.id === 'proof') {
        <div appReveal class="home-reveal stack">
          <h2 id="home-proof">{{ copy.proofHeading }}</h2>
          <app-case-card [caseStudy]="proofCase()" />
          <p class="home-proof-note" role="note">{{ copy.proofNote }}</p>
          @for (caseStudy of featuredCases(); track caseStudy.id) {
            <app-case-card [caseStudy]="caseStudy" />
          }
        </div>
      }
    }
    <app-cta-row [ctas]="copy.ctas" />
  </div>
}