Merge pull request #3361 from Tony133/feat/upgrade-angular-v21-standalone-components

feat(): upgrade angular v21.x with standalone components 🔥
2026-02-25 22:15:07 +00:00 · 2025-12-20 19:55:32 +01:00
parent 1b3d1df250 6f5d0350a1
commit 99fe6fa72f
215 changed files with 10904 additions and 8281 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,12 +1,17 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below

-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
+# For additional information regarding the format and rule options, please see
+
+# <https://github.com/browserslist/browserslist#queries>
+
+# You can see what browsers were selected by your queries by running
+
+# npx browserslist

 > 0.5%
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11 # For IE 9-11 support, remove 'not'.
+not kaios 2.5
+not op_mini all
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 (The MIT License)

-Copyright (c) 2017-2025 Kamil Myśliwiec <http://kamilmysliwiec.com>
+Copyright (c) 2017-present Kamil Myśliwiec <http://kamilmysliwiec.com>

 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the
--- a/angular.json
+++ b/angular.json
@@ -9,12 +9,14 @@
      "projectType": "application",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "aot": true,
            "allowedCommonJsDependencies": ["prismjs"],
-            "outputPath": "dist",
-            "main": "src/main.ts",
+            "outputPath": {
+              "base": "dist",
+              "browser": ""
+            },
            "index": "src/index.html",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": ["zone.js"],
@@ -27,7 +29,8 @@
              "src/mstile-150x150.png",
              "src/_redirects"
            ],
-            "styles": ["src/styles.scss"]
+            "styles": ["src/styles.scss"],
+            "browser": "src/main.ts"
          },
          "configurations": {
            "production": {
@@ -78,22 +81,7 @@
          }
        },
        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": ["zone.js"],
-            "tsConfig": "src/tsconfig.spec.json",
-            "styles": ["src/styles.scss"],
-            "assets": ["src/assets"]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
-          }
+          "builder": "@angular/build:unit-test"
        }
      }
    }
@@ -101,10 +89,30 @@
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
-      "style": "scss"
+      "style": "scss",
+      "type": "component"
    },
    "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "app",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
    }
  },
  "cli": {
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,31 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};
--- a/lighthouserc.json
+++ b/lighthouserc.json
@@ -19,7 +19,7 @@
        ],
        "categories:seo": [
          "error",
-          { "minScore": 0.67, "aggregationMethod": "optimistic" }
+          { "minScore": 0.5, "aggregationMethod": "optimistic" }
        ],
        "categories:pwa": "off",

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
    "build:prod": "ng build --configuration production --aot --delete-output-path=false",
    "test": "ng test",
    "lint": "eslint \"**/*.{ts,tsx}\" ",
-    "e2e": "ng e2e",
    "docs": "npm run docs-only",
    "docs-only": "ts-node -P tools/tsconfig.json tools/dgeni-cli.ts tools/transforms/nestjs-package/index",
    "prepare": "husky"
@@ -24,64 +23,53 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "18.2.8",
-    "@angular/cdk": "18.2.9",
-    "@angular/common": "18.2.8",
-    "@angular/compiler": "18.2.8",
-    "@angular/core": "18.2.8",
-    "@angular/forms": "18.2.8",
-    "@angular/material": "18.2.9",
-    "@angular/platform-browser": "18.2.8",
-    "@angular/platform-browser-dynamic": "18.2.8",
-    "@angular/router": "18.2.8",
-    "@angular/service-worker": "18.2.8",
-    "core-js": "3.31.0",
+    "@angular/animations": "21.0.5",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/material": "21.0.3",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
+    "@angular/service-worker": "21.0.5",
+    "core-js": "3.42.0",
    "hammerjs": "2.0.8",
-    "nodemon": "3.1.7",
-    "prismjs": "1.29.0",
-    "rxjs": "7.8.1",
-    "rxjs-compat": "6.6.7",
-    "tslib": "2.8.0",
-    "zone.js": "0.14.10"
+    "nodemon": "3.1.10",
+    "prismjs": "1.30.0",
+    "rxjs": "7.8.2",
+    "tslib": "2.8.1",
+    "zone.js": "0.15.0"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.9",
-    "@angular-eslint/eslint-plugin": "19.0.0",
-    "@angular/cli": "18.2.9",
-    "@angular/compiler-cli": "18.2.8",
-    "@angular/language-service": "18.2.8",
-    "@commitlint/cli": "19.5.0",
-    "@commitlint/config-angular": "19.5.0",
-    "@eslint/js": "9.12.0",
-    "@types/jasmine": "5.1.4",
-    "@types/jasminewd2": "2.0.13",
-    "@types/lodash": "4.17.10",
+    "@angular-devkit/build-angular": "21.0.3",
+    "@angular-eslint/eslint-plugin": "^21.1.0",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@angular/language-service": "21.0.5",
+    "@commitlint/cli": "19.8.0",
+    "@commitlint/config-angular": "19.8.0",
+    "@eslint/js": "9.25.1",
+    "@types/lodash": "4.17.16",
    "@types/marked": "6.0.0",
-    "@types/node": "22.8.2",
-    "@types/prismjs": "1.26.0",
+    "@types/node": "22.15.3",
+    "@types/prismjs": "1.26.5",
    "@types/rimraf": "4.0.5",
-    "angular-eslint": "^19.0.0",
-    "chokidar": "4.0.1",
-    "concurrently": "9.0.1",
+    "angular-eslint": "^21.1.0",
+    "chokidar": "4.0.3",
+    "concurrently": "9.1.2",
    "dgeni": "0.4.14",
    "dgeni-packages": "0.30.0",
-    "eslint": "9.12.0",
-    "husky": "9.1.6",
-    "jasmine-core": "5.0.1",
-    "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.4.4",
-    "karma-chrome-launcher": "3.2.0",
-    "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "2.1.0",
-    "lint-staged": "15.2.10",
+    "eslint": "9.25.1",
+    "husky": "9.1.7",
+    "lint-staged": "15.5.1",
    "marked": "2.1.3",
    "rimraf": "6.0.1",
    "ts-node": "10.9.2",
-    "typescript": "5.4.5",
-    "typescript-eslint": "^8.10.0",
-    "uuid": "11.0.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.50.0",
+    "uuid": "11.1.0",
+    "vitest": "^4.0.16",
    "yargs": "17.7.2"
  }
 }
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { HOMEPAGE_TITLE, TITLE_SUFFIX } from './constants';

