feat(Page): move breadcrumb header to the layout and add a logo section

src/app/ui/Layout.svelte

@@ -10,6 +10,7 @@
  *
  * - Footer area (currently empty, reserved for future use)
  */
+import { BreadcrumbHeader } from '$entities/Breadcrumb';
 import favicon from '$shared/assets/favicon.svg';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
@@ -35,10 +36,16 @@ let { children }: Props = $props();
         href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap"
         rel="stylesheet"
     >
+    <link
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Karla:wght@300&display=swap"
+        rel="stylesheet"
+    >
 </svelte:head>
 
 <div id="app-root" class="min-h-screen flex flex-col bg-background">
-    <header></header>
+    <header>
+        <BreadcrumbHeader />
+    </header>
 
     <!-- <ScrollArea class="h-screen w-screen"> -->
     <main class="flex-1 h-full w-full max-w-6xl mx-auto px-4 pt-6 pb-10 md:px-8 lg:pt-10 lg:pb-20 relative">

src/routes/Page.svelte

@@ -3,12 +3,13 @@
     Description: The main page component of the application.
 -->
 <script lang="ts">
-import { BreadcrumbHeader } from '$entities/Breadcrumb';
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Section } from '$shared/ui';
 import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
 import { SampleList } from '$widgets/SampleList';
+import CodeIcon from '@lucide/svelte/icons/code';
 import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
 import ScanSearchIcon from '@lucide/svelte/icons/search';
@@ -40,11 +41,23 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
 // });
 </script>
 
-<BreadcrumbHeader />
-
 <!-- Font List -->
 <div class="p-2 h-full flex flex-col gap-3">
-    <Section class="my-12 gap-8" index={0} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="my-12 gap-8" onTitleStatusChange={handleTitleStatusChanged}>
+        {#snippet icon({ className })}
+            <CodeIcon class={className} />
+        {/snippet}
+        {#snippet description({ className })}
+            <span class={className}>
+                Project_Codename
+            </span>
+        {/snippet}
+        <h2 class={cn('font-[Barlow] font-thin text-7xl md:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
+            GLYPHDIFF
+        </h2>
+    </Section>
+
+    <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <ScanEyeIcon class={className} />
         {/snippet}
@@ -56,7 +69,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <ComparisonSlider />
     </Section>
 
-    <Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="my-12 gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <ScanSearchIcon class={className} />
         {/snippet}
@@ -68,7 +81,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
         <FontSearch bind:showFilters={isExpanded} />
     </Section>
 
-    <Section class="my-12 gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
+    <Section class="my-12 gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
         {/snippet}