@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/module.mjs

@@ -28,24 +28,18 @@ const loadNuxtKit = async () => {
     throw new Error('Unable to resolve @nuxt/kit for @brumaombra/ui-vintage. Install the package dependencies or add Nuxt to the consuming app.');
 };
 
-const { addPlugin, createResolver, defineNuxtModule, installModule } = await loadNuxtKit();
+const { addPlugin, createResolver, defineNuxtModule, hasNuxtModule, installModule } = await loadNuxtKit();
+const { version } = moduleRequire('./package.json');
 const resolver = createResolver(import.meta.url);
 const sourceRoot = resolver.resolve('src');
 const stylesPath = resolver.resolve('src/styles.css');
 
-// Check whether the consuming app already has a specific module installed
-const hasModuleInstalled = (modules, moduleName) => {
-    return modules.some((entry) => {
-        if (typeof entry === 'string') return entry === moduleName;
-        if (Array.isArray(entry)) return entry[0] === moduleName;
-        return false;
-    });
-};
-
 export default defineNuxtModule({
     // Module meta information
     meta: {
         name: '@brumaombra/ui-vintage',
+        configKey: 'uiVintage',
+        version,
         compatibility: {
             nuxt: '>=4.0.0'
         }
@@ -63,7 +57,7 @@ export default defineNuxtModule({
         nuxt.options.build.transpile.push(new RegExp(`^${cleanSourceRoot}`));
 
         // Ensure Nuxt Image is available for components that render NuxtImg
-        if (!hasModuleInstalled(nuxt.options.modules, '@nuxt/image')) {
+        if (!hasNuxtModule('@nuxt/image', nuxt)) {
             await installModule('@nuxt/image');
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.8.1",
+    "version": "0.9.0",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -30,12 +30,14 @@
         "src",
         "module.mjs",
         "COMPONENTS.md",
-        "skills"
+        "AGENTS.md"
     ],
     "exports": {
         ".": {
-            "import": "./module.mjs"
+            "import": "./module.mjs",
+            "default": "./module.mjs"
         },
+        "./package.json": "./package.json",
         "./style.css": "./src/styles.css",
         "./accordion": "./src/components/ui/accordion/index.ts",
         "./alert": "./src/components/ui/alert/index.ts",
@@ -107,6 +109,7 @@
         "./slider": "./src/components/ui/slider/index.ts",
         "./slider-form-component": "./src/components/slider-form-component/index.ts",
         "./spinner": "./src/components/ui/spinner/index.ts",
+        "./stat-strip": "./src/components/stat-strip/index.ts",
         "./stepper": "./src/components/ui/stepper/index.ts",
         "./switch": "./src/components/ui/switch/index.ts",
         "./switch-form-component": "./src/components/switch-form-component/index.ts",
@@ -127,32 +130,47 @@
     "scripts": {
         "typecheck": "vue-tsc --noEmit",
         "docs:components": "node scripts/generate-components-doc.mjs",
-        "docs:components:check": "node scripts/generate-components-doc.mjs --check"
+        "docs:components:check": "node scripts/generate-components-doc.mjs --check",
+        "test": "npm --prefix demo-app run test"
     },
     "peerDependencies": {
+        "@hugeicons/core-free-icons": "^4.1.0",
+        "@hugeicons/vue": "^1.0.0",
+        "@nuxt/content": "^3.0.0",
         "@nuxt/image": "^2.0.0",
         "nuxt": "^4.0.0",
+        "tailwindcss": "^4.0.0",
         "vue": "^3.5.0",
-        "vue-i18n": "^9.0.0 || ^10.0.0"
+        "vue-i18n": "^9.0.0 || ^10.0.0 || ^11.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@nuxt/content": {
+            "optional": true
+        }
     },
     "dependencies": {
-        "@hugeicons/core-free-icons": "4.1.1",
-        "@hugeicons/vue": "1.0.5",
         "@internationalized/date": "3.10.0",
-        "@nuxt/kit": "4.4.4",
+        "@nuxt/kit": "4.5.2",
         "@vueuse/core": "14.2.1",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "reka-ui": "2.9.2",
         "shiki": "4.4.3",
-        "tailwind-merge": "3.5.0",
-        "tailwindcss": "4.2.4"
+        "tailwind-merge": "3.5.0"
     },
     "devDependencies": {
-        "@types/node": "24.0.0",
-        "nuxt": "4.4.4",
+        "@hugeicons/core-free-icons": "4.1.1",
+        "@hugeicons/vue": "1.0.5",
+        "nuxt": "4.5.2",
+        "tailwindcss": "4.2.4",
         "typescript": "5.9.3",
-        "vue": "3.5.13",
+        "vue": "3.5.42",
+        "vue-i18n": "11.4.13",
         "vue-tsc": "2.2.10"
+    },
+    "overrides": {
+        "archiver-utils": {
+            "glob": "13.0.6"
+        }
     }
 }

package/src/components/blog/AllPostsSection.vue

@@ -56,7 +56,6 @@ const visiblePostsCount = computed(() => Math.min(props.posts.length, props.tota
             :busy="props.isLoading"
             :text="t('uiVintage.blog.loadMoreWithNumbers', { current: visiblePostsCount, total: props.totalPosts })"
             @load-more="handleLoadMorePosts"
-            class="mt-8"
-            data-aos="fade-up" />
+            class="mt-8" />
     </div>
 </template>

package/src/components/blog/BlogContentRenderer.vue

@@ -13,24 +13,15 @@ const props = defineProps<{
 
 <style scoped>
 .blog-content {
-    --blog-content-text: var(--text-primary-light);
-    --blog-content-code-bg: var(--bg-selected-light);
-    --blog-content-inline-code-bg: #f9fafb;
-    --blog-content-inline-code-border: var(--border-light);
-    color: var(--blog-content-text);
-}
-
-.dark .blog-content {
-    --blog-content-text: var(--text-primary-dark);
-    --blog-content-code-bg: var(--bg-selected-dark);
-    --blog-content-inline-code-bg: var(--bg-card-dark);
-    --blog-content-inline-code-border: var(--border-dark);
+    color: var(--foreground);
 }
 
+/* Headings */
 .blog-content :deep(h1:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
-    color: var(--blog-content-text);
+    color: var(--foreground);
+    letter-spacing: -0.01em;
     scroll-margin-top: 6rem;
 }
 
@@ -41,91 +32,195 @@ const props = defineProps<{
 }
 
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
-    margin-top: 2rem;
-    margin-bottom: 1.5rem;
+    margin-top: 3rem;
+    margin-bottom: 1.25rem;
+}
+
+.blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
+    margin-top: 2.25rem;
+    margin-bottom: 1rem;
 }
 
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    font-size: 1.375rem;
+    font-size: 1.5rem;
     font-weight: 700;
     line-height: 2rem;
 }
 
-.blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-}
-
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    font-size: 1.125rem;
+    font-size: 1.15rem;
     font-weight: 700;
     line-height: 1.75rem;
 }
 
+/* Heading anchors: a "#" fades in on hover */
+.blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *) > a) {
+    position: relative;
+    color: inherit;
+    text-decoration: none;
+}
+
+.blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *) > a::before) {
+    content: '#';
+    position: absolute;
+    left: -1.1em;
+    color: var(--primary);
+    opacity: 0;
+    translate: 4px 0;
+    transition: opacity 0.2s var(--ease-out-expo), translate 0.3s var(--ease-spring);
+}
+
+.blog-content :deep(:is(h2, h3):not(.not-prose):not(.not-prose *):hover > a::before) {
+    opacity: 1;
+    translate: 0 0;
+}
+
+/* Body text */
 .blog-content :deep(p:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(li:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(blockquote:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(td:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(th:not(.not-prose):not(.not-prose *)) {
-    color: var(--blog-content-text);
+    color: var(--foreground);
 }
 
 .blog-content :deep(p:not(.not-prose):not(.not-prose *)) {
     font-size: 15px;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    line-height: 1.75;
+    line-height: 1.85;
 }
 
-.blog-content :deep(p:not(.not-prose):not(.not-prose *) strong:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) strong:not(.not-prose):not(.not-prose *)) {
-    font-weight: 700;
+/* Lede: the opening paragraph reads a little larger */
+.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
+    font-size: 17px;
+    line-height: 1.8;
+    color: var(--muted-foreground);
 }
 
-.blog-content :deep(p:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(li:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
-    color: var(--blog-content-text);
-    text-decoration: none;
+.blog-content :deep(:is(p, blockquote, li):not(.not-prose):not(.not-prose *) strong) {
     font-weight: 700;
+    color: var(--foreground);
 }
 
-.blog-content :deep(p:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *):hover),
-.blog-content :deep(li:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *):hover),
-.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *):hover) {
+/* Links: a primary underline that thickens on hover */
+.blog-content :deep(:is(p, li, blockquote):not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *)) {
+    color: var(--foreground);
+    font-weight: 700;
     text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+    transition: color 0.15s, text-decoration-color 0.15s, text-decoration-thickness 0.15s;
+}
+
+.blog-content :deep(:is(p, li, blockquote):not(.not-prose):not(.not-prose *) a:not(.not-prose):not(.not-prose *):hover) {
+    color: var(--primary);
+    text-decoration-color: var(--primary);
+    text-decoration-thickness: 3px;
+}
+
+/* Lists */
+.blog-content :deep(:is(ul, ol):not(.not-prose):not(.not-prose *)) {
+    margin: 1.25rem 0;
+    padding-left: 1.4rem;
+}
+
+.blog-content :deep(ul:not(.not-prose):not(.not-prose *)) {
+    list-style: square;
 }
 
-.blog-content :deep(p:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(li:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(td:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
-.blog-content :deep(th:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
-    color: var(--blog-content-text);
-    background-color: var(--blog-content-inline-code-bg);
-    border: 1px solid var(--blog-content-inline-code-border);
+.blog-content :deep(ol:not(.not-prose):not(.not-prose *)) {
+    list-style: decimal;
+}
+
+.blog-content :deep(li:not(.not-prose):not(.not-prose *)) {
+    font-size: 15px;
+    line-height: 1.8;
+    margin: 0.4rem 0;
+    padding-left: 0.25rem;
+}
+
+.blog-content :deep(li:not(.not-prose):not(.not-prose *)::marker) {
+    color: var(--primary);
+    font-weight: 700;
+}
+
+/* Blockquotes */
+.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *)) {
+    position: relative;
+    margin: 2rem 0;
+    padding: 1rem 1.25rem 1rem 1.5rem;
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--primary);
+    border-radius: var(--radius-sm);
+    background-color: var(--surface);
+    font-size: 15px;
+    font-style: italic;
+    line-height: 1.8;
+}
+
+.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) p) {
+    margin: 0;
+}
+
+/* Inline code */
+.blog-content :deep(:is(p, li, blockquote, td, th):not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
+    color: var(--foreground);
+    background-color: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 0.25rem;
     display: inline-block;
     font-size: 0.75rem;
     font-weight: 600;
     line-height: 1rem;
     padding: 0.125rem 0.5rem;
-    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
     white-space: nowrap;
 }
 
 .blog-content :deep(pre:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
-    color: var(--blog-content-text);
-    background-color: var(--blog-content-code-bg);
+    color: var(--foreground);
+    background-color: var(--accent);
+}
+
+/* Images */
+.blog-content :deep(img:not(.not-prose):not(.not-prose *)) {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--uv-shadow-sm);
+}
+
+/* Plain markdown tables */
+.blog-content :deep(table:not(.not-prose):not(.not-prose *)) {
+    width: 100%;
+    margin: 2rem 0;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.blog-content :deep(:is(th, td):not(.not-prose):not(.not-prose *)) {
+    border-bottom: 1px solid var(--border);
+    padding: 0.65rem 0.75rem;
+    text-align: left;
+}
+
+.blog-content :deep(th:not(.not-prose):not(.not-prose *)) {
+    background-color: var(--surface);
+    font-weight: 700;
 }
 
 @media (max-width: 640px) {
-    .blog-content :deep(p:not(.not-prose):not(.not-prose *)) {
-        font-size: 13px;
-        line-height: 1.75;
+    .blog-content :deep(:is(p, li):not(.not-prose):not(.not-prose *)) {
+        font-size: 14px;
+        line-height: 1.8;
+    }
+
+    .blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
+        font-size: 15px;
     }
 
     .blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
+        margin-top: 2.25rem;
         margin-bottom: 1rem;
     }
 }

