@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/components/blog/HeaderCarousel.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
-import { Card, CardContent } from '../ui/card';
+import { cn } from '../../lib/utils';
 
 const { t } = useI18n();
 
@@ -24,180 +24,152 @@ const props = withDefaults(defineProps<{
     featuredPosts: () => []
 });
 
+const AUTOPLAY_DURATION_MS = 6000;
+const SWIPE_THRESHOLD_PX = 50;
+
 // Carousel state
 const currentSlide = ref(0);
+const isPaused = ref(false);
+const motionAllowed = ref(false);
 const slideCount = computed(() => props.featuredPosts.length || 0);
-const intervalId = ref<ReturnType<typeof setInterval> | null>(null);
-const direction = ref<'forward' | 'backward'>('forward');
-
-// Start auto-play functionality
-const startAutoPlay = () => {
-    intervalId.value = setInterval(nextSlide, 5000);
-};
+const autoplayEnabled = computed(() => motionAllowed.value && slideCount.value > 1);
+const slideIdPrefix = `carousel-${useId()}-slide`;
 
-// Stop auto-play functionality
-const stopAutoPlay = () => {
-    if (intervalId.value) clearInterval(intervalId.value);
-};
+// Keep the active slide in range when the list of posts shrinks
+watch(slideCount, (count) => {
+    if (currentSlide.value >= count) {
+        currentSlide.value = Math.max(0, count - 1);
+    }
+});
+let swipeStartX: number | null = null;
 
 // Handle next slide press
 const nextSlide = () => {
-    direction.value = 'forward';
     currentSlide.value = (currentSlide.value + 1) % slideCount.value;
 };
 
 // Handle previous slide press
 const prevSlide = () => {
-    direction.value = 'backward';
     currentSlide.value = (currentSlide.value - 1 + slideCount.value) % slideCount.value;
 };
 
 // Go to specific slide
 const goToSlide = (index: number) => {
-    // Determine direction
-    if (index > currentSlide.value) {
-        direction.value = 'forward';
-    } else {
-        direction.value = 'backward';
-    }
-
-    // Set current slide
     currentSlide.value = index;
 };
 
-// Start autoplay when component mounts
+// Pause autoplay while the user hovers, focuses, or leaves the tab
+const pause = () => {
+    isPaused.value = true;
+};
+const resume = () => {
+    isPaused.value = false;
+};
+const handleVisibilityChange = () => {
+    isPaused.value = document.visibilityState !== 'visible';
+};
+
+// Keyboard navigation
+const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'ArrowRight') nextSlide();
+    if (event.key === 'ArrowLeft') prevSlide();
+};
+
+// Swipe navigation on touch devices
+const handlePointerDown = (event: PointerEvent) => {
+    if (event.pointerType !== 'mouse') swipeStartX = event.clientX;
+};
+const handlePointerUp = (event: PointerEvent) => {
+    if (swipeStartX === null) return;
+    const deltaX = event.clientX - swipeStartX;
+    swipeStartX = null;
+    if (Math.abs(deltaX) < SWIPE_THRESHOLD_PX) return;
+    if (deltaX < 0) nextSlide();
+    else prevSlide();
+};
+
+// Autoplay is driven by the progress animation of the active indicator, so the bar and the slide change always stay in sync
+const handleProgressEnd = () => {
+    if (autoplayEnabled.value) nextSlide();
+};
+
+// Allow autoplay once mounted (never with reduced motion); it starts as soon as there are at least two posts
 onMounted(() => {
-    startAutoPlay();
+    motionAllowed.value = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    document.addEventListener('visibilitychange', handleVisibilityChange);
 });
 
-// Clean up interval when component unmounts
+// Clean up listeners when component unmounts
 onUnmounted(() => {
-    stopAutoPlay();
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
 });
 </script>
 
 <template>
