field-guide / src /lib /components /SubmitTrail.svelte
pngwn
improve submissions docs
a8647ab
<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>