package/src/components/blog/BlogFAQSection.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Accordion } from '@brumaombra/ui-vintage/accordion';
+import { HelpCircleIcon } from '@hugeicons/core-free-icons';
+import { Accordion } from '../ui/accordion';
 import BlogSectionTitle from './BlogSectionTitle.vue';
 
 // Props
@@ -20,21 +21,18 @@ const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
 
 <template>
     <div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
-        <!-- Title -->
-        <BlogSectionTitle :title="t('uiVintage.blog.faq.title')" />
+        <!-- Title and description -->
+        <BlogSectionTitle :title="t('uiVintage.blog.faq.title')" :description="t('uiVintage.blog.faq.description')" />
 
-        <!-- Description -->
-        <p class="text-base md:text-lg text-muted-foreground mb-8">
-            {{ t('uiVintage.blog.faq.description') }}
-        </p>
-
-        <!-- FAQ Items -->
-        <div class="space-y-4">
-            <Accordion v-for="(faq, index) in props.faqs" :key="index" :title="faq.question" :initially-expanded="index === 0">
-                <p class="text-xs md:text-sm text-muted-foreground leading-relaxed">
-                    {{ faq.answer }}
-                </p>
-            </Accordion>
+        <!-- FAQ items -->
+        <div class="space-y-3">
+            <div v-for="(faq, index) in props.faqs" :key="index" data-aos="blur-up" :data-aos-delay="index * 70">
+                <Accordion :title="faq.question" :icon="HelpCircleIcon" :initially-expanded="index === 0">
+                    <p class="text-xs leading-relaxed text-muted-foreground md:text-sm">
+                        {{ faq.answer }}
+                    </p>
+                </Accordion>
+            </div>
         </div>
     </div>
 </template>

