src/lib/components/Tracks.svelte

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

<section class="section" id="tracks">
	<div class="wrap">
		<SectionHeader
			coord="02"
			eyebrow="Pick a trail"
			title="Two tracks, one campsite"
			lede="Solve a real problem, or wander somewhere weird. Both are equally celebrated — and carry the same prize pool."
		/>
		<div class="tracks" style="margin-top:44px">
			{#each TRACKS as tr (tr.id)}
				<div class="track">
					<TopoBackdrop opacity={0.06} />
					<div style="position:relative">
						<div
							class="track__glyph"
							style="background:{tr.accent === 'amber' ? 'var(--amber)' : 'var(--forest)'}"
						>
							<Icon name={tr.glyph} size={30} stroke="#fff" sw={1.7} />
						</div>
						<span class="coord">{tr.kicker.toUpperCase()}</span>
						<h3 class="display" style="font-size:32px;margin-top:6px">{tr.name}</h3>
						<p style="color:var(--ink-2);margin-top:12px;text-wrap:pretty">{tr.blurb}</p>
						<ul class="track__ex">
							{#each tr.examples as ex (ex)}
								<li>
									<Icon
										name="pin"
										size={17}
										stroke={tr.accent === 'amber' ? 'var(--amber-deep)' : 'var(--forest)'}
									/>
									<span>{ex}</span>
								</li>
							{/each}
						</ul>
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>