src/lib/components/SubmitTrail.svelte

<script lang="ts">
	import { SUBMIT_STEPS } from '$lib/data/content';
	import SectionHeader from './SectionHeader.svelte';
	import TopoBackdrop from './TopoBackdrop.svelte';
	import Icon from './Icon.svelte';
</script>

<section class="section on-dark" id="submit">
	<TopoBackdrop opacity={0.09} stroke="rgba(244,238,225,.5)" />
	<div class="wrap" style="position:relative">
		<SectionHeader
			coord="07"
			eyebrow="The trail map"
			title="How to submit"
			lede="The markers between you and the finish line."
		/>
		<div class="trail" style="margin-top:48px;max-width:720px">
			{#each SUBMIT_STEPS as s, i (s.t)}
				<div class="trail__step">
					<div class="trail__dot" style="background:var(--amber);border-color:var(--amber);color:#fff">
						{i + 1}
					</div>
					<div style="padding-top:6px">
						<h4 class="display" style="font-size:24px;color:var(--paper)">{s.t}</h4>
						<p class="lede" style="margin-top:8px">{s.d}</p>
					</div>
				</div>
			{/each}
		</div>

		<a class="btn btn--accent" href="/submit" style="margin-top:40px">
			Start your submission <Icon name="arrow" size={15} stroke="#fff" />
		</a>
	</div>
</section>