package/src/components/blog/BlogHeaderSection.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 import type { ToneColor } from '../../lib/color-tokens';
+import { cn } from '../../lib/utils';
 import { Badge } from '../ui/badge';
+import { StatStrip } from '../stat-strip';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -8,31 +15,116 @@ const props = withDefaults(defineProps<{
         color: ToneColor;
         text: string;
     }>;
+    announcement?: {
+        text: string;
+        to: string;
+        label?: string;
+    } | null;
     title: string;
+    highlight?: string;
     description: string;
+    stats?: Array<{
+        label: string;
+        value: string | number;
+        icon?: HugeiconsIconDefinition;
+    }>;
+    align?: 'left' | 'center' | 'right';
 }>(), {
-    badges: () => []
+    badges: () => [],
+    announcement: null,
+    highlight: '',
+    stats: () => [],
+    align: 'center'
+});
+
+const { t } = useI18n();
+
+// Alignment of the whole header: the column, its text, and the rows of badges and stats
+const alignClasses = {
+    left: { header: 'items-start text-left', row: 'justify-start' },
+    center: { header: 'items-center text-center', row: 'justify-center' },
+    right: { header: 'items-end text-right', row: 'justify-end' }
+} as const;
+const alignClass = computed(() => alignClasses[props.align] ?? alignClasses.center);
+
+// Split the title around the highlighted part (when it appears in the title)
+const titleParts = computed(() => {
+    const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
+    if (index === -1) return { before: props.title, highlight: '', after: '' };
+    return {
+        before: props.title.slice(0, index),
+        highlight: props.highlight,
+        after: props.title.slice(index + props.highlight.length)
+    };
 });
