Site looks better now yay!

src/app.css

@@ -7,6 +7,8 @@
 @import url(@fontsource/azeret-mono/600.css);
 
 :root {
+	--accent-bg: hsl(303, 73%, 81%);
+	--accent-fg: hsl(0, 0, 10%);
 	--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
 		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
 		"Helvetica Neue", sans-serif;

src/lib/components/functional/Uploader.svelte

@@ -71,24 +71,32 @@
 	ondragover={() => (dragOver = true)}
 	ondragleave={() => (dragOver = false)}
 	class={clsx(
-		"w-full h-80 max-w-screen-lg flex items-center justify-center cursor-pointer flex-col",
+		"file-uploader",
+		"w-full h-80 flex items-center justify-center cursor-pointer",
 		"border-2 border-solid border-foreground-muted-alt rounded-2xl",
 		"hover:scale-95 hover:opacity-70 transition-all duration-150 ease-out",
 		{
-			"scale-95 opacity-70": dragOver,
+			"scale-95 opacity-70 blur-xs": dragOver,
 		},
 	)}
+	class:_drag-over={dragOver}
 	ondrop={drop}
 >
 	<div
-		class="size-16 rounded-full text-background bg-foreground flex items-center justify-center"
+		class="file-uploader-center flex items-center justify-center flex-col transition-all duration-150 ease-out"
+	>
+		<div
+			class="size-16 rounded-full text-accent-foreground bg-accent-background flex items-center justify-center"
 		>
 			<Upload class="size-8" />
 		</div>
-	<h2 class="font-display text-2xl mt-6">Drop or click to upload files</h2>
+		<h2 class="font-display text-2xl mt-6">
+			Drop or click to upload files
+		</h2>
 		<p class="text-foreground-muted mt-4">
 			All processing is done on your device. No file or size limit.
 		</p>
+	</div>
 </button>
 
 <input
@@ -98,3 +106,10 @@
 	onchange={addFiles}
 	multiple
 />
+
+<style>
+	.file-uploader:hover .file-uploader-center,
+	.file-uploader._drag-over .file-uploader-center {
+		@apply scale-105;
+	}
+</style>

src/lib/components/visual/svg/Logo.svelte

@@ -0,0 +1,27 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 404 96"
+	style="
+		fill-rule: evenodd;
+		clip-rule: evenodd;
+		stroke-linejoin: round;
+		stroke-miterlimit: 2;
+	"
+>
+	<path
+		d="M37.166,96l27.291,0l37.303,-96l-27.017,0l-23.726,66.24l-23.588,-66.24l-27.429,0l37.166,96Z"
+		style="fill-rule: nonzero"
+	/>
+	<path
+		d="M194.057,96l0,-21.669l-58.56,0l0,-16.32l56.64,0l0,-21.668l-56.64,-0l0,-14.674l57.874,-0l0,-21.669l-82.011,-0l0,96l82.697,0Z"
+		style="fill-rule: nonzero"
+	/>
+	<path
+		d="M209.143,33.463l-0,-33.463l58.697,0c24.686,0 37.029,12.206 37.029,31.68c-0,16.869 -10.286,29.349 -31.132,30.994l33.189,33.326l-34.835,0l-62.948,-62.537Zm71.588,-0.686c0,-6.72 -6.308,-11.52 -15.634,-11.52l-31.817,0l0,23.452l31.817,-0c9.189,-0 15.634,-4.526 15.634,-11.932Zm-71.588,13.692l24.137,49.531l-24.137,0l-0,-49.531Z"
+	/>
+	<path
+		d="M370.971,96l0,-74.194l32.915,-0l-0,-21.806l-89.966,0l0,21.806l32.914,-0l0,74.194l24.137,0Z"
+		style="fill-rule: nonzero"
+	/>
+</svg>

src/routes/+layout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import "../app.css";
 	import { goto } from "$app/navigation";
-	import clsx from "clsx";
+	import { blur, duration } from "$lib/animation";
-	import { blur, duration, transition } from "$lib/animation";
 	import { quintOut } from "svelte/easing";
 	import { files } from "$lib/store/index.svelte";
+	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	let { children, data } = $props();
 
 	let navWidth = $state(1);
@@ -18,6 +17,7 @@
 		[files.files.length > 0
 			? `Convert ${files.files.length} file${files.files.length > 1 ? "s" : ""}`
 			: `Convert`]: "/convert",
+		About: "/about",
 	});
 
 	const linkCount = $derived(Object.keys(links).length);
