refactor: update footer component

web/src/lib/components/kit/Footer.svelte

@@ -1,25 +0,0 @@
-<footer class="preview-footer">
-	<span>easy-png-tools <b class="version">v2.4.0</b></span>
-	<span>© 2024</span>
-</footer>
-
-<style>
-	.preview-footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 16px clamp(20px, 4vw, 72px);
-		border-top: 1px solid var(--line);
-		font: 10px var(--font-mono);
-		color: var(--muted);
-		& span {
-			display: flex;
-			align-items: center;
-			gap: 7px;
-		}
-	}
-	.preview-footer .version {
-		font-weight: 400;
-		color: var(--blue);
-	}
-</style>

web/src/lib/components/kit/layout/Footer.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	// TODO: insert version from package.json
+</script>
+
+<footer class="preview-footer">
+	<span>easy-png-tools <b class="version">v0.1.0</b></span>
+	<span>© 2026</span>
+</footer>
+
+<style>
+	.preview-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-xl);
+		border-top: var(--size-border) solid var(--color-border);
+		font: var(--font-text) var(--font-mono);
+		color: var(--color-text-muted);
+		& span {
+			display: flex;
+			align-items: center;
+			gap: var(--space-m);
+		}
+	}
+	.preview-footer .version {
+		font-weight: normal;
+		color: var(--color-text-accent);
+	}
+</style>

web/src/routes/preview/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import Footer from "$lib/components/kit/Footer.svelte";
+	import Footer from "$lib/components/kit/layout/Footer.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
 	import type { Snippet } from "svelte";
 	import "../../preview.css";