@brumaombra/ui-vintage 0.8.1 → 0.8.2

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/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 }}

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import BlogProgressBar from '../../blog/BlogProgressBar.vue';
 import { cn } from '../../../lib/utils';
@@ -21,62 +22,57 @@ const props = withDefaults(defineProps<{
     appLinkTo: '/',
     showProgress: false
 });
-</script>
 
-<template>
-    <header :class="cn('sticky top-0 z-30 flex h-20 w-full flex-wrap border-b border-transparent bg-transparent text-card-foreground landing-navbar-sticky sm:flex-nowrap sm:justify-start', props.class)">
-        <nav :class="cn('mx-auto flex max-w-6xl basis-full items-center justify-between px-3 sm:px-6 lg:px-8', props.containerClass)">
-            <!-- Left-aligned content -->
-            <div :class="cn('flex items-center', props.leftClass)">
-                <slot name="left">
-                    <a :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-opacity hover:opacity-80">
-                        <!-- App logo -->
-                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
+const SCROLL_THRESHOLD_PX = 12;
+const isScrolled = ref(false);
 
-                        <!-- App name -->
-                        <span v-if="props.appName" class="hidden sm:inline! text-xl font-bold tracking-tight text-foreground">
-                            {{ props.appName }}
-                        </span>
-                    </a>
-                </slot>
-            </div>
+// Float the navbar once the page leaves the top
+const handleScroll = () => {
+    isScrolled.value = window.scrollY > SCROLL_THRESHOLD_PX;
+};
 
-            <!-- Right-aligned content -->
-            <div :class="cn('flex items-center justify-end gap-2 sm:gap-3', props.rightClass)">
-                <slot name="right" />
-            </div>
-        </nav>
+// On component mounted
+onMounted(() => {
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+});
 
-        <!-- Progress bar -->
-        <div v-if="props.showProgress" class="absolute inset-x-0 bottom-0 translate-y-full">
-            <BlogProgressBar />
-        </div>
-    </header>
-</template>
+// On before component unmount
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
+</script>
 
-<style scoped>
-.landing-navbar-sticky {
-    animation: landing-navbar-scroll linear both;
-    animation-range: 0 160px;
-    animation-timeline: scroll(root);
-}
+<template>
+    <!-- Transparent at the top of the page, a floating card once scrolled -->
+    <header :data-scrolled="isScrolled ? '' : undefined" :class="cn('sticky top-0 z-30 w-full text-card-foreground transition-[padding] duration-500 ease-out-expo', isScrolled ? 'px-2 pt-2 sm:px-4 sm:pt-3' : 'px-0 pt-0', props.class)">
+        <div :class="cn('relative mx-auto border transition-[max-width,border-radius,background-color,border-color,box-shadow] duration-500 ease-out-expo', isScrolled ? 'max-w-5xl rounded border-border bg-card shadow-elevated-md' : 'max-w-6xl rounded-none border-transparent bg-transparent shadow-none')">
+            <nav :class="cn('flex items-center justify-between px-3 transition-[height] duration-500 ease-out-expo sm:px-6 lg:px-8', isScrolled ? 'h-16 sm:px-5 lg:px-5' : 'h-20', props.containerClass)">
+                <!-- Left-aligned content -->
+                <div :class="cn('flex items-center', props.leftClass)">
+                    <slot name="left">
+                        <a :href="props.appLinkTo" class="inline-flex items-center gap-2 transition-[opacity,scale] duration-300 ease-spring hover:scale-[1.02] hover:opacity-90">
+                            <!-- App logo -->
+                            <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
 
-@keyframes landing-navbar-scroll {
-    from {
-        background-color: transparent;
-        border-bottom-color: transparent;
-    }
+                            <!-- App name -->
+                            <span v-if="props.appName" class="hidden sm:inline! text-xl font-bold tracking-tight text-foreground">
+                                {{ props.appName }}
+                            </span>
+                        </a>
+                    </slot>
+                </div>
 
-    to {
-        background-color: var(--card);
-        border-bottom-color: var(--border);
-    }
-}
+                <!-- Right-aligned content -->
+                <div :class="cn('flex items-center justify-end gap-2 sm:gap-3', props.rightClass)">
+                    <slot name="right" />
+                </div>
+            </nav>
 
-@supports not (animation-timeline: scroll()) {
-    .landing-navbar-sticky {
-        border-bottom-color: var(--border);
-        background-color: var(--card);
-    }
-}
-</style>
+            <!-- Reading progress along the bottom edge of the floating bar -->
+            <div v-if="props.showProgress" :class="cn('absolute inset-x-1 bottom-0 transition-opacity duration-300', isScrolled ? 'opacity-100' : 'opacity-0')">
+                <BlogProgressBar />
+            </div>
+        </div>
+    </header>
+</template>

package/src/components/landing/landing-shell/LandingShell.vue

