docs: update home page for live stream event (angular#52456)

PR Close angular#52456

Author: MarkTechson

aio/content/marketing/index.html

@@ -1,45 +1,42 @@
 <!-- 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">
-        <div class="cta-link">
-          <a class="button hero-cta no-print" href="quick-start">Try Angular</a>
-        </div>
-      </div>
-
+    <div style="width: 100%; margin-top: 20px">
+      <iframe
+        style="
+          border: 0;
+          width: 100%;
+          border-radius: 0.25rem;
+          overflow: hidden;
+          aspect-ratio: 16 / 9;
+        "
+        src="https://www.youtube.com/embed/Wq6GpTZ7AX0?si=H5Y5AEjOkY6O-XYA&amp;controls=0"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+      ></iframe>
     </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>
+          <h2 id="promo-0-title" class="no-anchor">
+            The web development framework for building the future
+          </h2>
         </section>
       </div>
     </div>
@@ -48,35 +45,58 @@ <h2 id="promo-0-title" class="no-anchor">The web development framework for build
       <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">
+            <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>
+        </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 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>
-          <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">
+            <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>
-
+    <p style="text-align: center">
+      <a class="button hero-cta no-print" href="features">Learn more</a>
+    </p>
   </div>
-<!-- end of home rows -->
+  <!-- end of home rows -->
 </article>

aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss

@@ -43,7 +43,6 @@ section#intro {
   position: relative;
   max-width: 900px;
   width: 100%;
-  height: 480px;
   margin: 0 auto;
   padding: 48px 0 0;