feat(main): button for writing rules page

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

@@ -43,6 +43,11 @@
       "description": "Do you have an idea for an article? Would you like to start contributing and creating the Angular Community with us?",
       "buttonText": "FILL OUT THE FORM"
     },
+    "articleWritingRules": {
+      "title": "Article Writing Rules",
+      "description": "Hey! Here are some practical tips to help you get started and make your writing stand out",
+      "buttonText": "DISCOVER WRITING TIPS"
+    },
     "benefits": {
       "title": "How will you develop through this?",
       "items": [

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

@@ -46,6 +46,11 @@
       "description": "Masz pomysł na artykuł? Chciałbyś zacząć przyczyniać się do tworzenia społeczności Angulara z nami?",
       "buttonText": "WYPEŁNIJ FORMULARZ"
     },
+    "articleWritingRules": {
+      "title": "Zasady pisania artykułów",
+      "description": "Cześć! Oto kilka praktycznych wskazówek, które ułatwią Ci start i sprawią, że Twoje teksty będą się wyróżniać.",
+      "buttonText": "PRZECZYTAJ WSKAZÓWKI PISANIA ARTYKUŁÓW"
+    },
     "benefits": {
       "title": "Jak się rozwijasz dzięki temu?",
       "items": [

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html

@@ -9,9 +9,64 @@ <h2 class="lg:pt-15 py-4 text-4xl font-bold md:pb-6 md:text-[40px]/[56px]">
       <al-become-author-improvements [improvements]="t('improvements.items')" />
       <al-become-author-benefits [benefits]="t('benefits.items')" />
     </div>
-    <div class="lg:col-span-3">
+    <div class="space-y-6 lg:col-span-3">
       <al-card alGradientCard>
-        <al-become-author-advertisement alCardContent />
+        <al-become-author-advertisement
+          alCardContent
+          [ariaLabel]="'author-ad-title'"
+        >
+          <div>
+            <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
+              {{ t('becomeAuthorCard.title') }}
+            </h3>
+            <p class="py-4 text-base">
+              {{ t('becomeAuthorCard.description') }}
+            </p>
+          </div>
+          <div
+            class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
+          >
+            <a
+              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              href="https://form.typeform.com/to/Zzf1Girt?typeform-source=angular.love"
+              target="_blank"
+            >
+              <p class="text-sm font-bold">
+                {{ t('becomeAuthorCard.buttonText') }}
+              </p>
+            </a>
+          </div>
+        </al-become-author-advertisement>
+      </al-card>
+      <al-card alGradientCard>
+        <al-become-author-advertisement
+          alCardContent
+          [ariaLabel]="'writing-rules-ad-title'"
+        >
+          <div>
+            <h3
+              id="writing-rules-ad-title"
+              class="text-2xl font-bold lg:text-4xl"
+            >
+              {{ t('articleWritingRules.title') }}
+            </h3>
+            <p class="py-4 text-base">
+              {{ t('articleWritingRules.description') }}
+            </p>
+          </div>
+          <div
+            class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
+          >
+            <a
+              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              [routerLink]="'/writing-rules' | alLocalize"
+            >
+              <p class="text-center text-sm font-bold">
+                {{ t('articleWritingRules.buttonText') }}
+              </p>
+            </a>
+          </div>
+        </al-become-author-advertisement>
       </al-card>
     </div>
   </div>

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
 
+import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
 import {
   CardComponent,
   GradientCardDirective,
@@ -19,6 +21,8 @@ import { BecomeAuthorImprovementsComponent } from '../components/become-author-i
     CardComponent,
     BecomeAuthorAdvertisementComponent,
     TranslocoDirective,
+    RouterLink,
+    AlLocalizePipe,
   ],
   templateUrl: './become-author-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-advertisement/become-author-advertisement.component.html

@@ -1,30 +1,11 @@
 <al-card alGradientCard>
-  <section alCardContent aria-labelledby="author-ad-title" class="@container">
-    <div
-      *transloco="let t; read: 'becomeAuthorPage.becomeAuthorCard'"
-      class="@xl:flex-row flex flex-col"
-    >
-      <div>
-        <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
-          {{ t('title') }}
-        </h3>
-        <p class="py-4 text-base">
-          {{ t('description') }}
-        </p>
-      </div>
-      <div
-        class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
-      >
-        <a
-          class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
-          href="https://form.typeform.com/to/Zzf1Girt?typeform-source=angular.love"
-          target="_blank"
-        >
-          <p class="text-sm font-bold">
-            {{ t('buttonText') }}
-          </p>
-        </a>
-      </div>
+  <section
+    alCardContent
+    class="@container"
+    [attr.aria-labelledby]="ariaLabel()"
+  >
+    <div class="@xl:flex-row flex flex-col">
+      <ng-content />
     </div>
   </section>
 </al-card>

libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-advertisement/become-author-advertisement.component.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TranslocoDirective } from '@jsverse/transloco';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import {
   CardComponent,
@@ -10,9 +9,11 @@ import {
   selector: 'al-become-author-advertisement',
   templateUrl: './become-author-advertisement.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [GradientCardDirective, CardComponent, TranslocoDirective],
+  imports: [GradientCardDirective, CardComponent],
   host: {
     'data-testid': 'become-author-advertisement',
   },
 })
-export class BecomeAuthorAdvertisementComponent {}
+export class BecomeAuthorAdvertisementComponent {
+  ariaLabel = input<string>();
+}