feat: add email to about page

src/lib/sections/about/Vertd.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
 	import Panel from "$lib/components/visual/Panel.svelte";
-	import { PiggyBankIcon } from "lucide-svelte";
+	import { PiggyBankIcon, CopyIcon } from "lucide-svelte";
 	import HotMilk from "$lib/assets/hotmilk.svg?component";
 	import { DISCORD_URL } from "$lib/consts";
+	import { error } from "$lib/logger";
+
+	function copyToClipboard() {
+		try {
+			navigator.clipboard.writeText("hello@vert.sh");
+			alert("Email copied to clipboard!");
+		} catch (err) {
+			error(`Failed to copy email: ${err}`);
+		}
+	}
 </script>
 
 <Panel class="flex flex-col gap-3 p-6 min-h-[280px]">
@@ -24,11 +34,34 @@
 				<HotMilk class="w-full h-16" />
 			</a>
 		</div>
-		<p class="text-muted">
-			Want to support us? Contact a developer in the <a
-				href={DISCORD_URL}
-				target="_blank">Discord</a
-			> server!
-		</p>
-	</div>
-</Panel>
+		<div>
+			<p class="text-muted">
+				Want to support us? Contact a developer in the <a
+					href={DISCORD_URL}
+					target="_blank">Discord</a
+				>
+				server, or send an email to
+				<span class="inline-block mx-[2px] relative top-[2px]"
+					><button
+						id="email"
+						class="flex items-center gap-2 cursor-pointer"
+						onclick={copyToClipboard}
+						aria-label="Copy email to clipboard"
+					>
+						<CopyIcon size="14"></CopyIcon> hello@vert.sh
+					</button></span
+				>!
+			</p>
+		</div>
+	</div></Panel
+>
+
+<style>
+	#email {
+		@apply font-mono bg-gray-200 rounded-md px-1 text-inherit no-underline dynadark:bg-panel-alt dynadark:text-white;
+	}
+
+	#email:hover {
+		@apply font-mono !bg-accent !text-black rounded-md px-1 duration-200;
+	}
+</style>