@brumaombra/ui-vintage 0.9.1 → 0.9.3

package/src/components/blog/BlogTagsPage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import News01Icon from '@hugeicons/core-free-icons/News01Icon';
+import Tag01Icon from '@hugeicons/core-free-icons/Tag01Icon';
+import type { BlogTagData } from './blogPageUtils';
+import BlogHeaderSection from './BlogHeaderSection.vue';
+import BlogPageBreadcrumbs from './BlogPageBreadcrumbs.vue';
+import BlogTagsSection from './BlogTagsSection.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+	description: string;
+	tags?: BlogTagData[];
+}>(), {
+	tags: () => []
+});
+
+const { t } = useI18n();
+
+// Tag totals shown under the header
+const headerStats = computed(() => {
+	const tagUses = props.tags.reduce((total, tag) => total + (tag.count || 0), 0);
+	return [
+		{ icon: Tag01Icon, value: props.tags.length, label: t('uiVintage.blog.stats.tags', props.tags.length) },
+		{ icon: News01Icon, value: tagUses, label: t('uiVintage.blog.stats.uses', tagUses) }
+	];
+});
+</script>
+
+<template>
+	<div>
+		<!-- Breadcrumbs -->
+		<BlogPageBreadcrumbs :items="[{ label: t('uiVintage.blog.breadcrumbTags') }]" />
+
+		<!-- Blog header -->
+		<BlogHeaderSection :title="t('uiVintage.blog.tags')"
+			:highlight="t('uiVintage.blog.tags')"
+			:description="props.description"
+			:stats="headerStats"
+			class="mb-12 md:mb-16" />
+
+		<!-- Tags list -->
+		<BlogTagsSection :tags="props.tags" class="justify-center" />
+	</div>
+</template>

package/src/components/blog/BlogTagsSection.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
 // Props
 const props = withDefaults(defineProps<{
-    tags?: Array<{
-        name: string;
-        slug: string;
-        count: number;
-    }>;
-    blogPath?: string;
+	tags?: Array<{
+		name: string;
+		slug: string;
+		count: number;
+	}>;
+	blogPath?: string;
 }>(), {
-    tags: () => [],
-    blogPath: '/blog'
+	tags: () => [],
+	blogPath: '/blog'
 });
 </script>
 
 <template>
-    <div v-if="props.tags.length" class="flex flex-wrap gap-2">
-        <!-- 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="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
-                <!-- Name -->
-                <span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
-                    <span aria-hidden="true" class="text-primary">#</span>
-                    {{ tag.name }}
-                </span>
+	<div v-if="props.tags.length" class="flex flex-wrap gap-2">
+		<!-- 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="`${props.blogPath}/tags/${tag.slug}`" class="group/tag inline-flex items-stretch overflow-hidden rounded border border-border text-xs shadow-elevated-sm outline-none transition-colors duration-150 hover:border-primary/40 focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+				<!-- Name -->
+				<span class="inline-flex items-center gap-1.5 bg-card px-3 py-1.5 font-medium text-foreground transition-colors duration-150 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+					<span aria-hidden="true" class="text-primary">#</span>
+					{{ tag.name }}
+				</span>
 
-                <!-- Post count -->
-                <span class="inline-flex items-center border-l border-border bg-surface px-2 text-[11px] font-semibold text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:border-primary/40 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
-                    {{ tag.count }}
-                </span>
-            </NuxtLinkLocale>
-        </span>
-    </div>
-</template>
+				<!-- Post count -->
+				<span class="inline-flex items-center border-l border-border bg-surface px-2 text-[11px] font-semibold text-muted-foreground tabular-nums transition-colors duration-150 group-hover/tag:border-primary/40 group-hover/tag:bg-primary/10 group-hover/tag:text-primary">
+					{{ tag.count }}
+				</span>
+			</NuxtLinkLocale>
+		</span>
+	</div>
+</template>

