@brumaombra/ui-vintage 0.8.0 → 0.8.2

package/src/components/blog/SocialShareSidebar.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Facebook01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, WhatsappIcon } from '@hugeicons/core-free-icons';
+import { Facebook01Icon, Link01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, Tick02Icon, WhatsappIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
 
 // Props
 const props = defineProps<{
@@ -12,8 +11,9 @@ const props = defineProps<{
 }>();
 
 const { t } = useI18n();
+const copied = ref(false);
 
-// Social platforms config
+// Social platforms config (each one lights up in its brand color on hover)
 const socialPlatforms = computed(() => {
     const encodedUrl = encodeURIComponent(props.url);
     const encodedTitle = encodeURIComponent(props.title);
@@ -22,75 +22,85 @@ const socialPlatforms = computed(() => {
         name: 'facebook',
         url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
         icon: Facebook01Icon,
-        color: 'bg-blue-700 hover:bg-blue-800',
+        color: 'hover:border-[#1877F2] hover:bg-[#1877F2]',
         label: t('uiVintage.blog.share.facebook')
     }, {
         name: 'twitter',
         url: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
         icon: NewTwitterIcon,
-        color: 'bg-black hover:bg-gray-800',
+        color: 'hover:border-foreground hover:bg-foreground hover:text-background!',
         label: t('uiVintage.blog.share.x')
     }, {
         name: 'whatsapp',
         url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
         icon: WhatsappIcon,
-        color: 'bg-green-500 hover:bg-green-600',
+        color: 'hover:border-[#25D366] hover:bg-[#25D366]',
         label: t('uiVintage.blog.share.whatsapp')
     }, {
         name: 'linkedin',
         url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
         icon: Linkedin01Icon,
-        color: 'bg-blue-700 hover:bg-blue-800',
+        color: 'hover:border-[#0A66C2] hover:bg-[#0A66C2]',
         label: t('uiVintage.blog.share.linkedin')
     }, {
         name: 'telegram',
         url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
         icon: TelegramIcon,
-        color: 'bg-blue-400 hover:bg-blue-500',
+        color: 'hover:border-[#229ED9] hover:bg-[#229ED9]',
         label: t('uiVintage.blog.share.telegram')
     }];
 });
+
+// Shared button classes
+const buttonClasses = 'flex size-10 cursor-pointer items-center justify-center rounded border border-border bg-secondary text-muted-foreground shadow-elevated-sm outline-none [transition:background-color_150ms,border-color_150ms,color_150ms,scale_300ms_var(--ease-spring)] hover:scale-110 hover:text-white active:scale-95 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+
+// Copy the article link to the clipboard
+const copyLink = async () => {
+    if (!navigator.clipboard) return;
+    await navigator.clipboard.writeText(props.url);
+    copied.value = true;
+    window.setTimeout(() => {
+        copied.value = false;
+    }, 1800);
+};
 </script>
 
 <template>
     <Teleport to="body">
         <!-- Desktop sidebar on the right -->
-        <div class="fixed right-[max(6.875rem,calc(50%-38.125rem))] top-35 z-20 hidden xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
-            <Card class="p-5! flex flex-col space-y-4 items-center">
-                <CardContent class="p-0! gap-4 items-center">
-                    <!-- Share icon -->
-                    <HugeiconsIcon :icon="Share08Icon" class="size-5 text-muted-foreground mb-2" />
+        <div class="fixed top-35 right-[max(6.875rem,calc(50%-38.125rem))] z-20 hidden animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.6s_both] xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
+            <div class="flex flex-col items-center gap-3 rounded border border-border bg-card p-3 shadow-elevated-sm">
+                <!-- Share icon -->
+                <HugeiconsIcon :icon="Share08Icon" class="mb-1 size-5 text-primary" />
 
-                    <!-- Social share links (desktop) -->
-                    <template v-for="platform in socialPlatforms" :key="platform.name">
-                        <NuxtLink :to="platform.url"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            :aria-label="platform.label"
-                            :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
-                            <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                        </NuxtLink>
-                    </template>
-                </CardContent>
-            </Card>
+                <!-- Social share links (desktop) -->
+                <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :title="platform.label" :class="[buttonClasses, platform.color]">
+                    <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                </a>
+
+                <!-- Copy link -->
+                <div class="my-1 h-px w-6 bg-border" />
+                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :title="t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:border-primary hover:bg-primary hover:text-primary-foreground!', copied && 'border-primary text-primary']" @click="copyLink">
+                    <Transition mode="out-in" enter-active-class="transition-[opacity,scale] duration-300 ease-bounce" enter-from-class="opacity-0 scale-50" leave-active-class="transition-opacity duration-100" leave-to-class="opacity-0">
+                        <HugeiconsIcon :key="String(copied)" :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
+                    </Transition>
+                </button>
+            </div>
         </div>
 
         <!-- Mobile view (floating bar at bottom) -->
-        <div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 xl:hidden">
-            <Card class="p-3! w-fit">
-                <CardContent class="flex-row! p-0! items-center justify-center gap-3">
-                    <!-- Social share links (mobile) -->
-                    <template v-for="platform in socialPlatforms" :key="platform.name">
-                        <NuxtLink :to="platform.url"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            :aria-label="platform.label"
-                            :class="['w-10 h-10 rounded flex items-center justify-center text-white transition-all duration-200 hover:opacity-80 hover:scale-105', platform.color]">
-                            <HugeiconsIcon :icon="platform.icon" class="size-4" />
-                        </NuxtLink>
-                    </template>
-                </CardContent>
-            </Card>
+        <div class="fixed bottom-4 left-1/2 z-20 -translate-x-1/2 animate-[uv-fade-up_0.7s_var(--ease-out-expo)_0.8s_both] xl:hidden">
+            <div class="flex items-center gap-2 rounded border border-border bg-card p-2 shadow-elevated-sm">
+                <!-- Social share links (mobile) -->
+                <a v-for="platform in socialPlatforms" :key="platform.name" :href="platform.url" target="_blank" rel="noopener noreferrer" :aria-label="platform.label" :class="[buttonClasses, platform.color]">
+                    <HugeiconsIcon :icon="platform.icon" class="size-4" />
+                </a>
+
+                <!-- Copy link -->
+                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:border-primary hover:bg-primary hover:text-primary-foreground!', copied && 'border-primary text-primary']" @click="copyLink">
+                    <HugeiconsIcon :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
+                </button>
+            </div>
         </div>
     </Teleport>
 </template>

package/src/components/blog/TableOfContents.vue

@@ -286,7 +286,7 @@ const openMobileToc = () => {
 // Get classes for heading button
 const getHeadingButtonClasses = (level: number, isActive: boolean) => {
     // Base classes for all titles
-    const baseClasses = 'block w-full text-left px-2.5 py-2 md:px-3 md:py-2 rounded border-l-2 border-transparent transition-all duration-200 hover:bg-accent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 motion-reduce:transition-none';
+    const baseClasses = 'relative block w-full cursor-pointer rounded px-2.5 py-2 text-left outline-none transition-[background-color,color,padding] duration-200 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45 md:px-3 before:absolute before:inset-y-1.5 before:left-0 before:w-[3px] before:origin-center before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring';
 
     // Add classes based on heading level
     let levelClasses = '';
@@ -297,7 +297,7 @@ const getHeadingButtonClasses = (level: number, isActive: boolean) => {
     }
 
     // Add classes if the heading is active
-    const activeClasses = isActive ? 'bg-accent border-l-primary text-foreground' : '';
+    const activeClasses = isActive ? 'bg-accent text-foreground! before:scale-y-100' : '';
 
     // Return combined classes
     return [baseClasses, levelClasses, activeClasses];
@@ -354,20 +354,20 @@ onUnmounted(() => {
         <Teleport to="body">
             <!-- Mobile persistent control -->
             <Transition name="toc-tab">
-                <button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="fixed top-4/5 left-0 z-20 flex h-16 w-8 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-(--border-light) bg-(--bg-card-light) text-(--text-secondary-light) transition-[background-color,color,transform] duration-200 hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) focus-visible:z-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) motion-reduce:transition-none" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
-                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" aria-hidden="true" />
+                <button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="group/toc-tab fixed top-4/5 left-0 z-20 flex h-16 w-7 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-border bg-card text-primary shadow-elevated-sm transition-[width] duration-300 ease-out-expo hover:w-8 focus-visible:z-30 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
+                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 transition-[translate] duration-300 ease-spring group-hover/toc-tab:translate-x-0.5" aria-hidden="true" />
                 </button>
             </Transition>
 
             <!-- Mobile full-screen overlay -->
             <Sheet :open="isMobileOpen" @update:open="handleMobileOpenChange">
-                <SheetContent id="toc-mobile-overlay" side="left" class="flex h-full w-full max-w-none flex-col gap-0 border-0 bg-(--bg-card-light) p-0 dark:bg-(--bg-card-dark) sm:max-w-none">
-                    <SheetHeader class="flex-row items-center justify-between gap-4 border-b border-(--border-light) p-5 dark:border-(--border-dark)">
+                <SheetContent id="toc-mobile-overlay" side="left" class="flex h-full w-full max-w-none flex-col gap-0 border-0 bg-card p-0 data-[state=open]:[animation-duration:320ms] data-[state=open]:[animation-timing-function:var(--ease-out-expo)] sm:max-w-none">
+                    <SheetHeader class="flex-row items-center justify-between gap-4 border-b border-border p-5">
                         <!-- Mobile table of contents header -->
                         <div class="flex min-w-0 items-center gap-3">
                             <!-- Mobile table of contents icon -->
-                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
-                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-muted-foreground" />
+                            <div class="flex size-10 shrink-0 items-center justify-center rounded border border-primary/30 bg-primary/10">
+                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-primary" />
                             </div>
 
                             <!-- Mobile table of contents title and description -->
@@ -404,14 +404,18 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.toc-tab-enter-active,
+.toc-tab-enter-active {
+    transition: opacity 0.3s var(--ease-out-expo), transform 0.32s var(--ease-out-expo);
+}
+
 .toc-tab-leave-active {
-    transition: opacity 0.25s ease;
+    transition: opacity 0.15s var(--ease-snappy), transform 0.15s var(--ease-snappy);
 }
 
 .toc-tab-enter-from,
 .toc-tab-leave-to {
     opacity: 0;
+    transform: translateX(-100%);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/content/BlogList.vue

@@ -14,21 +14,33 @@ const props = withDefaults(defineProps<{
 
 // Icon container classes
 const getIconContainerClasses = () => {
-    return 'flex items-center justify-center w-8 h-8 bg-card border border-border rounded mr-4 shrink-0';
+    const toneClasses = {
+        checkmark: 'border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30',
+        cross: 'border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30',
+        numbered: 'border-primary/30 bg-primary/10',
+        circle: 'border-primary/30 bg-primary/10'
+    };
+    return ['flex items-center justify-center size-8 border rounded mr-4 shrink-0', toneClasses[props.variant]];
 };
 
 // Icon color classes
 const getIconClasses = () => {
-    return 'text-muted-foreground text-xs';
+    const toneClasses = {
+        checkmark: 'text-green-600 dark:text-green-400',
+        cross: 'text-red-600 dark:text-red-400',
+        numbered: 'text-primary',
+        circle: 'text-primary'
+    };
+    return ['text-xs size-4', toneClasses[props.variant]];
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
+        <Card data-aos="blur-up">
             <CardContent class="gap-0">
                 <ul class="text-xs md:text-sm p-0! space-y-6!">
-                    <li v-for="(item, index) in props.items" :key="index" class="flex items-center">
+                    <li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-center">
                         <!-- Circle -->
                         <div v-if="props.variant === 'circle'" :class="getIconContainerClasses()">
                             <HugeiconsIcon :icon="CircleSmallIcon" :class="getIconClasses()" />

package/src/components/content/BlogTable.vue

@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<{
 // Header cell classes
 const getHeaderClasses = (colIndex: number) => {
     const baseClasses = 'text-left font-semibold text-foreground';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/10 text-primary' : '';
     return [baseClasses, highlightClass];
 };
 
@@ -24,14 +24,14 @@ const getHeaderClasses = (colIndex: number) => {
 const getCellClasses = (colIndex: number) => {
     const baseClasses = 'align-top text-foreground leading-relaxed whitespace-normal';
     const firstColClass = colIndex === 0 ? 'font-semibold text-muted-foreground' : '';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 font-semibold' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
+        <Card data-aos="blur-up">
             <CardContent>
                 <div class="w-full overflow-x-auto">
                     <Table class="w-full text-sm text-left">
@@ -46,7 +46,7 @@ const getCellClasses = (colIndex: number) => {
 
                         <!-- Table body -->
                         <TableBody>
-                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-muted-foreground hover:bg-transparent">
+                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-muted-foreground transition-colors duration-150 hover:bg-surface/70">
                                 <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
                                     {{ cell }}
                                 </TableCell>

package/src/components/content/CodeBlock.vue

@@ -76,11 +76,11 @@ const copyCode = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
+        <Card data-aos="blur-up" class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
             <!-- Code header -->
-            <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+            <div class="flex items-center justify-between gap-3 border-b border-border bg-card px-3 py-2 sm:px-4">
                 <div class="flex min-w-0 items-center gap-2">
-                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-muted-foreground" />
+                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-primary" />
                     <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
                 </div>
 
@@ -88,7 +88,7 @@ const copyCode = async () => {
                 <Button v-if="props.copyable"
                     variant="ghost"
                     size="icon"
-                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
+                    class="size-7 text-muted-foreground hover:bg-accent hover:text-foreground"
                     :aria-label="t('uiVintage.code.copy')"
                     :title="t('uiVintage.code.copy')"
                     :disabled="!displayedCode"
@@ -99,7 +99,7 @@ const copyCode = async () => {
 
             <!-- Code content -->
             <div v-if="highlightedCode" class="code-block-content overflow-x-auto bg-surface" v-html="highlightedCode" />
-            <pre v-else class="code-block-content overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code>{{ displayedCode }}</code></pre>
+            <pre v-else class="code-block-content overflow-x-auto bg-surface px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code>{{ displayedCode }}</code></pre>
         </Card>
     </div>
 </template>

package/src/components/content/Flow.vue

@@ -42,7 +42,7 @@ const isVertical = () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
+        <Card data-aos="blur-up">
             <!-- Card header -->
             <CardHeader v-if="props.title || props.description">
                 <!-- Card title -->
@@ -62,12 +62,12 @@ const isVertical = () => {
                     <!-- Flow items -->
                     <template v-for="(item, index) in props.items" :key="`${getItemLabel(item)}-${index}`">
                         <!-- Flow item -->
-                        <Card class="flex-1 overflow-hidden md:flex md:items-center">
+                        <Card data-aos="blur-up" :data-aos-delay="100 + index * 90" class="flex-1 overflow-hidden transition-[border-color,translate] duration-300 ease-spring hover:-translate-y-0.5 hover:border-primary/40 md:flex md:items-center">
                             <CardContent class="w-full gap-3 md:justify-center">
                                 <!-- Flow item header -->
                                 <div class="inline-flex items-center gap-3 text-xs font-semibold text-foreground">
                                     <!-- Flow item number -->
-                                    <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) text-xs font-semibold text-(--text-secondary-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark)">
+                                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 bg-primary/10 text-xs font-bold text-primary">
                                         {{ index + 1 }}
                                     </span>
 
@@ -83,7 +83,7 @@ const isVertical = () => {
                         </Card>
 
                         <!-- Flow item separator -->
-                        <div v-if="index < props.items.length - 1" class="flex items-center justify-center text-muted-foreground">
+                        <div v-if="index < props.items.length - 1" data-aos="blur-up" :data-aos-delay="140 + index * 90" class="flex items-center justify-center text-primary">
                             <!-- Flow item separator for vertical orientation -->
                             <HugeiconsIcon v-if="isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0" />
 

package/src/components/content/ProseHr.vue

@@ -12,18 +12,18 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div aria-hidden="true" class="not-prose my-6 sm:my-12">
+    <div aria-hidden="true" data-aos="blur-up" class="not-prose my-8 sm:my-14">
         <div class="flex items-center gap-3 sm:gap-4">
             <!-- Left line -->
-            <div class="h-px flex-1 bg-linear-to-r from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
+            <div class="h-px flex-1 bg-linear-to-r from-transparent via-border to-primary/50" />
 
             <!-- Icon in the middle -->
-            <div class="flex h-9 w-9 items-center justify-center rounded bg-card border border-border">
-                <HugeiconsIcon :icon="props.icon" class="size-4 text-muted-foreground" />
+            <div class="flex size-10 rotate-45 items-center justify-center rounded border border-primary/30 bg-card shadow-glow">
+                <HugeiconsIcon :icon="props.icon" class="size-4 -rotate-45 text-primary" />
             </div>
 
             <!-- Right line -->
-            <div class="h-px flex-1 bg-linear-to-l from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
+            <div class="h-px flex-1 bg-linear-to-l from-transparent via-border to-primary/50" />
         </div>
     </div>
 </template>

package/src/components/content/Terminal.vue

@@ -42,10 +42,16 @@ const copyCommands = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
+        <Card data-aos="blur-up" class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
             <!-- Terminal header -->
-            <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+            <div class="flex items-center justify-between gap-3 border-b border-border bg-card px-3 py-2 sm:px-4">
                 <div class="flex min-w-0 items-center gap-2">
+                    <!-- Window dots -->
+                    <span aria-hidden="true" class="mr-1 flex items-center gap-1.5">
+                        <span class="size-2.5 rounded-full bg-red-400/80" />
+                        <span class="size-2.5 rounded-full bg-amber-400/80" />
+                        <span class="size-2.5 rounded-full bg-green-400/80" />
+                    </span>
                     <HugeiconsIcon :icon="TerminalIcon" class="size-4 shrink-0 text-muted-foreground" />
                     <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
                 </div>
@@ -54,7 +60,7 @@ const copyCommands = async () => {
                 <Button v-if="props.copyable"
                     variant="ghost"
                     size="icon"
-                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
+                    class="size-7 text-muted-foreground hover:bg-accent hover:text-foreground"
                     :aria-label="t('uiVintage.terminal.copy')"
                     :title="t('uiVintage.terminal.copy')"
                     :disabled="!commandText"
@@ -64,7 +70,7 @@ const copyCommands = async () => {
             </div>
 
             <!-- Terminal commands -->
-            <pre class="overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-3 select-none text-muted-foreground" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
+            <pre class="overflow-x-auto bg-surface px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-3 select-none text-primary" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
         </Card>
     </div>
 </template>

package/src/components/cookie-consent/CookieConsent.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, type HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+import { cn } from '../../lib/utils';
+import { useCookieConsent } from './useCookieConsent';
+
+// Extra attributes go on the banner (the root is the Teleport)
+defineOptions({ inheritAttrs: false });
+
+// Props
+const props = withDefaults(defineProps<{
+    storageKey?: string;
+    message?: string;
+    policyTo?: string;
+    policyLabel?: string;
+    acceptLabel?: string;
+    declineLabel?: string;
+    class?: HTMLAttributes['class'];
+}>(), {
+    storageKey: 'cookieConsent',
+    message: undefined,
+    policyTo: undefined,
+    policyLabel: undefined,
+    acceptLabel: undefined,
+    declineLabel: undefined,
+    class: undefined
+});
+
+// Emits
+const emit = defineEmits<{
+    accept: [];
+    decline: [];
+}>();
+
+const { t } = useI18n();
+const { consent, accept, decline } = useCookieConsent(props.storageKey);
+const hasMounted = ref(false);
+
+// Shown in the browser only, until the visitor chooses (the stored choice is not known on the server)
+const isVisible = computed(() => hasMounted.value && consent.value === null);
+
+// Texts, with translated defaults
+const resolvedMessage = computed(() => props.message || t('uiVintage.cookieConsent.message'));
+const resolvedPolicyLabel = computed(() => props.policyLabel || t('uiVintage.cookieConsent.policy'));
+const resolvedAcceptLabel = computed(() => props.acceptLabel || t('uiVintage.cookieConsent.accept'));
+const resolvedDeclineLabel = computed(() => props.declineLabel || t('uiVintage.cookieConsent.decline'));
+
+// Save the choice and notify
+const handleAccept = () => {
+    accept();
+    emit('accept');
+};
+const handleDecline = () => {
+    decline();
+    emit('decline');
+};
+
+// Wait for the browser before showing the banner
+onMounted(() => {
+    hasMounted.value = true;
+});
+</script>
+
+<template>
+    <!-- Rendered in the body: a transformed or filtered ancestor (page transitions, reveal animations) would otherwise pin the fixed banner to itself instead of the viewport -->
+    <Teleport to="body">
+        <div v-if="isVisible" v-bind="$attrs" data-slot="cookie-consent" role="region" :aria-label="t('uiVintage.cookieConsent.region')" :class="cn('fixed inset-x-4 bottom-4 z-50 sm:left-auto sm:right-4 sm:max-w-md', props.class)">
+            <Card class="gap-3! p-4 shadow-elevated-sm">
+                <p class="text-sm text-foreground">
+                    {{ resolvedMessage }}
+                    <NuxtLinkLocale v-if="props.policyTo" :to="props.policyTo" class="font-bold underline underline-offset-2">{{ resolvedPolicyLabel }}</NuxtLinkLocale>
+                </p>
+                <div class="flex flex-wrap justify-end gap-2">
+                    <Button variant="secondary" size="sm" @click="handleDecline">{{ resolvedDeclineLabel }}</Button>
+                    <Button variant="primary" size="sm" @click="handleAccept">{{ resolvedAcceptLabel }}</Button>
+                </div>
+            </Card>
+        </div>
+    </Teleport>
+</template>

package/src/components/cookie-consent/index.ts

@@ -0,0 +1,3 @@
+export { default } from './CookieConsent.vue';
+export { default as CookieConsent } from './CookieConsent.vue';
+export { useCookieConsent, type CookieConsentValue } from './useCookieConsent';

package/src/components/cookie-consent/useCookieConsent.ts

@@ -0,0 +1,55 @@
+import { ref, type Ref } from 'vue';
+
+// The visitor's choice: 'granted', 'denied' or null (not asked yet)
+export type CookieConsentValue = 'granted' | 'denied' | null;
+
+// One shared state per storage key, so the banner and the code loading the scripts stay in sync (browser only)
+const consentStates = new Map<string, Ref<CookieConsentValue>>();
+
+// Read the stored choice (storage can be unavailable, e.g. blocked in private windows)
+const readStoredConsent = (storageKey: string): CookieConsentValue => {
+    try {
+        const value = localStorage.getItem(storageKey);
+        return value === 'granted' || value === 'denied' ? value : null;
+    } catch {
+        return null;
+    }
+};
+
+// Cookie consent state: gate optional scripts (analytics, ads) on `consent.value === 'granted'` and call `reset()` to ask again
+export const useCookieConsent = (storageKey = 'cookieConsent') => {
+    // On the server there is no stored choice (and no state must be shared between requests)
+    if (typeof window === 'undefined') {
+        const consent = ref<CookieConsentValue>(null);
+        const noop = () => {};
+        return { consent, accept: noop, decline: noop, reset: noop };
+    }
+
+    // Shared state for this key
+    let consent = consentStates.get(storageKey);
+    if (!consent) {
+        consent = ref(readStoredConsent(storageKey));
+        consentStates.set(storageKey, consent);
+    }
+
+    // Save a choice (null removes it, so the banner asks again)
+    const state = consent;
+    const setConsent = (value: CookieConsentValue) => {
+        state.value = value;
+        try {
+            if (value) {
+                localStorage.setItem(storageKey, value);
+            } else {
+                localStorage.removeItem(storageKey);
+            }
+        } catch { }
+    };
+
+    // Return the state and the actions
+    return {
+        consent: state,
+        accept: () => setConsent('granted'),
+        decline: () => setConsent('denied'),
+        reset: () => setConsent(null)
+    };
+};

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -77,12 +77,15 @@ const getLinkProps = (link: LandingFooterLink) => {
 
 <template>
     <footer :class="cn('relative z-10 border-t border-border bg-card', props.class)">
+        <!-- Accent line -->
+        <div aria-hidden="true" class="absolute inset-x-0 -top-px h-px bg-linear-to-r from-transparent via-primary/60 to-transparent" />
+
         <div :class="cn('mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8', props.containerClass)">
             <div :class="cn('flex flex-col gap-8 md:flex-row md:items-start md:justify-between')">
                 <!-- Brand section -->
                 <div :class="cn('max-w-md flex-1', props.brandClass)">
                     <!-- App logo and name -->
-                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-opacity hover:opacity-80">
+                    <a :href="props.appLinkTo" class="mb-4 inline-flex items-center gap-2 text-lg font-semibold tracking-tight text-foreground transition-[opacity,scale] duration-300 ease-spring hover:scale-[1.02] hover:opacity-90">
                         <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="lazy" decoding="async" :class="cn('size-8 shrink-0 object-contain', props.logoClass)" />
                         <span>{{ props.appName }}</span>
                     </a>
@@ -104,7 +107,8 @@ const getLinkProps = (link: LandingFooterLink) => {
                         <!-- Section links -->
                         <ul class="space-y-3 text-xs sm:text-sm">
                             <li v-for="link in props.sections[0]?.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="group/link inline-flex items-center gap-1.5 text-muted-foreground transition-colors duration-150 hover:text-primary">
+                                    <span class="h-px w-0 bg-primary transition-[width] duration-300 ease-spring group-hover/link:w-3" />
                                     {{ link.label }}
                                 </component>
                             </li>
@@ -123,7 +127,8 @@ const getLinkProps = (link: LandingFooterLink) => {
                         <!-- Section links -->
                         <ul class="space-y-3 text-xs sm:text-sm">
                             <li v-for="link in section.links" :key="link.id">
-                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="text-muted-foreground hover:underline">
+                                <component :is="props.linkComponent" v-bind="getLinkProps(link)" class="group/link inline-flex items-center gap-1.5 text-muted-foreground transition-colors duration-150 hover:text-primary">
+                                    <span class="h-px w-0 bg-primary transition-[width] duration-300 ease-spring group-hover/link:w-3" />
                                     {{ link.label }}
                                 </component>
                             </li>
@@ -142,7 +147,7 @@ const getLinkProps = (link: LandingFooterLink) => {
                 <!-- Author -->
                 <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
                     <span>{{ t('uiVintage.footer.madeWith') }}</span>
-                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-700 dark:text-red-400" />
+                    <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-600 transition-[scale] duration-300 ease-bounce hover:scale-125 dark:text-red-400" />
                     <span>{{ t('uiVintage.footer.by') }}</span>
                     <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
                         {{ props.authorName }}