@brumaombra/ui-vintage 0.8.0 → 0.8.2

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/animated-number/AnimatedNumber.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { cn } from '../../../lib/utils';
 
 // Props
@@ -22,8 +22,12 @@ const props = withDefaults(defineProps<{
     animateOnMount: true
 });
 
-const displayValue = ref(props.animateOnMount ? 0 : props.value);
+// The server always renders the final value (search engines, link previews and the first paint never see a 0), the count-up only runs for components created in the browser
+const isServer = typeof window === 'undefined';
+const displayValue = ref(props.animateOnMount && !isServer ? 0 : props.value);
 const direction = ref<'up' | 'down' | null>(null);
+const instance = getCurrentInstance();
+let isHydrated = false;
 let frame: number | null = null;
 
 // Format the displayed value
@@ -34,6 +38,9 @@ const formatter = computed(() => {
 });
 const formattedValue = computed(() => `${props.prefix}${formatter.value.format(displayValue.value)}${props.suffix}`);
 
+// Final value announced to screen readers from visually hidden text (the animated digits are hidden from them, and aria-label is not allowed on a span without a role)
+const accessibleValue = computed(() => `${props.prefix}${formatter.value.format(props.value)}${props.suffix}`);
+
 // Decelerating curve so the count settles gently on the final value
 const easeOutExpo = (progress: number) => progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
 
@@ -70,9 +77,15 @@ const animateTo = (target: number) => {
 // Re-animate whenever the value changes
 watch(() => props.value, value => animateTo(value));
 
-// Count up on mount
+// When hydrating server HTML (the element already exists before the first render), keep the final value the server rendered, so there is no mismatch and no flash to 0
+onBeforeMount(() => {
+    isHydrated = !!instance?.vnode.el;
+    if (isHydrated) displayValue.value = props.value;
+});
+
+// Count up on mount (only for components created in the browser, server-rendered ones already show the final value)
 onMounted(() => {
-    if (props.animateOnMount) animateTo(props.value);
+    if (props.animateOnMount && !isHydrated) animateTo(props.value);
 });
 
 // Stop any pending frame
@@ -82,7 +95,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <span data-slot="animated-number" :data-direction="direction ?? undefined" :aria-label="`${props.prefix}${formatter.format(props.value)}${props.suffix}`" :class="cn('inline-block tabular-nums', props.class)">
+    <span data-slot="animated-number" :data-direction="direction ?? undefined" :class="cn('inline-block tabular-nums', props.class)">
         <span aria-hidden="true">{{ formattedValue }}</span>
+        <span class="sr-only">{{ accessibleValue }}</span>
     </span>
 </template>

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": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Benachrichtigungen"
         },
+        "cookieConsent": {
+            "region": "Cookie-Einwilligung",
+            "message": "Wir verwenden optionale Cookies, um zu verstehen, wie die Website genutzt wird. Sie werden nur gesetzt, wenn du zustimmst.",
+            "policy": "Cookie-Richtlinie",
+            "accept": "Akzeptieren",
+            "decline": "Ablehnen"
+        },
         "dataTable": {
             "selectAll": "Alle Zeilen auswählen",
             "selectRow": "Zeile auswählen"

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": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Notifications"
         },
+        "cookieConsent": {
+            "region": "Cookie consent",
+            "message": "We use optional cookies to understand how the site is used. They are only set if you accept.",
+            "policy": "Cookie policy",
+            "accept": "Accept",
+            "decline": "Decline"
+        },
         "dataTable": {
             "selectAll": "Select all rows",
             "selectRow": "Select row"

package/src/i18n/es.json

@@ -92,7 +92,9 @@
                 "x": "Compartir en X",
                 "whatsapp": "Compartir en WhatsApp",
                 "linkedin": "Compartir en LinkedIn",
-                "telegram": "Compartir en Telegram"
+                "telegram": "Compartir en Telegram",
+                "copy": "Copiar enlace",
+                "copied": "Enlace copiado"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Notificaciones"
         },
