Add Markdown support and update member features

The commit adds Markdown rendering capabilities and makes several UI/UX
improvements across member-related features including profile display,
peer support badges, and navigation structure.

Includes:
- Added @tailwindcss/typography plugin
- New Markdown rendering composable
- Simplified member navigation links
- Enhanced member profile layout and styling
- Added peer support badge component
- Improved mobile responsiveness
- Removed redundant icons and simplified UI

app/components/PeerSupportBadge.vue

@@ -0,0 +1,87 @@
+<template>
+  <!-- Corner Sticker Badge -->
+  <div
+    v-if="type === 'sticker'"
+    class="absolute top-2 right-2 z-10"
+    :title="title"
+  >
+    <div
+      class="relative bg-gradient-to-br from-purple-500 to-purple-600 text-white px-3 py-2 rounded-lg shadow-lg border-2 border-purple-400/50 transform rotate-3 hover:rotate-0 transition-transform"
+    >
+      <div class="flex flex-col items-center gap-0.5">
+        <Icon name="heroicons:chat-bubble-left-right-solid" class="w-4 h-4" />
+        <span
+          class="text-[10px] font-bold uppercase tracking-wide leading-tight"
+          >Peer<br />Support</span
+        >
+      </div>
+      <!-- Sparkle effect -->
+      <div
+        class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-300 rounded-full animate-pulse"
+      ></div>
+    </div>
+  </div>
+
+  <!-- Inline Badge -->
+  <div
+    v-else
+    :class="[
+      'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium transition-all',
+      variant === 'default' &&
+        'bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30',
+      variant === 'subtle' &&
+        'bg-purple-500/10 text-purple-400 border-purple-500/20',
+      variant === 'solid' &&
+        'bg-purple-500 text-white border-purple-600 hover:bg-purple-600',
+    ]"
+    :title="title"
+  >
+    <Icon
+      name="heroicons:chat-bubble-left-right"
+      :class="[
+        'w-3.5 h-3.5',
+        variant === 'default' && 'text-purple-300',
+        variant === 'subtle' && 'text-purple-400',
+        variant === 'solid' && 'text-white',
+      ]"
+    />
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * Badge type - inline or corner sticker
+   * @values inline, sticker
+   */
+  type: {
+    type: String,
+    default: "inline",
+    validator: (value) => ["inline", "sticker"].includes(value),
+  },
+  /**
+   * Display variant of the badge (for inline type)
+   * @values default, subtle, solid
+   */
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "subtle", "solid"].includes(value),
+  },
+  /**
+   * Custom label text (defaults to "Offering Peer Support")
+   */
+  label: {
+    type: String,
+    default: "Offering Peer Support",
+  },
+  /**
+   * Tooltip/title text
+   */
+  title: {
+    type: String,
+    default: "This member offers 1:1 peer support sessions",
+  },
+});
+</script>