@@ -8,6 +8,8 @@ import { HOMEPAGE_TITLE, TITLE_SUFFIX } from './constants';
  selector: 'app-root',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [RouterOutlet],
 })
 export class AppComponent implements OnInit {
  private robotsElement: HTMLMetaElement;
@@ -19,7 +21,7 @@ export class AppComponent implements OnInit {
    private readonly activatedRoute: ActivatedRoute,
  ) {}

-  async ngOnInit() {
+  public async ngOnInit(): Promise<void> {
    this.router.events
      .pipe(filter((ev) => ev instanceof NavigationEnd))
      .subscribe((ev: NavigationEnd) => {
@@ -28,7 +30,7 @@ export class AppComponent implements OnInit {
      });
  }

-  updateTitle() {
+  public updateTitle(): void {
    const route = this.activatedRoute.snapshot.firstChild;
    if (!route) {
      return undefined;
@@ -43,7 +45,7 @@ export class AppComponent implements OnInit {
    this.titleService.setTitle(pageTitle + TITLE_SUFFIX);
  }

-  updateMeta(event: NavigationEnd) {
+  public updateMeta(event: NavigationEnd): void {
    if (!(event && event.url)) {
      return;
    }
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+  ],
+};
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,75 +0,0 @@
-import {
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { SocialWrapperComponent } from './common/social-wrapper/social-wrapper.component';
-import { FooterComponent } from './homepage/footer/footer.component';
-import { HeaderComponent } from './homepage/header/header.component';
-import { HomepageComponent } from './homepage/homepage.component';
-import { MenuItemComponent } from './homepage/menu/menu-item/menu-item.component';
-import { MenuComponent } from './homepage/menu/menu.component';
-import { NewsletterComponent } from './homepage/newsletter/newsletter.component';
-import { ApplicationContextComponent } from './homepage/pages/application-context/application-context.component';
-import { ComponentsComponent } from './homepage/pages/components/components.component';
-import { ControllersComponent } from './homepage/pages/controllers/controllers.component';
-import { CustomDecoratorsComponent } from './homepage/pages/custom-decorators/custom-decorators.component';
-import { WhoUsesComponent } from './homepage/pages/discover/who-uses/who-uses.component';
-import { EnterpriseComponent } from './homepage/pages/enterprise/enterprise.component';
-import { ExceptionFiltersComponent } from './homepage/pages/exception-filters/exception-filters.component';
-import { FirstStepsComponent } from './homepage/pages/first-steps/first-steps.component';
-import { GuardsComponent } from './homepage/pages/guards/guards.component';
-import { InterceptorsComponent } from './homepage/pages/interceptors/interceptors.component';
-import { IntroductionComponent } from './homepage/pages/introduction/introduction.component';
-import { MiddlewaresComponent } from './homepage/pages/middlewares/middlewares.component';
-import { MigrationComponent } from './homepage/pages/migration/migration.component';
-import { ModulesComponent } from './homepage/pages/modules/modules.component';
-import { BasePageComponent } from './homepage/pages/page/page.component';
-import { PipesComponent } from './homepage/pages/pipes/pipes.component';
-import { SupportComponent } from './homepage/pages/support/support.component';
-import { SharedModule } from './shared/shared.module';
-import { DeploymentComponent } from './homepage/pages/deployment/deployment.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    HomepageComponent,
-    HeaderComponent,
-    FooterComponent,
-    MenuComponent,
-    MenuItemComponent,
-    IntroductionComponent,
-    FirstStepsComponent,
-    ControllersComponent,
-    BasePageComponent,
-    ComponentsComponent,
-    ModulesComponent,
-    MiddlewaresComponent,
-    PipesComponent,
-    ExceptionFiltersComponent,
-    GuardsComponent,
-    InterceptorsComponent,
-    CustomDecoratorsComponent,
-    ApplicationContextComponent,
-    MigrationComponent,
-    SupportComponent,
-    WhoUsesComponent,
-    EnterpriseComponent,
-    SocialWrapperComponent,
-    NewsletterComponent,
-    DeploymentComponent,
-  ],
-  bootstrap: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    SharedModule,
-  ],
-  providers: [provideHttpClient(withInterceptorsFromDi())],
-})
-export class AppModule {}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { HomepageComponent } from './homepage/homepage.component';
 import { ApplicationContextComponent } from './homepage/pages/application-context/application-context.component';
 import { ComponentsComponent } from './homepage/pages/components/components.component';
@@ -20,15 +19,12 @@ import { SupportComponent } from './homepage/pages/support/support.component';
 import { RedirectGuard } from './shared/guards/redirect.guard';
 import { DeploymentComponent } from './homepage/pages/deployment/deployment.component';

-const routes: Routes = [
+export const routes: Routes = [
  {
    path: '',
    component: HomepageComponent,
    children: [
-      {
-        path: '',
-        component: IntroductionComponent,
-      },
+      { path: '', component: IntroductionComponent },
      {
        path: 'first-steps',
        component: FirstStepsComponent,
@@ -39,10 +35,7 @@ const routes: Routes = [
        component: ControllersComponent,
        data: { title: 'Controllers' },
      },
-      {
-        path: 'components',
-        redirectTo: 'providers',
-      },
+      { path: 'components', redirectTo: 'providers' },
      {
        path: 'providers',
        component: ComponentsComponent,
@@ -58,16 +51,8 @@ const routes: Routes = [
        component: MiddlewaresComponent,
        data: { title: 'Middleware' },
      },
-      {
-        path: 'pipes',
-        component: PipesComponent,
-        data: { title: 'Pipes' },
-      },
-      {
-        path: 'guards',
-        component: GuardsComponent,
-        data: { title: 'Guards' },
-      },
+      { path: 'pipes', component: PipesComponent, data: { title: 'Pipes' } },
+      { path: 'guards', component: GuardsComponent, data: { title: 'Guards' } },
      {
        path: 'exception-filters',
        component: ExceptionFiltersComponent,
@@ -88,10 +73,7 @@ const routes: Routes = [
        component: ApplicationContextComponent,
        data: { title: 'Standalone applications' },
      },
-      {
-        path: 'application-context',
-        redirectTo: 'standalone-applications',
-      },
+      { path: 'application-context', redirectTo: 'standalone-applications' },
      {
        path: 'discover/companies',
        component: WhoUsesComponent,
@@ -115,18 +97,11 @@ const routes: Routes = [
      {
        path: 'consulting',
        component: EnterpriseComponent,
-        resolve: {
-          url: 'externalUrlRedirectResolver',
-        },
+        resolve: { url: 'externalUrlRedirectResolver' },
        canActivate: [RedirectGuard],
-        data: {
-          externalUrl: 'https://enterprise.nestjs.com',
-        },
-      },
-      {
-        path: 'enterprise',
-        redirectTo: 'consulting',
+        data: { externalUrl: 'https://enterprise.nestjs.com' },
      },
+      { path: 'enterprise', redirectTo: 'consulting' },
      {
        path: 'enterprise',
        component: EnterpriseComponent,
@@ -135,96 +110,88 @@ const routes: Routes = [
      {
        path: 'fundamentals',
        loadChildren: () =>
-          import('./homepage/pages/fundamentals/fundamentals.module').then(
-            (m) => m.FundamentalsModule,
+          import('./homepage/pages/fundamentals/fundamentals.routes').then(
+            (r) => r.FUNDAMENTALS_ROUTES,
          ),
      },
      {
        path: 'techniques',
        loadChildren: () =>
-          import('./homepage/pages/techniques/techniques.module').then(
-            (m) => m.TechniquesModule,
+          import('./homepage/pages/techniques/techniques.routes').then(
+            (r) => r.TECHNIQUES_ROUTES,
          ),
      },
      {
        path: 'security',
        loadChildren: () =>
-          import('./homepage/pages/security/security.module').then(
-            (m) => m.SecurityModule,
+          import('./homepage/pages/security/security.routes').then(
+            (r) => r.SECURITY_ROUTES,
          ),
      },
      {
        path: 'graphql',
        loadChildren: () =>
-          import('./homepage/pages/graphql/graphql.module').then(
-            (m) => m.GraphqlModule,
+          import('./homepage/pages/graphql/graphql.routes').then(
+            (r) => r.GRAPHQL_ROUTES,
          ),
      },
      {
        path: 'websockets',
        loadChildren: () =>
-          import('./homepage/pages/websockets/websockets.module').then(
-            (m) => m.WebsocketsModule,
+          import('./homepage/pages/websockets/websockets.routes').then(
+            (r) => r.WEBSOCKETS_ROUTES,
          ),
      },
      {
        path: 'microservices',
        loadChildren: () =>
-          import('./homepage/pages/microservices/microservices.module').then(
-            (m) => m.MicroservicesModule,
+          import('./homepage/pages/microservices/microservices.routes').then(
+            (r) => r.MICROSERVICES_ROUTES,
          ),
      },
      {
        path: 'recipes',
        loadChildren: () =>
-          import('./homepage/pages/recipes/recipes.module').then(
-            (m) => m.RecipesModule,
+          import('./homepage/pages/recipes/recipes.routes').then(
+            (r) => r.RECIPES_ROUTES,
          ),
      },
      {
        path: 'faq',
        loadChildren: () =>
-          import('./homepage/pages/faq/faq.module').then((m) => m.FaqModule),
+          import('./homepage/pages/faq/faq.routes').then(
+            (r) => r.FAQ_ROUTES,
+          ),
      },
      {
        path: 'cli',
        loadChildren: () =>
-          import('./homepage/pages/cli/cli.module').then((m) => m.CliModule),
+          import('./homepage/pages/cli/cli-routing.routes').then(
+            (r) => r.CLI_ROUTES,
+          ),
      },
      {
        path: 'openapi',
        loadChildren: () =>
-          import('./homepage/pages/openapi/openapi.module').then(
-            (m) => m.OpenApiModule,
+          import('./homepage/pages/openapi/openapi.routes').then(
+            (r) => r.OPENAPI_ROUTES,
          ),
      },
      {
        path: 'devtools',
        loadChildren: () =>
-          import('./homepage/pages/devtools/devtools.module').then(
-            (m) => m.DevtoolsModule,
+          import('./homepage/pages/devtools/devtools.routes').then(
+            (r) => r.DEVTOOLS_ROUTES,
          ),
      },
    ],
  },
-  {
-    path: '**',
-    redirectTo: '',
-    pathMatch: 'full',
-  },
+  { path: '**', redirectTo: '', pathMatch: 'full' },
 ];

-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, {
-      // enableTracing: !environment.production,
-      scrollPositionRestoration: 'enabled',
-      anchorScrolling: 'enabled',
-      preloadingStrategy: PreloadAllModules,
-      onSameUrlNavigation: 'reload',
-    }),
-  ],
-  providers: [],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
+export const RoutingModule = RouterModule.forRoot(routes, {
+  scrollPositionRestoration: 'enabled',
+  anchorScrolling: 'enabled',
+  preloadingStrategy: PreloadAllModules,
+  onSameUrlNavigation: 'reload',
+});
--- a/src/app/common/animations/index.ts
+++ b/src/app/common/animations/index.ts
@@ -1,2 +1 @@
-export * from './router.animations';
-export * from './open-close.animation';
+export * from './open-close.animation';
--- a/src/app/common/animations/router.animations.ts
+++ b/src/app/common/animations/router.animations.ts
@@ -1,30 +0,0 @@
-import {
-  animate,
-  query,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-
-export const fadeAnimation = trigger('fadeAnimation', [
-  // The '* => *' will trigger the animation to change between any two states
-  transition('* => *', [
-    // The query function has three params.
-    // First is the event, so this will apply on entering or when the element is added to the DOM.
-    // Second is a list of styles or animations to apply.
-    // Third we add a config object with optional set to true, this is to signal
-    // angular that the animation may not apply as it may or may not be in the DOM.
-    query(':enter', [style({ opacity: 0 })], { optional: true }),
-    query(
-      ':leave',
-      // here we apply a style and use the animate function to apply the style over 0.3 seconds
-      [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
-      { optional: true },
-    ),
-    query(
-      ':enter',
-      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
-      { optional: true },
-    ),
-  ]),
-]);
--- a/src/app/common/social-wrapper/social-wrapper.component.html
+++ b/src/app/common/social-wrapper/social-wrapper.component.html
@@ -1,30 +1,17 @@
 <div class="social-wrapper">
-  <a href="https://twitter.com/nestframework"
-     title="Twitter account"
-     target="_blank">
+  <a href="https://twitter.com/nestframework" title="Twitter account" target="_blank">
    <i class="fa-brands fa-x-twitter"></i>
  </a>
-  <a href="https://github.com/nestjs/nest"
-     title="Github repository"
-     target="_blank">
+  <a href="https://github.com/nestjs/nest" title="Github repository" target="_blank">
    <i class="fa-brands fa-github"></i>
  </a>
-  <a href="https://stackoverflow.com/questions/tagged/nestjs"
-     title="Stackoverflow"
-     target="_blank">
+  <a href="https://stackoverflow.com/questions/tagged/nestjs" title="Stackoverflow" target="_blank">
    <i class="fa-brands fa-stack-overflow"></i>
  </a>
-  <a
-    href="https://nestjs.com"
-    title="NestJS - A node.js framework built on top of TypeScript"
-    target="_blank"
-  >
+  <a href="https://nestjs.com" title="NestJS - A node.js framework built on top of TypeScript" target="_blank">
    <i class="fa fa-globe"></i>
  </a>
-  <a href="https://discord.gg/G7Qnnhy"
-     title="Discord"
-     target="_blank"
-     rel="nofollow">
+  <a href="https://discord.gg/G7Qnnhy" title="Discord" target="_blank" rel="nofollow">
    <i class="fa-brands fa-discord"></i>
  </a>
-</div>
+</div>
--- a/src/app/common/social-wrapper/social-wrapper.component.scss
+++ b/src/app/common/social-wrapper/social-wrapper.component.scss
@@ -1,7 +1,7 @@
-@import '../../../scss/utils.scss';
+@use '../../../scss/utils';

 :host {
-  @include media(small) {
+  @include utils.media(small) {
    position: absolute;
    top: 50%;
    right: 20px;
@@ -41,7 +41,7 @@
    }
  }

-  @include media(small) {
+  @include utils.media(small) {
    top: 0;
    transform: none;

@@ -49,7 +49,7 @@
      display: none;
    }
  }
-  
+
  @media print {
    display: none;
  }
--- a/src/app/common/social-wrapper/social-wrapper.component.spec.ts
+++ b/src/app/common/social-wrapper/social-wrapper.component.spec.ts
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SocialWrapperComponent } from './social-wrapper.component';
-
-describe('SocialWrapperComponent', () => {
-  let component: SocialWrapperComponent;
-  let fixture: ComponentFixture<SocialWrapperComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SocialWrapperComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SocialWrapperComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/common/social-wrapper/social-wrapper.component.ts
+++ b/src/app/common/social-wrapper/social-wrapper.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'app-social-wrapper',
-  templateUrl: './social-wrapper.component.html',
-  styleUrls: ['./social-wrapper.component.scss']
+    selector: 'app-social-wrapper',
+    templateUrl: './social-wrapper.component.html',
+    styleUrls: ['./social-wrapper.component.scss'],
+    standalone: true,
 })
 export class SocialWrapperComponent {}
--- a/src/app/homepage/footer/footer.component.spec.ts
+++ b/src/app/homepage/footer/footer.component.spec.ts
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { FooterComponent } from './footer.component';
-
-describe('FooterComponent', () => {
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  let fixture: ComponentFixture<FooterComponent>;
-  let component: FooterComponent;
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FooterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/homepage/footer/footer.component.ts
+++ b/src/app/homepage/footer/footer.component.ts
@@ -1,11 +1,14 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { DatePipe } from '@angular/common';

@Component({
-  selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [DatePipe],
 })
 export class FooterComponent {
-  currentDate = Date.now();
+  public currentDate = Date.now();
 }
--- a/src/app/homepage/header/header.component.html
+++ b/src/app/homepage/header/header.component.html
@@ -2,43 +2,27 @@
  <a href="https://supportukrainenow.org/">STOP WAR IN UKRAINE 🇺🇦</a>
 </div> -->
 <header>
-  <button
-    class="icon-wrapper"
-    (click)="toggle.emit()"
-    [class.opened]="isSidebarOpened"
-  >
+  <button class="icon-wrapper" (click)="toggle.emit()" [class.opened]="isSidebarOpened">
    <div class="nav-icon">
      <div class="mobile-nav-icon">
        <span></span>
      </div>
-      <svg
-        class="desktop-nav-icon"
-        height="512pt"
-        viewBox="0 -27 512 512"
-        width="512pt"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg class="desktop-nav-icon" height="512pt" viewBox="0 -27 512 512" width="512pt"
+        xmlns="http://www.w3.org/2000/svg">
        <path
-          d="m213.117188 81.011719c6.273437-5.488281 6.910156-15.027344 1.421874-21.300781-5.492187-6.273438-15.027343-6.910157-21.300781-1.421876l-2.597656 2.273438c-6.273437 5.488281-6.910156 15.027344-1.421875 21.300781 2.984375 3.410157 7.164062 5.15625 11.367188 5.15625 3.527343 0 7.070312-1.230469 9.933593-3.734375zm0 0"
-        />
+          d="m213.117188 81.011719c6.273437-5.488281 6.910156-15.027344 1.421874-21.300781-5.492187-6.273438-15.027343-6.910157-21.300781-1.421876l-2.597656 2.273438c-6.273437 5.488281-6.910156 15.027344-1.421875 21.300781 2.984375 3.410157 7.164062 5.15625 11.367188 5.15625 3.527343 0 7.070312-1.230469 9.933593-3.734375zm0 0" />
        <path
-          d="m117.898438 120.203125-2.597657 2.273437c-6.273437 5.492188-6.910156 15.027344-1.421875 21.300782 2.984375 3.414062 7.164063 5.15625 11.367188 5.15625 3.527344 0 7.070312-1.226563 9.933594-3.730469l2.597656-2.273437c6.273437-5.492188 6.910156-15.027344 1.421875-21.300782-5.488281-6.277344-15.027344-6.914062-21.300781-1.425781zm0 0"
-        />
+          d="m117.898438 120.203125-2.597657 2.273437c-6.273437 5.492188-6.910156 15.027344-1.421875 21.300782 2.984375 3.414062 7.164063 5.15625 11.367188 5.15625 3.527344 0 7.070312-1.226563 9.933594-3.730469l2.597656-2.273437c6.273437-5.492188 6.910156-15.027344 1.421875-21.300782-5.488281-6.277344-15.027344-6.914062-21.300781-1.425781zm0 0" />
        <path
-          d="m216.179688 121.503906-2.597657 2.273438c-6.269531 5.492187-6.90625 15.027344-1.417969 21.300781 2.984376 3.414063 7.164063 5.15625 11.367188 5.15625 3.527344 0 7.070312-1.230469 9.933594-3.738281l2.597656-2.273438c6.273438-5.488281 6.910156-15.027344 1.417969-21.300781-5.488281-6.273437-15.023438-6.90625-21.300781-1.417969zm0 0"
-        />
+          d="m216.179688 121.503906-2.597657 2.273438c-6.269531 5.492187-6.90625 15.027344-1.417969 21.300781 2.984376 3.414063 7.164063 5.15625 11.367188 5.15625 3.527344 0 7.070312-1.230469 9.933594-3.738281l2.597656-2.273438c6.273438-5.488281 6.910156-15.027344 1.417969-21.300781-5.488281-6.273437-15.023438-6.90625-21.300781-1.417969zm0 0" />
        <path
-          d="m315.523438 70.039062.253906-3.441406c.609375-8.316406-5.636719-15.550781-13.949219-16.160156s-15.550781 5.636719-16.160156 13.949219l-.253907 3.441406c-.609374 8.316406 5.636719 15.550781 13.949219 16.160156.375.027344.75.042969 1.121094.042969 7.835937 0 14.457031-6.054688 15.039063-13.992188zm0 0"
-        />
+          d="m315.523438 70.039062.253906-3.441406c.609375-8.316406-5.636719-15.550781-13.949219-16.160156s-15.550781 5.636719-16.160156 13.949219l-.253907 3.441406c-.609374 8.316406 5.636719 15.550781 13.949219 16.160156.375.027344.75.042969 1.121094.042969 7.835937 0 14.457031-6.054688 15.039063-13.992188zm0 0" />
        <path
-          d="m403.570312 96.273438c-5.109374-6.589844-14.589843-7.789063-21.179687-2.683594-6.589844 5.109375-7.789063 14.589844-2.683594 21.179687l2.117188 2.730469c2.976562 3.835938 7.433593 5.847656 11.941406 5.847656 3.230469 0 6.484375-1.035156 9.238281-3.167968 6.585938-5.105469 7.789063-14.589844 2.679688-21.179688zm0 0"
-        />
+          d="m403.570312 96.273438c-5.109374-6.589844-14.589843-7.789063-21.179687-2.683594-6.589844 5.109375-7.789063 14.589844-2.683594 21.179687l2.117188 2.730469c2.976562 3.835938 7.433593 5.847656 11.941406 5.847656 3.230469 0 6.484375-1.035156 9.238281-3.167968 6.585938-5.105469 7.789063-14.589844 2.679688-21.179688zm0 0" />
        <path
-          d="m325.449219 118.675781c-8.308594-.628906-15.550781 5.632813-16.164063 13.945313l-.253906 3.441406c-.613281 8.316406 5.632812 15.550781 13.945312 16.164062.378907.027344.753907.042969 1.125.042969 7.832032 0 14.453126-6.050781 15.039063-13.988281l.253906-3.441406c.613281-8.316406-5.632812-15.550782-13.945312-16.164063zm0 0"
-        />
+          d="m325.449219 118.675781c-8.308594-.628906-15.550781 5.632813-16.164063 13.945313l-.253906 3.441406c-.613281 8.316406 5.632812 15.550781 13.945312 16.164062.378907.027344.753907.042969 1.125.042969 7.832032 0 14.453126-6.050781 15.039063-13.988281l.253906-3.441406c.613281-8.316406-5.632812-15.550782-13.945312-16.164063zm0 0" />
        <path
-          d="m479.355469 183.492188v-22.644532c0-88.691406-72.15625-160.847656-160.847657-160.847656h-116.597656c-88.691406 0-160.847656 72.15625-160.847656 160.847656v19.882813c-23.519531 5.632812-41.0625 26.820312-41.0625 52.039062v3.253907c0 25.21875 17.542969 46.40625 41.0625 52.039062v26.367188c0 3.339843.507812 6.597656 1.441406 9.6875v2.667968c0 72.097656 58.652344 130.75 130.75 130.75h175.351563c72.097656 0 130.75-58.652344 130.75-130.75v-41.484375c19.167969-8.152343 32.644531-27.171875 32.644531-49.277343v-3.253907c0-22.109375-13.476562-41.125-32.644531-49.277343zm-408.101563-22.644532c0-72.046875 58.609375-130.65625 130.65625-130.65625h116.597656c72.046876 0 130.65625 58.609375 130.65625 130.65625v18.402344h-377.910156zm377.910156 165.9375c0 4.710938-3.179687 7-4.546874 7.765625-1.378907.769531-5.023438 2.296875-9.082032-.191406-1.34375-.824219-2.664062-1.664063-3.980468-2.503906-10.746094-6.835938-24.117188-15.347657-48.917969-15.347657-24.804688 0-38.175781 8.507813-48.917969 15.347657-9.328125 5.9375-16.699219 10.628906-32.707031 10.628906-16.007813 0-23.375-4.6875-32.703125-10.628906-10.746094-6.835938-24.113282-15.347657-48.917969-15.347657-24.800781 0-38.171875 8.511719-48.914063 15.347657-9.328124 5.9375-16.695312 10.628906-32.703124 10.628906-16.003907 0-23.375-4.6875-32.699219-10.628906-7.894531-5.023438-16.839844-10.714844-30.464844-13.5625-1.425781-.296875-2.53125-1.210938-3.042969-2.394531-.03125-.078126-.058594-.160157-.09375-.238282-.136718-.390625-.21875-.800781-.21875-1.230468v-24.886719h377.910156zm-100.558593 100.558594h-175.355469c-47.492188 0-87.398438-33.097656-97.871094-77.4375 4.75 1.863281 8.773438 4.421875 13.480469 7.417969 10.742187 6.839843 24.113281 15.351562 48.914063 15.351562 24.800781 0 38.171874-8.511719 48.914062-15.351562 9.328125-5.9375 16.695312-10.628907 32.703125-10.628907s23.375 4.691407 32.703125 10.628907c10.746094 6.839843 24.113281 15.351562 48.917969 15.351562 24.800781 0 38.171875-8.511719 48.917969-15.351562 9.328124-5.9375 16.695312-10.628907 32.703124-10.628907 16.007813 0 23.378907 4.691407 32.707032 10.628907 1.460937.929687 2.917968 1.859375 4.40625 2.769531 6.667968 4.089844 14.089844 6.027344 21.488281 5.828125-15.292969 36.0625-51.054687 61.421875-92.628906 61.421875zm133.203125-191.320312c0 12.863281-10.464844 23.328124-23.328125 23.328124h-404.960938c-12.863281 0-23.328125-10.464843-23.328125-23.328124v-3.253907c0-12.863281 10.464844-23.328125 23.328125-23.328125h404.960938c12.863281 0 23.328125 10.464844 23.328125 23.328125zm0 0"
-        />
+          d="m479.355469 183.492188v-22.644532c0-88.691406-72.15625-160.847656-160.847657-160.847656h-116.597656c-88.691406 0-160.847656 72.15625-160.847656 160.847656v19.882813c-23.519531 5.632812-41.0625 26.820312-41.0625 52.039062v3.253907c0 25.21875 17.542969 46.40625 41.0625 52.039062v26.367188c0 3.339843.507812 6.597656 1.441406 9.6875v2.667968c0 72.097656 58.652344 130.75 130.75 130.75h175.351563c72.097656 0 130.75-58.652344 130.75-130.75v-41.484375c19.167969-8.152343 32.644531-27.171875 32.644531-49.277343v-3.253907c0-22.109375-13.476562-41.125-32.644531-49.277343zm-408.101563-22.644532c0-72.046875 58.609375-130.65625 130.65625-130.65625h116.597656c72.046876 0 130.65625 58.609375 130.65625 130.65625v18.402344h-377.910156zm377.910156 165.9375c0 4.710938-3.179687 7-4.546874 7.765625-1.378907.769531-5.023438 2.296875-9.082032-.191406-1.34375-.824219-2.664062-1.664063-3.980468-2.503906-10.746094-6.835938-24.117188-15.347657-48.917969-15.347657-24.804688 0-38.175781 8.507813-48.917969 15.347657-9.328125 5.9375-16.699219 10.628906-32.707031 10.628906-16.007813 0-23.375-4.6875-32.703125-10.628906-10.746094-6.835938-24.113282-15.347657-48.917969-15.347657-24.800781 0-38.171875 8.511719-48.914063 15.347657-9.328124 5.9375-16.695312 10.628906-32.703124 10.628906-16.003907 0-23.375-4.6875-32.699219-10.628906-7.894531-5.023438-16.839844-10.714844-30.464844-13.5625-1.425781-.296875-2.53125-1.210938-3.042969-2.394531-.03125-.078126-.058594-.160157-.09375-.238282-.136718-.390625-.21875-.800781-.21875-1.230468v-24.886719h377.910156zm-100.558593 100.558594h-175.355469c-47.492188 0-87.398438-33.097656-97.871094-77.4375 4.75 1.863281 8.773438 4.421875 13.480469 7.417969 10.742187 6.839843 24.113281 15.351562 48.914063 15.351562 24.800781 0 38.171874-8.511719 48.914062-15.351562 9.328125-5.9375 16.695312-10.628907 32.703125-10.628907s23.375 4.691407 32.703125 10.628907c10.746094 6.839843 24.113281 15.351562 48.917969 15.351562 24.800781 0 38.171875-8.511719 48.917969-15.351562 9.328124-5.9375 16.695312-10.628907 32.703124-10.628907 16.007813 0 23.378907 4.691407 32.707032 10.628907 1.460937.929687 2.917968 1.859375 4.40625 2.769531 6.667968 4.089844 14.089844 6.027344 21.488281 5.828125-15.292969 36.0625-51.054687 61.421875-92.628906 61.421875zm133.203125-191.320312c0 12.863281-10.464844 23.328124-23.328125 23.328124h-404.960938c-12.863281 0-23.328125-10.464843-23.328125-23.328124v-3.253907c0-12.863281 10.464844-23.328125 23.328125-23.328125h404.960938c12.863281 0 23.328125 10.464844 23.328125 23.328125zm0 0" />
      </svg>
    </div>
  </button>
@@ -52,36 +36,23 @@
    </div>
    <ul>
      <li>
-        <a
-          href="https://courses.nestjs.com"
-          target="_blank"
-          title="Courses | NestJS - A node.js framework built on top of TypeScript"
-          >Courses</a
-        >
+        <a href="https://courses.nestjs.com" target="_blank"
+          title="Courses | NestJS - A node.js framework built on top of TypeScript">Courses</a>
      </li>
      <li>
-        <a
-        href="https://enterprise.nestjs.com"
-        target="_blank"
-        title="Enterprise | NestJS - A node.js framework built on top of TypeScript"
-          >Enterprise</a
-        >
+        <a href="https://enterprise.nestjs.com" target="_blank"
+          title="Enterprise | NestJS - A node.js framework built on top of TypeScript">Enterprise</a>
      </li>
      <li>
-        <a 
-          href="https://devtools.nestjs.com"
-          target="_blank"
+        <a href="https://devtools.nestjs.com" target="_blank"
          title="Devtools | NestJS - A node.js framework built on top of TypeScript">
          <span class="new">NEW</span> Devtools</a>
      </li>
      <li>
-        <a
-          href="https://mau.nestjs.com"
-          target="_blank"
-          title="Deploy Nest | NestJS - A node.js framework built on top of TypeScript"
-          >Deploy with Mau
+        <a href="https://mau.nestjs.com" target="_blank"
+          title="Deploy Nest | NestJS - A node.js framework built on top of TypeScript">Deploy with Mau
        </a>
      </li>
    </ul>
  </div>
-</header>
+</header>
--- a/src/app/homepage/header/header.component.spec.ts
+++ b/src/app/homepage/header/header.component.spec.ts
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { HeaderComponent } from './header.component';
-import { SocialWrapperComponent } from '../../common/social-wrapper/social-wrapper.component';
-
-describe('HeaderComponent', () => {
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      declarations: [HeaderComponent, SocialWrapperComponent],
-    }).compileComponents();
-  }));
-
-  let fixture: ComponentFixture<HeaderComponent>;
-  let component: HeaderComponent;
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/homepage/header/header.component.ts
+++ b/src/app/homepage/header/header.component.ts
@@ -5,12 +5,16 @@ import {
  Input,
  Output,
 } from '@angular/core';
+import { ThemeModeToggleComponent } from '../../shared/components/theme-mode-toggle/theme-mode-toggle.component';
+import { SocialWrapperComponent } from '../../common/social-wrapper/social-wrapper.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ThemeModeToggleComponent, SocialWrapperComponent],
 })
 export class HeaderComponent {
  @Output() toggle = new EventEmitter<void>();
--- a/src/app/homepage/homepage.component.html
+++ b/src/app/homepage/homepage.component.html
@@ -1,9 +1,6 @@
 <app-header (toggle)="toggleSidebar()" [isSidebarOpened]="isSidebarOpened">
  <div class="logo-wrapper">
-    <a
-      href="https://docs.nestjs.com/"
-      title="Documentation | NestJS - A node.js framework built on top of TypeScript"
-    >
+    <a href="https://docs.nestjs.com/" title="Documentation | NestJS - A node.js framework built on top of TypeScript">
      <img alt="NestJS Logo" src="/assets/logo-small-gradient.svg" />
    </a>
  </div>
@@ -27,11 +24,7 @@
          <div class="inline-column">
            <h4 class="title">Principal Sponsors</h4>
            <a href="https://trilon.io/" target="_blank" class="logo-sponsor-container">
-              <img
-                src="/assets/sponsors/trilon.svg"
-                alt="Trilon Logo" 
-                class="logo-sponsor"
-              />
+              <img src="/assets/sponsors/trilon.svg" alt="Trilon Logo" class="logo-sponsor" />
            </a>
            <!-- <a href="https://www.redhat.com/" target="_blank" class="logo-sponsor-container">
              <img src="/assets/sponsors/red-hat-logo.svg" alt="Red Hat Logo" class="logo-sponsor" />
@@ -51,21 +44,12 @@
              />
            </a>-->
            <a href="https://mojam.co" target="_blank" class="logo-sponsor-container">
-              <img
-                src="/assets/sponsors/mojam-logo.png"
-                alt="Mojam Logo"
-                class="logo-sponsor logo-sponsor--slim"
-              />
+              <img src="/assets/sponsors/mojam-logo.png" alt="Mojam Logo" class="logo-sponsor logo-sponsor--slim" />
            </a>
          </div>
          <div class="inline-column">
            <h4 class="title">Sponsors / Partners</h4>
-            <a
-              href="https://opencollective.com/nest"
-              class="btn btn-primary"
-              target="_blank"
-              rel="nofollow"
-            >
+            <a href="https://opencollective.com/nest" class="btn btn-primary" target="_blank" rel="nofollow">
              <span>Become a sponsor</span>
            </a>
          </div>
@@ -76,14 +60,11 @@
    <app-footer>
      <p>
        Made by
-        <a
-          href="https://kamilmysliwiec.com"
-          target="_blank"
-          title="Kamil Mysliwiec Blog | Full-Stack Software Engineer"
-        >
+        <a href="https://kamilmysliwiec.com" target="_blank"
+          title="Kamil Mysliwiec Blog | Full-Stack Software Engineer">
          Kamil Myśliwiec
        </a>
      </p>
    </app-footer>
  </div>
-</div>
+</div>
--- a/src/app/homepage/homepage.component.scss
+++ b/src/app/homepage/homepage.component.scss
@@ -77,7 +77,9 @@
    }
  }

-  .content blockquote strong, .content #carbonads a, .content blockquote a {
+  .content blockquote strong,
+  .content #carbonads a,
+  .content blockquote a {
    -webkit-text-fill-color: unset !important;
    -webkit-background-clip: unset !important;
    background: none;
@@ -258,17 +260,16 @@
    }

    &::before {
-      content: "";
+      content: '';
      position: absolute;
      inset: 0;
      border-radius: 2px;
      padding: 2px;
      background: var(--primary-gradient);
-      -webkit-mask: 
-        linear-gradient(#fff 0 0) content-box, 
+      -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
-              mask-composite: exclude;
+      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
@@ -465,7 +466,7 @@
  -webkit-filter: var(--company-filter);
  filter: var(--company-filter);
  opacity: var(--company-logo-opacity);
-  
+
  &:hover {
    -webkit-filter: var(--company-filter-hover);
    filter: var(--company-filter-hover);
--- a/src/app/homepage/homepage.component.spec.ts
+++ b/src/app/homepage/homepage.component.spec.ts
@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HomepageComponent } from './homepage.component';
-import { FooterComponent } from './footer/footer.component';
-import { HeaderComponent } from './header/header.component';
-import { RouterTestingModule } from '@angular/router/testing';
-import { MenuComponent } from './menu/menu.component';
-import { MenuItemComponent } from './menu/menu-item/menu-item.component';
-import { SocialWrapperComponent } from '../common/social-wrapper/social-wrapper.component';
-import { TocComponent } from '../shared/components/toc/toc.component';
-import { NewsletterComponent } from './newsletter/newsletter.component';
-import { HttpClient, HttpHandler } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('HomepageComponent', () => {
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [RouterTestingModule, BrowserAnimationsModule],
-      declarations: [
-        FooterComponent,
-        HeaderComponent,
-        SocialWrapperComponent,
-        MenuComponent,
-        MenuItemComponent,
-        TocComponent,
-        NewsletterComponent,
-        HomepageComponent,
-      ],
-      providers: [HttpClient, HttpHandler],
-    }).compileComponents();
-  }));
-
-  let fixture: ComponentFixture<HomepageComponent>;
-  let component: HomepageComponent;
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomepageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/homepage/homepage.component.ts
+++ b/src/app/homepage/homepage.component.ts
@@ -10,11 +10,16 @@ import {
  Renderer2,
  ViewEncapsulation,
 } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterOutlet, RouterLink } from '@angular/router';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime, filter } from 'rxjs/operators';
 import { environment } from '../../environments/environment';
 import { BasePageComponent } from './pages/page/page.component';
+import { HeaderComponent } from './header/header.component';
+import { MenuComponent } from './menu/menu.component';
+import { TocComponent } from '../shared/components/toc/toc.component';
+import { NewsletterComponent } from './newsletter/newsletter.component';
+import { FooterComponent } from './footer/footer.component';

 const CARBON_WIDTH_BREAKPOINT = 1200;

@@ -22,15 +27,24 @@ const CARBON_WIDTH_BREAKPOINT = 1200;
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.scss'],
+  standalone: true,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    HeaderComponent,
+    MenuComponent,
+    TocComponent,
+    RouterOutlet,
+    RouterLink,
+    NewsletterComponent,
+    FooterComponent,
+  ],
 })
 export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
-  isSidebarOpened = true;
-  previousWidth: number;
-  contentRef: HTMLElement;
-  isMarkupReady: boolean;
-
+  public isSidebarOpened = true;
+  public previousWidth: number;
+  public contentRef: HTMLElement;
+  public isMarkupReady: boolean;
  private scrollSubscription: Subscription;
  private readonly scrollDebounceTime = 100;

@@ -41,7 +55,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    private readonly renderer: Renderer2,
  ) {}

-  ngOnInit(): void {
+  public ngOnInit(): void {
    this.router.events
      .pipe(filter((ev) => ev instanceof NavigationEnd))
      .subscribe(() => {
@@ -59,14 +73,14 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
      });
  }

-  ngAfterViewInit() {
+  public ngAfterViewInit(): void {
    this.checkWindowWidth(window.innerWidth);
    if (this.contentRef) {
      this.contentRef.appendChild(this.createDocSearchScriptTag());
    }
  }

-  ngOnDestroy() {
+  public ngOnDestroy(): void {
    if (!this.scrollSubscription) {
      return;
    }
@@ -74,15 +88,15 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
  }

  @HostListener('window:resize', ['$event'])
-  onResize(event) {
+  public onResize(event): void {
    this.checkWindowWidth(event.target.innerWidth);
  }

-  toggleSidebar() {
+  public toggleSidebar(): void {
    this.isSidebarOpened = !this.isSidebarOpened;
  }

-  checkWindowWidth(innerWidth?: number) {
+  public checkWindowWidth(innerWidth?: number): void {
    innerWidth = innerWidth ? innerWidth : window.innerWidth;
    if (this.previousWidth !== innerWidth && innerWidth <= 768) {
      this.previousWidth = innerWidth;
@@ -91,7 +105,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    }
  }

-  checkViewportBoundaries() {
+  public checkViewportBoundaries(): void {
    const nativeElement: HTMLElement = this.elementRef.nativeElement;
    const footerRef: HTMLElement = nativeElement.querySelector('app-footer');
    const newsletterRef: HTMLElement = nativeElement.querySelector(
@@ -127,7 +141,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    }
  }

-  onRouteActivate(component: BasePageComponent) {
+  public onRouteActivate(component: BasePageComponent): void {
    if (!component) {
      return;
    }
@@ -157,7 +171,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    setTimeout(() => this.hideAdIfTocOverflow(), adOverlapCheckDelay);
  }

-  createCarbonScriptTag(): HTMLScriptElement {
+  public createCarbonScriptTag(): HTMLScriptElement {
    const scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src =
@@ -166,7 +180,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    return scriptTag;
  }

-  createDocSearchScriptTag(): HTMLScriptElement {
+  public createDocSearchScriptTag(): HTMLScriptElement {
    const scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';
@@ -183,7 +197,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
    return scriptTag;
  }

-  hideAdIfTocOverflow() {
+  public hideAdIfTocOverflow(): void {
    const carbonHeight = 160;
    const offset = 200;
    const viewportHeight = window.innerHeight;
--- a/src/app/homepage/menu/menu-item/menu-item.component.html
+++ b/src/app/homepage/menu/menu-item/menu-item.component.html
@@ -1,69 +1,90 @@
-<div
-  class="nav-item"
-  [class.opened]="isOpen"
-  *ngIf="children; else withoutChildren"
->
-  <div class="heading" (click)="toggle()">
-    <h3><span *ngIf="isNew" class="new">NEW</span>{{ title }}</h3>
-    <svg
-      class="arrow-icon"
-      width="20"
-      height="20"
-      viewBox="0 0 1792 1792"
-      xmlns="http://www.w3.org/2000/svg"
+@if (children) {
+  <div
+    class="nav-item"
+    [class.opened]="isOpen"
    >
-      <path
-        d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"
-      />
-    </svg>
-  </div>
-  <ul [@openCloseAnimation]="isOpen" class="sub-nav">
-    <li *ngFor="let item of children">
+    <div class="heading" (click)="toggle()">
+      <h3>@if (isNew) {
+        <span class="new">NEW</span>
+      }{{ title }}</h3>
+      <svg
+        class="arrow-icon"
+        width="20"
+        height="20"
+        viewBox="0 0 1792 1792"
+        xmlns="http://www.w3.org/2000/svg"
+        >
+        <path
+          d="M1171 960q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"
+          />
+      </svg>
+    </div>
+    <ul [@openCloseAnimation]="isOpen" class="sub-nav">
+      @for (item of children; track item) {
+        <li>
+          @if (!item.externalUrl) {
+            <a
+              [class.pending]="item.isPending"
+              [routerLink]="item.path"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: true }"
+              >@if (item.icon) {
+              <i class="material-icons">
+                {{ item.icon }}
+              </i>
+            }
+            {{ item.title }}
+          </a>
+        }
+        @if (!!item.externalUrl) {
+          <a
+            href="{{ item.externalUrl }}"
+            target="_blank"
+            >@if (item.icon) {
+            <i class="material-icons">
+              {{ item.icon }}
+            </i>
+          }
+          {{ item.title }}
+        </a>
+      }
+    </li>
+  }
+</ul>
+</div>
+} @else {
+  <div class="heading">
+    @if (!externalUrl) {
      <a
-        *ngIf="!item.externalUrl"
-        [class.pending]="item.isPending"
-        [routerLink]="item.path"
+        [routerLink]="path"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
-        ><i class="material-icons" *ngIf="item.icon">
-          {{ item.icon }}
-        </i>
-        {{ item.title }}
-      </a>
-      <a
-        *ngIf="!!item.externalUrl"
-        href="{{ item.externalUrl }}"
-        target="_blank"
-        ><i class="material-icons" *ngIf="item.icon">
-          {{ item.icon }}
-        </i>
-        {{ item.title }}
-      </a>
-    </li>
-  </ul>
-</div>
-<ng-template #withoutChildren>
-  <div class="heading">
-    <a
-      *ngIf="!externalUrl"
-      [routerLink]="path"
-      routerLinkActive="active"
-      [routerLinkActiveOptions]="{ exact: true }"
-      [class.has-icon]="icon"
-      ><h3>
-        <i class="material-icons" *ngIf="icon">
-          {{ icon }}
-        </i>
-        <span *ngIf="isNew" class="new">NEW</span>{{ title }}
-      </h3></a
-    >
-    <a *ngIf="!!externalUrl" href="{{ externalUrl }}" target="_blank"
-      ><h3>
-        <i class="material-icons" *ngIf="icon">
-          {{ icon }}
-        </i>
-        <span *ngIf="isNew" class="new">NEW</span>{{ title }}
-      </h3>
-    </a>
-  </div>
-</ng-template>
+        [class.has-icon]="icon"
+        ><h3>
+        @if (icon) {
+          <i class="material-icons">
+            {{ icon }}
+          </i>
+        }
+        @if (isNew) {
+          <span class="new">NEW</span>
+          }{{ title }}
+        </h3></a
+        >
+      }
+      @if (!!externalUrl) {
+        <a href="{{ externalUrl }}" target="_blank"
+          ><h3>
+          @if (icon) {
+            <i class="material-icons">
+              {{ icon }}
+            </i>
+          }
+          @if (isNew) {
+            <span class="new">NEW</span>
+            }{{ title }}
+          </h3>
+        </a>
+      }
+    </div>
+  }
--- a/src/app/homepage/menu/menu-item/menu-item.component.spec.ts
+++ b/src/app/homepage/menu/menu-item/menu-item.component.spec.ts
@@ -1,32 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { MenuItemComponent } from './menu-item.component';
-import { RouterTestingModule } from '@angular/router/testing';
-
-describe('MenuItemComponent', () => {
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        RouterTestingModule
-      ],
-      declarations: [
-        MenuItemComponent
-      ]
-    })
-    .compileComponents();
-  }));
-
-  let fixture: ComponentFixture<MenuItemComponent>;
-  let component: MenuItemComponent;
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MenuItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/homepage/menu/menu-item/menu-item.component.ts
+++ b/src/app/homepage/menu/menu-item/menu-item.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { openCloseAnimation } from '../../../common';
+import { RouterLinkActive, RouterLink } from '@angular/router';

@Component({
  selector: 'app-menu-item',
@@ -7,6 +8,11 @@ import { openCloseAnimation } from '../../../common';
  styleUrls: ['./menu-item.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [openCloseAnimation],
+  standalone: true,
+  imports: [
+    RouterLinkActive,
+    RouterLink
+  ],
 })
 export class MenuItemComponent {
  @Input() isOpen = false;
@@ -17,7 +23,7 @@ export class MenuItemComponent {
  @Input() externalUrl: string;
  @Input() isNew?: boolean;

-  toggle() {
+  public toggle(): void {
    this.isOpen = !this.isOpen;
  }
 }
--- a/src/app/homepage/menu/menu.component.html
+++ b/src/app/homepage/menu/menu.component.html
@@ -1,21 +1,22 @@
 <nav class="nav-container" (click)="$event.stopPropagation()">
-  <app-menu-item
-    *ngFor="let item of items"
-    [isOpen]="item.isOpened"
-    [title]="item.title"
-    [externalUrl]="item?.externalUrl"
-    [isNew]="item.isNew"
-    [icon]="item?.icon"
-    [path]="item?.path"
-    [children]="item.children"
-    class="nav-item"
-  ></app-menu-item>
+  @for (item of items; track item) {
+    <app-menu-item
+      [isOpen]="item.isOpened"
+      [title]="item.title"
+      [externalUrl]="item?.externalUrl"
+      [isNew]="item.isNew"
+      [icon]="item?.icon"
+      [path]="item?.path"
+      [children]="item.children"
+      class="nav-item"
+    ></app-menu-item>
+  }
  <a
    href="https://enterprise.nestjs.com"
    target="_blank"
    title="Enterprise | NestJS - A node.js framework built on top of TypeScript"
    class="btn btn-support"
    >Get enterprise support</a
-  >
-  <a href="https://docs.nestjs.com/v10" class="btn btn-version">Version 10</a>
-</nav>
+    >
+    <a href="https://docs.nestjs.com/v10" class="btn btn-version">Version 10</a>
+  </nav>
--- a/src/app/homepage/menu/menu.component.spec.ts
+++ b/src/app/homepage/menu/menu.component.spec.ts
@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { MenuComponent } from './menu.component';
-import { MenuItemComponent } from './menu-item/menu-item.component';
-import { RouterTestingModule } from '@angular/router/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MenuComponent', () => {
-  beforeEach(waitForAsync(() => {
-    return TestBed.configureTestingModule({
-      imports: [RouterTestingModule, BrowserAnimationsModule],
-      declarations: [MenuComponent, MenuItemComponent],
-    }).compileComponents();
-  }));
-
-  let fixture: ComponentFixture<MenuComponent>;
-  let component: MenuComponent;
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/homepage/menu/menu.component.ts
+++ b/src/app/homepage/menu/menu.component.ts
@@ -6,17 +6,21 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
+import { MenuItemComponent } from './menu-item/menu-item.component';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MenuItemComponent],
 })
 export class MenuComponent implements OnInit {
  @Input()
  isSidebarOpened = true;
-  readonly items = [
+
+  public readonly items = [
    {
      title: 'Introduction',
      isOpened: false,
@@ -323,7 +327,7 @@ export class MenuComponent implements OnInit {
    private readonly router: Router,
  ) {}

-  ngOnInit() {
+  public ngOnInit(): void {
    this.router.events
      .pipe(filter((ev) => ev instanceof NavigationEnd))
      .subscribe(() => this.toggleCategory());
@@ -331,7 +335,7 @@ export class MenuComponent implements OnInit {
    this.toggleCategory();
  }

-  toggleCategory() {
+  public toggleCategory(): void {
    const { firstChild } = this.route.snapshot;
    if (
      (firstChild.url && firstChild.url[1]) ||
--- a/src/app/homepage/newsletter/newsletter.component.ts
+++ b/src/app/homepage/newsletter/newsletter.component.ts
@@ -10,17 +10,18 @@ import { NewsletterService } from './services/newsletter.service';
  templateUrl: './newsletter.component.html',
  styleUrls: ['./newsletter.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class NewsletterComponent {
-  isDisabled: boolean;
-  isEmailAdded: boolean;
+  public isDisabled: boolean;
+  public isEmailAdded: boolean;

  constructor(
    private readonly newsletterService: NewsletterService,
    private readonly cd: ChangeDetectorRef,
  ) {}

-  async addToNewsletter(event: Event, value: string) {
+  public async addToNewsletter(event: Event, value: string): Promise<void> {
    event.preventDefault();
    this.isDisabled = true;
    this.cd.markForCheck();
--- a/src/app/homepage/newsletter/services/newsletter.service.ts
+++ b/src/app/homepage/newsletter/services/newsletter.service.ts
@@ -7,7 +7,7 @@ import { catchError } from 'rxjs/operators';
 export class NewsletterService {
  constructor(private readonly httpClient: HttpClient) {}

-  addToNewsletter(email: string): Promise<any> {
+  public addToNewsletter(email: string): Promise<any> {
    const newsletterUrl =
      'https://nbdggbnqnrevwg6xlex3st3vpe0nyhiq.lambda-url.us-east-2.on.aws/?token=db1f899025b5a59a76b6b34b2a013893';
    return lastValueFrom(
--- a/src/app/homepage/pages/application-context/application-context.component.ts
+++ b/src/app/homepage/pages/application-context/application-context.component.ts
@@ -1,9 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-application-context',
-  templateUrl: './application-context.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-application-context',
+    templateUrl: './application-context.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+    ],
 })
 export class ApplicationContextComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/cli/cli-routing.routes.ts
+++ b/src/app/homepage/pages/cli/cli-routing.routes.ts
@@ -1,14 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from './../../../shared/shared.module';
+import { Routes } from '@angular/router';
 import { CliLibrariesComponent } from './libraries/libraries.component';
 import { CliOverviewComponent } from './overview/overview.component';
 import { CliUsagesComponent } from './usages/usages.component';
 import { CliWorkspacesComponent } from './workspaces/workspaces.component';
 import { CliScriptsComponent } from './scripts/scripts.component';

-const routes: Routes = [
+export const CLI_ROUTES: Routes = [
  {
    path: 'overview',
    component: CliOverviewComponent,
@@ -49,15 +46,3 @@ const routes: Routes = [
    },
  },
 ];
-
-@NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
-  declarations: [
-    CliOverviewComponent,
-    CliWorkspacesComponent,
-    CliUsagesComponent,
-    CliLibrariesComponent,
-    CliScriptsComponent,
-  ],
-})
-export class CliModule {}
--- a/src/app/homepage/pages/cli/libraries/libraries.component.ts
+++ b/src/app/homepage/pages/cli/libraries/libraries.component.ts
@@ -1,9 +1,18 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-libraries',
-  templateUrl: './libraries.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-libraries',
+    templateUrl: './libraries.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+    ],
 })
 export class CliLibrariesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/cli/overview/overview.component.ts
+++ b/src/app/homepage/pages/cli/overview/overview.component.ts
@@ -1,9 +1,18 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { BannerCoursesComponent } from '../../../../shared/components/banner-courses/banner-courses.component';

@Component({
-  selector: 'app-overview',
-  templateUrl: './overview.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-overview',
+    templateUrl: './overview.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        BannerCoursesComponent,
+    ],
 })
 export class CliOverviewComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/cli/scripts/scripts.component.ts
+++ b/src/app/homepage/pages/cli/scripts/scripts.component.ts
@@ -1,9 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-scripts',
-  templateUrl: './scripts.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-scripts',
+    templateUrl: './scripts.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class CliScriptsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/cli/usages/usages.component.ts
+++ b/src/app/homepage/pages/cli/usages/usages.component.ts
@@ -1,9 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-usages',
-  templateUrl: './usages.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-usages',
+    templateUrl: './usages.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, RouterLink],
 })
 export class CliUsagesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/cli/workspaces/workspaces.component.ts
+++ b/src/app/homepage/pages/cli/workspaces/workspaces.component.ts
@@ -1,9 +1,18 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-workspaces',
-  templateUrl: './workspaces.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-workspaces',
+    templateUrl: './workspaces.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        CopyButtonComponent,
+    ],
 })
 export class CliWorkspacesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/components/components.component.ts
+++ b/src/app/homepage/pages/components/components.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { BannerCoursesComponent } from '../../../shared/components/banner-courses/banner-courses.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-components',
-  templateUrl: './components.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-components',
+    templateUrl: './components.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        BannerCoursesComponent,
+        ExtensionPipe,
+    ],
 })
 export class ComponentsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/controllers/controllers.component.ts
+++ b/src/app/homepage/pages/controllers/controllers.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { BannerDevtoolsComponent } from '../../../shared/components/banner-devtools/banner-devtools.component';
+import { RouterLink } from '@angular/router';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-controllers',
-  templateUrl: './controllers.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-controllers',
+    templateUrl: './controllers.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        BannerDevtoolsComponent,
+        RouterLink,
+        ExtensionPipe,
+    ],
 })
 export class ControllersComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/custom-decorators/custom-decorators.component.ts
+++ b/src/app/homepage/pages/custom-decorators/custom-decorators.component.ts
@@ -1,9 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-custom-decorators',
-  templateUrl: './custom-decorators.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-custom-decorators',
+    templateUrl: './custom-decorators.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class CustomDecoratorsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/deployment/deployment.component.ts
+++ b/src/app/homepage/pages/deployment/deployment.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-deployment',
-  templateUrl: './deployment.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-deployment',
+    templateUrl: './deployment.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, RouterLink],
 })
 export class DeploymentComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/devtools/ci-cd/ci-cd.component.ts
+++ b/src/app/homepage/pages/devtools/ci-cd/ci-cd.component.ts
@@ -1,9 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-devtools-ci-cd',
-  templateUrl: './ci-cd.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-devtools-ci-cd',
+    templateUrl: './ci-cd.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+      HeaderAnchorDirective,
+      CopyButtonComponent,
+    ],
 })
 export class DevtoolsCiCdComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/devtools/devtools.module.ts
+++ b/src/app/homepage/pages/devtools/devtools.module.ts
@@ -1,25 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../shared/shared.module';
-import { DevtoolsOverviewComponent } from './overview/overview.component';
-import { DevtoolsCiCdComponent } from './ci-cd/ci-cd.component';
-
-const routes: Routes = [
-  {
-    path: 'overview',
-    component: DevtoolsOverviewComponent,
-    data: { title: 'Devtools - Overview' },
-  },
-  {
-    path: 'ci-cd-integration',
-    component: DevtoolsCiCdComponent,
-    data: { title: 'Devtools - CI/CD integration' },
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
-  declarations: [DevtoolsCiCdComponent, DevtoolsOverviewComponent],
-})
-export class DevtoolsModule {}
--- a/src/app/homepage/pages/devtools/devtools.routes.ts
+++ b/src/app/homepage/pages/devtools/devtools.routes.ts
@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+import { DevtoolsOverviewComponent } from './overview/overview.component';
+import { DevtoolsCiCdComponent } from './ci-cd/ci-cd.component';
+
+export const DEVTOOLS_ROUTES: Routes = [
+  {
+    path: 'overview',
+    component: DevtoolsOverviewComponent,
+    data: { title: 'Devtools - Overview' },
+  },
+  {
+    path: 'ci-cd-integration',
+    component: DevtoolsCiCdComponent,
+    data: { title: 'Devtools - CI/CD integration' },
+  },
+];
--- a/src/app/homepage/pages/devtools/overview/overview.component.ts
+++ b/src/app/homepage/pages/devtools/overview/overview.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-devtools-overview',
-  templateUrl: './overview.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-devtools-overview',
+    templateUrl: './overview.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CopyButtonComponent, HeaderAnchorDirective],
 })
 export class DevtoolsOverviewComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/discover/who-uses/who-uses.component.ts
+++ b/src/app/homepage/pages/discover/who-uses/who-uses.component.ts
@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-who-uses',
-  templateUrl: './who-uses.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./who-uses.component.scss'],
+    selector: 'app-who-uses',
+    templateUrl: './who-uses.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrls: ['./who-uses.component.scss'],
+    standalone: true,
+    imports: [HeaderAnchorDirective],
 })
 export class WhoUsesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/enterprise/enterprise.component.ts
+++ b/src/app/homepage/pages/enterprise/enterprise.component.ts
@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-enterprise',
-  templateUrl: './enterprise.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-enterprise',
+    templateUrl: './enterprise.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective],
 })
 export class EnterpriseComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/exception-filters/exception-filters.component.ts
+++ b/src/app/homepage/pages/exception-filters/exception-filters.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { BannerCoursesComponent } from '../../../shared/components/banner-courses/banner-courses.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-exception-filters',
-  templateUrl: './exception-filters.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-exception-filters',
+    templateUrl: './exception-filters.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        BannerCoursesComponent,
+        ExtensionPipe,
+    ],
 })
 export class ExceptionFiltersComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/errors/errors.component.ts
+++ b/src/app/homepage/pages/faq/errors/errors.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { BannerDevtoolsComponent } from '../../../../shared/components/banner-devtools/banner-devtools.component';

@Component({
-  selector: 'app-errors',
-  templateUrl: './errors.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-errors',
+    templateUrl: './errors.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        BannerDevtoolsComponent,
+    ],
 })
 export class ErrorsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/faq.routes.ts
