From d9632a02b145b8630f266c426102aafaf1f7a770 Mon Sep 17 00:00:00 2001
From: bremea <bremeagames@gmail.com>
Date: Tue, 12 Aug 2025 03:48:51 -0400
Subject: [PATCH] feat: website landing

---
 www/src/routes/+page.svelte | 89 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/www/src/routes/+page.svelte b/www/src/routes/+page.svelte
index cc88df0..1b46cbd 100644
--- a/www/src/routes/+page.svelte
+++ b/www/src/routes/+page.svelte
@@ -1,2 +1,87 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import CheckIcon from '$lib/components/checkIcon.svelte';
+	import CopyIcon from '$lib/components/copyIcon.svelte';
+	import { onMount } from 'svelte';
+	import { crossfade, fade } from 'svelte/transition';
+
+	const command = 'ssh devcomp.xyz';
+	const cursor = '█'
+
+	let showCheckmark = $state(false);
+	let animationFinished = $state(false);
+	let commandText = $state(cursor);
+
+	function copy(event: MouseEvent) {
+		event.preventDefault();
+
+		navigator.clipboard.writeText(command);
+		showCheckmark = true;
+
+		setTimeout(() => (showCheckmark = false), 1000);
+	}
+
+	function blinkCursor() {
+		return setInterval(() => {
+			if (commandText.charAt(commandText.length - 1) === cursor) {
+				commandText = command + ' ';
+			} else {
+				commandText = command + cursor;
+			}
+		}, 500)
+	}
+
+	onMount(async () => {
+		await new Promise((res) => setTimeout(res, 500));
+
+		const animation = setInterval(() => {
+			if (commandText.length - 1 < command.length) {
+				commandText = command.substring(0, commandText.length) + cursor;
+			} else {
+				animationFinished = true;
+				clearInterval(animation);
+				blinkCursor();
+			}
+		}, 200);
+	});
+</script>
+
+<main class="flex h-screen w-screen items-center justify-center">
+	<div class="border-accent/50 relative flex h-[300px] w-[700px] flex-col rounded-lg border-2 p-4">
+		<div class="flex items-center space-x-2">
+			<pre class="text-primary inline font-bold"><span class="text-primary/50 select-none">$&nbsp;</span>{commandText}</pre>
+			{#if animationFinished}
+				<button class="text-accent/50 hover:text-accent font-normal transition-all hover:cursor-pointer" onclick={copy} transition:fade={{delay: 500}}>
+					{#if showCheckmark}
+						<CheckIcon />
+					{:else}
+						<CopyIcon />
+					{/if}
+				</button>
+			{/if}
+		</div>
+
+		{#if animationFinished}
+			<div class="flex flex-col ml-4" transition:fade={{delay: 500}}>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;q&gt; &lt;ctrl-d&gt; &lt;ctrl-c&gt; &lt;esc&gt; - quit</code>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;ctrl-z&gt; - suspend</code>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;right&gt; - next tab</code>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;left&gt; - prev tab</code>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;down&gt; - next option</code>
+				<code class="text-accent/50"><span class="select-none">#&nbsp;</span>&lt;up&gt; - prev option</code>
+			</div>
+		{/if}
+
+		<div class="group absolute -bottom-6 right-0">
+			<span class="group-hover:animate-sleep-z absolute -left-4 top-8 opacity-0">z</span>
+			<span class="group-hover:animate-sleep-z absolute -left-3 top-8 opacity-0" style="animation-delay:0.3s;">z</span>
+			<span class="group-hover:animate-sleep-z absolute -left-2 top-8 opacity-0" style="animation-delay:0.6s;">z</span>
+
+			<pre>
+ |\__/,|   (`\
+ |_ _  |.--.) )
+ ( T   )     /
+(((^_(((/(((_>
+		</pre>
+		</div>
+	</div>
+</main>