@@ -24,8 +24,13 @@ const hasStructuredSlots = computed(() => {
 
 <template>
     <div :class="cn('relative flex min-h-screen flex-col bg-background text-foreground', props.rootClass)">
-        <!-- Background grid -->
-        <BackgroundGrid v-if="props.showBackground" />
+        <!-- Background grid and a warm ambient glow at the top -->
+        <template v-if="props.showBackground">
+            <BackgroundGrid />
+            <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 z-0 h-[36rem] overflow-hidden">
+                <div class="absolute -top-48 left-1/2 h-96 w-[56rem] max-w-[140%] -translate-x-1/2 rounded-full bg-primary/10 blur-[110px]" />
+            </div>
+        </template>
 
         <!-- If structured slots are provided, render them -->
         <template v-if="hasStructuredSlots">

package/src/components/ui/accordion/Accordion.vue

@@ -40,13 +40,13 @@ const toggleExpanded = () => {
 </script>
 
 <template>
-    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden sm:gap-0! p-0! data-[state=open]:border-border-strong', props.class)">
+    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden sm:gap-0! p-0! data-[state=open]:border-primary/25', props.class)">
         <!-- Header -->
-        <button type="button" :aria-expanded="expanded" :aria-controls="contentId" class="flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left outline-none transition-colors duration-150 hover:bg-surface/70 focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
+        <button type="button" :aria-expanded="expanded" :aria-controls="contentId" class="group/trigger flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left outline-none focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
             <div class="flex min-w-0 items-center gap-3">
                 <!-- Icon -->
-                <div v-if="props.icon" class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[border-color,color] duration-200 group-data-[state=open]/accordion:border-primary/60 md:size-10">
-                    <HugeiconsIcon :icon="props.icon" :class="cn('size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary', props.iconClass)" />
+                <div v-if="props.icon" class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[border-color,color] duration-200 group-hover/trigger:border-primary/60 group-data-[state=open]/accordion:border-primary/60 md:size-10">
+                    <HugeiconsIcon :icon="props.icon" :class="cn('size-4 text-muted-foreground transition-colors duration-200 group-hover/trigger:text-primary group-data-[state=open]/accordion:text-primary', props.iconClass)" />
                 </div>
 
                 <!-- Title -->
@@ -56,8 +56,8 @@ const toggleExpanded = () => {
             </div>
 
             <!-- Toggle icon -->
-            <div class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[rotate,border-color,background-color] duration-[420ms] ease-spring group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:border-primary/50 group-data-[state=open]/accordion:bg-primary/10">
-                <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary" />
+            <div class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[rotate,border-color,background-color] duration-[420ms] ease-spring group-hover/trigger:border-primary/50 group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:border-primary/50 group-data-[state=open]/accordion:bg-primary/10">
+                <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-muted-foreground transition-colors duration-200 group-hover/trigger:text-primary group-data-[state=open]/accordion:text-primary" />
             </div>
         </button>
 

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -14,7 +14,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+    <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-6 items-center justify-center rounded-sm transition-colors duration-150 hover:bg-accent hover:text-primary', props.class)">
         <!-- Default slot content -->
         <slot>
             <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />

package/src/components/ui/breadcrumb/BreadcrumbLink.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
 </script>
 
 <template>
-    <Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('text-muted-foreground hover:underline', props.class)">
+    <Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('rounded-sm bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat text-muted-foreground outline-none transition-[color,background-size] duration-300 ease-out-expo hover:bg-[length:100%_1px] hover:text-primary focus-visible:ring-[3px] focus-visible:ring-ring/45', props.class)">
         <slot />
     </Primitive>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbList.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <ol data-slot="breadcrumb-list" :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', props.class)">
+    <ol data-slot="breadcrumb-list" :class="cn('flex w-fit max-w-full flex-wrap items-center gap-1.5 rounded border border-border bg-card px-3 py-1.5 text-xs wrap-break-word text-muted-foreground shadow-elevated-sm sm:gap-2 sm:text-sm', props.class)">
         <slot />
     </ol>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbPage.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('text-foreground font-normal', props.class)">
+    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('min-w-0 font-semibold text-foreground', props.class)">
         <slot />
     </span>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 
 // Props
@@ -11,9 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
-        </slot>
+    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('font-semibold text-primary/50 select-none [&>svg]:size-3.5', props.class)">
+        <slot>/</slot>
     </li>
 </template>

package/src/components/ui/card/Card.vue

@@ -44,7 +44,7 @@ const handlePointerMove = (event: PointerEvent) => {
     <div ref="cardRef" data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
         'relative flex flex-col gap-4 sm:gap-6! rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
         colorClasses,
-        props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:border-border-strong hover:shadow-elevated-lg active:translate-y-0 active:duration-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-300 before:bg-[radial-gradient(360px_circle_at_var(--uv-spot-x,50%)_var(--uv-spot-y,50%),color-mix(in_oklab,var(--primary)_9%,transparent),transparent_70%)] hover:before:opacity-100',
+        props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-elevated-lg active:translate-y-0 active:duration-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-300 before:bg-[radial-gradient(360px_circle_at_var(--uv-spot-x,50%)_var(--uv-spot-y,50%),color-mix(in_oklab,var(--primary)_9%,transparent),transparent_70%)] hover:before:opacity-100',
         props.class,
     )" @pointermove="handlePointerMove">
         <slot />

package/src/components/ui/command/CommandItem.vue

@@ -67,8 +67,8 @@ onUnmounted(() => {
 
 <template>
     <ListboxItem v-if="isRender" v-bind="forwarded" :id="id" ref="itemRef" data-slot="command-item" :class="cn(
-        'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-muted-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
-        'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100',
+        'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-left text-sm font-semibold text-muted-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100 data-[state=checked]:before:scale-y-100',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-current',
         props.class,
     )" @select="

package/src/i18n/de.json

@@ -92,7 +92,9 @@
                 "x": "Auf X teilen",
                 "whatsapp": "Auf WhatsApp teilen",
                 "linkedin": "Auf LinkedIn teilen",
-                "telegram": "Auf Telegram teilen"
+                "telegram": "Auf Telegram teilen",
+                "copy": "Link kopieren",
+                "copied": "Link kopiert"
             }
         },
         "select": {

package/src/i18n/en.json

@@ -92,7 +92,9 @@
                 "x": "Share on X",
                 "whatsapp": "Share on WhatsApp",
                 "linkedin": "Share on LinkedIn",
-                "telegram": "Share on Telegram"
+                "telegram": "Share on Telegram",
+                "copy": "Copy link",
+                "copied": "Link copied"
             }
         },
         "select": {