+++ b/src/app/homepage/pages/faq/faq.routes.ts
@@ -1,7 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../shared/shared.module';
+import { Routes } from '@angular/router';
 import { ErrorsComponent } from './errors/errors.component';
 import { GlobalPrefixComponent } from './global-prefix/global-prefix.component';
 import { HttpAdapterComponent } from './http-adapter/http-adapter.component';
@@ -12,7 +9,7 @@ import { RawBodyComponent } from './raw-body/raw-body.component';
 import { RequestLifecycleComponent } from './request-lifecycle/request-lifecycle.component';
 import { ServerlessComponent } from './serverless/serverless.component';

-const routes: Routes = [
+export const FAQ_ROUTES: Routes = [
  {
    path: 'global-prefix',
    component: GlobalPrefixComponent,
@@ -59,19 +56,3 @@ const routes: Routes = [
    data: { title: 'Serverless - FAQ' },
  },
 ];
-
-@NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
-  declarations: [
-    GlobalPrefixComponent,
-    HybridApplicationComponent,
-    MultipleServersComponent,
-    HttpAdapterComponent,
-    KeepAliveConnectionsComponent,
-    RequestLifecycleComponent,
-    ErrorsComponent,
-    ServerlessComponent,
-    RawBodyComponent,
-  ],
-})
-export class FaqModule {}
--- a/src/app/homepage/pages/faq/global-prefix/global-prefix.component.ts
+++ b/src/app/homepage/pages/faq/global-prefix/global-prefix.component.ts
@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-global-prefix',
-  templateUrl: './global-prefix.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-global-prefix',
+    templateUrl: './global-prefix.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CopyButtonComponent],
 })
 export class GlobalPrefixComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/http-adapter/http-adapter.component.ts
