# AI & Humn — Landing page brief

**Version:** 3 — language ladder finalized, founder's previous company in (Togglebytes), demo KB scope confirmed (founder will provide content). All v2 open decisions resolved.

**Status:** content locked; ready to upload to Claude design (or any designer / agency) to produce the layout.

The visual language is already defined in this repo at `aiw-voice-app/src/design-system/colors_and_type.css` — that file is the source of truth for tokens, type scale, buttons, and surfaces. This brief does not override it; it builds on it.

---

## Changelog

**v3 ← v2**
- **Languages.** Tier 1 = English **or** Hindi (single language, customer's choice). Tier 2 and Tier 3 both support English, Hindi, and mixed-language conversation. Tier 2 is no longer single-language — its differentiation from Tier 3 is now purely calling, automation, and minutes.
- **Founder note.** Now names the previous company: Togglebytes. Lends credibility, lands harder than the generic version.
- **Demo widget KB content.** Founder will provide. Suggested KB structure recorded in Priority Task #4.

**v2 ← v1**
- **Pricing.** Cards now show both INR and the repositioned USD anchors ($29 / $49). One-line top-up note added under each paid card.
- **Languages.** Tier 3's "multi-language" reframed as "Hindi, English, and mixed-language conversation" — accurate to what the product actually does.
- **Compliance posture.** Use-case cards no longer carry footnotes. The data-handling section now says HIPAA-ready (healthcare) and RBI-aligned (Indian fintech) at launch — the work to make those true is tracked under Priority tasks below.
- **Founder note.** Headshot is in (56×56, three-quarter angle, neutral background).
- **Pricing-page handoff.** Annual toggle deferred to `/pricing`; minute-rounding rule, overage details, and top-up packs all live there.

---

## 0. Brand and voice

**Product name:** **AI & Humn** (always written with spaces around the ampersand). Marketing tagline: *voice that converts.*

**Voice rules (carry over from the existing design system):**
- Quiet confidence. Plain English.
- Sentence case for all UI labels, buttons, and headings ("Create your widget", not "Create Your Widget").
- Title Case reserved for product nouns when they refer to a defined entity (Voice, Agent, Knowledge Base).
- **No emoji. No exclamation marks. No superlatives. No "magic", "supercharge", "AI-powered".**
- Empty states are calm. Errors are factual. Numbers and units use Geist Mono.

**Visual rules (carry over):**
- Black-on-white chrome with warm cream neutrals (`--bg2: #f5f3f1`).
- Hue is forbidden in chrome. The user's brand color is honored in exactly one place: the launcher orb's inner dot.
- Borders are semi-transparent black (`rgba(0,0,0,0.07)`) — never gray hex.
- Display serif (Libre Baskerville) for headlines at light weight (300). Inter for body. Geist Mono for tokens, durations, code.
- Pill buttons (radius 9999px). Cards 20px radius, `--shadow-card`. No gradients in chrome.
- Single moment of warmth: the orb (radial gradient + warm shadow + `backdrop-filter: blur(8px)`).

---

## 1. Page architecture (13 sections, in order)

1. Hero
2. Problem
3. Solution + category claim
4. How it works
5. Live demo (the actual product)
6. Differentiation (vs phone-based voice AI)
7. Use cases
8. Capability ladder (Tier 1 → 2 → 3 features)
9. Founder note
10. Data handling
11. Pricing
12. FAQ
13. Final CTA + footer

---

## 2. Section-by-section copy

### Section 1 — Hero

**Visual:** centered, max content width 880px, generous vertical breathing room (160px top / 120px bottom). The orb sits to the right of or below the headline at 96–128px so it's visible above the fold. It's not decorative — it's the live demo.

**Headline (recommended):**
> The conversion layer your website was missing.

**Headline alternatives** (designer can A/B):
- Your website doesn't need more traffic. It needs answers.
- Most websites talk at visitors. Yours can talk with them.

**Subheadline:**
> AI & Humn embeds a voice agent into your website. Visitors click, speak, and get answers grounded in your business — in real time. No phone tree, no form, no chat queue. Just conversation.

**CTAs (two, side by side):**
- Primary, black pill: **Create your voice widget →** (routes to `/signup`)
- Secondary, white-with-border pill: **Talk to the agent that built this page →** (opens the embedded widget; same orb the visitor will deploy)

**Microcopy under CTAs:**
> Free for 50 minutes a month. No card required.

---

### Section 2 — Problem

**Heading:**
> You're already paying for traffic. Why does most of it leave without a word?

**Body:**
- Reading is work. Visitors want answers, not articles.
- Chatbots feel scripted. Visitors learn to scroll past them.
- Forms ask for commitment before any value lands.
- Phone calls don't scale, and most people won't make one.

**Closing line (set apart):**
> The visitors with the highest intent are the ones who give you the least time to convert. You have seconds. Text isn't fast enough.

---

### Section 3 — Solution

**Heading:**
> Meet AI & Humn — the conversion layer for your website.

**Lead paragraph:**
> A voice agent that lives on your site, not behind a phone number. Visitors click. They speak. They get answers — in your words, your prices, your product. The conversation happens where the intent is, the moment it arrives.

**What it does (four lines):**
- **Sounds like your team.** Trained on your content. Tone you control.
- **Listens to intent, not keywords.** Understands what someone actually wants.
- **Acts inside the conversation.** Books appointments, qualifies leads, captures email — without sending the visitor anywhere else.
- **Speaks English and Hindi.** Mixes them mid-sentence the way your customers actually do.

**Footnote (half-opacity):**
> *Need a phone option too? AI & Humn handles inbound calls with the same agent. Same brain, same data, two surfaces.*

---

### Section 4 — How it works

**Heading:**
> Three steps. Live in five minutes.

**Steps:**

**01 — Sign up and tell us what you sell.**
A short form: domain, what you do, who your visitors are.

**02 — Add your knowledge.**
Drop in a writeup, FAQs, or PDFs. The agent reads, structures, and is ready in minutes.

**03 — Paste one line of code.**
A `<script>` tag goes on your site. The voice orb appears. Visitors start talking.

**Footer line:**
> No engineers. No platform migration. The widget runs alongside whatever you already have.

---

### Section 5 — Live demo

**Heading:**
> This page has a voice agent. Talk to it.

**Body:**
> The orb in the corner is the same widget your customers will use. Ask it about AI & Humn — pricing, integrations, how it handles a healthcare appointment. It's running on the same code you'll deploy. Try interrupting it. Try Hindi. Try a question we haven't anticipated.

**Sub-CTA (small caps, +0.28px tracking):**
> CLICK THE ORB TO START

> **Engineering note:** the orb on this page must be a dedicated **AI & Humn marketing widget**, not the seeded VDKK test widget. Create a tenant + widget in the production database whose knowledge base is loaded with this landing page's content (pricing, integrations, FAQs, founder bio). Use that widget's `data-widget-token` in the embed snippet on the home route. About an hour using the existing seven-step wizard.

---

### Section 6 — Differentiation

**Heading:**
> Voice AI that meets visitors where they are.

**Subhead:**
> Other voice agents wait for a phone call. AI & Humn starts the moment a visitor clicks.

| | **Phone-based voice AI** | **AI & Humn** |
|---|---|---|
| Where it lives | A number visitors have to dial | A widget on your existing site |
| First interaction | Outbound or inbound call | One click, voice in under two seconds |
| Visitor friction | Dial, wait, identify themselves | None |
| Where high-intent traffic actually is | The few who agree to be called | Everyone already on your site |
| Drop-off | Most won't pick up the phone | Captured at the moment of intent |

**Closing line (italic display serif):**
> Phone-based voice agents are powerful. But your website is where intent happens. That's where the agent should be.

---

### Section 7 — Use cases

**Heading:**
> Built for industries where the next question changes the deal.

**HEALTHCARE** — A patient asks about Sunday availability. The agent confirms the slot, books the appointment, and texts the clinic. Before they navigate away. *HIPAA-ready deployments at launch.*

**FINTECH** — A visitor asks how the loan compares to a competitor. The agent qualifies them, surfaces the right product, and routes a warm lead to the sales team. *RBI-aligned for Indian fintech.*

**REAL ESTATE** — A buyer asks about the rent on a specific listing. The agent answers with the actual unit, schedules the viewing, and confirms the broker over WhatsApp.

**SAAS** — A founder asks "can it integrate with our CRM?" The agent demonstrates the feature, captures the email, and pings the team in Slack with full context.

> **Design hint:** the compliance lines in healthcare + fintech are short, calm, italicized, on the same row as the body. Don't dress them up — they're trust signals, not banners.

---

### Section 8 — Capability ladder

**Heading:**
> Three ways to put a voice on your site.

**ESSENTIAL** — Embed the widget. Start converting voice traffic the same day.
- Website widget · Single language (English **or** Hindi) · 50 calling minutes a month

**INTERMEDIATE** — Add a calling agent. Handle inbound calls with the same brain.
- Everything in Essential · Inbound calling agent (India) · Multiple websites · No watermark · English, Hindi, or mixed-language conversation

**ADVANCED** — Custom workflows. Conversation that finishes the job.
- Everything in Intermediate · More minutes · Workflow automation · Custom calling-agent flows · Priority support

**Footer line:** See pricing →

---

### Section 9 — Founder note

**Heading (small caps):** WHY I BUILT THIS

**Visual:** cream background (`--bg2`). Single column, max width 720px, centered. A 56×56 circular headshot of the founder sits left of the body text (three-quarter angle, neutral background, soft daylight — matches the kit's photography rules).

**Body:**
> Twelve years in software, the last few running Togglebytes. The same problem kept showing up — visitors arrive with intent, but there's no way to talk to them the moment it matters. Text chat misses what voice catches. Phone calls don't scale. So I built AI & Humn — a voice agent that lives on the page, sounds like your team, and works 24×7×365. The conversion layer my own websites needed for years.
>
> *— Dhruv Dholakia, Founder*

---

### Section 10 — Data handling

**Heading:**
> How we handle data — straight, not stylized.

- Conversations are processed by AI & Humn and the speech and language models we use. Their terms apply alongside ours.
- We retain audio and transcripts to maintain quality and improve the agent over time.
- We don't sell your data, and we don't share it with marketers. Your knowledge base stays yours.
- **Healthcare deployments are HIPAA-ready. Indian fintech deployments are RBI-aligned.** Documentation available under NDA on request.
- SOC 2 Type 1 and GDPR alignment are on the roadmap. **See Privacy →**

---

### Section 11 — Pricing

**Heading:**
> Three plans. Pay for conversation, not seats.

**Subhead:**
> Start free. Upgrade when your traffic does.

#### Card 1 — Essential
- **Plan name:** Essential
- **Who it's for:** For trying us out
- **Price (INR):** ₹0 / month
- **Price (USD):** $0 / month
- **CTA (black pill):** Start free →
- **Includes:**
  - Website widget
  - 50 calling minutes / month
  - One website
  - Single language (English or Hindi, customer's choice)
  - AI & Humn watermark
  - Email support
- **Top-up:** Not available on this plan. Upgrade to Intermediate to buy more minutes.

#### Card 2 — Intermediate (most popular)
- **Plan name:** Intermediate
- **Who it's for:** For websites converting daily
- **Price (INR):** ₹2,499 / month
- **Price (USD):** $29 / month
- **CTA (black pill):** Start with Intermediate →
- **Top badge:** MOST POPULAR
- **Includes:**
  - Everything in Essential
  - 250 calling minutes / month
  - Inbound calling agent (India)
  - Multiple websites
  - No watermark
  - English, Hindi, or mixed-language conversation
- **Top-up:** ₹20 per minute · 30 / 60 / 150-minute packs

#### Card 3 — Advanced
- **Plan name:** Advanced
- **Who it's for:** For teams with custom funnels
- **Price (INR):** ₹4,499 / month
- **Price (USD):** $49 / month
- **CTA (white-with-border pill):** Start with Advanced →
- **Includes:**
  - Everything in Intermediate
  - 450 calling minutes / month
  - Workflow automation
  - Custom calling-agent flows
  - Priority support
- **Top-up:** ₹20 per minute · 30 / 60 / 150-minute packs

**Below all three cards (centered, half-opacity):**
> Calling time is rounded up to the next whole minute. Prices in ₹ for visitors in India; shown in $ elsewhere. Looking for annual pricing or custom integrations? **See full pricing →**

> **Engineering note:**
> - **Currency switch:** detect visitor IP server-side; render INR for India, USD for everywhere else. Show only one currency on each card — no side-by-side dual pricing on the landing page (cleaner read; the brief includes both for design reference).
> - **CTAs:** all three route to `/signup` with a `plan=` query param.
> - **Annual toggle:** lives on `/pricing`, not on the home page.

---

### Section 12 — FAQ

**Heading:**
> Questions we've heard already.

**Will it sound like my brand?** You write the greeting and the persona. The agent matches your tone and stays inside the content you give it.

**What if it doesn't know the answer?** It says so, captures the question, and either suggests the closest thing in your knowledge base or asks if the visitor wants a human follow-up.

**How is this different from a chatbot?** Voice is faster, more natural, and handles intent that text can't — accent, tone, urgency. Visitors say more in 10 seconds of speaking than 10 minutes of typing.

**What languages are supported?** English and Hindi at launch. The Essential plan picks one language at setup. Intermediate and Advanced support mixed-language conversation natively — the agent can switch between English and Hindi within the same call. More languages on the roadmap.

**How fast does the agent respond?** Under two seconds from click to first word. The bottleneck is the network, not the model.

**Is the agent compliant for healthcare or fintech?** Healthcare deployments are HIPAA-ready. Indian fintech deployments are RBI-aligned. Documentation is available under NDA — request via Contact.

**What happens to a conversation after it ends?** We retain audio and transcripts to keep the agent improving. We don't sell or share customer data with marketers. Full details on our Privacy page.

**How are minutes counted?** Calling time is rounded up to the next whole minute. A 19m 02s call counts as 20 minutes.

**What if I run out of minutes mid-month?** On the Intermediate and Advanced plans, you can buy top-up packs at ₹20 per minute (30, 60, or 150-minute packs). Essential customers upgrade to keep going.

**What does setup look like?** Sign up, add your content, paste one `<script>` tag. Most teams are live in under ten minutes.

**Can I run it on more than one website?** On the Intermediate and Advanced plans, yes. The Essential plan is one website per account.

---

### Section 13 — Final CTA + footer

**Heading:**
> Stop watching visitors leave silent.

**Subhead:**
> Give your website a voice that converts.

**CTA (black pill, large):**
> Create your voice widget →

**Sub-link:**
> Or read how it works →

**Footer columns:**

| Product | Use cases | Company | Legal |
|---|---|---|---|
| Features | Healthcare | About | Privacy |
| Pricing | Fintech | Blog | Terms |
| Integrations | Real estate | Contact | Security |
|  | SaaS |  |  |

**Brand line:**
> AI & Humn — voice that converts.

---

## 3. Critical do's and don'ts (for design tool + reviewer)

**Do:**
- Use the AI & Humn name with spaces around the ampersand, every time.
- Lead with the **conversion layer** category claim. It's the page's spine.
- Treat the orb as the live demo, not decoration. Whoever lays this out should know the orb in the hero is functional.
- Use Geist Mono for all numbers, prices, durations, and tokens (`wt_…`, `agent_…`).
- Keep the whole page reading like one consistent voice. Test by reading any 200 words aloud.

**Don't:**
- Don't add gradients to chrome (only the orb gets a gradient).
- Don't use color to encode meaning (live, error, success). Hue is for the user's brand color and nothing else; status is communicated through type weight, dot indicators, and uppercase labels.
- Don't add stock illustrations of headphones, microphones, or people on calls. The orb is the visual anchor.
- Don't lengthen any subheadline past two lines on desktop.
- Don't use icon-and-checkmark feature lists in the pricing cards. Plain text bullets only.
- Don't make any claim about SOC 2 or GDPR being live until the corresponding work has actually shipped. The data-handling section is the only place these are mentioned, and it says they're on the roadmap — that's the truthful framing.
- Don't show INR and USD side by side on the live page. The brief includes both for design reference; runtime renders one based on visitor IP.

---

## 4. Engineering / build notes

When this page lands in `aiw-voice-app/src/routes/HomePage.tsx`:
- **Live demo widget:** create a dedicated AI & Humn marketing tenant + widget in the production database, load its KB with this landing-page content, paste its embed snippet on `/`. Do not reuse the seeded VDKK token.
- **Currency switch:** detect IP server-side (Fastify backend or `cf-ipcountry` header from Cloudflare). Render the pricing card prices accordingly.
- **CTAs:** all "create" / "start" CTAs route to `/signup`. Pricing CTAs pass `plan=essential|intermediate|advanced` as a query param.
- **Section anchors:** every section gets an id (`#problem`, `#solution`, …) so the footer can deep-link.
- **SEO:** `<title>AI & Humn — voice that converts</title>`, single H1 (the hero headline), each section heading is an H2.
- **Cookie banner:** add only if EU traffic is non-trivial.

---

## 5. Pricing reference (locked)

Stored here so it's versioned with the brief.

| Plan | INR | USD | Watermark | Calling | Languages | Min/mo | Widgets | Automation | Top-up |
|---|---|---|---|---|---|---|---|---|---|
| **Essential** | Free | Free | Yes | No | English **or** Hindi (pick one) | 50 | 1 website | — | — |
| **Intermediate** | ₹2,499 | $29 | No | India inbound | English / Hindi / mixed | 250 | Multiple | — | ₹20/min, 30/60/150 packs |
| **Advanced** | ₹4,499 | $49 | No | India inbound + custom flows | English / Hindi / mixed | 450 | Multiple | Workflow automation | ₹20/min, 30/60/150 packs |

**Billing rules:** calling time is rounded up to the next whole minute. A 19m 02s call counts as 20 minutes. Top-up packs available on Intermediate and Advanced only.

---

## 6. Open decisions

All v1 and v2 open questions are resolved. The brief is content-locked.

If anything new surfaces during design or implementation, log it under Priority tasks below or open a follow-up issue — don't edit copy in place; we want a clean v4 if there's another round.

---

## 7. Priority tasks (for the founder, not for design)

These are the work items that have to land before public launch given what this brief now claims. Logging here so they don't slip.

### P0 — must ship before launch (the brief makes claims that need real backing)

1. **HIPAA readiness.** The use-case card and FAQ both say healthcare deployments are HIPAA-ready. Real work needed: BAA template, audit logging, separate data plane for PHI, no sharing of PHI with third-party model vendors that aren't covered. Engage a compliance vendor (Vanta, Drata, Tugboat Logic) or a healthcare-experienced advisor.

2. **RBI alignment.** The use-case card and FAQ both say Indian fintech deployments are RBI-aligned. Specifically: data localization (Indian customer data stored on Indian infrastructure), no offshoring without explicit consent, audit trails. RBI's "Storage of Payment System Data" and "Master Direction on Outsourcing" are the relevant frameworks.

3. **Privacy + Terms pages.** Both linked from the data-handling section and the FAQ. Real legal copy, not stubs.

4. **AI & Humn marketing widget in production.** Tenant created, widget configured, KB loaded. Without this, the live demo is the wrong agent.

   **KB content (founder to provide).** Suggested structure for the knowledge base — covers most visitor questions:
   - **Product description** — what AI & Humn is, in 2–3 paragraphs, in plain English.
   - **Pricing** — the three tiers, top-up packs, minute-rounding rule, currency switch.
   - **How it works** — the three setup steps, technical lift required (one `<script>` tag), supported sites.
   - **Languages** — Tier-by-tier rules per the language ladder above.
   - **Compliance** — HIPAA, RBI lines exactly as in the data-handling section. What they mean for healthcare and fintech buyers.
   - **Founder / company** — Togglebytes background, twelve years in software, why this product exists.
   - **Integrations** — Calendly, HubSpot, Slack, WhatsApp, etc. (final list TBD when integrations actually ship).
   - **Common objections** — privacy, accuracy when the agent doesn't know, brand-voice fidelity, kill-switch, cancellation.

   Format: a single Markdown doc per category, uploaded through the wizard's KB step. The merge service will assemble the final agent prompt automatically.

### P1 — first 30 days post-launch

5. **GDPR alignment.** Cookie banner, subprocessor list at `/privacy/subprocessors`, data-deletion request flow, EU data residency option for enterprise.

6. **SOC 2 Type 1 process started.** 3–4 month timeline. Vendor engaged (Vanta/Drata).

7. **Top-up purchase flow** in the dashboard. The pricing card promises 30 / 60 / 150-min top-ups; the in-app purchase flow has to actually exist.

### P2 — first 90 days

8. **SOC 2 Type 2** observation window started.

9. **Annual pricing** on `/pricing` (toggled on the pricing page; brief defers to that).

10. **Subprocessor list** publicly maintained.

---

## 8. What ships when

1. **This brief → Claude design tool → layout artifact.** This week.
2. **Translate layout to React in `aiw-voice-app`.** Reuses the `src/components/ui/` primitives. New components: PricingCard, ComparisonTable, FAQAccordion. ~1 day.
3. **Live demo wiring.** Create marketing widget + embed bundle on `/`. ~1 hour for widget setup, ~2 hours for embed.
4. **Currency IP detection.** Backend endpoint or Cloudflare header lookup. ~2 hours.
5. **Privacy + Terms pages.** Real copy, drafted with legal counsel.
6. **HIPAA + RBI compliance work.** Lead time 4–8 weeks if a vendor is engaged this week.
7. **Public launch** — only after items 5 and 6 land. Earliest realistic date: 6–10 weeks from today, gated by compliance.

Pages still to write: `/pricing`, `/how-it-works`, `/privacy`, `/terms`. Suggested order: pricing → how-it-works → privacy + terms.