Add images; update urls

app/components/mdc/Alert.vue

@@ -0,0 +1,54 @@
+<template>
+  <UAlert
+    :color="color"
+    :variant="variant"
+    :icon="icon"
+    :title="title"
+    :description="description"
+    class="my-4 font-serif"
+  >
+    <template v-if="$slots.default" #description>
+      <div class="prose prose-sm dark:prose-invert max-w-none font-serif">
+        <slot />
+      </div>
+    </template>
+  </UAlert>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+type AlertColor =
+  | "error"
+  | "info"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "neutral";
+
+interface Props {
+  type?: "info" | "warning" | "error" | "success" | "primary";
+  title?: string;
+  description?: string;
+  icon?: string;
+  variant?: "solid" | "outline" | "soft" | "subtle";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "primary",
+  variant: "soft",
+});
+
+// Map type to Nuxt UI 3 color
+const color = computed<AlertColor>(() => {
+  const colorMap: Record<string, AlertColor> = {
+    info: "info",
+    warning: "warning",
+    error: "error",
+    success: "success",
+    primary: "primary",
+  };
+  return colorMap[props.type || "primary"] || "primary";
+});
+</script>