+++ b/src/app/homepage/pages/faq/http-adapter/http-adapter.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';

@Component({
-  selector: 'app-http-adapter',
-  templateUrl: './http-adapter.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-http-adapter',
+    templateUrl: './http-adapter.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+    ],
 })
 export class HttpAdapterComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/hybrid-application/hybrid-application.component.ts
+++ b/src/app/homepage/pages/faq/hybrid-application/hybrid-application.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-hybrid-application',
-  templateUrl: './hybrid-application.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-hybrid-application',
+    templateUrl: './hybrid-application.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CopyButtonComponent,
+        TabsComponent,
+        HeaderAnchorDirective,
+    ],
 })
 export class HybridApplicationComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/keep-alive-connections/keep-alive-connections.component.ts
+++ b/src/app/homepage/pages/faq/keep-alive-connections/keep-alive-connections.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-keep-alive-connections',
-  templateUrl: './keep-alive-connections.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-keep-alive-connections',
+    templateUrl: './keep-alive-connections.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class KeepAliveConnectionsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/multiple-servers/multiple-servers.component.ts
+++ b/src/app/homepage/pages/faq/multiple-servers/multiple-servers.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-multiple-servers',
-  templateUrl: './multiple-servers.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-multiple-servers',
+    templateUrl: './multiple-servers.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CopyButtonComponent,
+        HeaderAnchorDirective,
+        RouterLink,
+    ],
 })
 export class MultipleServersComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/raw-body/raw-body.component.ts
