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 .jsx component 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.css or 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.jsx
components/Hero.jsx
components/Workflows.jsx
components/Tiers.jsx
components/FAQ.jsx
components/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

Reading demo

A sample reading environment is wired into this Next.js app (pages router).

npm install
npm run dev

Then open http://localhost:3000/read. One chapter is filled (Real Estate, with nested RE-01 and RE-02). This is a demo, not the live book.

1.7 KiB Raw Blame History