feat(SPA): profile page, display name and the new account menu

web/src/components/ProfileCard.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+	title: string
+	description: string
+}>()
+</script>
+
+<template>
+	<section class="border border-default bg-default">
+		<div class="flex flex-col gap-3.5 p-4 lg:p-5">
+			<div class="flex flex-col gap-0.5">
+				<h2 class="text-base/5 font-semibold text-highlighted">{{ title }}</h2>
+				<p class="text-pretty text-muted">{{ description }}</p>
+			</div>
+			<slot />
+		</div>
+		<div
+			v-if="$slots.footer"
+			class="flex items-center gap-3 border-t border-default bg-muted px-4 py-3 lg:px-5"
+		>
+			<slot name="footer" />
+		</div>
+	</section>
+</template>