101 lines
4.0 KiB
HTML
101 lines
4.0 KiB
HTML
{{/*
|
|
Pricing — one or more plan groups (e.g. "You host" / "We host") behind a
|
|
switch. The switch is a set of radio inputs styled as tabs, so it works
|
|
without JS; up to four groups. Each group can have:
|
|
tiers — bordered rows: name, price, unit, note, features
|
|
includes — a checklist shared by every tier, plus an optional note
|
|
addons — small priced tiles
|
|
apps — a compact table of single apps: name, category, body, price
|
|
*/}}
|
|
{{ $s := . }}
|
|
{{ $key := partial "section-id.html" $s | default "plans" }}
|
|
{{ partial "sections/head.html" $s }}
|
|
<div class="plan-switch">
|
|
{{ if gt (len $s.groups) 1 }}
|
|
{{ range $i, $g := $s.groups }}
|
|
<input type="radio" class="plan-radio" name="{{ $key }}" id="{{ $key }}-{{ $i }}" aria-label="{{ $g.label }}"{{ if eq $i 0 }} checked{{ end }}>
|
|
{{ end }}
|
|
<div class="plan-tabs" aria-hidden="true">
|
|
{{ range $i, $g := $s.groups }}<label for="{{ $key }}-{{ $i }}">{{ $g.label }}</label>{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="plan-panels">
|
|
{{ range $s.groups }}
|
|
<div class="plan-panel"{{ with .id }} id="{{ . }}"{{ end }}>
|
|
{{ with .lede }}<p class="plan-lede">{{ . | markdownify }}</p>{{ end }}
|
|
|
|
{{ with .tiers }}
|
|
<ol class="tier-list">
|
|
{{ range . }}
|
|
<li class="tier">
|
|
<div class="tier-head">
|
|
<h3 class="tier-name">{{ .name }}</h3>
|
|
<p class="tier-price"><span class="tier-amount">{{ .price }}</span>{{ with .unit }}<span class="tier-unit">{{ . }}</span>{{ end }}</p>
|
|
{{ with .note }}<p class="tier-note">{{ . | markdownify }}</p>{{ end }}
|
|
</div>
|
|
<div class="tier-body">
|
|
{{ with .intro }}<p class="tier-intro">{{ . | markdownify }}</p>{{ end }}
|
|
<ul class="tier-features">
|
|
{{ range .features }}<li>{{ . | markdownify }}</li>{{ end }}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
{{ end }}
|
|
</ol>
|
|
{{ end }}
|
|
|
|
{{ with .includes }}
|
|
<div class="plan-block">
|
|
{{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
|
|
<ul class="check-list">
|
|
{{ range .items }}<li>{{ . | markdownify }}</li>{{ end }}
|
|
</ul>
|
|
{{ with .note }}<p class="plan-note">{{ . | markdownify }}</p>{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .addons }}
|
|
<div class="plan-block">
|
|
{{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
|
|
{{ with .lede }}<p class="plan-note plan-note-top">{{ . | markdownify }}</p>{{ end }}
|
|
<ul class="addon-row">
|
|
{{ range .items }}
|
|
<li class="addon">
|
|
<h4 class="addon-name">{{ .name }}</h4>
|
|
<p class="tier-price"><span class="tier-amount">{{ .price }}</span>{{ with .unit }}<span class="tier-unit">{{ . }}</span>{{ end }}</p>
|
|
{{ with .body }}<p class="addon-body">{{ . | markdownify }}</p>{{ end }}
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .apps }}
|
|
<div class="plan-block">
|
|
{{ with .headline }}<h3 class="plan-subhead">{{ . }}</h3>{{ end }}
|
|
{{ with .lede }}<p class="plan-note plan-note-top">{{ . | markdownify }}</p>{{ end }}
|
|
<div class="table-scroll">
|
|
<table class="compare-table app-price-table">
|
|
<thead><tr><th scope="col">App</th><th scope="col">What it does</th><th scope="col">Price</th></tr></thead>
|
|
<tbody>
|
|
{{ range .items }}
|
|
<tr>
|
|
<th scope="row">{{ .name }}{{ with .category }}<span class="matrix-layer">{{ . }}</span>{{ end }}</th>
|
|
<td>{{ .body | markdownify }}</td>
|
|
<td class="app-price">{{ .price }}</td>
|
|
</tr>
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ with .ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" . }}</div>{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ if $s.ctas }}<div class="cta-row mt-2">{{ partial "sections/ctas.html" $s.ctas }}</div>{{ end }}
|