src/routes/+layout.svelte

<script lang="ts">
	import '../app.css';
	import '@fortawesome/fontawesome-free/css/all.min.css';

	let { children } = $props();
</script>

<div class="mx-auto max-w-4xl">
	<header class="mb-10 text-center">
		<div class="mb-4 flex items-center justify-center">
			<img
				src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
				alt="Hugging Face Logo"
				class="mr-3 h-12"
			/>
			<h1 class="text-3xl font-bold text-gray-800 md:text-4xl">Bandwidth Test</h1>
		</div>
		<p class="mx-auto max-w-2xl text-gray-600">
			Measure your connection speed to Hugging Face's servers in real-time
		</p>
	</header>
	{@render children()}
</div>