Add period badge to contributor card

Author: PabloG02

src/app/features/landing/components/contributor-card/contributor-card.component.css

@@ -66,6 +66,37 @@
   }
 }
 
+.name-meta {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  @media (width > 576px) {
+    justify-content: space-between;
+  }
+}
+
+.period {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  box-shadow: rgba(0, 0, 0, 0.02) 0 5px 5px 0;
+  border-radius: 16px;
+  background-color: var(--contact-info-item-bg);
+  padding: 6px 10px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  opacity: 0.75;
+
+  svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+}
+
 .organizations {
   display: flex;
   gap: 8px;

src/app/features/landing/components/contributor-card/contributor-card.component.html

@@ -7,12 +7,20 @@
     <div>
       <div class="name">
         <p>{{ contributor().name }}</p>
-        <div class="organizations">
-          @for (organization of contributor().organizations; track $index) {
-            <div class="organization" [style.--bg-color]="organization.color">
-              <span class="tooltip">{{ organization.fullName }}</span>
-              <p>{{ organization.acronym }}</p>
-            </div>
+        <div class="name-meta">
+          <div class="organizations">
+            @for (organization of contributor().organizations; track $index) {
+              <div class="organization" [style.--bg-color]="organization.color">
+                <span class="tooltip">{{ organization.fullName }}</span>
+                <p>{{ organization.acronym }}</p>
+              </div>
+            }
+          </div>
+          @if (contributor().period) {
+            <span class="period">
+              <svg-icon src="assets/icons/fluent-icons/ic_fluent_calendar_12_filled.svg" />
+              {{ contributor().period }}
+            </span>
           }
         </div>
       </div>

src/app/features/landing/models/contributor.model.ts

@@ -10,4 +10,5 @@ export interface Contributor {
     github?: string;
   };
   organizations: Organization[];
+  period?: string;
 }

src/app/features/landing/pages/landing/landing.component.html

@@ -190,7 +190,7 @@ <h2>Citing</h2>
 </section>
 <section>
   <div>
-    <h2>Authors</h2>
+    <h2>Project Maintainers</h2>
     @defer (on idle) {
       <div class="authors">
         @for (author of (getAuthors() | async); track $index) {