-    <div v-if="props.featuredPosts.length > 0" class="relative" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
-        <!-- Slides -->
-        <div class="relative overflow-hidden rounded">
-            <TransitionGroup name="slide">
-                <div v-for="(post, index) in props.featuredPosts" :id="`carousel-slide-${index}`" :key="post.path || post.title || index" v-show="currentSlide === index" class="w-full" :data-direction="direction">
-                    <Card class="p-0! overflow-hidden cursor-pointer">
-                        <CardContent class="gap-0 p-0!">
-                            <!-- Slide image -->
+    <div v-if="props.featuredPosts.length > 0" role="region" aria-roledescription="carousel" :aria-label="t('uiVintage.blog.carouselNavigation')" class="group/carousel relative isolate overflow-hidden rounded border border-border bg-card shadow-elevated-lg outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45" tabindex="0" @mouseenter="pause" @mouseleave="resume" @focusin="pause" @focusout="resume" @keydown="handleKeydown" @pointerdown="handlePointerDown" @pointerup="handlePointerUp">
+        <!-- Slides (stacked; the active one crossfades in) -->
+        <div class="relative h-[28rem] w-full md:h-[32rem]">
+            <div v-for="(post, index) in props.featuredPosts" :id="`${slideIdPrefix}-${index}`" :key="post.path || post.title || index" role="group" aria-roledescription="slide" :aria-label="`${index + 1} / ${slideCount}`" :aria-hidden="currentSlide !== index" :inert="currentSlide !== index || undefined" :class="cn('absolute inset-0 transition-[opacity,scale] duration-700 ease-out-expo', currentSlide === index ? 'z-10 scale-100 opacity-100' : 'z-0 scale-[1.02] opacity-0')">
+                <!-- Slide image with a slow zoom -->
+                <NuxtLink :to="post.path" tabindex="-1" aria-hidden="true" class="absolute inset-0 overflow-hidden">
+                    <NuxtImg v-if="post.image" :src="post.image" :alt="post.title" width="1200" height="640" format="avif" quality="45" :sizes="{ 480: '480px', 1536: '1152px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" :class="cn('size-full object-cover', currentSlide === index && 'animate-uv-ken-burns')" />
+                    <div v-else class="size-full bg-[radial-gradient(circle_at_20%_20%,color-mix(in_oklab,var(--primary)_45%,transparent),transparent_60%)] bg-surface" />
+                </NuxtLink>
+
+                <!-- Legibility shade -->
+                <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/90 via-black/45 to-black/5" />
+                <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-r from-black/50 via-transparent to-transparent" />
+
+                <!-- Slide content (replays its entrance every time the slide becomes active) -->
+                <div class="absolute inset-x-0 bottom-0 flex flex-col gap-4 p-6 pb-20 text-white md:max-w-3xl md:p-10 md:pb-24">
+                    <!-- Category badge -->
+                    <NuxtLink v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" :class="cn('w-fit', currentSlide === index && 'animate-uv-fade-up')">
+                        <Badge :text="post.categoryText" pulse class="border-white/25 bg-white/15 text-white backdrop-blur-md transition-colors hover:bg-white/25" />
+                    </NuxtLink>
+
+                    <!-- Title -->
+                    <NuxtLink :to="post.path" :class="cn('outline-none', currentSlide === index && 'animate-uv-fade-up [animation-delay:90ms]')">
+                        <h3 class="line-clamp-3 text-2xl leading-tight font-bold tracking-tight text-balance drop-shadow-sm md:text-5xl">
+                            {{ post.title }}
+                        </h3>
+                    </NuxtLink>
+
+                    <!-- Description -->
+                    <p v-if="post.description" :class="cn('line-clamp-2 max-w-2xl text-xs leading-relaxed text-white/80 md:text-base', currentSlide === index && 'animate-uv-fade-up [animation-delay:180ms]')">
+                        {{ post.description }}
+                    </p>
+
+                    <!-- Read post button -->
+                    <div :class="cn(currentSlide === index && 'animate-uv-fade-up [animation-delay:260ms]')">
+                        <Button as-child size="lg" class="group/cta">
                             <NuxtLink :to="post.path">
