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>

src/routes/+page.svelte

@@ -2,8 +2,14 @@
 	import Section from 'components/Section.svelte';
 
 	// Getting info from ECSESS CMS
-	let description =
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+	// let description =
+	// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+	const query = '_type:homepage';
+
+	let description = $state();
+	description = fetch(
+		`https://${import.meta.env.SANITY_ID}.api.sanity.io/vX/data/query/production?query=${query}&perspective=drafts`
+	).then((res) => res.json).then((json) => json.toString());
 </script>
 
 <title> McGill ECSESS </title>