SinachPat
89a3d76122
- 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.
43 lines
1.8 KiB
React
43 lines
1.8 KiB
React
/**
|
|
* Pure-CSS 3D book styled as the field guide. Decorative, so aria-hidden.
|
|
* Faces (cover / spine / fore-edge / top / back) are assembled with
|
|
* transform-style: preserve-3d; see `.book3d` in globals.css.
|
|
*/
|
|
export default function Book3D() {
|
|
return (
|
|
<div className="book3d" aria-hidden="true">
|
|
<div className="book3d__inner">
|
|
<div className="book3d__face book3d__back" />
|
|
<div className="book3d__face book3d__pages" />
|
|
<div className="book3d__face book3d__top" />
|
|
<div className="book3d__face book3d__spine">
|
|
<span>AIBook.fun · Responsible Agentic AI</span>
|
|
</div>
|
|
<div className="book3d__face book3d__cover">
|
|
<span className="book3d__kicker">The Field Guide</span>
|
|
<h3 className="book3d__title">
|
|
Responsible
|
|
<br />
|
|
Agentic AI
|
|
</h3>
|
|
<span className="book3d__line" />
|
|
<span className="book3d__sub">Tested workflows you can actually run</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>
|
|
);
|
|
}
|