feat: add Avatar component and integrate into index page

src/components/Avatar/_avatar.scss

@@ -0,0 +1,21 @@
+@use '../../styles/tokens/typography' as *;
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    @include text-base;
+    color: var(--nds-color-on-primary);
+    background-color: var(--nds-disabled);
+  }
+}

src/components/Avatar/avatar.astro

@@ -0,0 +1,31 @@
+---
+import { ProfileIcon } from '../Icons';
+export interface Props {
+  type:        'photo' | 'initials';
+  name: string;
+  image?: string;
+}
+const { type, name, image } = Astro.props;
+---
+
+<div class={`avatar`}>
+  {type === 'photo' && image ? (
+    <div class="avatar__content avatar__content--photo">
+      <img
+        src={image}
+        alt={name}
+        class="avatar__content"
+        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+      />
+      <span class="avatar__fallback" style="display:none;">
+        <ProfileIcon size={24}/>
+      </span>
+    </div>
+  ) : (
+    <span class="avatar__content">{name.split(' ').map(word => word[0]).join('').toUpperCase()}</span>
+  )}
+</div>
+
+<style lang="scss">
+@use './_avatar.scss';
+</style>