docs: update landing page for v22

(cherry picked from commit 20524958b7)

adev/BUILD.bazel

@@ -16,6 +16,7 @@ exports_files([
 APPLICATION_FILES = [
     "//adev/src/assets/images",
     "//adev/src/assets/images/v21-event:v21-event-images",
+    "//adev/src/assets/images/v22-event:v22-event-images",
     "//adev/src/assets/others",
     "//adev/src/assets/previews",
     "//adev/src/assets:tutorials",

adev/angular.json

@@ -31,7 +31,8 @@
               "src/robots.txt",
               "src/llms.txt",
               "src/assets",
-              "src/assets/images/v21-event"
+              "src/assets/images/v21-event",
+              "src/assets/images/v22-event"
             ],
             "styles": ["@angular/docs/styles/global-styles.scss", "./src/local-styles.scss"],
             "scripts": [],

adev/src/app/features/home/home.component.html

@@ -3,9 +3,9 @@
     <div class="pattern"></div>
     <div class="content">
       <div class="adev-banner-container">
-        <a href="events/v21" class="adev-banner" target="_blank">
-          <h1 tabindex="-1">Angular v21 is here!</h1>
-          <p class="adev-banner-cta">🕹️ Start your adventure</p>
+        <a href="events/v22" class="adev-banner" target="_blank">
+          <h1 tabindex="-1">Angular v22 is here!</h1>
+          <p class="adev-banner-cta">⚡ Explore what's new</p>
         </a>
 
         <div class="search-field">

adev/src/app/routing/navigation-entries/index.ts

@@ -1224,11 +1224,16 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
   {
     label: 'Developer Events',
     children: [
+      {
+        label: 'Angular v22 Release',
+        path: 'events/v22',
+        contentPath: 'events/v22',
+        status: 'new',
+      },
       {
         label: 'Angular v21 Release',
         path: 'events/v21',
         contentPath: 'events/v21',
-        status: 'new',
       },
     ],
   },

adev/src/assets/images/v22-event/BUILD.bazel

@@ -0,0 +1,14 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(default_visibility = ["//visibility:public"])
+
+js_library(
+    name = "v22-event-images",
+    srcs = glob(
+        [
+            "*.png",
+            "*.jpg",
+        ],
+        allow_empty = True,
+    ),
+)

adev/src/content/events/BUILD.bazel

@@ -8,6 +8,7 @@ generate_guides(
     ]),
     data = [
         "//adev/src/assets/images/v21-event:v21-event-images",
+        "//adev/src/assets/images/v22-event:v22-event-images",
         "//adev/src/assets/others:angular-v21-release.ics",
         "//adev/src/content/examples",
     ],

adev/src/content/events/v22.md

@@ -0,0 +1,32 @@
+# Angular v22: Rock solid foundation for building what's next for the web
+
+![A digital illustration styled like a vintage postcard with a thin white border. The top left features the words "Welcome to" written in a cursive, yellow script font. The main focus is a large, brown rocky mountain in the center. Imposed on the mountain face is a 3D white text block reading "Angular V22" along with the Angular logo icon. Dense pine trees in shades of green, yellow, and grey line the foreground at the base of the mountain. A winding path trails up the right side of the mountain, and a few birds fly in the sunset-colored purple and orange sky.](assets/images/v22-event/angular-v22-hero.png {loading: 'eager', fetchpriority: 'high'} 'Angular v22 Hero Image')
+
+Angular v22 is ready for you to build modern, high-performance web applications. This release introduces key stabilization updates, template enhancements, and API improvements:
+
+- **Stabilized APIs**: Signal Forms, Asynchronous Signals, and Angular Aria are now stable, offering a production-ready reactive foundation.
+- **Template enhancements**: New template features streamline development, improve ergonomics, and enhance code clarity.
+- **API improvements**: Core APIs have been updated for better performance, simpler syntax, and more robust typing.
+- **Angular AI integration**: Streamlined support and updates for AI-driven development workflows.
+
+## Key resources
+
+<docs-card-container>
+  <docs-card title="v22 Release Blog" href="https://goo.gle/angular-v22-blog" link="Read the blog">
+    Discover all the major features, community updates, and design decisions behind Angular v22.
+  </docs-card>
+  <docs-card title="Changelog" href="https://github.com/angular/angular/blob/main/CHANGELOG.md#2200-2026-06-03" link="View the changelog">
+    Review the detailed, commit-by-commit list of new features, bug fixes, and breaking changes.
+  </docs-card>
+    <docs-card title="Update to v22" href="https://angular.dev/update-guide?v=21.0-22.0&l=3" link="Chart your updade path to v22">
+    Get instructions on how to update your project to Angular v22.
+  </docs-card>
+</docs-card-container>
+
+## Developer event
+
+The v22 release video will be launching soon, [so tune in to the Angular YouTube Channel Friday, June 5 @ 9 AM Pacific](https://goo.gle/angular-v22-yt).
+
+In the meantime, you can watch the Angular v21 Developer Event:
+
+<docs-video src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr" title="Angular v21 Developer Event"/>