feat(ComparisonSlider): create reusable comparison slider that compare two fonts for the same text. Line breaking is supported

src/shared/ui/ComparisonSlider/components/Labels.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+interface Props {
+    fontA: { name: string; id: string };
+    fontB: { name: string; id: string };
+    sliderPos: number;
+}
+let { fontA, fontB, sliderPos }: Props = $props();
+</script>
+
+<!-- Bottom Labels -->
+<div class="absolute bottom-6 inset-x-8 sm:inset-x-12 flex justify-between items-center pointer-events-none z-20">
+    <!-- Left Label (Font A) -->
+    <div
+        class="flex flex-col gap-1 transition-opacity duration-300"
+        style:opacity={sliderPos < 10 ? 0 : 1}
+    >
+        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-indigo-400"
+        >Baseline</span>
+        <span class="text-xs sm:text-sm font-bold text-indigo-600">
+            {fontB.name}
+        </span>
+    </div>
+
+    <!-- Right Label (Font B) -->
+    <div
+        class="flex flex-col items-end text-right gap-1 transition-opacity duration-300"
+        style:opacity={sliderPos > 90 ? 0 : 1}
+    >
+        <span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-400"
+        >Comparison</span>
+        <span class="text-xs sm:text-sm font-bold text-slate-900">
+            {fontA.name}
+        </span>
+    </div>
+</div>