@brumaombra/ui-vintage 0.8.0 → 0.8.2

package/COMPONENTS.md

@@ -20,7 +20,7 @@ This file lists every public entry point of the package with its components, pro
 - **Data display:** [animated-number](#brumaombraui-vintageanimated-number), [avatar](#brumaombraui-vintageavatar), [badge](#brumaombraui-vintagebadge), [card](#brumaombraui-vintagecard), [card-grid](#brumaombraui-vintagecard-grid), [chip](#brumaombraui-vintagechip), [data-list](#brumaombraui-vintagedata-list), [data-table](#brumaombraui-vintagedata-table), [info-card](#brumaombraui-vintageinfo-card), [progress](#brumaombraui-vintageprogress), [progress-component](#brumaombraui-vintageprogress-component), [scroll-area](#brumaombraui-vintagescroll-area), [separator](#brumaombraui-vintageseparator), [single-value-card](#brumaombraui-vintagesingle-value-card), [skeleton](#brumaombraui-vintageskeleton), [table](#brumaombraui-vintagetable)
 - **Navigation:** [accordion](#brumaombraui-vintageaccordion), [breadcrumb](#brumaombraui-vintagebreadcrumb), [collapsible](#brumaombraui-vintagecollapsible), [pagination](#brumaombraui-vintagepagination), [sidebar](#brumaombraui-vintagesidebar), [stepper](#brumaombraui-vintagestepper), [tabs](#brumaombraui-vintagetabs)
 - **Overlays:** [alert-dialog](#brumaombraui-vintagealert-dialog), [command](#brumaombraui-vintagecommand), [dialog](#brumaombraui-vintagedialog), [hover-card](#brumaombraui-vintagehover-card), [popover](#brumaombraui-vintagepopover), [sheet](#brumaombraui-vintagesheet), [tooltip](#brumaombraui-vintagetooltip)
-- **Feedback:** [alert](#brumaombraui-vintagealert), [busy](#brumaombraui-vintagebusy), [busy-indicator](#brumaombraui-vintagebusy-indicator), [confirm-dialog](#brumaombraui-vintageconfirm-dialog), [empty-state-card](#brumaombraui-vintageempty-state-card), [loading-state-card](#brumaombraui-vintageloading-state-card), [message-dialog](#brumaombraui-vintagemessage-dialog), [message-toast](#brumaombraui-vintagemessage-toast), [spinner](#brumaombraui-vintagespinner)
+- **Feedback:** [alert](#brumaombraui-vintagealert), [busy](#brumaombraui-vintagebusy), [busy-indicator](#brumaombraui-vintagebusy-indicator), [confirm-dialog](#brumaombraui-vintageconfirm-dialog), [cookie-consent](#brumaombraui-vintagecookie-consent), [empty-state-card](#brumaombraui-vintageempty-state-card), [loading-state-card](#brumaombraui-vintageloading-state-card), [message-dialog](#brumaombraui-vintagemessage-dialog), [message-toast](#brumaombraui-vintagemessage-toast), [spinner](#brumaombraui-vintagespinner)
 - **Layouts and app shell:** [background-grid](#brumaombraui-vintagebackground-grid), [dashboard-shell](#brumaombraui-vintagedashboard-shell), [error-page](#brumaombraui-vintageerror-page), [landing](#brumaombraui-vintagelanding), [landing-content](#brumaombraui-vintagelanding-content), [landing-footer](#brumaombraui-vintagelanding-footer), [landing-navbar](#brumaombraui-vintagelanding-navbar), [landing-shell](#brumaombraui-vintagelanding-shell), [language-flag](#brumaombraui-vintagelanguage-flag), [language-selector](#brumaombraui-vintagelanguage-selector), [page-header](#brumaombraui-vintagepage-header), [theme-selector](#brumaombraui-vintagetheme-selector)
 - **Content and blog:** [blog](#brumaombraui-vintageblog), [content](#brumaombraui-vintagecontent)
 - **Utilities and types:** [common-types](#brumaombraui-vintagecommon-types), [utils](#brumaombraui-vintageutils)
@@ -2814,6 +2814,47 @@ interface ShowConfirmDialogOptions {
 
 ---
 
+### `@brumaombra/ui-vintage/cookie-consent`
+
+Cookie consent banner fixed to the bottom of the page, shown in the browser until the visitor accepts or declines. The choice is saved in `localStorage` under `storage-key`; `useCookieConsent(storageKey)` shares it, so optional scripts (analytics, ads) can wait for `consent.value === "granted"` and a settings page can call `reset()` to ask again. Texts have translated defaults, `policy-to` adds a link to the cookie policy.
+
+```ts
+import { CookieConsent, useCookieConsent } from '@brumaombra/ui-vintage/cookie-consent';
+import type { CookieConsentValue } from '@brumaombra/ui-vintage/cookie-consent';
+```
+
+```vue
+<CookieConsent storage-key="analyticsConsent" policy-to="/cookie-policy" @accept="loadAnalytics" />
+
+<script setup>
+const { consent, reset } = useCookieConsent('analyticsConsent');
+watch(consent, value => value === 'granted' && loadAnalytics(), { immediate: true });
+</script>
+```
+
+#### `CookieConsent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `storageKey` | `string` | `'cookieConsent'` |
+| `message` | `string` | `undefined` |
+| `policyTo` | `string` | `undefined` |
+| `policyLabel` | `string` | `undefined` |
+| `acceptLabel` | `string` | `undefined` |
+| `declineLabel` | `string` | `undefined` |
+| `class` | `HTMLAttributes['class']` | `undefined` |
+
+- **Emits:** `accept`, `decline`.
+
+#### Functions, constants, and types
+
+```ts
+function useCookieConsent(storageKey = 'cookieConsent')
+type CookieConsentValue = 'granted' | 'denied' | null
+```
+
+---
+
 ### `@brumaombra/ui-vintage/empty-state-card`
 
 Empty state with an icon, title, description, and an `action` slot. Falls back to localized default copy.
@@ -3383,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';
@@ -3437,6 +3478,9 @@ import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection,
 | Prop | Type | Default |
 | --- | --- | --- |
 | `title` *(required)* | `string` |  |
+| `description` | `string` | `''` |
+
+- **Slots:** `action`.
 
 #### `BlogTagsSection`
 

package/README.md

@@ -358,7 +358,7 @@ There is no required library build step before publishing. The normal verificati
 npm run typecheck
 ```
 
-For release details, see [NPM.md](NPM.md). The package is published under the public npm scope `@brumaombra/ui-vintage`.
+For the release process, see the project skill in [`.claude/skills/publish-npm/SKILL.md`](.claude/skills/publish-npm/SKILL.md). The package is published under the public npm scope `@brumaombra/ui-vintage`.
 
 <a id="requirements"></a>
 ## 🧰 Requirements

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.8.0",
+    "version": "0.8.2",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -59,6 +59,7 @@
         "./command": "./src/components/ui/command/index.ts",
         "./common-types": "./src/lib/common-types.ts",
         "./confirm-dialog": "./src/components/confirm-dialog/index.ts",
+        "./cookie-consent": "./src/components/cookie-consent/index.ts",
         "./content": "./src/components/content/index.ts",
         "./dashboard-shell": "./src/components/dashboard-shell/index.ts",
         "./data-list": "./src/components/data-list/index.ts",
@@ -132,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>