-                                <div class="relative w-full h-56 md:h-80 overflow-hidden">
-                                    <NuxtImg :src="post.image" :alt="post.title" width="560" height="315" format="avif" quality="35" :sizes="{ 480: '480px', 1536: '1086px' }" :loading="index === 0 ? 'eager' : 'lazy'" :fetchpriority="index === 0 ? 'high' : 'auto'" :preload="index === 0" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
-                                </div>
+                                {{ t('uiVintage.blog.goToPost') }}
+                                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/cta:translate-x-1" />
                             </NuxtLink>
-
-                            <!-- Slide content -->
-                            <div class="p-6 md:p-8">
-                                <!-- Category badge -->
-                                <NuxtLink v-if="post.categoryText && post.categoryPath" :to="post.categoryPath" class="inline-block mb-3">
-                                    <Badge color="gray" :text="post.categoryText" />
-                                </NuxtLink>
-
-                                <!-- Title -->
-                                <NuxtLink :to="post.path">
-                                    <h3 class="text-base md:text-3xl font-bold text-foreground mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
-                                        {{ post.title }}
-                                    </h3>
-                                </NuxtLink>
-
-                                <!-- Description -->
-                                <p class="text-xs md:text-base! text-muted-foreground mb-6 line-clamp-2 leading-relaxed">
-                                    {{ post.description }}
-                                </p>
-
-                                <!-- Button + indicators row -->
-                                <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
-                                    <!-- Read post button -->
-                                    <NuxtLink :to="post.path">
-                                        <Button variant="primary" class="w-full sm:w-auto">
-                                            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
-                                            {{ t('uiVintage.blog.goToPost') }}
-                                        </Button>
-                                    </NuxtLink>
-
-                                    <!-- Slide indicators -->
-                                    <div v-if="props.featuredPosts.length > 1" class="flex w-full justify-center gap-3 sm:w-auto" role="tablist" :aria-label="t('uiVintage.blog.carouselNavigation')">
-                                        <button v-for="(_, idx) in props.featuredPosts"
-                                            :key="idx"
-                                            @click="goToSlide(idx)"
-                                            :class="['h-5 w-5 sm:h-4! sm:w-4! shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-(--border-light) dark:bg-(--border-dark)', currentSlide === idx ? 'w-8! sm:w-7! bg-(--text-primary-light)! dark:bg-(--text-primary-dark)!' : '']"
-                                            :aria-label="t('uiVintage.blog.goToSlide', { index: idx + 1 })"
-                                            :aria-current="currentSlide === idx"
-                                            role="tab"
-                                            :aria-controls="`carousel-slide-${idx}`">
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
+                        </Button>
+                    </div>
                 </div>
-            </TransitionGroup>
+            </div>
         </div>
 
