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.
AIBook.fun Marketing Site
Scaffolded for Framer import and Next.js (Cloudflare Pages / DigitalOcean).
Stack
- React 18 + JSX
- Tailwind CSS (v4 with @import)
- shadcn/ui-ready component structure
- SendGrid (email) + Twilio (optional SMS)
- Hosting: Cloudflare Pages / DigitalOcean
Framer Compatibility
These components are standard React + Tailwind. To use in Framer:
- Copy any
.jsxcomponent file. - In Framer, add a new Code Component and paste the file contents.
- Ensure your Framer project has Tailwind CSS configured in settings if classes don't render.
- Import
globals.cssor copy Tailwind directives into Framer's CSS settings.
Note: Framer Sites don't run Next.js natively. For a live site with routing (A/B tests, CMS integrations, analytics events), deploy via Next.js on Cloudflare Pages.
Pages scaffolded
pages/index.jsx— landing (hero, the book, workflows, tiers, FAQ)components/Header.jsxcomponents/Hero.jsxcomponents/Workflows.jsxcomponents/Tiers.jsxcomponents/FAQ.jsxcomponents/Footer.jsx
Key design references (from PRD / Spec)
- Utility-first pitch: "run a workflow today" (A/B test hook ready)
- 6 verticals listed in Workflows
- 3 sample tiers shown ($10 / $47yr / $4,888)
- No NFT/crypto/Web3 language (Kickstarter compliance scrubbed)
- Event tracking only (not content) — PostHog/Cloudflare Analytics slot available