feat(marketing-site): American Dream cover band + narrative weave

- 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.
This commit is contained in:
SinachPat
2026-08-28 10:49:57 +01:00
parent 9340a0a972
commit 89a3d76122
8 changed files with 43 additions and 18 deletions
+13 -6
View File
@@ -22,12 +22,19 @@ export default function Book3D() {
</h3>
<span className="book3d__line" />
<span className="book3d__sub">Tested workflows you can actually run</span>
<svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
<path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
<path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
</svg>
<span className="book3d__brand">AIBook.fun</span>
<div className="book3d__foot">
<svg className="book3d__mark" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="17.5" stroke="#efe9db" strokeWidth="1" opacity="0.7" />
<path d="M20 5 L22.6 20 L20 35 L17.4 20 Z" fill="#efe9db" />
<path d="M5 20 L20 17.4 L35 20 L20 22.6 Z" fill="#efe9db" opacity="0.55" />
</svg>
<span className="book3d__brand">AIBook.fun</span>
</div>
{/* Belly band — the classic publisher's wraparound strip for a themed
tie-in, rather than redesigning the whole cover around it. */}
<div className="book3d__band">
<img src="/american-dream-banner.webp" alt="" />
</div>
</div>
</div>
</div>