✨ add stantec as sponsor + change marquee

src/data/sponsors.json

@@ -1,22 +1,27 @@
 [
 	{
-		"logo": "sponsors/eba-engineering.svg",
+		"logo": "eba-engineering.svg",
 		"url": "https://ebaengineering.com",
 		"name": "EBA Engineering"
 	},
 	{
-		"logo": "sponsors/first.avif",
+		"logo": "first.avif",
 		"url": "https://www.firstinspires.org/",
 		"name": "FIRST"
 	},
 	{
-		"logo": "sponsors/hcb.svg",
+		"logo": "hcb.svg",
 		"url": "https://hackclub.com/fiscal-sponsorship/",
 		"name": "Hack Club Bank"
 	},
 	{
-		"logo": "sponsors/clf.avif",
+		"logo": "clf.avif",
 		"url": "https://clfmd.org/",
 		"name": "Chesapeake Lighthouse Foundation"
+	},
+	{
+		"logo": "stantec.svg",
+		"url": "https://www.stantec.com/",
+		"name": "Stantec"
 	}
 ]

src/routes/+page.svelte

@@ -1,11 +1,11 @@
-<script>
+<script lang="ts">
 import { onMount } from "svelte";
 import { Marquee } from "@selemondev/svelte-marquee";
 import "@selemondev/svelte-marquee/dist/style.css";
 import Background from "../components/Background.svelte";
 import links from "../data/links.json";
 import sponsors from "../data/sponsors.json";
-let contactForm;
+let contactForm: HTMLFormElement;
 onMount(() => {
 	contactForm.reset();
 });
@@ -68,16 +68,9 @@ onMount(() => {
 		<div
 			class="bg-[neutral-600] bg-opacity-20 backdrop-blur-md w-screen md:max-w-4/5 p-10 my-10 rounded-xl text-center"
 		>
-			<div class="md:flex justify-center flex-wrap flex-gap-10 hidden">
-				{#each sponsors as { logo, url, name }}
-					<a href={url} target="_blank" class="hover-scale-110 scale-100 duration-250 ease-out">
-						<img src={logo} height="100" alt={name} class="h-30 w-content" />
-					</a>
-				{/each}
-			</div>
-			<div class="md:hidden">
+			<div>
 				<Marquee
-					class="md:hidden py-2 -ml-20 w-screen [--duration:15s]"
+					class="py-2 w-full [--duration:15s]"
 					fade={true}
 					pauseOnHover={true}
 				>
@@ -87,7 +80,7 @@ onMount(() => {
 							target="_blank"
 							class="hover-scale-110 scale-100 duration-250 ease-out mx-2"
 						>
-							<img src={logo} height="100" alt={name} class="h-30" />
+							<img src={`sponsors/${logo}`} height="100" alt={name} class="h-30" />
 						</a>
 					{/each}
 				</Marquee>