From e9578fc15e179b9ae5df3c0f9e1690f95b113a26 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 27 Aug 2026 22:05:44 +0500
Subject: [PATCH] feat: add main page

---
 docs/plan-redesign.md               |   5 +-
 web/src/routes/preview/+page.svelte | 101 ++++++++++++++++++++++++++++
 2 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 web/src/routes/preview/+page.svelte

diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md
index c5ce5ed..e226191 100644
--- a/docs/plan-redesign.md
+++ b/docs/plan-redesign.md
@@ -322,7 +322,10 @@ src/routes/preview/tools/[id]/+page.svelte
 
 ### Шаг 3. Новые страницы
 
-- [ ] **[C9]** `/preview` — воркспейс (eyebrow, h1, lede, поиск, «открыть последний»).
+- [x] **[C9]** `/preview` — воркспейс (eyebrow, h1, lede, поиск, «открыть последний»).
+      Поиск фильтрует `TOOLS` из `$lib/registry`; карточки результата пока
+      ведут на `#` (реальные `/preview/tools/[id]` подключим на C12, иначе
+      prerender падает на 404).
 - [ ] **[C10]** `/preview/list-tools` — каталог карточек.
 - [ ] **[C11]** `/preview/demo` — зеркало воркспейса (приёмочный стенд).
 - [ ] **[C12]** `/preview/tools/[id]` — раскладка gradient (settings-panel + preview-panel).
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
new file mode 100644
index 0000000..bad4e20
--- /dev/null
+++ b/web/src/routes/preview/+page.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { TOOLS } from "$lib/registry";
+	import Panel from "$lib/components/kit/Panel.svelte";
+	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
+	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
+	import TextField from "$lib/components/kit/TextField.svelte";
+	import ToolCard from "$lib/components/kit/ToolCard.svelte";
+	import Button from "$lib/components/kit/Button.svelte";
+	import { Search } from "@lucide/svelte";
+
+	let query = $state("");
+	const results = $derived(
+		TOOLS.filter((t) =>
+			(t.title + " " + t.description)
+				.toLowerCase()
+				.includes(query.toLowerCase()),
+		).slice(0, 24),
+	);
+</script>
+
+<section class="workspace">
+	<header class="ws-head">
+		<span class="ws-eyebrow">EASY PNG TOOLS</span>
+		<h1 class="ws-title">Workspace</h1>
+		<p class="ws-lede">
+			Откройте PNG-инструмент, загрузите изображение и получите результат без
+			установки и регистрации.
+		</p>
+	</header>
+
+	<Panel>
+		<PanelHeading title="Search" eyebrow="tools" />
+		<div class="ws-search">
+			<div class="ws-field">
+				<TextField
+					label="Search tools"
+					bind:value={query}
+					placeholder="Search tools…"
+				/>
+			</div>
+			<Button icon={Search} variant="primary" onclick={() => {}}>Search</Button>
+		</div>
+		<div class="ws-results">
+			{#each results as tool (tool.id)}
+				<ToolCard title={tool.title} href="#" description={tool.description} />
+			{/each}
+		</div>
+		<SettingsFooter>
+			<Button onclick={() => {}}>Open last project</Button>
+		</SettingsFooter>
+	</Panel>
+</section>
+
+<style>
+	.workspace {
+		max-width: 880px;
+		margin: 0 auto;
+		padding: 2.5rem 1.25rem 4rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+	.ws-head {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.ws-eyebrow {
+		font-family: var(--font-mono);
+		font-size: 12px;
+		letter-spacing: 0.18em;
+		color: var(--muted);
+	}
+	.ws-title {
+		margin: 0;
+		font-size: 2rem;
+		font-weight: 700;
+		color: var(--foreground);
+	}
+	.ws-lede {
+		margin: 0;
+		max-width: 56ch;
+		color: var(--muted);
+		font-size: 0.95rem;
+	}
+	.ws-search {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		align-items: center;
+	}
+	.ws-field {
+		flex: 1;
+	}
+	.ws-results {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		gap: 0.75rem;
+		padding: 0.5rem 1rem 1rem;
+	}
+</style>