feat(events): shadcn Alert replaces hand-rolled callout aside

Install the shadcn-vue Alert primitives (Alert / AlertTitle /
AlertDescription + the alertVariants cva) at
src/components/ui/alert. Files mirrored from the registry JSON.

EventsView: the bouge.ariege.io heads-up at the top of the listing
was a hand-styled <aside> with a <p> kicker and a body paragraph;
swap to <Alert><AlertTitle>…</AlertTitle><AlertDescription>…
</AlertDescription></Alert>. Keep bg-card + text-foreground/85
overrides so it still reads as a quiet card on the green hero band
rather than the variant default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/ui/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

src/components/ui/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

src/views/EventsView.vue

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 const { t } = useI18n()
 
@@ -48,14 +49,14 @@ const events = [
         <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
           {{ t('events.page.lede') }}
         </p>
-        <aside
+        <Alert class="mt-8 max-w-prose bg-card text-foreground/85">
-          class="mt-8 max-w-prose rounded-md border border-border bg-card p-4 text-sm text-foreground/85"
+          <AlertTitle class="text-xs uppercase tracking-wider text-accent">
-        >
-          <p class="text-xs font-semibold uppercase tracking-wider text-accent">
             {{ t('events.page.noteHeading') }}
-          </p>
+          </AlertTitle>
-          <p class="mt-1">{{ t('events.page.calendarNote') }}</p>
+          <AlertDescription>
-        </aside>
+            {{ t('events.page.calendarNote') }}
+          </AlertDescription>
+        </Alert>
       </div>
     </section>