-        <!-- Previous slide -->
-        <button v-if="props.featuredPosts.length > 1"
-            @click="prevSlide"
-            :aria-label="t('uiVintage.blog.previousSlide')"
-            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-border bg-card px-3 py-3 rounded-[3px] transition-colors duration-200 hover:border-border-strong cursor-pointer">
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-muted-foreground" />
-        </button>
-
-        <!-- Next slide -->
-        <button v-if="props.featuredPosts.length > 1"
-            @click="nextSlide"
-            :aria-label="t('uiVintage.blog.nextSlide')"
-            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-border bg-card px-3 py-3 rounded-[3px] transition-colors duration-200 hover:border-border-strong cursor-pointer">
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-muted-foreground" />
-        </button>
+        <!-- Controls bar -->
+        <div v-if="slideCount > 1" class="absolute inset-x-0 bottom-0 z-20 flex items-center justify-between gap-4 p-6 md:px-10 md:pb-8">
+            <!-- Slide indicators (the active one fills up until the next slide) -->
+            <div class="flex items-center gap-2" role="tablist" :aria-label="t('uiVintage.blog.carouselNavigation')">
+                <button v-for="(_, index) in props.featuredPosts" :key="index" type="button" role="tab" :aria-selected="currentSlide === index" :aria-controls="`${slideIdPrefix}-${index}`" :aria-label="t('uiVintage.blog.goToSlide', { index: index + 1 })" :class="cn('relative h-1.5 cursor-pointer overflow-hidden rounded-full bg-white/30 outline-none transition-[width,background-color] duration-500 ease-spring hover:bg-white/50 focus-visible:ring-2 focus-visible:ring-white', currentSlide === index ? 'w-12' : 'w-4')" @click="goToSlide(index)">
+                    <span v-if="currentSlide === index" :key="`progress-${currentSlide}`" class="absolute inset-0 origin-left rounded-full bg-primary" :style="autoplayEnabled ? { animation: `uv-grow-x ${AUTOPLAY_DURATION_MS}ms linear both`, animationPlayState: isPaused ? 'paused' : 'running' } : undefined" @animationend="handleProgressEnd" />
+                </button>
+            </div>
+
+            <!-- Previous and next buttons -->
+            <div class="flex items-center gap-2">
+                <button type="button" :aria-label="t('uiVintage.blog.previousSlide')" class="flex size-10 cursor-pointer items-center justify-center rounded border border-white/25 bg-black/30 text-white backdrop-blur-md outline-none [transition:background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-white/20 active:scale-90 focus-visible:ring-2 focus-visible:ring-white" @click="prevSlide">
+                    <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
+                </button>
+                <button type="button" :aria-label="t('uiVintage.blog.nextSlide')" class="flex size-10 cursor-pointer items-center justify-center rounded border border-white/25 bg-black/30 text-white backdrop-blur-md outline-none [transition:background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-white/20 active:scale-90 focus-visible:ring-2 focus-visible:ring-white" @click="nextSlide">
+                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+                </button>
+            </div>
+        </div>
     </div>
-</template>
-
-<style scoped>
-.slide-enter-active,
-.slide-leave-active {
-    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
-    will-change: transform, opacity, filter;
-}
-
-.slide-enter-from[data-direction="forward"] {
-    opacity: 0;
-    transform: translateX(12%) scale(0.985);
-    filter: blur(4px);
-}
-
-.slide-leave-to[data-direction="forward"] {
-    opacity: 0;
-    transform: translateX(-12%) scale(0.985);
-    filter: blur(4px);
-}
-
-.slide-enter-from[data-direction="backward"] {
-    opacity: 0;
-    transform: translateX(-12%) scale(0.985);
-    filter: blur(4px);
-}
-
-.slide-leave-to[data-direction="backward"] {
-    opacity: 0;
-    transform: translateX(12%) scale(0.985);
-    filter: blur(4px);
-}
-
-.slide-leave-active {
-    position: absolute;
-    width: 100%;
-}
-
-.slide-enter-to,
-.slide-leave-from {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-    filter: blur(0);
-}
-</style>
+</template>

package/src/components/blog/PostCard.vue

@@ -3,9 +3,7 @@ import { NuxtImg } from '#components';
 import { useI18n } from 'vue-i18n';
 import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Badge } from '../ui/badge';
-import { Button } from '../ui/button';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 
 const { t } = useI18n();
 
@@ -24,38 +22,32 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="h-full gap-0 p-0!">
-            <!-- Featured image -->
-            <div v-if="props.image" class="relative w-full h-48 overflow-hidden">
-                <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
-            </div>
+    <Card class="group/post h-full gap-0! overflow-hidden p-0! transition-[translate,box-shadow] duration-300 ease-out-expo hover:-translate-y-0.5 hover:shadow-elevated-md">
+        <!-- Featured image -->
+        <div v-if="props.image" class="aspect-video w-full overflow-hidden border-b border-border bg-surface">
+            <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="size-full object-cover transition-[scale] duration-700 ease-out-expo group-hover/post:scale-[1.03]" />
+        </div>
 
-            <!-- Content -->
-            <div class="p-6 flex flex-col grow">
-                <!-- Category Badge -->
-                <div v-if="props.category" class="mb-3">
-                    <Badge color="gray" :text="props.category" />
-                </div>
+        <!-- Content -->
+        <div class="flex grow flex-col gap-2 px-5 py-4">
+            <!-- Category -->
+            <span v-if="props.category" class="text-[11px] font-semibold uppercase tracking-wider text-primary">{{ props.category }}</span>
 