+++ b/src/app/homepage/pages/faq/raw-body/raw-body.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-raw-body',
-  templateUrl: './raw-body.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-raw-body',
+    templateUrl: './raw-body.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class RawBodyComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/request-lifecycle/request-lifecycle.component.ts
+++ b/src/app/homepage/pages/faq/request-lifecycle/request-lifecycle.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-request-lifecycle',
-  templateUrl: './request-lifecycle.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-request-lifecycle',
+    templateUrl: './request-lifecycle.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        CopyButtonComponent,
+    ],
 })
 export class RequestLifecycleComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/faq/serverless/serverless.component.ts
+++ b/src/app/homepage/pages/faq/serverless/serverless.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-serverless',
-  templateUrl: './serverless.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-serverless',
+    templateUrl: './serverless.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        CopyButtonComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class ServerlessComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/first-steps/first-steps.component.ts
+++ b/src/app/homepage/pages/first-steps/first-steps.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { BannerCoursesComponent } from '../../../shared/components/banner-courses/banner-courses.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-first-steps',
-  templateUrl: './first-steps.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-first-steps',
+    templateUrl: './first-steps.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        CopyButtonComponent,
+        TabsComponent,
+        BannerCoursesComponent,
+        ExtensionPipe,
+    ],
 })
 export class FirstStepsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/async-components/async-components.component.ts
