fix markup

Author: totocalcio

apps/web/app/components/namecard/Namecard.vue

@@ -16,10 +16,13 @@ const { backgroundColor } = useUserRole()
 <template>
   <div class="namecard-root">
     <NamecardAvatar :user="user" :is-placeholder="isPlaceholder" />
-    <div class="role" :style="{ '--background-color-role': backgroundColor(user.role ?? 'staff') }">
+    <div
+      class="namecard-role"
+      :style="{ '--background-color-role': backgroundColor(user.role ?? 'staff') }"
+    >
       {{ user.role }}
     </div>
-    <div class="sponsor">
+    <div class="namecard-sponsor">
       <img src="/namecard/support.svg" alt="Supported by Stockmark" />
     </div>
   </div>
@@ -40,7 +43,7 @@ const { backgroundColor } = useUserRole()
   }
 }
 
-.role {
+.namecard-role {
   --background-color-role: color-mix(in srgb, var(--color-vue-blue), #000 20%);
   font-size: 1.3125rem;
   height: 2.0625rem;
@@ -52,7 +55,7 @@ const { backgroundColor } = useUserRole()
   background-color: var(--background-color-role);
 }
 
-.sponsor {
+.namecard-sponsor {
   display: grid;
   place-items: center;
   height: 3.75rem;

apps/web/app/components/namecard/NamecardAvatar.vue

@@ -23,7 +23,7 @@ const COLOR_AVATAR_NAME = {
       <img :alt="user.display_name" :src="user.avatar_url" class="avatar-logo" decoding="async" />
     </div>
     <div class="avatar-name-area">
-      <h2
+      <div
         class="avatar-name"
         :style="{
           '--color-avatar-name': isPlaceholder
@@ -32,9 +32,9 @@ const COLOR_AVATAR_NAME = {
         }"
       >
         {{ user.display_name }}
-      </h2>
+      </div>
     </div>
-    <div class="avatar-footer">Vue Fes Japan 2024</div>
+    <small class="avatar-footer">Vue Fes Japan 2024</small>
   </div>
 </template>