feat(BreadcrumbHeader): add a logo and change the animation

src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte

@@ -3,9 +3,11 @@
     Fixed header for breadcrumbs navigation for sections in the page
 -->
 <script lang="ts">
-import Icon from '@lucide/svelte/icons/align-vertical-justify-center';
-import { flip } from 'svelte/animate';
-import { slide } from 'svelte/transition';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import {
+    fly,
+    slide,
+} from 'svelte/transition';
 import { scrollBreadcrumbsStore } from '../../model';
 </script>
 
@@ -21,20 +23,17 @@ import { scrollBreadcrumbsStore } from '../../model';
         "
     >
         <div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4">
-            <div class="flex items-center gap-2.5 opacity-70">
-                <Icon class="size-4 stroke-gray-900 stroke-1" />
-                <div class="w-px h-2.5 bg-gray-400/50"></div>
-                <span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
-                    nav_trace
-                </span>
-            </div>
+            <h1 class={cn('font-[Barlow] font-extralight')}>
+                GLYPHDIFF
+            </h1>
 
             <div class="h-4 w-px bg-gray-300/60"></div>
 
             <nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1">
                 {#each scrollBreadcrumbsStore.items as item, idx (item.index)}
                     <div
-                        animate:flip={{ duration: 200 }}
+                        in:fly={{ duration: 300, y: -10, x: 100, opacity: 0 }}
+                        out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
                         class="flex items-center gap-3 whitespace-nowrap shrink-0"
                     >
                         <span class="font-mono text-[9px] text-gray-400 tracking-wider">
@@ -42,7 +41,7 @@ import { scrollBreadcrumbsStore } from '../../model';
                         </span>
 
                         {@render item.title({
-    className: 'font-mono text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
+    className: 'text-[10px] md:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
 })}
 
                         {#if idx < scrollBreadcrumbsStore.items.length - 1}