+        "cookieConsent": {
+            "region": "Consentimiento de cookies",
+            "message": "Usamos cookies opcionales para entender cómo se usa el sitio. Solo se instalan si aceptas.",
+            "policy": "Política de cookies",
+            "accept": "Aceptar",
+            "decline": "Rechazar"
+        },
         "dataTable": {
             "selectAll": "Seleccionar todas las filas",
             "selectRow": "Seleccionar fila"

package/src/i18n/fr.json

@@ -92,7 +92,9 @@
                 "x": "Partager sur X",
                 "whatsapp": "Partager sur WhatsApp",
                 "linkedin": "Partager sur LinkedIn",
-                "telegram": "Partager sur Telegram"
+                "telegram": "Partager sur Telegram",
+                "copy": "Copier le lien",
+                "copied": "Lien copié"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Notifications"
         },
+        "cookieConsent": {
+            "region": "Consentement aux cookies",
+            "message": "Nous utilisons des cookies facultatifs pour comprendre comment le site est utilisé. Ils ne sont déposés que si vous acceptez.",
+            "policy": "Politique relative aux cookies",
+            "accept": "Accepter",
+            "decline": "Refuser"
+        },
         "dataTable": {
             "selectAll": "Sélectionner toutes les lignes",
             "selectRow": "Sélectionner la ligne"

package/src/i18n/it.json

@@ -92,7 +92,9 @@
                 "x": "Condividi su X",
                 "whatsapp": "Condividi su WhatsApp",
                 "linkedin": "Condividi su LinkedIn",
-                "telegram": "Condividi su Telegram"
+                "telegram": "Condividi su Telegram",
+                "copy": "Copia link",
+                "copied": "Link copiato"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Notifiche"
         },
+        "cookieConsent": {
+            "region": "Consenso ai cookie",
+            "message": "Usiamo cookie facoltativi per capire come viene usato il sito. Vengono impostati solo se accetti.",
+            "policy": "Politica sui cookie",
+            "accept": "Accetta",
+            "decline": "Rifiuta"
+        },
         "dataTable": {
             "selectAll": "Seleziona tutte le righe",
             "selectRow": "Seleziona riga"

package/src/i18n/ja.json

@@ -92,7 +92,9 @@
                 "x": "X で共有",
                 "whatsapp": "WhatsApp で共有",
                 "linkedin": "LinkedIn で共有",
-                "telegram": "Telegram で共有"
+                "telegram": "Telegram で共有",
+                "copy": "リンクをコピー",
+                "copied": "リンクをコピーしました"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "通知"
         },
+        "cookieConsent": {
+            "region": "Cookieの同意",
+            "message": "サイトの利用状況を把握するため、任意のCookieを使用しています。同意した場合にのみ設定されます。",
+            "policy": "Cookieポリシー",
+            "accept": "同意する",
+            "decline": "拒否する"
+        },
         "dataTable": {
             "selectAll": "すべての行を選択",
             "selectRow": "行を選択"

package/src/i18n/pt.json

@@ -92,7 +92,9 @@
                 "x": "Partilhar no X",
                 "whatsapp": "Partilhar no WhatsApp",
                 "linkedin": "Partilhar no LinkedIn",
-                "telegram": "Partilhar no Telegram"
+                "telegram": "Partilhar no Telegram",
+                "copy": "Copiar link",
+                "copied": "Link copiado"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Notificações"
         },
+        "cookieConsent": {
+            "region": "Consentimento de cookies",
+            "message": "Usamos cookies opcionais para entender como o site é usado. Eles só são definidos se você aceitar.",
+            "policy": "Política de cookies",
+            "accept": "Aceitar",
+            "decline": "Recusar"
+        },
         "dataTable": {
             "selectAll": "Selecionar todas as linhas",
             "selectRow": "Selecionar linha"

package/src/i18n/ru.json

@@ -92,7 +92,9 @@
                 "x": "Поделиться в X",
                 "whatsapp": "Поделиться в WhatsApp",
                 "linkedin": "Поделиться в LinkedIn",
-                "telegram": "Поделиться в Telegram"
+                "telegram": "Поделиться в Telegram",
+                "copy": "Копировать ссылку",
+                "copied": "Ссылка скопирована"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "Уведомления"
         },
