src/routes/Page.svelte

@@ -1,21 +1,18 @@
+<!--
+    Component: Page
+    Description: The main page component of the application.
+-->
 <script lang="ts">
 import { appliedFontsManager } from '$entities/Font';
 import { displayedFontsStore } from '$features/DisplayFont';
 import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
 import { controlManager } from '$features/SetupFont';
 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 { cubicOut } from 'svelte/easing';
+import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
-import { Spring } from 'svelte/motion';
+import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
-import type {
-    SlideParams,
-    TransitionConfig,
-} from 'svelte/transition';
-
-/**
- * Page Component
- */
 
 let searchContainer: HTMLElement;
 
@@ -53,13 +50,33 @@ $effect(() => {
         </div>
     {/key}
 
-    <div class="my-6">
+    {#if displayedFontsStore.fonts.length > 1}
-        <ComparisonSlider />
+        <Section class="my-12 gap-8" index={1}>
-    </div>
+            {#snippet icon({ className })}
+                <ScanEyeIcon class={className} />
+            {/snippet}
+            {#snippet title({ className })}
+                <h1 class={className}>
+                    Optical<br>Comparator
+                </h1>
+            {/snippet}
+            <ComparisonSlider />
+        </Section>
+    {/if}
 
-    <div class="will-change-tranform transition-transform content my-2">
+    {#if displayedFontsStore.hasAnyFonts}
-        <FontDisplay />
+        <Section class="my-12 gap-8" index={2}>
-    </div>
+            {#snippet icon({ className })}
+                <LineSquiggleIcon class={className} />
+            {/snippet}
+            {#snippet title({ className })}
+                <h2 class={className}>
+                    Sample<br>Set
+                </h2>
+            {/snippet}
+            <FontDisplay />
+        </Section>
+    {/if}
 </div>
 
 <style>