<!-- FULL HEADER BLOCK -->
<header>

  <!-- BACKGROUND IMAGE -->
  <div class="background-sky hero"></div>

  <!-- INTRO SECTION -->
  <section id="intro">

    <!-- LOGO -->
    <div class="hero-logo"></div>

    <!-- CONTAINER -->
    <div class="homepage-container">
      <h1 class="hero-headline no-title no-toc no-anchor" aria-label="Angular - Deliver web apps with confidence">
        Deliver web apps<br>with confidence
      </h1>

      <div class="cta-button-container">
        <p class="cta-link">
          <a class="button hero-cta no-print" href="quick-start">Try Angular</a>
        </p>
      </div>

    </div>

  </section>

</header>

<!-- MAIN CONTENT -->
<article>

  <div class="home-rows">

    <aio-announcement-bar></aio-announcement-bar>

    <div layout="column" layout-xs="column" class="home-row homepage-container">
      <!-- Group 1 -->
      <div>
        <section aria-labelledby="promo-0-title" class="text-block">
          <h2 id="promo-0-title" class="no-anchor">The web development framework for building the future</h2>
        </section>
      </div>
    </div>
    <div layout="row" layout-xs="column" class="home-row homepage-container">
      <!-- Group 1 -->
      <div class="text-container">
        <section aria-labelledby="promo-1-title" class="text-block">
          <h2 id="promo-1-title" class="text-headline no-anchor">Works at any scale</h2>
          <p class="text-body"><img alt="Hero image" src="/generated/images/marketing/home/any-size.svg" width="276"></p>
          <p class="text-body">Angular lets you start small and supports you as your team and apps grow.
            </p>
          <p class="text-body"><a href="scaling">Read how Angular helps you grow</a></p>
          </section>
      </div>
      <!-- Group 2 -->
      <div class="text-container">
        <section aria-labelledby="promo-2-title" class="text-block promo-2-desc">
          <h2 id="promo-2-title" class="text-headline no-anchor">Loved by millions</h2>
          <p class="text-body"><img alt="Hero image" src="/generated/images/marketing/home/loved-by-millions.svg" width="276"></p>
          <p class="text-body">Join the millions of developers building with Angular in a thriving and friendly community.
          </p>
          <p class="text-body"><a href="resources?category=community">Meet the Angular community</a></p>
        </section>
      </div>
      <!-- Group 3 -->
      <div class="text-container">
        <section aria-labelledby="promo-3-title" class="text-block l-pad-top-2">
          <h2 id="promo-3-title" class="text-headline no-anchor">Build for everyone</h2>
          <p class="text-body"><img alt="Hero image" src="/generated/images/marketing/home/build-for-everyone.svg" width="276"></p>
          <p class="text-body">Rely on Angular's internationalization tools, security, and accessibility to build for everyone around the world.</p>
          <p class="text-body"><a href="everyone">Learn more about Angular's tools</a></p>
        </section>
      </div>
    </div>

    <p style="text-align:center;"><a class="button hero-cta no-print" href="features">Learn more</a></p>

  </div>
<!-- end of home rows -->
</article>