# 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:
1. Copy any `.jsx` component file.
2. In Framer, add a new Code Component and paste the file contents.
3. Ensure your Framer project has Tailwind CSS configured in settings if classes don't render.
4. 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).

```bash
npm install
npm run dev
```

Then open [http://localhost:3000/read](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.