Move files

src/components/layout/Footer.svelte

@@ -0,0 +1,14 @@
+<script>
+	const year = new Date().getFullYear();
+</script>
+
+<footer
+	class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 py-4"
+>
+	<div>
+		<p class="text-ecsess-200 py-3 text-center">
+			Created by ECSESS with love {'<3'}. <br />
+			&copy; ECSESS {year}, under GNU General Public License v3.0.
+		</p>
+	</div>
+</footer>

src/components/layout/NavBar.svelte

@@ -0,0 +1,55 @@
+<script>
+	import NavButton from './NavButton.svelte';
+	import ECSESS from 'assets/ECSESS.png';
+	import { Menu } from '@lucide/svelte';
+	import { slide } from 'svelte/transition';
+	let isElectionTime = $state(false);
+	let menuHidden = $state(true);
+</script>
+
+<nav class="bg-ecsess-black text-ecsess-200 sticky w-full py-1">
+	<div class="block md:hidden">
+		<div class="mx-4 flex items-center-safe justify-between">
+			<a href="/">
+				<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
+			</a>
+
+			<button
+				type="button"
+				class="bg-ecsess-black-hover hover:bg-ecsess-800 grid size-10 place-items-center rounded-lg transition-colors ease-in-out active:bg-green-900"
+				onclick={() => {
+					menuHidden = !menuHidden;
+				}}
+			>
+				<Menu class="size-6 transition-transform duration-300 ease-in-out" />
+			</button>
+		</div>
+
+		{#if !menuHidden}
+			<div class="flex flex-col place-items-center gap-1" transition:slide>
+				<NavButton href="/">Home</NavButton>
+				<NavButton href="/council">Meet the council</NavButton>
+				<NavButton href="/events">Events</NavButton>
+				<NavButton href="/resources">Resources</NavButton>
+				{#if isElectionTime}
+				<NavButton href="/join">Join ECSESS</NavButton>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<div class="hidden md:block">
+		<div class="flex place-content-center items-end">
+			<a href="/">
+				<img src={ECSESS} alt="ECSESS Logo" class="h-12 p-2" />
+			</a>
+			<NavButton href="/">Home</NavButton>
+			<NavButton href="/council">Meet the council</NavButton>
+			<NavButton href="/events">Events</NavButton>
+			<NavButton href="/resources">Resources</NavButton>
+			{#if isElectionTime}
+				<NavButton href="/join">Join ECSESS</NavButton>
+			{/if}
+		</div>
+	</div>
+</nav>

src/components/layout/NavButton.svelte

@@ -0,0 +1,12 @@
+<script>
+	let { href, children } = $props();
+</script>
+
+<a {href}>
+	<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>
+</a>

src/components/layout/Section.svelte

@@ -0,0 +1,18 @@
+<script>
+	let { children = () => 'Section placeholder', black = false } = $props();
+
+	let tailwindClasses = $state(
+		'mx-auto flex min-h-[90vh] 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>
+
+<div class={tailwindClasses}>
+	{@render children()}
+</div>

src/components/layout/SeoMetaTags.svelte

@@ -0,0 +1,32 @@
+<script>
+	let {
+		title = "Electrical, Computer & Software Engineering Students' Society at McGill - ECSESS",
+		description = 'Meet the student council, get access to academic and technical resources, registration for events, and much more!',
+		canonical = 'https://ecsess.mcgilleus.ca'
+	} = $props();
+
+	let thumbnail = "https://cdn.sanity.io/images/vmtsvpe2/production/5d68504038cc692805dc5e51af83adedfefde442-5304x3443.jpg?h=628&fm=webp";
+</script>
+
+<svelte:head>
+	<!-- Meta Tags Generated with https://metatags.io -->
+	<!-- Primary Meta Tags -->
+	<title>{title}</title>
+	<meta name="title" content={title} />
+	<meta name="description" content={description} />
+	<link rel="canonical" href={canonical} />
+
+	<!-- Open Graph / Facebook -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={canonical} />
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={description} />
+	<meta property="og:image" content={thumbnail} />
+
+	<!-- X (Twitter) -->
+	<meta property="twitter:card" content="summary_large_image" />
+	<meta property="twitter:url" content={canonical} />
+	<meta property="twitter:title" content={title} />
+	<meta property="twitter:description" content={description} />
+	<meta property="twitter:image" content={thumbnail} />
+</svelte:head>