47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
# 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.
|