add Arthur C. Clark quote

Author: gchartier

src/lib/components/StickyNote.svelte

@@ -0,0 +1,60 @@
+<!-- 💠 Source: https://gist.github.com/SimonPadbury/fc55c054c0480550c3be592111778763 -->
+
+<script lang="ts">
+	import MagicTechnology from '$lib/icons/MagicTechnology.svelte';
+
+	let props = $props();
+</script>
+
+<div class="sticky flex flex-col items-center {props.class}">
+	<span>Any sufficiently</span>
+	<span>advanced technology</span>
+	<span>is indistinguishable</span>
+	<span>from magic.</span>
+	<span class="font-bold">
+		- <a href="https://en.wikipedia.org/wiki/Clarke%27s_three_laws" target="_blank">
+			Arthur C. Clarke
+		</a>
+	</span>
+	<MagicTechnology class="mx-auto fill-gray-600" width="30pt" height="30pt" />
+</div>
+
+<style>
+	.sticky {
+		position: absolute;
+		right: 0;
+		z-index: 150;
+		transform: rotate(5deg);
+		width: fit-content;
+		min-height: 150px;
+		margin: -10px 10px 10px;
+		padding: 1rem 1rem 0.5rem 1rem;
+		font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive;
+		font-size: 14px;
+		color: #000;
+		background: rgba(255, 255, 51, 1);
+		box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.3);
+	}
+	.sticky:before,
+	.sticky:after {
+		content: '';
+		display: block;
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		top: 0;
+		right: 0;
+	}
+	.sticky:before {
+		border-top: solid 8px #fff;
+		border-right: solid 8px #fff;
+		border-left: solid 8px transparent;
+		border-bottom: solid 8px transparent;
+	}
+	.sticky:after {
+		border-bottom: solid 8px #dddd33;
+		border-left: solid 8px #dddd33;
+		border-right: solid 8px transparent;
+		border-top: solid 8px transparent;
+	}
+</style>

src/lib/icons/MagicTechnology.svelte

@@ -0,0 +1,18 @@
+<!-- 💠 Source: https://thenounproject.com/icon/pen-7934522/ -->
+
+<script lang="ts">
+	let props = $props();
+</script>
+
+<svg
+	width="50pt"
+	height="50pt"
+	version="1.1"
+	viewBox="0 0 1200 1200"
+	xmlns="http://www.w3.org/2000/svg"
+	{...props}
+>
+	<path
+		d="m600 168.74c14.812 0 22.547 11.297 30.328 21.938l286.13 389.9c15.844 22.453 17.016 52.453 1.5 75.469l-128.68 190.97c26.203 8.625 45.094 33.281 45.094 62.344v75c0 36.234-29.391 65.625-65.625 65.625h-337.5c-36.234 0-65.625-29.391-65.625-65.625v-75c0-29.531 19.5-54.516 46.312-62.719l-122.11-191.76c-14.438-22.688-12.984-51.328 1.875-73.266l277.87-390.47c7.7344-10.875 15.375-22.406 30.422-22.406zm-168.74 731.26c-5.1562 0-9.375 4.2188-9.375 9.375v75c0 5.1562 4.2188 9.375 9.375 9.375h337.5c5.1562 0 9.375-4.2188 9.375-9.375v-75c0-5.1562-4.2188-9.375-9.375-9.375zm196.87-415.78c1.6875 2.2969 3 4.7344 4.2188 7.3125 16.266 38.062 44.156 70.031 79.688 91.359l24.047 14.484c21.328 14.812 21.328 46.688-0.046875 61.5l-24 14.484c-35.625 21.328-63.047 53.484-79.734 91.359-12.703 26.953-52.312 28.734-64.641 0-16.594-37.922-44.391-69.656-79.688-91.359l-21.844-13.078c-24.281-14.578-24.281-49.734 0-64.312l21.844-13.078c35.297-21.562 63.422-53.25 79.688-91.359 1.2188-2.5781 2.5312-5.0156 4.2188-7.3125v-199.31l-234.32 329.29c-1.9688 3.2812-2.3906 7.125-0.28125 10.5l139.55 219.05h246.84l147.66-219.1c2.2031-3.2812 2.1094-7.5938-0.23437-10.781l-242.95-331.13zm-28.125 66.141c-19.969 31.219-46.641 57.844-78.234 77.766 31.594 19.922 58.266 46.547 78.234 77.812 19.969-31.266 46.641-57.891 78.234-77.812-31.594-19.922-58.266-46.547-78.234-77.766z"
+	/>
+</svg>

src/routes/(oldschool)/+page.svelte

@@ -1,3 +1,7 @@
+<script>
+	import StickyNote from '$lib/components/StickyNote.svelte';
+</script>
+
 <main
 	class="flex h-screen w-full flex-col items-center justify-around border-20 border-double border-black"
 >
@@ -10,6 +14,7 @@
 		</div>
 		<h2 class="pt-4 text-sm italic">Since 1995</h2>
 	</div>
+	<StickyNote class="top-80 left-40" />
 	<div class="flex flex-col items-center justify-center border-2 border-dotted border-black p-4">
 		<h2 class="text-lg font-semibold">Find me online:</h2>
 		<ul class="list-disc">