@brumaombra/ui-vintage 0.8.1 → 0.8.2

package/COMPONENTS.md

@@ -3424,7 +3424,7 @@ Components for Nuxt Content pages and a complete blog.
 
 ### `@brumaombra/ui-vintage/blog`
 
-Blog building blocks: header carousel, post cards and lists, categories, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer.
+Blog building blocks: an animated hero header, a full-bleed featured carousel, post and category cards, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer. Scroll entrances use AOS: install `aos` in the app and initialize it (the components carry `data-aos="blur-up"`, and the library stylesheet defines that animation). Without AOS the content simply renders without entrances.
 
 ```ts
 import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogHeaderSection, BlogSectionTitle, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents } from '@brumaombra/ui-vintage/blog';
@@ -3478,6 +3478,9 @@ import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection,
 | Prop | Type | Default |
 | --- | --- | --- |
 | `title` *(required)* | `string` |  |
+| `description` | `string` | `''` |
+
+- **Slots:** `action`.
 
 #### `BlogTagsSection`
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.8.1",
+    "version": "0.8.2",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -133,7 +133,7 @@
         "@nuxt/image": "^2.0.0",
         "nuxt": "^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"
     },
     "dependencies": {
         "@hugeicons/core-free-icons": "4.1.1",

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-md);
+}
+
+/* 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,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { ToneColor } from '../../lib/color-tokens';
 import { Badge } from '../ui/badge';
 
@@ -13,26 +14,43 @@ const props = withDefaults(defineProps<{
 }>(), {
     badges: () => []
 });
+
+// Split the title so each word can rise into place on its own
+const titleWords = computed(() => props.title.split(/\s+/).filter(Boolean));
+
+// The description follows the last word of the title
+const descriptionDelay = computed(() => `${Math.min(titleWords.value.length, 12) * 55 + 200}ms`);
 </script>
 
 <template>
-    <div class="flex flex-col space-y-6 md:space-y-8!">
+    <header class="relative isolate flex flex-col gap-6 pt-4 pb-2 md:gap-8 md:pt-10">
+        <!-- Ambient glow -->
+        <div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 -z-10 h-80 w-[36rem] max-w-[120%] rounded-full bg-primary/12 blur-[100px]" />
+
         <!-- 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="flex flex-wrap gap-3">
+            <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"
+                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) -->
+        <h1 class="text-3xl leading-[1.05] font-bold tracking-tight text-foreground md:text-6xl">
+            <template v-for="(word, index) in titleWords" :key="`${word}-${index}`">
+                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: `${120 + Math.min(index, 12) * 55}ms` }">{{ word }}</span>{{ index < titleWords.length - 1 ? ' ' : '' }}
+            </template>
         </h1>
 
+        <!-- Accent rule -->
+        <div aria-hidden="true" class="h-1 w-20 origin-left animate-uv-grow-x rounded-full bg-primary shadow-glow" :style="{ animationDelay: descriptionDelay }" />
+
         <!-- Description -->
-        <p class="text-sm md:text-xl text-muted-foreground leading-relaxed">
+        <p class="max-w-3xl animate-uv-fade-up text-sm leading-relaxed text-muted-foreground md:text-xl" :style="{ animationDelay: descriptionDelay }">
             {{ props.description }}
         </p>
-    </div>
+    </header>
 </template>

package/src/components/blog/BlogInfoSection.vue

@@ -2,6 +2,8 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { ArrowUpRight01Icon, Calendar03Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import { formatDateLongItalyTimezone } from '../../lib/utils';
 
@@ -21,50 +23,49 @@ const { t, locale } = useI18n();
 // Formatted dates
 const formattedPublishedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
 const formattedModifiedDate = computed(() => formatDateLongItalyTimezone(props.dateModified, locale.value));
+
+// Only show the update date when it differs from the publication date
+const showModifiedDate = computed(() => Boolean(props.dateModified) && formattedModifiedDate.value !== formattedPublishedDate.value);
 </script>
 
 <template>
     <!-- Author and date information -->
-    <Card data-aos="fade-up">
-        <CardContent>
-            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-                <!-- Author -->
-                <div class="flex items-center mb-4 sm:mb-0">
-                    <div class="flex items-center">
-                        <!-- Author image -->
-                        <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="rounded me-3 transition-transform duration-300 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100">
-                            <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="50" width="50" format="avif" quality="40" :sizes="{ 480: '50px', 1280: '50px' }" loading="lazy" decoding="async" class="object-cover rounded" />
-                        </NuxtLink>
+    <Card data-aos="blur-up" class="group/author relative overflow-hidden">
+        <!-- Accent glow -->
+        <div aria-hidden="true" class="pointer-events-none absolute -top-16 -left-16 size-48 rounded-full bg-primary/10 blur-3xl" />
+
+        <CardContent class="relative flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+            <!-- Author -->
+            <div class="flex items-center gap-4">
+                <!-- Author image -->
+                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="relative shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+                    <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="56" width="56" format="avif" quality="40" :sizes="{ 480: '56px', 1280: '56px' }" loading="lazy" decoding="async" class="size-14 rounded border border-border object-cover shadow-elevated-sm transition-[scale] duration-300 ease-spring hover:scale-105" />
+                </NuxtLink>
 
-                        <!-- Author name -->
-                        <div>
-                            <p class="text-sm text-muted-foreground">{{ t('uiVintage.blog.author') }}</p>
-                            <p class="font-bold text-foreground">
-                                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="hover:underline">
-                                    {{ props.author }}
-                                </NuxtLink>
-                            </p>
-                        </div>
-                    </div>
+                <!-- Author name -->
+                <div class="min-w-0">
+                    <p class="text-[11px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
+                    <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link mt-0.5 inline-flex items-center gap-1 text-base font-bold text-foreground outline-none hover:text-primary focus-visible:underline">
+                        {{ props.author }}
+                        <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5" />
+                    </NuxtLink>
                 </div>
+            </div>
 
-                <!-- Date information -->
-                <div class="flex flex-col sm:items-end text-xs md:text-sm text-muted-foreground">
-                    <!-- Published date -->
-                    <div v-if="props.datePublished" class="mb-1">
-                        <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}:</span>
-                        <time :datetime="props.datePublished" class="ml-1">
-                            {{ formattedPublishedDate }}
-                        </time>
-                    </div>
+            <!-- Date information -->
+            <div class="flex flex-wrap gap-2 sm:justify-end">
+                <!-- Published date -->
+                <div v-if="props.datePublished" class="flex items-center gap-2 rounded border border-border bg-surface px-3 py-2 text-xs text-muted-foreground">
+                    <HugeiconsIcon :icon="Calendar03Icon" class="size-4 shrink-0 text-primary" />
+                    <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}</span>
+                    <time :datetime="props.datePublished" class="text-foreground">{{ formattedPublishedDate }}</time>
+                </div>
 
-                    <!-- Last updated date -->
-                    <div v-if="props.dateModified" class="text-xs">
-                        <span class="font-semibold">{{ t('uiVintage.blog.lastUpdatedDate') }}:</span>
-                        <time :datetime="props.dateModified" class="ml-1">
-                            {{ formattedModifiedDate }}
-                        </time>
-                    </div>
+                <!-- Last updated date -->
+                <div v-if="showModifiedDate" class="flex items-center gap-2 rounded border border-border bg-surface px-3 py-2 text-xs text-muted-foreground">
+                    <HugeiconsIcon :icon="RefreshIcon" class="size-4 shrink-0 text-primary" />
+                    <span class="font-semibold">{{ t('uiVintage.blog.lastUpdatedDate') }}</span>
+                    <time :datetime="props.dateModified ?? undefined" class="text-foreground">{{ formattedModifiedDate }}</time>
                 </div>
             </div>
         </CardContent>

package/src/components/blog/BlogProgressBar.vue

@@ -43,13 +43,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div :class="cn('relative h-1 w-full border-t border-(--border-light) bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--bg-selected-dark) landing-navbar-progress', props.class)"
+    <div :class="cn('relative h-[3px] w-full bg-border/40 landing-navbar-progress', props.class)"
         role="progressbar"
         :aria-label="resolvedAriaLabel"
         aria-valuemin="0"
         aria-valuemax="100"
         :aria-valuenow="Math.round(progress)">
-        <div class="h-full origin-left bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
+        <!-- Fill with a glowing leading edge (the dot stays inside the fill, so it is never clipped and never widens the page) -->
+        <div class="relative h-full bg-linear-to-r from-primary/40 via-primary to-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }">
+            <span v-if="progress > 0" aria-hidden="true" class="absolute top-1/2 right-0 size-2 -translate-y-1/2 rounded-full bg-primary shadow-[0_0_10px_2px_color-mix(in_oklab,var(--primary)_70%,transparent)]" />
+        </div>
     </div>
 </template>
 

package/src/components/blog/BlogSectionTitle.vue

@@ -1,12 +1,31 @@
 <script setup lang="ts">
 // Props
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     title: string;
-}>();
+    description?: string;
+}>(), {
+    description: ''
+});
 </script>
 
 <template>
-    <h2 class="text-xl md:text-2xl font-bold text-foreground mb-5">
-        {{ props.title }}
-    </h2>
+    <div data-aos="blur-up" class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between md:mb-8">
+        <div class="min-w-0">
+            <!-- Title with accent bar -->
+            <h2 class="flex items-center gap-3 text-xl font-bold tracking-tight text-foreground md:text-2xl">
+                <span aria-hidden="true" class="h-6 w-1 shrink-0 rounded-full bg-primary shadow-glow md:h-7" />
+                {{ props.title }}
+            </h2>
+
+            <!-- Description -->
+            <p v-if="props.description" class="mt-2 max-w-2xl text-xs leading-6 text-muted-foreground md:text-sm">
+                {{ props.description }}
+            </p>
+        </div>
+
+        <!-- Optional trailing action (for example a "View all" link) -->
+        <div v-if="$slots.action" class="shrink-0">
+            <slot name="action" />
+        </div>
+    </div>
 </template>

package/src/components/blog/BlogTagsSection.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Badge } from '../ui/badge';
-
 // Props
 const props = withDefaults(defineProps<{
     tags?: Array<{
@@ -15,8 +13,13 @@ const props = withDefaults(defineProps<{
 
 <template>
     <div v-if="props.tags.length" class="flex flex-wrap gap-3">
-        <NuxtLinkLocale v-for="(tag, index) in props.tags" :key="tag.slug" :to="`/blog/tags/${tag.slug}`" data-aos="fade-up" :data-aos-delay="Math.min(index * 100, 500)">
-            <Badge color="gray" :text="`${tag.name} (${tag.count})`" class="transition-transform duration-200 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" />
-        </NuxtLinkLocale>
+        <!-- Tag chip -->
+        <span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
+            <NuxtLinkLocale :to="`/blog/tags/${tag.slug}`" class="group/tag inline-flex items-center gap-2 rounded border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground shadow-elevated-sm outline-none [transition:translate_300ms_var(--ease-spring),border-color_150ms,color_150ms,box-shadow_200ms] hover:-translate-y-0.5 hover:border-primary/50 hover:text-primary hover:shadow-elevated-md focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+                <span aria-hidden="true" class="text-primary transition-[rotate] duration-300 ease-bounce group-hover/tag:rotate-12">#</span>
+                {{ tag.name }}
+                <span class="rounded-sm bg-surface px-1.5 py-0.5 text-[11px] text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">{{ tag.count }}</span>
+            </NuxtLinkLocale>
+        </span>
     </div>
 </template>

package/src/components/blog/CategoriesList.vue

@@ -16,9 +16,9 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6">
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4">
         <!-- Category card -->
-        <NuxtLink v-for="(category, i) in props.categories" :key="category.path || category.slug" :to="category.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(i % 4) * 200">
+        <NuxtLink v-for="(category, index) in props.categories" :key="category.path || category.slug" data-aos="blur-up" :data-aos-delay="(index % 4) * 80" :to="category.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
             <CategoryCard :name="category.name" :image="category.image" :count="category.count" />
         </NuxtLink>
     </div>