Add all new changes to the website

src/components/Button.svelte

@@ -1,7 +1,3 @@
-<script>
-    import { Button } from "bits-ui";
-</script>
-
-<Button.Root class="bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none hover:shadow-lg hover:shadow-ecsess-800 active:bg-ecsess-800 transition-all">
+<button class="btn bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none hover:shadow-lg hover:shadow-ecsess-800 active:bg-ecsess-800 transition-all">
     <slot />
-</Button.Root>
+</button>

src/components/NavButton.svelte

@@ -1,13 +1,12 @@
 <script>
-    import { Button } from 'bits-ui';
-    let { href, children } = $props();
+	let { href, children } = $props();
 </script>
 
 <a {href}>
-    <Button.Root
-        class="border-ecsess-black hover:border-ecsess-200 active:border-ecsess-400 border-b-4 px-6 py-2
+	<button
+		class="border-ecsess-black hover:border-ecsess-200 active:border-ecsess-400 border-b-4 px-6 py-2
     font-semibold transition-all"
-    >
-        {@render children()}
-    </Button.Root>
+	>
+		{@render children()}
+	</button>
 </a>

src/components/Section.svelte

@@ -1,17 +1,18 @@
 <script>
 	let { children = () => 'Section placeholder', black = false } = $props();
+
+	let tailwindClasses = $state(
+		'mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200'
+	);
+
+	if (black) {
+		tailwindClasses += ' bg-ecsess-black';
+	} else {
+		// green background
+		tailwindClasses += ' bg-ecsess-800';
+	}
 </script>
 
-{#if black}
-	<div
-		class="bg-ecsess-black mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
-	>
-		{@render children()}
-	</div>
-{:else}
-	<div
-		class="bg-ecsess-800 mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
-	>
-		{@render children()}
-	</div>
-{/if}
+<div class={tailwindClasses}>
+	{@render children()}
+</div>