- Cover: publisher-style belly band across the lower book cover using a compressed banner (2.2MB screenshot -> 60KB WebP, resized to display needs), cropped via a width-locked <img> + percentage offset so the wordmark stays legible rather than getting zoomed/cropped sideways. Compass + wordmark compacted into a row to make room. - Copy: the theme woven through Field Notes, Contents, the Founding Sponsor tier, and one direct FAQ entry -- mostly oblique, since the cover already states it explicitly. Hero/Recipe/Capture/Footer left untouched on purpose.
51 lines
2.0 KiB
React
51 lines
2.0 KiB
React
export default function Tiers() {
|
||
return (
|
||
<section className="section" id="back">
|
||
<div className="wrap">
|
||
<div className="tiers-head">
|
||
<div className="reveal">
|
||
<span className="spec">When we launch</span>
|
||
<h2>What backing will look like.</h2>
|
||
</div>
|
||
<p className="tiers-note reveal">
|
||
Preview of planned pledge tiers. Final pricing is confirmed at the Kickstarter
|
||
launch — nothing here is a live checkout yet.
|
||
</p>
|
||
</div>
|
||
<div className="tier-grid">
|
||
<div className="tier reveal">
|
||
<div className="t-name">Supporter</div>
|
||
<div className="t-price">$10</div>
|
||
<div className="t-unit">one-time</div>
|
||
<div className="t-desc">
|
||
The preview chapter, community updates, and an early look at the founding library
|
||
as it’s written.
|
||
</div>
|
||
</div>
|
||
<div className="tier feature reveal">
|
||
<div className="t-tag">The one to get</div>
|
||
<div className="t-name">The Book</div>
|
||
<div className="t-price">
|
||
$47 <small>/yr</small>
|
||
</div>
|
||
<div className="t-unit">annual subscription</div>
|
||
<div className="t-desc">
|
||
The full guide — PDF + web reader — and every annual update while you’re
|
||
subscribed. Recurring value, no lifetime gimmick.
|
||
</div>
|
||
</div>
|
||
<div className="tier reveal">
|
||
<div className="t-name">Founding Sponsor</div>
|
||
<div className="t-price">Founding</div>
|
||
<div className="t-unit">limited · final terms at launch</div>
|
||
<div className="t-desc">
|
||
A named acknowledgment in the guide, a private cohort seat, and a hand in shaping
|
||
the first edition — the ground floor of something you helped build.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|