+        "cookieConsent": {
+            "region": "Согласие на cookie",
+            "message": "Мы используем необязательные файлы cookie, чтобы понимать, как используется сайт. Они устанавливаются только с вашего согласия.",
+            "policy": "Политика cookie",
+            "accept": "Принять",
+            "decline": "Отклонить"
+        },
         "dataTable": {
             "selectAll": "Выбрать все строки",
             "selectRow": "Выбрать строку"

package/src/i18n/zh.json

@@ -92,7 +92,9 @@
                 "x": "分享到 X",
                 "whatsapp": "分享到 WhatsApp",
                 "linkedin": "分享到 LinkedIn",
-                "telegram": "分享到 Telegram"
+                "telegram": "分享到 Telegram",
+                "copy": "复制链接",
+                "copied": "链接已复制"
             }
         },
         "select": {
@@ -118,6 +120,13 @@
         "toast": {
             "region": "通知"
         },
+        "cookieConsent": {
+            "region": "Cookie 同意",
+            "message": "我们使用可选的 Cookie 来了解网站的使用情况。只有在您同意后才会设置。",
+            "policy": "Cookie 政策",
+            "accept": "接受",
+            "decline": "拒绝"
+        },
         "dataTable": {
             "selectAll": "全选所有行",
             "selectRow": "选择行"

package/src/styles.css

@@ -167,6 +167,24 @@ html {
     --animate-uv-ping-soft: uv-ping-soft 1.8s var(--ease-out-expo) infinite;
     --animate-uv-indeterminate: uv-indeterminate 1.4s var(--ease-snappy) infinite;
     --animate-uv-gradient: uv-gradient 6s ease infinite;
+    --animate-uv-word-in: uv-word-in 0.9s var(--ease-spring) both;
+    --animate-uv-grow-x: uv-grow-x 0.9s var(--ease-out-expo) both;
+    --animate-uv-ken-burns: uv-ken-burns 9s ease-out both;
+
+    @keyframes uv-word-in {
+        0% { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
+        100% { opacity: 1; transform: translateY(0); filter: blur(0); }
+    }
+
+    @keyframes uv-grow-x {
+        0% { transform: scaleX(0); }
+        100% { transform: scaleX(1); }
+    }
+
+    @keyframes uv-ken-burns {
+        0% { transform: scale(1.12); }
+        100% { transform: scale(1); }
+    }
 
     @keyframes uv-shimmer {
         0% { transform: translateX(-100%); }
@@ -419,6 +437,28 @@ body {
     color: var(--text-primary-dark);
 }
 
+/*********************** AOS scroll animations ***********************/
+
+/*
+ * "blur-up" animation for AOS (https://github.com/michalsnik/aos), used by the blog components through data-aos="blur-up".
+ * Elements are only hidden once AOS has initialized them (.aos-init), so apps without AOS always show the content.
+ * The repeated attribute selector outranks the global AOS easing and duration rules; data-aos-delay keeps working.
+ */
+[data-aos="blur-up"][data-aos="blur-up"][data-aos="blur-up"].aos-init {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0);
+    filter: blur(6px);
+    transition-property: opacity, transform, filter;
+    transition-duration: 700ms, 900ms, 700ms;
+    transition-timing-function: var(--ease-out-expo), var(--ease-spring), var(--ease-out-expo);
+}
+
+[data-aos="blur-up"][data-aos="blur-up"][data-aos="blur-up"].aos-init.aos-animate {
+    opacity: 1;
+    transform: none;
+    filter: none;
+}
+
 /*********************** Page transition animations ***********************/
 
 .page-enter-active {