Repository: angular
Issue: Optimize and Refactor the code
Labels: help wanted,good first issue,area: docs-infra

### Which @angular/* package(s) are relevant/related to the feature request?

_No response_

### Description

In the Footer component, you added static code.


```
<div class="adev-footer-container">
  <div class="adev-footer-columns">
    <div>
      <h2>Social Media</h2>
      <ul>
        <li>
          <a [href]="MEDIUM" title="Angular blog">Blog</a>
        </li>
        <li>
          <a [href]="X" title="X (formerly Twitter)">X (formerly Twitter)</a>
        </li>
        <li>
          <a [href]="YOUTUBE" title="YouTube">YouTube</a>
        </li>
        <li>
          <a
            href="https://discord.gg/angular"
            title="Join the discussions at Angular Community Discord server."
          >
            Discord
          </a>
        </li>
        <li>
          <a [href]="GITHUB" title="GitHub">GitHub</a>
        </li>
        <li>
          <a
            href="https://stackoverflow.com/questions/tagged/angular"
            title="Stack Overflow: where the community answers your technical Angular questions."
          >
            Stack Overflow
          </a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Community</h2>
      <ul>
        <li>
          <a
            href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md"
            title="Contribute to Angular"
          >
            Contribute
          </a>
        </li>
        <li>
          <a
            href="https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md"
            title="Treating each other with respect."
          >
            Code of Conduct
          </a>
        </li>
        <li>
          <a
            href="https://github.com/angular/angular/issues"
            title="Post issues and suggestions on github."
          >
            Report Issues
          </a>
        </li>
        <li>
          <a
            href="https://devlibrary.withgoogle.com/products/angular?sort=updated"
            title="Google's DevLibrary"
          >
            Google's DevLibrary
          </a>
        </li>
        <li>
          <a
            href="https://developers.google.com/community/experts/directory?specialization=angular"
            title="Angular Google Developer Experts"
          >
            Angular Google Developer Experts
          </a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Resources</h2>
      <ul>
        <li>
          <a routerLink="/press-kit" title="Press contacts, logos, and branding.">Press Kit</a>
        </li>
        <li>
          <a routerLink="/roadmap" title="Roadmap">Roadmap</a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Languages</h2>
      <ul>
        <li>
          <a href="https://angular.cn/" title="简体中文版">简体中文版</a>
        </li>
        <li>
          <a href="https://angular.tw/" title="正體中文版">正體中文版</a>
        </li>
        <li>
          <a href="https://angular.jp/" title="日本語版">日本語版</a>
        </li>
        <li>
          <a href="https://angular.kr/" title="한국어">한국어</a>
        </li>
        <li>
          <a
            href="https://angular-gr.web.app"
            title="&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά"
          >
            &Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά
          </a>
        </li>
      </ul>
    </div>
  </div>
  <p class="docs-license">
    Super-powered by Google ©2010-2024. Code licensed under an
    <a routerLink="/license" title="License text">MIT-style License</a>
    . Documentation licensed under
    <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
    .
  </p>
</div>
```


### Proposed solution

Solution :

**footer.component.html**

```
<div class="adev-footer-container">
  <div class="adev-footer-columns">
    <div>
      <h2>Social Media</h2>
      <ul>
        <li *ngFor="let link of links.socialMedia | keyvalue">
          <a [href]="link.value.href" [title]="link.value.title">{{ link.key | titlecase }}</a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Community</h2>
      <ul>
        <li *ngFor="let link of links.community | keyvalue">
          <a [href]="link.value.href" [title]="link.value.title">{{ link.key | titlecase }}</a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Resources</h2>
      <ul>
        <li *ngFor="let link of links.resources | keyvalue">
          <a
            *ngIf="link.value.routerLink"
            [routerLink]="link.value.routerLink"
            [title]="link.value.title"
            >{{ link.key | titlecase }}</a
          >
          <a *ngIf="link.value.href" [href]="link.value.href" [title]="link.value.title">{{
            link.key | titlecase
          }}</a>
        </li>
      </ul>
    </div>
    <div>
      <h2>Languages</h2>
      <ul>
        <li *ngFor="let link of links.languages | keyvalue">
          <a [href]="link.value.href" [title]="link.value.title">{{ link.key | titlecase }}</a>
        </li>
      </ul>
    </div>
  </div>
  <p class="docs-license">
    Super-powered by Google ©2010-2024. Code licensed under an
    <a routerLink="/license" title="License text">MIT-style License</a>. Documentation licensed under
    <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
  </p>
</div>
```


**footer.component.ts**

```
readonly links = {
    socialMedia: {
      blog: { href: 'MEDIUM', title: 'Angular blog' },
      x: { href: 'X', title: 'X (formerly Twitter)' },
      youtube: { href: 'YOUTUBE', title: 'YouTube' },
      discord: {
        href: 'https://discord.gg/angular',
        title: 'Join the discussions at Angular Community Discord server.',
      },
      github: { href: 'GITHUB', title: 'GitHub' },
      stackOverflow: {
        href: 'https://stackoverflow.com/questions/tagged/angular',
        title:
          'Stack Overflow: where the community answers your technical Angular questions.',
      },
    },
    community: {
      contribute: {
        href: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
        title: 'Contribute to Angular',
      },
      codeOfConduct: {
        href: 'https://github.com/angular/code-of-conduct/blob/main/CODE_OF_CONDUCT.md',
        title: 'Treating each other with respect.',
      },
      reportIssues: {
        href: 'https://github.com/angular/angular/issues',
        title: 'Post issues and suggestions on github.',
      },
      devLibrary: {
        href: 'https://devlibrary.withgoogle.com/products/angular?sort=updated',
        title: "Google's DevLibrary",
      },
      experts: {
        href: 'https://developers.google.com/community/experts/directory?specialization=angular',
        title: 'Angular Google Developer Experts',
      },
    },
    resources: {
      pressKit: {
        routerLink: '/press-kit',
        title: 'Press contacts, logos, and branding.',
      },
      roadmap: { routerLink: '/roadmap', title: 'Roadmap' },
    },
    languages: {
      chineseSimplified: {
        href: 'https://angular.cn/',
        title: '简体中文版',
      },
      chineseTraditional: {
        href: 'https://angular.tw/',
        title: '正體中文版',
      },
      japanese: { href: 'https://angular.jp/', title: '日本語版' },
      korean: { href: 'https://angular.kr/', title: '한국어' },
      greek: {
        href: 'https://angular-gr.web.app',
        title: '&Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;ά',
      },
    },
  };
```

### Alternatives considered

-