+
+// Words that rise in one by one (the highlight rises in as a single block between them)
+const splitWords = (text: string) => text.split(/\s+/).filter(Boolean);
+const beforeWords = computed(() => splitWords(titleParts.value.before));
+const afterWords = computed(() => splitWords(titleParts.value.after));
+// Space after a word before the highlight: always between words, and before the highlight only when the title has one there
+const wordGap = (index: number) => {
+    if (index < beforeWords.value.length - 1) return ' ';
+    return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
+};
+const wordDelay = (index: number) => `${120 + Math.min(index, 12) * 55}ms`;
+const highlightDelay = computed(() => wordDelay(beforeWords.value.length));
+const afterDelay = (index: number) => wordDelay(beforeWords.value.length + 1 + index);
+
+// The rest of the header follows the last word of the title
+const titleLength = computed(() => beforeWords.value.length + afterWords.value.length + (titleParts.value.highlight ? 1 : 0));
+const descriptionDelay = computed(() => `${Math.min(titleLength.value, 12) * 55 + 200}ms`);
+const statsDelay = computed(() => `${Math.min(titleLength.value, 12) * 55 + 300}ms`);
+const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`);
 </script>
 
 <template>
-    <div class="flex flex-col space-y-6 md:space-y-8!">
+    <header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
+        <!-- Announcement (links to something new, such as the latest post) -->
+        <NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+            <span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
+                <span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
+                    <span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
+                    <span class="relative inline-flex size-1.5 rounded-full bg-current" />
+                </span>
+                <span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
+                <span class="truncate opacity-80">{{ props.announcement.text }}</span>
+                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
+            </span>
+        </NuxtLink>
+
         <!-- Badges -->
-        <div v-if="props.badges.length > 0" class="flex flex-wrap gap-3 mb-6 md:mb-8">
-            <Badge v-for="badge in props.badges"
+        <div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
+            <Badge v-for="(badge, index) in props.badges"
                 :key="`${badge.color}-${badge.text}`"
                 :color="badge.color"
-                :text="badge.text" />
+                :text="badge.text"
+                :pulse="index === 0 && !props.announcement"
+                class="animate-uv-fade-up"
+                :style="{ animationDelay: `${index * 70}ms` }" />
         </div>
 
-        <!-- Title -->
-        <h1 class="text-3xl md:text-6xl font-bold text-foreground leading-tight">
-            {{ props.title }}
+        <!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
+        <h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+            <template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
+                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
+            </template>
+            <!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
+            <span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
+                    <path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
+                </svg>
+            </span>
+            <template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
+                {{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
+            </template>
         </h1>
 
         <!-- Description -->
-        <p class="text-sm md:text-xl text-muted-foreground leading-relaxed">
+        <p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
             {{ props.description }}
         </p>
-    </div>
-</template>
+
+        <!-- Stats strip -->
+        <StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
+    </header>
+</template>