+++ b/src/app/homepage/pages/fundamentals/async-components/async-components.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-async-components',
-  templateUrl: './async-components.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-async-components',
+    templateUrl: './async-components.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CopyButtonComponent,
+        RouterLink,
+        HeaderAnchorDirective,
+    ],
 })
 export class AsyncComponentsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/circular-dependency/circular-dependency.component.ts
+++ b/src/app/homepage/pages/fundamentals/circular-dependency/circular-dependency.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-circular-dependency',
-  templateUrl: './circular-dependency.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-circular-dependency',
+    templateUrl: './circular-dependency.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        ExtensionPipe,
+    ],
 })
 export class CircularDependencyComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/dependency-injection/dependency-injection.component.ts
+++ b/src/app/homepage/pages/fundamentals/dependency-injection/dependency-injection.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { BannerCoursesComponent } from '../../../../shared/components/banner-courses/banner-courses.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-dependency-injection',
-  templateUrl: './dependency-injection.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-dependency-injection',
+    templateUrl: './dependency-injection.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        BannerCoursesComponent,
+        ExtensionPipe,
+    ],
 })
 export class DependencyInjectionComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/discovery-service/discovery-service.component.ts
+++ b/src/app/homepage/pages/fundamentals/discovery-service/discovery-service.component.ts
@@ -1,9 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-discovery-service',
-  templateUrl: './discovery-service.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-discovery-service',
+    templateUrl: './discovery-service.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class DiscoveryServiceComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/dynamic-modules/dynamic-modules.component.ts
+++ b/src/app/homepage/pages/fundamentals/dynamic-modules/dynamic-modules.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { BannerDevtoolsComponent } from '../../../../shared/components/banner-devtools/banner-devtools.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-dynamic-modules',
-  templateUrl: './dynamic-modules.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-dynamic-modules',
+    templateUrl: './dynamic-modules.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        BannerDevtoolsComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class DynamicModulesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/execution-context/execution-context.component.ts
+++ b/src/app/homepage/pages/fundamentals/execution-context/execution-context.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { BannerEnterpriseComponent } from '../../../../shared/components/banner-enterprise/banner-enterprise.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-execution-context',
-  templateUrl: './execution-context.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-execution-context',
+    templateUrl: './execution-context.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        BannerEnterpriseComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class ExecutionContextComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/fundamentals.routes.ts
+++ b/src/app/homepage/pages/fundamentals/fundamentals.routes.ts
@@ -1,7 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../shared/shared.module';
+import { Routes } from '@angular/router';
 import { AsyncComponentsComponent } from './async-components/async-components.component';
 import { CircularDependencyComponent } from './circular-dependency/circular-dependency.component';
 import { DiscoveryServiceComponent } from './discovery-service/discovery-service.component';