-                <!-- Post Title -->
-                <h2 class="text-base font-bold text-foreground mb-2 line-clamp-2">
-                    {{ props.title }}
-                </h2>
+            <!-- Post title -->
+            <h2 class="line-clamp-2 text-sm leading-snug font-semibold text-foreground transition-colors duration-200 group-hover/post:text-primary md:text-base">
+                {{ props.title }}
+            </h2>
 
-                <!-- Post Description -->
-                <p class="text-xs md:text-sm text-muted-foreground leading-relaxed mb-4 line-clamp-3 grow">
-                    {{ props.description }}
-                </p>
+            <!-- Post description -->
+            <p class="line-clamp-3 grow text-xs leading-relaxed text-muted-foreground md:text-sm">
+                {{ props.description }}
+            </p>
+        </div>
 
-                <!-- Read More Button -->
-                <div class="mt-auto">
-                    <Button variant="primary" class="w-full sm:w-auto">
-                        <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
-                        {{ t('uiVintage.blog.readMore') }}
-                    </Button>
-                </div>
-            </div>
-        </CardContent>
+        <!-- Read more -->
+        <div class="flex items-center justify-between border-t border-border bg-surface px-5 py-2.5 text-xs text-muted-foreground transition-colors duration-200 group-hover/post:bg-primary/10 group-hover/post:text-primary">
+            <span class="font-medium">{{ t('uiVintage.blog.readMore') }}</span>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/post:translate-x-1" />
+        </div>
     </Card>
-</template>
+</template>

package/src/components/blog/PostsList.vue

@@ -17,8 +17,9 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <NuxtLink v-for="(post, index) in props.posts" :key="post.path" :to="post.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(index % 3) * 200">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <!-- Post cards rise in row by row as they scroll into view -->
+        <NuxtLink v-for="(post, index) in props.posts" :key="post.path" data-aos="blur-up" :data-aos-delay="(index % 3) * 90" :to="post.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
             <PostCard class="h-full" :image="post.image" :category="post.categoryText" :title="post.title" :description="post.description" />
         </NuxtLink>
     </div>

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 icon turns its brand color on hover)
 const socialPlatforms = computed(() => {
     const encodedUrl = encodeURIComponent(props.url);
     const encodedTitle = encodeURIComponent(props.title);
@@ -22,75 +22,95 @@ 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:text-[#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:text-foreground',
         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:text-[#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:text-[#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:text-[#229ED9]',
         label: t('uiVintage.blog.share.telegram')
     }];
 });
+
+// Shared button classes
+const buttonClasses = 'flex size-9 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none [transition:background-color_150ms,color_150ms,scale_300ms_var(--ease-spring)] hover:bg-accent 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-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
+                <!-- Share icon -->
+                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
+                </span>
+                <span aria-hidden="true" class="my-1 h-px w-6 bg-border" />
+
+                <!-- 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>
 
-                    <!-- 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>
+                <!-- Copy link -->
+                <span aria-hidden="true" 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:text-primary', copied && '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-0.5 rounded border border-border bg-card p-1.5 shadow-elevated-sm">
+                <!-- Share icon -->
+                <span aria-hidden="true" class="flex size-9 items-center justify-center text-primary">
+                    <HugeiconsIcon :icon="Share08Icon" class="size-4" />
+                </span>
+                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+
+                <!-- 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 -->
+                <span aria-hidden="true" class="mx-1 h-6 w-px bg-border" />
+                <button type="button" :aria-label="copied ? t('uiVintage.blog.share.copied') : t('uiVintage.blog.share.copy')" :class="[buttonClasses, 'hover:text-primary', copied && 'text-primary']" @click="copyLink">
+                    <HugeiconsIcon :icon="copied ? Tick02Icon : Link01Icon" class="size-4" />
+                </button>
+            </div>
         </div>
     </Teleport>
-</template>
+</template>