From ef48d9815c1dbeb8f1da20b52a86c7dae785dd4a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 17:46:21 +0300
Subject: [PATCH] feat(Page): add Section wrappers to page widgets

---
 src/routes/Page.svelte | 49 ++++++++++++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index cc31fb3..ebdbdeb 100644
--- a/src/routes/Page.svelte
+++ b/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 { Spring } from 'svelte/motion';
-import type {
-    SlideParams,
-    TransitionConfig,
-} from 'svelte/transition';
-
-/**
- * Page Component
- */
+import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
+import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
 
 let searchContainer: HTMLElement;
 
@@ -53,13 +50,33 @@ $effect(() => {
         </div>
     {/key}
 
-    <div class="my-6">
-        <ComparisonSlider />
-    </div>
+    {#if displayedFontsStore.fonts.length > 1}
+        <Section class="my-12 gap-8" index={1}>
+            {#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">
-        <FontDisplay />
-    </div>
+    {#if displayedFontsStore.hasAnyFonts}
+        <Section class="my-12 gap-8" index={2}>
+            {#snippet icon({ className })}
+                <LineSquiggleIcon class={className} />
+            {/snippet}
+            {#snippet title({ className })}
+                <h2 class={className}>
+                    Sample<br>Set
+                </h2>
+            {/snippet}
+            <FontDisplay />
+        </Section>
+    {/if}
 </div>
 
 <style>