File size: 1,460 Bytes
a8898de 560169d a8898de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <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>
|