@@ -15,7 +12,7 @@ import { ProviderScopesComponent } from './provider-scopes/provider-scopes.compo
 import { UnitTestingComponent } from './unit-testing/unit-testing.component';
 import { LazyLoadingModulesComponent } from './lazy-loading-modules/lazy-loading-modules.component';

-const routes: Routes = [
+export const FUNDAMENTALS_ROUTES: Routes = [
  {
    path: 'dynamic-modules',
    component: DynamicModulesComponent,
@@ -93,22 +90,3 @@ const routes: Routes = [
    data: { title: 'Discovery service' },
  },
 ];
-
-@NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
-  declarations: [
-    AsyncComponentsComponent,
-    PlatformAgnosticismComponent,
-    DependencyInjectionComponent,
-    DynamicModulesComponent,
-    UnitTestingComponent,
-    CircularDependencyComponent,
-    ExecutionContextComponent,
-    ProviderScopesComponent,
-    LifecycleEventsComponent,
-    ModuleRefComponent,
-    LazyLoadingModulesComponent,
-    DiscoveryServiceComponent,
-  ],
-})
-export class FundamentalsModule {}
--- a/src/app/homepage/pages/fundamentals/lazy-loading-modules/lazy-loading-modules.component.ts
+++ b/src/app/homepage/pages/fundamentals/lazy-loading-modules/lazy-loading-modules.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-lazy-loading',
-  templateUrl: './lazy-loading-modules.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-lazy-loading',
+    templateUrl: './lazy-loading-modules.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        ExtensionPipe,
+    ],
 })
 export class LazyLoadingModulesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/lifecycle-events/lifecycle-events.component.ts
+++ b/src/app/homepage/pages/fundamentals/lifecycle-events/lifecycle-events.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';

@Component({
-  selector: 'app-lifecycle-events',
-  templateUrl: './lifecycle-events.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-lifecycle-events',
+    templateUrl: './lifecycle-events.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+    ],
 })
 export class LifecycleEventsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/module-reference/module-reference.component.ts
+++ b/src/app/homepage/pages/fundamentals/module-reference/module-reference.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { BannerDevtoolsComponent } from '../../../../shared/components/banner-devtools/banner-devtools.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-module-ref',
-  templateUrl: './module-reference.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-module-ref',
+    templateUrl: './module-reference.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        CopyButtonComponent,
+        TabsComponent,
+        HeaderAnchorDirective,
+        RouterLink,
+        BannerDevtoolsComponent,
+        ExtensionPipe,
+    ],
 })
 export class ModuleRefComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/platform-agnosticism/platform-agnosticism.component.ts
+++ b/src/app/homepage/pages/fundamentals/platform-agnosticism/platform-agnosticism.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-platform-agnosticism',
-  templateUrl: './platform-agnosticism.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-platform-agnosticism',
+    templateUrl: './platform-agnosticism.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, RouterLink],
 })
 export class PlatformAgnosticismComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/provider-scopes/provider-scopes.component.ts
+++ b/src/app/homepage/pages/fundamentals/provider-scopes/provider-scopes.component.ts
@@ -1,9 +1,20 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';
+import { BannerCoursesComponent } from '../../../../shared/components/banner-courses/banner-courses.component';

@Component({
-  selector: 'app-provider-scopes',
-  templateUrl: './provider-scopes.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-provider-scopes',
+    templateUrl: './provider-scopes.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+        BannerCoursesComponent,
+    ],
 })
 export class ProviderScopesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/fundamentals/unit-testing/unit-testing.component.ts
