Improve Outsite board formatting

outsite.nl/components/layout/Footer.vue

@@ -3,22 +3,28 @@ en:
   boardTitle: Board
   contactTitle: Contact
   board:
-    - name: Feline (she/her)
+    - name: Feline
+      pronouns: she/her
       role: President
       email: voorzitter
-    - name: Chai (they/them)
+    - name: Chai
+      pronouns: they/them
       role: Vice President
       email: vicevoorzitter
-    - name: Alin (he/they)
+    - name: Alin
+      pronouns: he/they
       role: Secretary
       email: secretaris
-    - name: Nick (he/him)
+    - name: Nick
+      pronouns: he/him
       role: Treasurer
       email: penningmeester
-    - name: Jaye (any/all)
+    - name: Jaye
+      pronouns: any/all
       role: External Affairs
       email: extern
-    - name: Lucia (they/them)
+    - name: Lucia
+      pronouns: they/them
       role: Internal Affairs
       email: intern
   confidential_counsellors: Confidential Counsellors
@@ -30,22 +36,28 @@ nl:
   boardTitle: Bestuur
   contactTitle: Contact
   board:
-    - name: Feline (zij/haar)
+    - name: Feline
+      pronouns: zij/haar
       role: Voorzitter
       email: voorzitter
-    - name: Chai (die/hun)
+    - name: Chai
+      pronouns: die/hun
       role: Vicevoorzitter
       email: vicevoorzitter
-    - name: Alin (hij/die)
+    - name: Alin
+      pronouns: hij/die
       role: Secretaris
       email: secretaris
-    - name: Nick (hij/hem)
+    - name: Nick
+      pronouns: hij/hem
       role: Penningmeester
       email: penningmeester
-    - name: Jaye (alle pronouns)
+    - name: Jaye
+      pronouns: alle pronouns
       role: Commissaris Extern
       email: extern
-    - name: Lucia (die/hun)
+    - name: Lucia
+      pronouns: die/hun
       role: Commissaris Intern
       email: intern
   confidential_counsellors: Vertrouwenspersonen
@@ -86,6 +98,7 @@ const links = [
               <LayoutFooterBoardMember
                 v-for="member in t('board')"
                 :key="member.name"
+                :pronouns="member.pronouns"
                 :role="member.role"
                 :name="member.name"
                 :email="`${member.email}@outsite.nl`"

outsite.nl/components/pages/home/MoreDWH.vue

@@ -37,7 +37,7 @@ nl:
     Naast Outsite organiseert DWH ook activiteiten voor alle leeftijden.
     Denk aan baravonden, voorlichtingen, feesten, eetgroepen en nog veel meer.
     Voor jongeren onder de 18 jaar organiseert DWH Jong&Out meetings.
-  more: Check de DWH website
+  more: Check DWH site
   activities:
     - title: Jong&Out
       description: |

shared/components/layout/footer/BoardMember.vue

@@ -1,11 +1,12 @@
 <script setup>
 defineProps({
   name: { type: String, required: true },
+  pronouns: { type: String, required: false },
   role: { type: String, required: true },
   email: { type: String, required: true },
 })
 
-const nameAsImage = (name, role) => {
+const nameAsImage = (name, pronouns) => {
   const image = `
     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="20">
       <foreignObject width="100%" height="100%" x="0" y="0" externalResourcesRequired="true">
@@ -18,7 +19,7 @@
           word-spacing: 1px;
           ">
           <strong>${name}</strong>
-          | ${role}
+          <span style="color: rgb(180, 171, 183); font-size: 12px;">${pronouns}</span>
         </span>
       </foreignObject>
     </svg>
@@ -29,8 +30,11 @@
 </script>
 
 <template>
-  <div class="leading-tight">
-    <img class="w-full" :src="nameAsImage(name, role)" />
-    <span class="text-gray-400">{{ email }}</span>
+  <div class="leading-tight border border-gray-600 border-l-0 rounded-l-none rounded-2xl pr-4 pb-3 pt-5 relative">
+    <div class="uppercase text-sm tracking-wider font-semibold absolute -top-2.5 bg-gray-700 pr-2">
+      {{ role }}
+    </div>
+    <img class="mb-1" :src="nameAsImage(name, pronouns)" />
+    <div class="text-gray-400 text-sm">{{ email }}</div>
   </div>
 </template>