fix(a11y): add focus effects

Author: wazeerc

packages/frontendmu-nuxt/components/cards/event-card-modern.vue

@@ -26,7 +26,7 @@ const props = defineProps({
 <template>
   <div class="py-2 group">
     <div
-      class="relative rounded-xl flex flex-col md:flex-row p-4 md:p-0 gap-2 group bg-white dark:bg-verse-900/10 dark:border-verse-100/10 group-hover:shadow-lg transition-all duration-300 border-2 border-verse-100 group-hover:border-verse-400 group-hover:scale-105"
+      class="relative rounded-xl flex flex-col md:flex-row p-4 md:p-0 gap-2 group bg-white dark:bg-verse-900/10 dark:border-verse-100/10 group-hover:shadow-lg group-focus-within:shadow-lg transition-all duration-300 border-2 border-verse-100 group-hover:border-verse-400 group-focus-within:border-verse-400 group-hover:scale-105 group-focus-within:scale-105"
     >
       <!-- Date -->
       <div v-if="event.Date" class="">
@@ -44,7 +44,7 @@ const props = defineProps({
 
       <!-- Title -->
       <h3
-        class="leading-2 text-xl font-semibold flex-1 py-2 text-verse-500 dark:text-verse-400 group-hover:text-verse-500 dark:group-hover:text-verse-100"
+        class="leading-2 text-xl font-semibold flex-1 py-2 text-verse-500 dark:text-verse-400 group-hover:text-verse-500 group-focus-within:text-verse-500  dark:group-hover:text-verse-100 dark:group-focus-within:text-verse-100"
       >
         <NuxtLink :href="`/meetup/${event.id}`" class="w-[300px] md:w-96 focus:outline-none">
           <span class="absolute inset-0" aria-hidden="true" />