<!-- 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 - The modern web developer's platform">The modern web<br>developer's platform</h1>
      <a class="button hero-cta no-print" href="start">Get Started</a>
    </div>

  </section>

</header>

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

  <div class="home-rows">

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

    <!-- Group 1 -->
    <div layout="row" layout-xs="column" class="home-row homepage-container">
      <div class="promo-img-container promo-1">
        <div>
          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="" loading="lazy">
        </div>
      </div>

      <div class="text-container">
        <section aria-labelledby="promo-1-title" class="text-block promo-1-desc l-pad-top-2">
          <h2 id="promo-1-title" class="text-headline no-anchor">Develop Across All Platforms</h2>
          <p class="text-body">Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.
          </p>
        </section>
      </div>
    </div>
    <hr>

    <!-- Group 2 -->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="text-container">
        <section aria-labelledby="promo-2-title" class="text-block">
          <h2 id="promo-2-title" class="text-headline no-anchor">Speed & Performance</h2>
          <p class="text-body">Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.</p>
          <p class="text-body">Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
        </section>
      </div>

      <div class="promo-img-container promo-2">
        <div>
          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="" loading="lazy">
        </div>
      </div>
    </div>
    <hr>

    <!-- Group 3 -->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="promo-img-container promo-3">
        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="" loading="lazy"></div>
      </div>

      <div class="text-container">
        <section aria-labelledby="promo-3-title" class="text-block promo-3-desc">
          <h2 id="promo-3-title" class="text-headline no-anchor">Incredible Tooling</h2>
          <p class="text-body">Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.
          </p>
        </section>
      </div>

    </div>
    <hr>

    <!-- Group 4 -->
    <div layout="row" layout-xs="column" class="home-row">
      <div class="text-container">
        <section aria-labelledby="promo-4-title" class="text-block l-pad-top-2">
          <h2 id="promo-4-title" class="text-headline no-anchor">Loved by Millions</h2>
          <p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
        </section>
      </div>

      <div class="promo-img-container promo-4">
        <div>
          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="" width="455" height="228" loading="lazy">
        </div>
      </div>
    </div>

    <!-- CTA CARDS -->
    <div layout="row" layout-xs="column" class="home-row">
      <a href="start" class="card">
        <img src="generated/images/marketing/home/code-icon.svg" alt="" width="70" height="70" loading="lazy">
        <div class="card-text-container">
          <div class="text-headline">Try it now</div>
          <p>Explore Angular's capabilities with a ready-made sample app. No setup required.</p>
        </div>
      </a>
    </div>

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

</article>