src/lib/components/PageHeadingSection.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

	type Props = {
		title: string;
		description?: string;
		additional?: Snippet;
	};

	let { title, description, additional }: Props = $props();
</script>

<div class="border-b-2 border-[#0dce97] pb-5">
	<div class="max-w-4xl">
		<h1 class="font-mono text-5xl font-semibold tracking-normal text-foreground">
			{title}
		</h1>
		{#if description}
			<p class="mt-4 text-base leading-7 text-muted-foreground">
				{description}
			</p>
		{/if}
	</div>

	{#if additional}
		{@render additional()}
	{/if}
</div>