package/src/components/blog/BlogViewAllLink.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+// Props
+const props = defineProps<{
+	to: string;
+	label: string;
+}>();
+</script>
+
+<template>
+	<!-- Link to the full list of a blog section (the path is localized) -->
+	<NuxtLinkLocale :to="props.to" class="group/view inline-flex items-center gap-1.5 rounded px-1 text-xs font-semibold text-primary outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45 sm:text-sm">
+		{{ props.label }}
+		<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/view:translate-x-1" />
+	</NuxtLinkLocale>
+</template>

package/src/components/blog/CategoriesList.vue

@@ -3,23 +3,23 @@ import CategoryCard from './CategoryCard.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    categories?: Array<{
-        path: string;
-        slug?: string;
-        name: string;
-        image?: string;
-        count: number;
-    }>;
+	categories?: Array<{
+		path: string;
+		slug?: string;
+		name: string;
+		image?: string;
+		count: number;
+	}>;
 }>(), {
-    categories: () => []
+	categories: () => []
 });
 </script>
 
 <template>
-    <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, 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>
+	<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, 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>
 </template>

package/src/components/blog/CategoriesSection.vue

@@ -3,20 +3,20 @@ import CategoriesList from './CategoriesList.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    categories?: Array<{
-        path: string;
-        slug?: string;
-        name: string;
-        image?: string;
-        count: number;
-    }>;
+	categories?: Array<{
+		path: string;
+		slug?: string;
+		name: string;
+		image?: string;
+		count: number;
+	}>;
 }>(), {
-    categories: () => []
+	categories: () => []
 });
 </script>
 
 <template>
-    <div>
-        <CategoriesList :categories="props.categories" />
-    </div>
+	<div>
+		<CategoriesList :categories="props.categories" />
+	</div>
 </template>

package/src/components/blog/CategoryCard.vue

@@ -7,35 +7,35 @@ import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
-    name: string;
-    image?: string;
-    count: number;
+	name: string;
+	image?: string;
+	count: number;
 }>(), {
-    image: ''
+	image: ''
 });
 </script>
 
 <template>
-    <Card class="group/category 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">
-        <!-- Image -->
-        <div class="h-32 w-full overflow-hidden border-b border-border bg-surface">
-            <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-[1.03]" />
+	<Card class="group/category 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">
+		<!-- Image -->
+		<div class="h-32 w-full overflow-hidden border-b border-border bg-surface">
+			<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-[1.03]" />
 
-            <!-- Fallback when there is no image -->
-            <div v-else aria-hidden="true" class="flex size-full items-center justify-center text-primary/60">
-                <HugeiconsIcon :icon="Folder01Icon" class="size-8" />
-            </div>
-        </div>
+			<!-- Fallback when there is no image -->
+			<div v-else aria-hidden="true" class="flex size-full items-center justify-center text-primary/60">
+				<HugeiconsIcon :icon="Folder01Icon" class="size-8" />
+			</div>
+		</div>
 
-        <!-- Name, post count and arrow -->
-        <div class="flex grow items-center gap-3 bg-surface px-4 py-3 transition-colors duration-200 group-hover/category:bg-primary/10">
-            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground transition-colors duration-200 group-hover/category:text-primary">
-                {{ props.name }}
-            </span>
-            <span class="shrink-0 rounded border border-primary/30 px-1.5 text-[11px] font-semibold leading-5 text-primary tabular-nums">
-                {{ props.count }}
-            </span>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 shrink-0 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/category:translate-x-1 group-hover/category:text-primary" />
-        </div>
-    </Card>
-</template>
+		<!-- Name, post count and arrow -->
+		<div class="flex grow items-center gap-3 bg-surface px-4 py-3 transition-colors duration-200 group-hover/category:bg-primary/10">
+			<span class="min-w-0 flex-1 truncate text-sm font-semibold text-foreground transition-colors duration-200 group-hover/category:text-primary">
+				{{ props.name }}
+			</span>
+			<span class="shrink-0 rounded border border-primary/30 px-1.5 text-[11px] font-semibold leading-5 text-primary tabular-nums">
+				{{ props.count }}
+			</span>
+			<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 shrink-0 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/category:translate-x-1 group-hover/category:text-primary" />
+		</div>
+	</Card>
+</template>

package/src/components/blog/HeaderCarousel.vue