+++ b/src/app/homepage/pages/fundamentals/unit-testing/unit-testing.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { BannerCoursesComponent } from '../../../../shared/components/banner-courses/banner-courses.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-unit-testing',
-  templateUrl: './unit-testing.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-unit-testing',
+    templateUrl: './unit-testing.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        BannerCoursesComponent,
+        ExtensionPipe,
+    ],
 })
 export class UnitTestingComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/cli-plugin/cli-plugin.component.ts
+++ b/src/app/homepage/pages/graphql/cli-plugin/cli-plugin.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-cli-plugin',
-  templateUrl: './cli-plugin.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-cli-plugin',
+    templateUrl: './cli-plugin.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        ExtensionPipe,
+    ],
 })
 export class CliPluginComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/complexity/complexity.component.ts
+++ b/src/app/homepage/pages/graphql/complexity/complexity.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-complexity',
-  templateUrl: './complexity.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-complexity',
+    templateUrl: './complexity.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class ComplexityComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/directives/directives.component.ts
+++ b/src/app/homepage/pages/graphql/directives/directives.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-directives',
-  templateUrl: './directives.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-directives',
+    templateUrl: './directives.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class DirectivesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/extensions/extensions.component.ts
+++ b/src/app/homepage/pages/graphql/extensions/extensions.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-extensions',
-  templateUrl: './extensions.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-extensions',
+    templateUrl: './extensions.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+    ],
 })
 export class ExtensionsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/federation/federation.component.ts
+++ b/src/app/homepage/pages/graphql/federation/federation.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-federation',
-  templateUrl: './federation.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-federation',
+    templateUrl: './federation.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class FederationComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/field-middleware/field-middleware.component.ts
+++ b/src/app/homepage/pages/graphql/field-middleware/field-middleware.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-field-middleware',
-  templateUrl: './field-middleware.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-field-middleware',
+    templateUrl: './field-middleware.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+    ],
 })
 export class FieldMiddlewareComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/graphql.routes.ts
+++ b/src/app/homepage/pages/graphql/graphql.routes.ts
@@ -1,7 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '../../../shared/shared.module';
+import { Routes } from '@angular/router';
 import { CliPluginComponent } from './cli-plugin/cli-plugin.component';
 import { ComplexityComponent } from './complexity/complexity.component';
 import { DirectivesComponent } from './directives/directives.component';
@@ -21,7 +18,7 @@ import { SharingModelsComponent } from './sharing-models/sharing-models.componen
 import { SubscriptionsComponent } from './subscriptions/subscriptions.component';
 import { UnionsAndEnumsComponent } from './unions-and-enums/unions.component';

-const routes: Routes = [
+export const GRAPHQL_ROUTES: Routes = [
  {
    path: 'quick-start',
    component: QuickStartComponent,
@@ -133,28 +130,3 @@ const routes: Routes = [
    data: { title: 'GraphQL + TypeScript - Generating SDL' },
  },
 ];
-
-@NgModule({
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
-  declarations: [
-    QuickStartComponent,
-    ResolversMapComponent,
-    MutationsComponent,
-    SubscriptionsComponent,
-    DirectivesComponent,
-    UnionsAndEnumsComponent,
-    PluginsComponent,
-    GuardsInterceptorsComponent,
-    ScalarsComponent,
-    SchemaGeneratorComponent,
-    MappedTypesComponent,
-    SharingModelsComponent,
-    CliPluginComponent,
-    FederationComponent,
-    ComplexityComponent,
-    ExtensionsComponent,
-    FieldMiddlewareComponent,
-    InterfacesComponent,
-  ],
-})
-export class GraphqlModule {}
--- a/src/app/homepage/pages/graphql/guards-interceptors/guards-interceptors.component.ts
+++ b/src/app/homepage/pages/graphql/guards-interceptors/guards-interceptors.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-guards-interceptors',
-  templateUrl: './guards-interceptors.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-guards-interceptors',
+    templateUrl: './guards-interceptors.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+    ],
 })
 export class GuardsInterceptorsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/interfaces/interfaces.component.ts
+++ b/src/app/homepage/pages/graphql/interfaces/interfaces.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-interfaces',
-  templateUrl: './interfaces.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-interfaces',
+    templateUrl: './interfaces.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+    ],
 })
 export class InterfacesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/mapped-types/mapped-types.component.ts
+++ b/src/app/homepage/pages/graphql/mapped-types/mapped-types.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-mapped-types',
-  templateUrl: './mapped-types.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-mapped-types',
+    templateUrl: './mapped-types.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class MappedTypesComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/mutations/mutations.component.ts
+++ b/src/app/homepage/pages/graphql/mutations/mutations.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-mutations',
-  templateUrl: './mutations.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-mutations',
+    templateUrl: './mutations.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        CopyButtonComponent,
+    ],
 })
 export class MutationsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/plugins/plugins.component.ts
+++ b/src/app/homepage/pages/graphql/plugins/plugins.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-plugins',
-  templateUrl: './plugins.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-plugins',
+    templateUrl: './plugins.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class PluginsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/quick-start/quick-start.component.ts
+++ b/src/app/homepage/pages/graphql/quick-start/quick-start.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { BannerCoursesGraphQLCodeFirstComponent } from '../../../../shared/components/banner-courses-graphql-cf/banner-courses-graphql-cf.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-quick-start',
-  templateUrl: './quick-start.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-quick-start',
+    templateUrl: './quick-start.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        BannerCoursesGraphQLCodeFirstComponent,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+    ],
 })
 export class QuickStartComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/resolvers-map/resolvers-map.component.ts
+++ b/src/app/homepage/pages/graphql/resolvers-map/resolvers-map.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { BannerDevtoolsComponent } from '../../../../shared/components/banner-devtools/banner-devtools.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-resolvers-map',
-  templateUrl: './resolvers-map.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-resolvers-map',
+    templateUrl: './resolvers-map.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        BannerDevtoolsComponent,
+        ExtensionPipe,
+    ],
 })
 export class ResolversMapComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/scalars/scalars.component.ts
+++ b/src/app/homepage/pages/graphql/scalars/scalars.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';

@Component({
-  selector: 'app-scalars',
-  templateUrl: './scalars.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-scalars',
+    templateUrl: './scalars.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, CopyButtonComponent],
 })
 export class ScalarsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/schema-generator/schema-generator.component.ts
+++ b/src/app/homepage/pages/graphql/schema-generator/schema-generator.component.ts
@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';

@Component({
-  selector: 'app-schema-generator',
-  templateUrl: './schema-generator.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-schema-generator',
+    templateUrl: './schema-generator.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CopyButtonComponent, HeaderAnchorDirective],
 })
 export class SchemaGeneratorComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/sharing-models/sharing-models.component.ts
+++ b/src/app/homepage/pages/graphql/sharing-models/sharing-models.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-sharing-models',
-  templateUrl: './sharing-models.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-sharing-models',
+    templateUrl: './sharing-models.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+    ],
 })
 export class SharingModelsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/subscriptions/subscriptions.component.ts
+++ b/src/app/homepage/pages/graphql/subscriptions/subscriptions.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { RouterLink } from '@angular/router';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-subscriptions',
-  templateUrl: './subscriptions.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-subscriptions',
+    templateUrl: './subscriptions.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        RouterLink,
+        ExtensionPipe,
+    ],
 })
 export class SubscriptionsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/graphql/unions-and-enums/unions.component.ts
+++ b/src/app/homepage/pages/graphql/unions-and-enums/unions.component.ts
@@ -1,9 +1,18 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-unions-enums',
-  templateUrl: './unions-and-enums.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-unions-enums',
+    templateUrl: './unions-and-enums.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        RouterLink,
+    ],
 })
 export class UnionsAndEnumsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/guards/guards.component.ts
+++ b/src/app/homepage/pages/guards/guards.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { BannerEnterpriseComponent } from '../../../shared/components/banner-enterprise/banner-enterprise.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-guards',
-  templateUrl: './guards.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-guards',
+    templateUrl: './guards.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        BannerEnterpriseComponent,
+        ExtensionPipe,
+    ],
 })
 export class GuardsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/interceptors/interceptors.component.ts
+++ b/src/app/homepage/pages/interceptors/interceptors.component.ts
@@ -1,9 +1,24 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';
+import { BannerDevtoolsComponent } from '../../../shared/components/banner-devtools/banner-devtools.component';
+import { CopyButtonComponent } from '../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-interceptors',
-  templateUrl: './interceptors.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-interceptors',
+    templateUrl: './interceptors.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        RouterLink,
+        BannerDevtoolsComponent,
+        CopyButtonComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class InterceptorsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/introduction/introduction.component.ts
+++ b/src/app/homepage/pages/introduction/introduction.component.ts
@@ -1,9 +1,13 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BasePageComponent } from '../page/page.component';
+import { HeaderAnchorDirective } from '../../../shared/directives/header-anchor.directive';
+import { RouterLink } from '@angular/router';

@Component({
-  selector: 'app-introduction',
-  templateUrl: './introduction.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+    selector: 'app-introduction',
+    templateUrl: './introduction.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HeaderAnchorDirective, RouterLink]
 })
 export class IntroductionComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/microservices/basics/basics.component.ts
+++ b/src/app/homepage/pages/microservices/basics/basics.component.ts
@@ -1,9 +1,26 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { BannerEnterpriseComponent } from '../../../../shared/components/banner-enterprise/banner-enterprise.component';
+import { RouterLink } from '@angular/router';
+import { BannerDevtoolsComponent } from '../../../../shared/components/banner-devtools/banner-devtools.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-basics',
-  templateUrl: './basics.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-basics',
+    templateUrl: './basics.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        BannerEnterpriseComponent,
+        RouterLink,
+        BannerDevtoolsComponent,
+        ExtensionPipe,
+    ],
 })
 export class BasicsComponent extends BasePageComponent {}
--- a/src/app/homepage/pages/microservices/custom-transport/custom-transport.component.ts
+++ b/src/app/homepage/pages/microservices/custom-transport/custom-transport.component.ts
@@ -1,9 +1,22 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { BasePageComponent } from '../../page/page.component';
+import { RouterLink } from '@angular/router';
+import { HeaderAnchorDirective } from '../../../../shared/directives/header-anchor.directive';
+import { CopyButtonComponent } from '../../../../shared/components/copy-button/copy-button.component';
+import { TabsComponent } from '../../../../shared/components/tabs/tabs.component';
+import { ExtensionPipe } from '../../../../shared/pipes/extension.pipe';

@Component({
-  selector: 'app-custom-transport',
-  templateUrl: './custom-transport.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-custom-transport',
+    templateUrl: './custom-transport.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        RouterLink,
+        HeaderAnchorDirective,
+        CopyButtonComponent,
+        TabsComponent,
+        ExtensionPipe,
+    ],
 })
 export class CustomTransportComponent extends BasePageComponent {}
--- a/Show More
+++ b/Show More