@@ -26,10 +26,22 @@
 	);
 </script>
 
-<div class="w-full h-full flex items-center pt-72 flex-col gap-4">
+<div class="w-full h-full flex items-center pt-48 flex-col gap-10">
+	<div
+		class="w-full max-w-screen-lg p-1 border-solid border-2 rounded-2xl border-foreground-muted-alt grid"
+		style="grid-template-columns: auto 1fr"
+	>
+		<div
+			class="px-4 m-1 mr-3 flex items-center bg-accent-background fill-accent-foreground rounded-xl"
+		>
+			<div class="h-6">
+				<Logo />
+			</div>
+		</div>
+
 		<div
 			bind:clientWidth={navWidth}
-		class="bg-background relative w-full h-16 max-w-screen-lg border-2 p-1 border-solid border-foreground-muted-alt rounded-2xl flex"
+			class="w-full flex bg-background relative h-16"
 		>
 			<div
 				class="absolute pointer-events-none top-1 bg-foreground h-[calc(100%-8px)] rounded-xl"
@@ -40,7 +52,7 @@
 			></div>
 			{#each Object.entries(links) as [name, link] (link)}
 				<button
-				class="w-1/2 h-full flex items-center justify-center rounded-xl relative"
+					class="w-1/2 h-full flex items-center justify-center rounded-xl relative font-display"
 					onclick={() => {
 						const keys = Object.keys(links);
 						const currentIndex = keys.findIndex(
@@ -60,7 +72,8 @@
 				</button>
 			{/each}
 		</div>
-	<div class="w-full grid grid-cols-1 grid-rows-1 relative">
+	</div>
+	<div class="w-full max-w-screen-lg grid grid-cols-1 grid-rows-1 relative">
 		{#key data.pathname}
 			<div class="w-full">
 				<div

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Uploader from "$lib/components/visual/Uploader.svelte";
+	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import { converters } from "$lib/converters";
 	import { files } from "$lib/store/index.svelte";
 

src/routes/about/+page.svelte

@@ -0,0 +1 @@
+the???

src/routes/convert/+page.svelte

@@ -13,14 +13,20 @@
 	{/if}
 	{#each files.files as file, i}
 		<div
-			class="flex items-center w-full max-w-screen-lg border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2"
+			class="flex items-center w-full border-2 border-solid border-foreground-muted-alt rounded-xl pl-4 pr-2 py-2"
 		>
 			<div class="flex items-center flex-grow">
 				{file.name}
 			</div>
-			<div class="flex gap-4 flex-shrink-0">
+			<div class="flex items-center gap-2 flex-shrink-0">
+				<span>from</span>
+				<span
+					class="py-2 px-3 font-display bg-foreground text-background rounded-xl"
+					>.{file.name.split(".").slice(-1)}</span
+				>
+				<span>to</span>
 				<select
-					class="border-2 border-solid border-foreground-muted-alt rounded-xl px-4 py-2 focus:!outline-none"
+					class="font-display border-2 border-solid border-foreground-muted-alt rounded-xl p-2 focus:!outline-none"
 					bind:value={files.conversionTypes[i]}
 				>
 					{#each converters[0].supportedFormats as conversionType}

tailwind.config.ts

@@ -10,11 +10,16 @@ export default {
 				foreground: "var(--fg)",
 				"foreground-muted": "var(--fg-muted)",
 				"foreground-muted-alt": "var(--fg-muted-alt)",
+				"accent-background": "var(--accent-bg)",
+				"accent-foreground": "var(--accent-fg)",
 			},
 			fontFamily: {
 				display: "var(--font-display)",
 				body: "var(--font-body)",
 			},
+			blur: {
+				xs: "2px",
+			},
 		},
 	},