refactor(about): simplify team member cards and reduce layout complexity

removes member bios and usernames while stripping down card container styles for a more minimal design. updates the skeleton loader dimensions to reflect these layout changes.

Author: vladjerca

projects/client/src/lib/sections/about/components/MeetTheTeam.svelte

@@ -58,8 +58,8 @@
   }
 
   .team-member-skeleton {
-    height: var(--ni-248);
-    border-radius: var(--border-radius-xxl);
+    height: var(--ni-160);
+    border-radius: var(--border-radius-xl);
     background: color-mix(
       in srgb,
       var(--color-card-background) 60%,

projects/client/src/lib/sections/about/components/TeamMemberCard.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import Link from "$lib/components/link/Link.svelte";
-  import ProfileImage from "$lib/sections/profile-banner/ProfileImage.svelte";
-  import * as m from "$lib/features/i18n/messages.ts";
   import type { UserProfile } from "$lib/requests/models/UserProfile.ts";
+  import ProfileImage from "$lib/sections/profile-banner/ProfileImage.svelte";
   import { toDisplayableName } from "$lib/utils/profile/toDisplayableName.ts";
   import { UrlBuilder } from "$lib/utils/url/UrlBuilder.ts";
 
@@ -46,17 +45,11 @@
       {:else}
         <span class="team-member-name">{displayName}</span>
       {/if}
-
-      <span class="secondary team-member-username">@{member.username}</span>
     </div>
 
     {#if member.location}
       <span class="secondary team-member-location">{member.location}</span>
     {/if}
-
-    {#if member.about}
-      <p class="secondary team-member-bio">{member.about}</p>
-    {/if}
   </div>
 </div>
 
@@ -69,33 +62,7 @@
     align-items: center;
     gap: var(--gap-m);
 
-    padding: var(--gap-xl);
-
-    background: color-mix(
-      in srgb,
-      var(--color-card-background) 90%,
-      transparent
-    );
-    border: var(--border-thickness-xxs) solid
-      color-mix(in srgb, var(--color-border) 60%, transparent);
-    border-radius: var(--border-radius-xxl);
-
     text-align: center;
-
-    transition:
-      border-color var(--transition-increment) ease-in-out,
-      background var(--transition-increment) ease-in-out;
-
-    @include for-mouse {
-      &:hover {
-        border-color: color-mix(in srgb, var(--purple-500) 40%, transparent);
-        background: color-mix(
-          in srgb,
-          var(--color-card-background) 95%,
-          var(--purple-500) 5%
-        );
-      }
-    }
   }
 
   .team-member-avatar-wrapper {
@@ -141,10 +108,6 @@
     }
   }
 
-  .team-member-username {
-    font-size: var(--ni-12);
-  }
-
   .team-member-location {
     font-size: var(--ni-12);
     color: var(--color-text-secondary);
@@ -153,16 +116,4 @@
       content: "📍 ";
     }
   }
-
-  .team-member-bio {
-    font-size: var(--ni-12);
-    margin-top: var(--gap-xxs);
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.5;
-  }
 </style>