@brumaombra/ui-vintage 0.8.0 → 0.8.2

package/src/components/blog/BlogTagsSection.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Badge } from '../ui/badge';
-
 // Props
 const props = withDefaults(defineProps<{
     tags?: Array<{
@@ -15,8 +13,13 @@ const props = withDefaults(defineProps<{
 
 <template>
     <div v-if="props.tags.length" class="flex flex-wrap gap-3">
-        <NuxtLinkLocale v-for="(tag, index) in props.tags" :key="tag.slug" :to="`/blog/tags/${tag.slug}`" data-aos="fade-up" :data-aos-delay="Math.min(index * 100, 500)">
-            <Badge color="gray" :text="`${tag.name} (${tag.count})`" class="transition-transform duration-200 ease-out hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100" />
-        </NuxtLinkLocale>
+        <!-- Tag chip -->
+        <span v-for="(tag, index) in props.tags" :key="tag.slug" data-aos="blur-up" :data-aos-delay="Math.min(index * 40, 400)" class="inline-flex">
+            <NuxtLinkLocale :to="`/blog/tags/${tag.slug}`" class="group/tag inline-flex items-center gap-2 rounded border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground shadow-elevated-sm outline-none [transition:translate_300ms_var(--ease-spring),border-color_150ms,color_150ms,box-shadow_200ms] hover:-translate-y-0.5 hover:border-primary/50 hover:text-primary hover:shadow-elevated-md focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+                <span aria-hidden="true" class="text-primary transition-[rotate] duration-300 ease-bounce group-hover/tag:rotate-12">#</span>
+                {{ tag.name }}
+                <span class="rounded-sm bg-surface px-1.5 py-0.5 text-[11px] text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">{{ tag.count }}</span>
+            </NuxtLinkLocale>
+        </span>
     </div>
 </template>

package/src/components/blog/CategoriesList.vue

@@ -16,9 +16,9 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 md:gap-6">
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4">
         <!-- Category card -->
-        <NuxtLink v-for="(category, i) in props.categories" :key="category.path || category.slug" :to="category.path" class="block h-full" data-aos="fade-up" :data-aos-delay="(i % 4) * 200">
+        <NuxtLink v-for="(category, index) in props.categories" :key="category.path || category.slug" data-aos="blur-up" :data-aos-delay="(index % 4) * 80" :to="category.path" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
             <CategoryCard :name="category.name" :image="category.image" :count="category.count" />
         </NuxtLink>
     </div>

package/src/components/blog/CategoryCard.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { Badge } from '../ui/badge';
-import { Card, CardContent } from '../ui/card';
+import { ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -14,23 +15,31 @@ 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="gap-0 p-0!">
-            <!-- Background Image -->
-            <div v-if="props.image" class="relative w-full h-36 overflow-hidden">
-                <NuxtImg :src="props.image" :alt="props.name" 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 interactive class="group/category h-full gap-0! overflow-hidden p-0! sm:gap-0!">
+        <div class="relative h-40 w-full overflow-hidden bg-surface">
+            <!-- Background image -->
+            <NuxtImg v-if="props.image" :src="props.image" :alt="props.name" 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/category:scale-110" />
+
+            <!-- Fallback when there is no image -->
+            <div v-else aria-hidden="true" class="size-full bg-[radial-gradient(circle_at_30%_20%,color-mix(in_oklab,var(--primary)_35%,transparent),transparent_65%)]" />
+
+            <!-- Legibility shade -->
+            <div aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-black/80 via-black/25 to-black/0" />
 
-            <!-- Content -->
-            <div class="p-4 flex items-center justify-between">
-                <!-- Name -->
-                <span class="text-sm font-bold text-foreground truncate mr-3">
+            <!-- Arrow that appears on hover -->
+            <span aria-hidden="true" class="absolute top-3 right-3 flex size-8 scale-75 items-center justify-center rounded border border-white/25 bg-black/30 text-white opacity-0 backdrop-blur-md transition-[opacity,scale] duration-300 ease-spring group-hover/category:scale-100 group-hover/category:opacity-100">
+                <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4" />
+            </span>
+
+            <!-- Name and count -->
+            <div class="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-4">
+                <span class="truncate text-base font-bold text-white transition-[translate] duration-300 ease-spring group-hover/category:-translate-y-0.5">
                     {{ props.name }}
                 </span>
-
-                <!-- Count -->
-                <Badge color="gray" :text="String(props.count)" />
+                <span class="shrink-0 rounded-sm border border-white/25 bg-white/15 px-2 py-0.5 text-xs font-bold text-white tabular-nums backdrop-blur-md">
+                    {{ props.count }}
+                </span>
             </div>
-        </CardContent>
+        </div>
     </Card>
 </template>

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 } 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,143 @@ 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 autoplayEnabled = 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);
-};
-
-// Stop auto-play functionality
-const stopAutoPlay = () => {
-    if (intervalId.value) clearInterval(intervalId.value);
-};
+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();
+};
+
+// Start autoplay when component mounts (never with reduced motion)
 onMounted(() => {
-    startAutoPlay();
+    autoplayEnabled.value = slideCount.value > 1 && !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="`carousel-slide-${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="`carousel-slide-${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

@@ -4,8 +4,7 @@ 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 +23,38 @@ 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>
-
-            <!-- 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>
-
-                <!-- Post Title -->
-                <h2 class="text-base font-bold text-foreground mb-2 line-clamp-2">
-                    {{ 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>
-
-                <!-- 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>
+    <Card interactive class="group/post h-full gap-0! overflow-hidden p-0! sm:gap-0!">
+        <!-- Featured image -->
+        <div v-if="props.image" class="relative 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,filter] duration-700 ease-out-expo group-hover/post:scale-[1.06] group-hover/post:saturate-125" />
+
+            <!-- Shade that deepens on hover -->
+            <div aria-hidden="true" class="absolute inset-0 bg-linear-to-t from-black/45 via-black/0 to-black/0 opacity-60 transition-opacity duration-500 group-hover/post:opacity-100" />
+
+            <!-- Category over the image -->
+            <Badge v-if="props.category" :text="props.category" class="absolute top-3 left-3 border-white/25 bg-black/35 text-white backdrop-blur-md" />
+        </div>
+
+        <!-- Content -->
+        <div class="flex grow flex-col gap-3 p-5 sm:p-6">
+            <!-- Category (when there is no image to sit on) -->
+            <Badge v-if="props.category && !props.image" :text="props.category" />
+
+            <!-- Post title -->
+            <h2 class="line-clamp-2 text-base leading-snug font-bold text-foreground transition-colors duration-200 group-hover/post:text-primary">
+                {{ props.title }}
+            </h2>
+
+            <!-- Post description -->
+            <p class="line-clamp-3 grow text-xs leading-relaxed text-muted-foreground md:text-sm">
+                {{ props.description }}
+            </p>
+
+            <!-- Read more -->
+            <span class="mt-2 inline-flex items-center gap-1.5 text-xs font-semibold text-primary sm:text-sm">
+                {{ t('uiVintage.blog.readMore') }}
+                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/post:translate-x-1" />
+            </span>
+        </div>
     </Card>
 </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>