feat(blog): welcome message (#401)

Author: DDonochVA

apps/blog/src/assets/i18n/en.json

@@ -1,5 +1,9 @@
 {
   "homePage": {
+    "welcomeMessage": {
+      "description": "This is the place where you can learn Angular, discover best practices, explore advanced techniques, and stay updated with the latest news and trends.",
+      "descriptionAriaLabel": "Visit House of Angular website"
+    },
     "seeAll": "See all the articles",
     "latest": "Latest Articles",
     "recommended": "Recommended Articles",

apps/blog/src/assets/i18n/pl.json

@@ -1,5 +1,9 @@
 {
   "homePage": {
+    "welcomeMessage": {
+      "description": "Miejsce, gdzie możesz nauczyć się Angulara, odkrywać najlepsze praktyki, eksplorować zaawansowane techniki i być na bieżąco z najnowszymi Angularowymi wiadomościami oraz trendami.",
+      "descriptionAriaLabel": "Sprawdź stronę House of Angular"
+    },
     "seeAll": "Zobacz wszystkie",
     "latest": "Najnowsze Artykuły",
     "recommended": "Polecane Artykuły",

libs/blog/home/feature-home/src/lib/home-page/home-page.component.html

@@ -1,3 +1,5 @@
+<al-welcome-message />
+
 <al-latest-articles />
 
 <al-articles-list />

libs/blog/home/feature-home/src/lib/home-page/home-page.component.ts

@@ -6,6 +6,7 @@ import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
 import { FeatureLatestArticlesComponent } from '@angular-love/feature-latest-articles';
 
 import { hoaHireUs, partnersList } from './partners';
+import { WelcomeMessageComponent } from './welcome-message/welcome-message.component';
 
 @Component({
   selector: 'al-home-page',
@@ -14,6 +15,7 @@ import { hoaHireUs, partnersList } from './partners';
     PartnersComponent,
     FeatureLatestArticlesComponent,
     ArticlesListContainerComponent,
+    WelcomeMessageComponent,
   ],
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],

libs/blog/home/feature-home/src/lib/home-page/welcome-message/welcome-message.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslocoDirective } from '@jsverse/transloco';
+
+@Component({
+  standalone: true,
+  selector: 'al-welcome-message',
+  template: `
+    <section
+      *transloco="let t; read: 'homePage.welcomeMessage'"
+      class="flex flex-col items-center justify-center space-y-3 py-3 text-center"
+    >
+      <h1 class="text-4xl font-bold">Angular.love Blog</h1>
+      <p class="px-8">
+        {{ t('description') }}
+      </p>
+      <p class="px-8">
+        Powered by
+        <a
+          class="text-al-primary font-bold hover:underline"
+          [attr.aria-label]="t('descriptionAriaLabel')"
+          target="_blank"
+          href="https://houseofangular.io/"
+        >
+          House of Angular
+        </a>
+      </p>
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslocoDirective],
+})
+export class WelcomeMessageComponent {}