@@ -13,16 +13,16 @@ const { t } = useI18n();
 
 // Props
 const props = withDefaults(defineProps<{
-    featuredPosts?: Array<{
-        path: string;
-        title: string;
-        description?: string;
-        image?: string;
-        categoryText?: string;
-        categoryPath?: string;
-    }>;
+	featuredPosts?: Array<{
+		path: string;
+		title: string;
+		description?: string;
+		image?: string;
+		categoryText?: string;
+		categoryPath?: string;
+	}>;
 }>(), {
-    featuredPosts: () => []
+	featuredPosts: () => []
 });
 
 const AUTOPLAY_DURATION_MS = 6000;
@@ -38,139 +38,139 @@ const slideIdPrefix = `carousel-${useId()}-slide`;
 
 // 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);
-    }
+	if (currentSlide.value >= count) {
+		currentSlide.value = Math.max(0, count - 1);
+	}
 });
 let swipeStartX: number | null = null;
 
 // Handle next slide press
 const nextSlide = () => {
-    currentSlide.value = (currentSlide.value + 1) % slideCount.value;
+	currentSlide.value = (currentSlide.value + 1) % slideCount.value;
 };
 
 // Handle previous slide press
 const prevSlide = () => {
-    currentSlide.value = (currentSlide.value - 1 + slideCount.value) % slideCount.value;
+	currentSlide.value = (currentSlide.value - 1 + slideCount.value) % slideCount.value;
 };
 
 // Go to specific slide
 const goToSlide = (index: number) => {
-    currentSlide.value = index;
+	currentSlide.value = index;
 };
 
 // Pause autoplay while the user hovers, focuses, or leaves the tab
 const pause = () => {
-    isPaused.value = true;
+	isPaused.value = true;
 };
 const resume = () => {
-    isPaused.value = false;
+	isPaused.value = false;
 };
 const handleVisibilityChange = () => {
-    isPaused.value = document.visibilityState !== 'visible';
+	isPaused.value = document.visibilityState !== 'visible';
 };
 
 // Keyboard navigation
 const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'ArrowRight') nextSlide();
-    if (event.key === 'ArrowLeft') prevSlide();
+	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;
+	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();
+	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();
+	if (autoplayEnabled.value) nextSlide();
 };
 
 // Allow autoplay once mounted (never with reduced motion); it starts as soon as there are at least two posts
 onMounted(() => {
-    motionAllowed.value = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    document.addEventListener('visibilitychange', handleVisibilityChange);
+	motionAllowed.value = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+	document.addEventListener('visibilitychange', handleVisibilityChange);
 });
 
 // Clean up listeners when component unmounts
 onUnmounted(() => {
-    document.removeEventListener('visibilitychange', handleVisibilityChange);
+	document.removeEventListener('visibilitychange', handleVisibilityChange);
 });
 </script>
 
 <template>
-    <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">
-                                {{ t('uiVintage.blog.goToPost') }}
-                                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/cta:translate-x-1" />
-                            </NuxtLink>
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 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>
+	<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">
+								{{ t('uiVintage.blog.goToPost') }}
+								<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/cta:translate-x-1" />
+							</NuxtLink>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 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>

package/src/components/blog/PostCard.vue

@@ -9,45 +9,45 @@ const { t } = useI18n();
 
 // Props
 const props = withDefaults(defineProps<{
-    image?: string;
-    category?: string;
-    title?: string;
-    description?: string;
+	image?: string;
+	category?: string;
+	title?: string;
+	description?: string;
 }>(), {
-    image: '',
-    category: '',
-    title: '',
-    description: ''
+	image: '',
+	category: '',
+	title: '',
+	description: ''
 });
 </script>
 
 <template>
-    <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>
+	<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="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>
+		<!-- 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="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 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="line-clamp-3 grow text-xs leading-relaxed text-muted-foreground md:text-sm">
-                {{ props.description }}
-            </p>
-        </div>
+			<!-- Post description -->
+			<p class="line-clamp-3 grow text-xs leading-relaxed text-muted-foreground md:text-sm">
+				{{ props.description }}
+			</p>
+		</div>
 
-        <!-- 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>
+		<!-- 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>