src/routes/Page.svelte

@@ -11,6 +11,7 @@ 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 LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
 import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
 
@@ -34,10 +35,7 @@ $effect(() => {
         <div
             class={cn(
                 'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40',
-                'will-change-[flex-grow] transform-gpu',
-                isEmptyScreen
-                    ? 'grow justify-center'
-                    : 'animate-search',
+                'will-change-[flex-grow] transform-gpu grow-0 justify-start',
             )}
         >
             <div
@@ -50,7 +48,6 @@ $effect(() => {
         </div>
     {/key}
 
-    {#if displayedFontsStore.fonts.length > 1}
     <Section class="my-12 gap-8" index={1}>
         {#snippet icon({ className })}
             <ScanEyeIcon class={className} />
@@ -62,9 +59,7 @@ $effect(() => {
         {/snippet}
         <ComparisonSlider />
     </Section>
-    {/if}
 
-    {#if displayedFontsStore.hasAnyFonts}
     <Section class="my-12 gap-8" index={2}>
         {#snippet icon({ className })}
             <LineSquiggleIcon class={className} />
@@ -74,9 +69,8 @@ $effect(() => {
                 Sample<br>Set
             </h2>
         {/snippet}
-            <FontDisplay />
+        <SampleList />
     </Section>
-    {/if}
 </div>
 
 <style>