Light theme pages + mobile app architecture + pricing model #4014
7 changed files+400−206
ModifiedCLAUDE.md+13−4View fileUnifiedSplit
@@ -78,11 +78,20 @@ Before implementing any feature:
7878 - Bookmarklet activation page
7979
8080### Tech Stack:
81- **Website**: Next.js 14, React 18, Tailwind CSS 3.4
82- **Desktop App**: Electron 28+, @nut-tree/nut-js, OpenAI Whisper API
83- **Browser Extension**: Chrome MV3 (existing, maintained as option)
81- **Website**: Next.js 14, React 18, Tailwind CSS 3.4 (LIGHT THEME — white bg, indigo accent)
82- **Desktop App**: Electron 28+, @nut-tree/nut-js, OpenAI Whisper API, Claude API (grammar + rewrite)
83- **Browser Extension**: Chrome MV3 with AI grammar checker + voice-to-text
84- **Mobile Keyboard**: React Native/Expo companion app + native keyboard extensions (Swift/Kotlin)
85- **AI Grammar**: Claude Haiku API (fast grammar) + Claude Sonnet (rewrite/polish)
8486- **Speech-to-Text**: OpenAI Whisper API (primary), Web Speech API (free fallback)
85- **Build/Package**: electron-builder for Win (.exe/.msi) + Mac (.dmg)
87- **Build/Package**: electron-builder for Win + Mac, EAS Build for iOS + Android
88
89### Product Delivery — Five Platforms:
901. **Desktop App** (PRIMARY) — Electron, system tray, global hotkey, types into any app
912. **Chrome Extension** (VIRAL ENGINE) — Grammar check on any website, free tier drives upgrades
923. **iPhone Keyboard** — Custom keyboard extension, corrects as you type, voice button
934. **Android Keyboard** — Same as iPhone, InputMethodService
945. **Website** (48co.nz) — Marketing, live demo, SEO, downloads
8695
8796### Quality Checklist (Run Before Every Commit):
8897- [ ] Does every feature work end-to-end?
ModifiedSTRATEGY.md+28−8View fileUnifiedSplit
@@ -52,14 +52,34 @@ Once users try AI rewrite, raw dictation feels broken. That's the addiction.
5252
5353---
5454
55## Pricing
56
57| Tier | Price | Features |
58|------|-------|----------|
59| Free | $0 | Basic dictation, 60 min/month, Web Speech API |
60| Pro | $12/mo or $99/year | Unlimited, AI rewrite, offline, context-aware |
61| Teams | $24.99/user/mo | Meeting transcription, speaker ID, shared macros |
62| Lifetime | $89 (launch only, 1000 units) | Pro features forever |
55## Pricing (Final)
56
57| Tier | Price | What you get | Target |
58|------|-------|-------------|--------|
59| **Free** | $0 | 10 grammar corrections/day, 60 min voice/mo, Chrome extension | Get users in the door |
60| **Pro** | $12/mo or $99/year | Unlimited grammar, unlimited voice, AI rewrite, context-aware, desktop + Chrome + mobile, offline, 50+ languages | 70% of paying users |
61| **Teams** | $25/user/mo (min 3) | Everything in Pro + meetings + speaker ID + team style guide + admin | Enterprise/agencies |
62| **Lifetime** | $89 one-time | Pro features forever. Limited to 1,000 units. | Launch FOMO |
63
64### Why $12/mo works
65- Grammarly Premium: $30/mo — we're 60% cheaper with more features
66- Wispr Flow: $15/mo — we're cheaper AND we do grammar
67- SuperWhisper: $7/mo — but they don't do grammar at all
68- $12/mo = impulse buy territory, low enough to not cancel
69
70### API cost model (Pro users)
71- Grammar check (Claude Haiku): ~$0.001 per check → ~$0.50/mo per active user
72- Voice transcription (Whisper): ~$0.006/min → ~$1-2/mo per active user
73- AI Rewrite (Claude Sonnet): ~$0.003 per rewrite → ~$0.30/mo per active user
74- **Total API cost per user: ~$2-3/mo** → healthy margin on $12/mo
75
76### Revenue projections
77| Month | Paid users | MRR | Lifetime deals | Total |
78|-------|-----------|-----|----------------|-------|
79| 1 | 600 | $7.2K | 400 × $89 = $35.6K | $42.8K |
80| 3 | 2,500 | $30K | 800 × $89 = $71.2K | $101K |
81| 6 | 5,000 | $60K | 1,000 (sold out) | $60K/mo |
82| 12 | 12,000 | $144K | — | $1.7M ARR |
6383
6484---
6585
Modifiedapp/compare/page.jsx+94−89View fileUnifiedSplit
@@ -1,88 +1,83 @@
11export const metadata = {
2 title: '48co vs Wispr Flow vs SuperWhisper vs WhisperTyping — 2026 Comparison',
3 description: 'Honest comparison of the best voice-to-text apps in 2026. See how 48co compares to Wispr Flow, SuperWhisper, and WhisperTyping on price, features, privacy, and accuracy.',
2 title: '48co vs Grammarly vs Wispr Flow vs SuperWhisper — 2026 Comparison',
3 description: 'Honest comparison of AI grammar and voice-to-text tools in 2026. See how 48co compares on price, features, privacy, and AI quality.',
44 openGraph: {
5 title: 'Best Voice-to-Text Software 2026 — Full Comparison',
6 description: '48co vs Wispr Flow vs SuperWhisper vs WhisperTyping. Privacy, pricing, AI features, offline mode compared.',
5 title: 'Best AI Grammar & Voice-to-Text 2026 — Full Comparison',
6 description: '48co vs Grammarly vs Wispr Flow vs SuperWhisper. Price, features, privacy compared honestly.',
77 },
88}
99
1010export default function ComparePage() {
1111 const features = [
12 { name: 'Price (monthly)', fortyeight: '$12/mo', wispr: '$15/mo', superwhisper: '$7/mo', whispertyping: 'Subscription' },
13 { name: 'Lifetime deal', fortyeight: '$89', wispr: 'No', superwhisper: '$249', whispertyping: 'No' },
14 { name: 'AI Rewrite Mode', fortyeight: true, wispr: 'Basic', superwhisper: 'Basic', whispertyping: false, highlight: true },
15 { name: 'Context-Aware Formatting', fortyeight: true, wispr: false, superwhisper: false, whispertyping: false, highlight: true },
16 { name: 'Offline Mode', fortyeight: true, wispr: false, superwhisper: true, whispertyping: false },
17 { name: 'Privacy (local-first)', fortyeight: true, wispr: false, superwhisper: true, whispertyping: false },
18 { name: 'Windows Support', fortyeight: true, wispr: true, superwhisper: true, whispertyping: true },
19 { name: 'macOS Support', fortyeight: true, wispr: true, superwhisper: true, whispertyping: false },
20 { name: 'Works in ANY App', fortyeight: true, wispr: true, superwhisper: true, whispertyping: true },
21 { name: 'Global Hotkey', fortyeight: true, wispr: true, superwhisper: true, whispertyping: true },
22 { name: 'Whisper API', fortyeight: true, wispr: true, superwhisper: true, whispertyping: true },
23 { name: '50+ Languages', fortyeight: true, wispr: true, superwhisper: true, whispertyping: true },
24 { name: 'Voice Commands', fortyeight: true, wispr: true, superwhisper: 'Limited', whispertyping: false },
25 { name: 'Custom Vocabulary', fortyeight: true, wispr: true, superwhisper: true, whispertyping: false },
26 { name: 'Auto Code Detection', fortyeight: true, wispr: false, superwhisper: false, whispertyping: false, highlight: true },
27 { name: 'Meeting Transcription', fortyeight: 'Coming Q2', wispr: false, superwhisper: false, whispertyping: false },
28 { name: 'Speaker ID', fortyeight: 'Coming Q2', wispr: false, superwhisper: false, whispertyping: false },
29 { name: 'Real-time Streaming', fortyeight: 'Coming Q2', wispr: true, superwhisper: false, whispertyping: false },
30 { name: 'Chrome Extension', fortyeight: true, wispr: false, superwhisper: false, whispertyping: false },
31 { name: 'Open Source', fortyeight: 'Partial', wispr: false, superwhisper: false, whispertyping: false },
12 { name: 'Price (monthly)', co: '$12/mo', gram: '$30/mo', wispr: '$15/mo', sw: '$7/mo' },
13 { name: 'Lifetime deal', co: '$89', gram: 'No', wispr: 'No', sw: '$249' },
14 { name: 'AI Grammar Check', co: true, gram: true, wispr: false, sw: false, highlight: true },
15 { name: 'AI Rewrite / Polish', co: true, gram: 'Limited', wispr: 'Basic', sw: 'Basic' },
16 { name: 'Context-Aware Tone', co: true, gram: false, wispr: false, sw: false, highlight: true },
17 { name: 'Voice-to-Text', co: true, gram: false, wispr: true, sw: true, highlight: true },
18 { name: 'Desktop App (any app)', co: true, gram: false, wispr: true, sw: true },
19 { name: 'Chrome Extension', co: true, gram: true, wispr: false, sw: false },
20 { name: 'iPhone / iPad', co: 'Coming Q2', gram: true, wispr: true, sw: true },
21 { name: 'Android', co: 'Coming Q2', gram: true, wispr: true, sw: false },
22 { name: 'Offline Mode', co: true, gram: false, wispr: false, sw: true },
23 { name: 'Privacy (local-first)', co: true, gram: false, wispr: false, sw: true },
24 { name: 'Windows + Mac', co: true, gram: true, wispr: true, sw: true },
25 { name: '50+ Languages', co: true, gram: true, wispr: true, sw: true },
26 { name: 'Custom Vocabulary', co: true, gram: false, wispr: true, sw: true },
27 { name: 'Developer Mode', co: true, gram: false, wispr: false, sw: false, highlight: true },
28 { name: 'AI Engine', co: 'Claude', gram: 'Proprietary', wispr: 'Mixed', sw: 'Whisper' },
29 { name: 'Meeting Transcription', co: 'Coming Q2', gram: false, wispr: false, sw: false },
3230 ]
3331
3432 function renderCell(val) {
35 if (val === true) return <span className="text-[#00ff88]">Yes</span>
36 if (val === false) return <span className="text-white/20">No</span>
37 return <span className="text-white/50">{val}</span>
33 if (val === true) return <span className="text-green-600 font-medium">Yes</span>
34 if (val === false) return <span className="text-gray-300">No</span>
35 return <span className="text-gray-500">{val}</span>
3836 }
3937
4038 return (
41 <main className="min-h-screen bg-[#0a0a0e] text-white font-mono">
42 <nav className="flex items-center justify-between px-6 py-4 border-b border-white/[0.06]">
43 <a href="/" className="text-sm font-bold tracking-[0.2em]">
44 <span className="text-white/80">48</span><span className="text-[#00f0ff]">co</span>
45 </a>
46 <div className="flex gap-4">
47 <a href="/download" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Download</a>
48 <a href="/pricing" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Pricing</a>
49 <a href="/live" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Try Live</a>
39 <main className="min-h-screen bg-white">
40 <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-xl border-b border-black/[0.04]">
41 <div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
42 <a href="/" className="text-base font-bold tracking-tight">48<span className="text-indigo-600">co</span></a>
43 <div className="hidden sm:flex items-center gap-6">
44 <a href="/pricing" className="text-[13px] text-gray-400 hover:text-gray-700 transition-colors">Pricing</a>
45 <a href="/live" className="text-[13px] text-gray-400 hover:text-gray-700 transition-colors">Try Live</a>
46 <a href="/download" className="text-[13px] px-4 py-1.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500 transition-all">Download</a>
47 </div>
5048 </div>
5149 </nav>
5250
53 <div className="max-w-5xl mx-auto px-4 py-16">
51 <div className="max-w-5xl mx-auto px-4 pt-28 pb-16">
5452 <div className="text-center mb-12">
55 <h1 className="text-3xl font-bold mb-3">
56 <span className="text-[#00f0ff]">48co</span> vs the competition
53 <h1 className="text-4xl font-bold text-gray-900 mb-3">
54 How <span className="text-indigo-600">48co</span> compares
5755 </h1>
58 <p className="text-white/35 text-sm max-w-lg mx-auto">
59 An honest, side-by-side comparison. We highlight where competitors beat us too — because you deserve the truth before choosing.
56 <p className="text-gray-400 text-base max-w-lg mx-auto">
57 An honest comparison. We highlight where competitors beat us too.
6058 </p>
6159 </div>
6260
6361 {/* Comparison Table */}
64 <div className="overflow-x-auto">
65 <table className="w-full text-[11px]">
62 <div className="border border-gray-200 rounded-2xl overflow-hidden overflow-x-auto">
63 <table className="w-full text-[13px]">
6664 <thead>
67 <tr className="border-b border-white/[0.08]">
68 <th className="text-left py-3 px-3 text-white/30 font-normal w-[200px]">Feature</th>
69 <th className="text-center py-3 px-3 text-[#00f0ff] font-bold">48co</th>
70 <th className="text-center py-3 px-3 text-white/40 font-normal">Wispr Flow</th>
71 <th className="text-center py-3 px-3 text-white/40 font-normal">SuperWhisper</th>
72 <th className="text-center py-3 px-3 text-white/40 font-normal">WhisperTyping</th>
65 <tr className="border-b border-gray-100 bg-gray-50">
66 <th className="text-left py-3 px-4 text-gray-400 font-normal w-[180px]">Feature</th>
67 <th className="text-center py-3 px-4 text-indigo-600 font-bold">48co</th>
68 <th className="text-center py-3 px-4 text-gray-400 font-normal">Grammarly</th>
69 <th className="text-center py-3 px-4 text-gray-400 font-normal">Wispr Flow</th>
70 <th className="text-center py-3 px-4 text-gray-400 font-normal">SuperWhisper</th>
7371 </tr>
7472 </thead>
7573 <tbody>
7674 {features.map((f) => (
77 <tr
78 key={f.name}
79 className={`border-b border-white/[0.04] ${f.highlight ? 'bg-[#00f0ff]/[0.03]' : ''}`}
80 >
81 <td className="py-2.5 px-3 text-white/50">{f.name}</td>
82 <td className="py-2.5 px-3 text-center font-bold">{renderCell(f.fortyeight)}</td>
83 <td className="py-2.5 px-3 text-center">{renderCell(f.wispr)}</td>
84 <td className="py-2.5 px-3 text-center">{renderCell(f.superwhisper)}</td>
85 <td className="py-2.5 px-3 text-center">{renderCell(f.whispertyping)}</td>
75 <tr key={f.name} className={`border-b border-gray-50 ${f.highlight ? 'bg-indigo-50/40' : ''}`}>
76 <td className="py-2.5 px-4 text-gray-500">{f.name}</td>
77 <td className="py-2.5 px-4 text-center font-medium">{renderCell(f.co)}</td>
78 <td className="py-2.5 px-4 text-center">{renderCell(f.gram)}</td>
79 <td className="py-2.5 px-4 text-center">{renderCell(f.wispr)}</td>
80 <td className="py-2.5 px-4 text-center">{renderCell(f.sw)}</td>
8681 </tr>
8782 ))}
8883 </tbody>
@@ -91,41 +86,46 @@ export default function ComparePage() {
9186
9287 {/* Honest Takes */}
9388 <div className="mt-16 grid md:grid-cols-2 gap-6">
94 <div className="rounded-2xl p-6 bg-white/[0.02] border border-white/[0.06]">
95 <h2 className="text-sm font-bold text-white/80 mb-3">Where Wispr Flow beats us (for now)</h2>
96 <ul className="space-y-2 text-[11px] text-white/40">
97 <li>+ iOS/Android mobile app (we're desktop-only for now)</li>
98 <li>+ 200+ app integrations (we do 30+)</li>
99 <li>+ Real-time streaming already shipped (ours is coming Q2)</li>
100 <li>+ $81M in VC funding = faster dev speed</li>
89 <div className="rounded-2xl p-6 border border-gray-200">
90 <h2 className="text-[15px] font-bold text-gray-800 mb-3">Where Grammarly beats us (for now)</h2>
91 <ul className="space-y-2 text-[13px] text-gray-400">
92 <li>+ Mobile keyboard already shipped (ours is coming Q2)</li>
93 <li>+ Microsoft Office plugin (Word, Outlook)</li>
94 <li>+ 15+ years of user data training their models</li>
95 <li>+ Brand recognition — everyone knows Grammarly</li>
10196 </ul>
102 <p className="mt-3 text-[10px] text-white/25">But: They send all audio to the cloud. $15/mo. No lifetime deal.</p>
97 <p className="mt-3 text-[11px] text-gray-300">But: $30/mo, no voice-to-text, no desktop typing, rules-based not AI-native.</p>
10398 </div>
10499
105 <div className="rounded-2xl p-6 bg-white/[0.02] border border-white/[0.06]">
106 <h2 className="text-sm font-bold text-white/80 mb-3">Where SuperWhisper beats us (for now)</h2>
107 <ul className="space-y-2 text-[11px] text-white/40">
108 <li>+ Mature offline model (been local-first from day 1)</li>
109 <li>+ iOS companion app</li>
110 <li>+ Slightly lower monthly price ($7/mo annual)</li>
100 <div className="rounded-2xl p-6 border border-gray-200">
101 <h2 className="text-[15px] font-bold text-gray-800 mb-3">Where Wispr Flow beats us (for now)</h2>
102 <ul className="space-y-2 text-[13px] text-gray-400">
103 <li>+ iOS/Android app already shipped</li>
104 <li>+ 200+ app integrations</li>
105 <li>+ Real-time streaming transcription</li>
106 <li>+ $81M in VC funding = fast development</li>
111107 </ul>
112 <p className="mt-3 text-[10px] text-white/25">But: No AI rewrite, no context-aware formatting, no auto code detection.</p>
108 <p className="mt-3 text-[11px] text-gray-300">But: No grammar checking, cloud-only (no privacy), $15/mo, no lifetime deal.</p>
113109 </div>
114110
115 <div className="rounded-2xl p-6 bg-[#00f0ff]/[0.03] border border-[#00f0ff]/20 md:col-span-2">
116 <h2 className="text-sm font-bold text-[#00f0ff] mb-3">Where 48co wins</h2>
117 <div className="grid md:grid-cols-3 gap-4">
111 <div className="rounded-2xl p-6 border-2 border-indigo-200 bg-indigo-50/30 md:col-span-2">
112 <h2 className="text-[15px] font-bold text-indigo-700 mb-4">Where 48co wins</h2>
113 <div className="grid md:grid-cols-4 gap-4">
114 <div>
115 <h3 className="text-[13px] text-gray-700 font-semibold mb-1">Grammar + Voice</h3>
116 <p className="text-[12px] text-gray-400">Only tool that does AI grammar AND voice-to-text. Grammarly can't dictate. Wispr can't grammar check.</p>
117 </div>
118118 <div>
119 <h3 className="text-[11px] text-white/60 font-bold mb-1">AI Rewrite Mode</h3>
120 <p className="text-[10px] text-white/35">You ramble, it writes professionally. Auto-adjusts tone for email, Slack, code. Nobody else does this.</p>
119 <h3 className="text-[13px] text-gray-700 font-semibold mb-1">Context-Aware</h3>
120 <p className="text-[12px] text-gray-400">Auto-detects which app you're in. Professional for email, casual for Slack, technical for code.</p>
121121 </div>
122122 <div>
123 <h3 className="text-[11px] text-white/60 font-bold mb-1">Context-Aware</h3>
124 <p className="text-[10px] text-white/35">Detects which app you're in and formats accordingly. Zero configuration needed.</p>
123 <h3 className="text-[13px] text-gray-700 font-semibold mb-1">$89 Lifetime</h3>
124 <p className="text-[12px] text-gray-400">Pay once, use forever. Grammarly: $360/year. Wispr: $180/year. We: $89 total.</p>
125125 </div>
126126 <div>
127 <h3 className="text-[11px] text-white/60 font-bold mb-1">$89 Lifetime</h3>
128 <p className="text-[10px] text-white/35">Pay once, use forever. Wispr charges $180/year. SuperWhisper's lifetime is $249. Ours is $89.</p>
127 <h3 className="text-[13px] text-gray-700 font-semibold mb-1">Claude AI</h3>
128 <p className="text-[12px] text-gray-400">Powered by the latest Claude model. Smarter corrections, better tone detection, more natural rewrites.</p>
129129 </div>
130130 </div>
131131 </div>
@@ -133,18 +133,23 @@ export default function ComparePage() {
133133
134134 {/* CTA */}
135135 <div className="mt-16 text-center">
136 <a
137 href="/download"
138 className="inline-block px-8 py-3 rounded-2xl bg-[#00f0ff]/10 border border-[#00f0ff]/30 text-[#00f0ff] text-sm tracking-wider hover:bg-[#00f0ff]/20 transition-all"
139 >
136 <a href="/download" className="inline-block px-8 py-3 rounded-xl bg-indigo-600 text-white text-[15px] font-medium hover:bg-indigo-500 transition-all shadow-sm">
140137 Download 48co Free
141138 </a>
142 <p className="text-[10px] text-white/20 mt-3">Mac + Windows. Free tier available. No credit card needed.</p>
139 <p className="text-[12px] text-gray-300 mt-3">Mac + Windows + Chrome. Free tier available. No credit card.</p>
143140 </div>
144141 </div>
145142
146 <footer className="border-t border-white/[0.06] py-6 text-center">
147 <p className="text-[10px] text-white/15 tracking-wider">48co · Built in NZ · Privacy-first voice-to-text</p>
143 <footer className="border-t border-black/[0.06] py-8">
144 <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
145 <span className="text-[14px] font-bold text-gray-400">48<span className="text-indigo-500">co</span></span>
146 <div className="flex gap-6 text-[12px] text-gray-400">
147 <a href="/download" className="hover:text-gray-700 transition-colors">Download</a>
148 <a href="/pricing" className="hover:text-gray-700 transition-colors">Pricing</a>
149 <a href="/live" className="hover:text-gray-700 transition-colors">Try Live</a>
150 </div>
151 <p className="text-[11px] text-gray-300">Built in New Zealand</p>
152 </div>
148153 </footer>
149154 </main>
150155 )
Modifiedapp/pricing/page.jsx+131−105View fileUnifiedSplit
@@ -1,9 +1,9 @@
11export const metadata = {
2 title: '48co Pricing — Voice-to-Text Plans | Free, Pro & Teams',
3 description: 'Choose your 48co plan. Free basic dictation, Pro with AI rewrite and offline mode for $12/mo, or Teams with meeting transcription. Lifetime deal available.',
2 title: '48co Pricing — AI Grammar & Voice Plans | Free, Pro & Teams',
3 description: 'AI grammar correction + voice-to-text on every device. Free to start, Pro at $12/mo with unlimited AI corrections, or $89 lifetime deal.',
44 openGraph: {
5 title: '48co Pricing — AI Voice-to-Text That Works Everywhere',
6 description: 'Free tier, $12/mo Pro with AI rewrite, $89 lifetime deal. Cheaper than Wispr Flow, more features than SuperWhisper.',
5 title: '48co Pricing — AI Grammar That Works Everywhere',
6 description: 'Free grammar checks, $12/mo Pro with unlimited AI, $89 lifetime. Cheaper than Grammarly Premium.',
77 },
88}
99
@@ -15,13 +15,13 @@ export default function PricingPage() {
1515 period: 'forever',
1616 highlight: false,
1717 features: [
18 'Basic voice dictation',
19 '60 minutes per month',
20 'Web Speech API (Chrome/Edge)',
21 'Works in any app',
22 'Voice punctuation commands',
18 '10 AI grammar corrections per day',
19 'Basic voice dictation (60 min/mo)',
20 'Chrome extension',
21 'Works on any website',
22 'Spelling + punctuation fixes',
2323 ],
24 cta: 'Download Free',
24 cta: 'Get Started Free',
2525 ctaHref: '/download',
2626 },
2727 {
@@ -31,17 +31,19 @@ export default function PricingPage() {
3131 highlight: true,
3232 badge: 'MOST POPULAR',
3333 features: [
34 'Unlimited dictation',
35 'Whisper API (99%+ accuracy)',
36 'AI Rewrite Mode (Claude)',
37 'Context-aware formatting',
38 'Offline mode (whisper.cpp)',
34 'Unlimited AI grammar corrections',
35 'Unlimited voice-to-text',
36 'AI Rewrite Mode (tone + polish)',
37 'Context-aware (email, Slack, code)',
38 'Desktop app (Mac + Windows)',
39 'Chrome extension (all websites)',
40 'iPhone + Android keyboard (coming)',
41 'Offline mode (privacy-first)',
3942 '50+ languages',
40 'Custom vocabulary',
41 'Voice macros & templates',
43 'Custom vocabulary + macros',
4244 'Priority support',
4345 ],
44 cta: 'Start Free Trial',
46 cta: 'Start 7-Day Free Trial',
4547 ctaHref: '/download',
4648 },
4749 {
@@ -53,11 +55,11 @@ export default function PricingPage() {
5355 'Everything in Pro',
5456 'Meeting transcription',
5557 'Speaker identification',
56 'Shared team macros',
57 'Admin dashboard',
58 'Usage analytics',
59 'Priority support',
60 'Custom onboarding',
58 'Team style guide enforcement',
59 'Shared vocabulary + macros',
60 'Admin dashboard + analytics',
61 'Priority support + onboarding',
62 'Invoice billing',
6163 ],
6264 cta: 'Contact Us',
6365 ctaHref: 'mailto:team@48co.nz',
@@ -65,37 +67,34 @@ export default function PricingPage() {
6567 ]
6668
6769 return (
68 <main className="min-h-screen bg-[#0a0a0e] text-white font-mono">
70 <main className="min-h-screen bg-white">
6971 {/* Nav */}
70 <nav className="flex items-center justify-between px-6 py-4 border-b border-white/[0.06]">
71 <a href="/" className="text-sm font-bold tracking-[0.2em]">
72 <span className="text-white/80">48</span><span className="text-[#00f0ff]">co</span>
73 </a>
74 <div className="flex gap-4">
75 <a href="/download" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Download</a>
76 <a href="/compare" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Compare</a>
77 <a href="/live" className="text-[11px] text-white/30 hover:text-white/60 transition-colors">Try Live</a>
72 <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-xl border-b border-black/[0.04]">
73 <div className="max-w-6xl mx-auto flex items-center justify-between px-6 py-3">
74 <a href="/" className="text-base font-bold tracking-tight">48<span className="text-indigo-600">co</span></a>
75 <div className="hidden sm:flex items-center gap-6">
76 <a href="/compare" className="text-[13px] text-gray-400 hover:text-gray-700 transition-colors">Compare</a>
77 <a href="/live" className="text-[13px] text-gray-400 hover:text-gray-700 transition-colors">Try Live</a>
78 <a href="/download" className="text-[13px] px-4 py-1.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500 transition-all">Download</a>
79 </div>
7880 </div>
7981 </nav>
8082
81 <div className="max-w-5xl mx-auto px-4 py-16">
83 <div className="max-w-5xl mx-auto px-4 pt-28 pb-16">
8284 <div className="text-center mb-16">
83 <h1 className="text-3xl font-bold mb-3">
84 Simple, honest pricing
85 </h1>
86 <p className="text-white/35 text-sm max-w-md mx-auto">
87 No hidden fees. No per-minute charges on Pro. Cancel anytime.
85 <h1 className="text-4xl font-bold text-gray-900 mb-3">Simple, honest pricing</h1>
86 <p className="text-gray-400 text-base max-w-md mx-auto">
87 Free to start. No credit card needed. Upgrade when you're ready.
8888 </p>
8989 </div>
9090
9191 {/* Lifetime Deal Banner */}
92 <div className="mb-12 p-4 rounded-2xl bg-[#00ff88]/[0.05] border border-[#00ff88]/20 text-center">
93 <p className="text-[#00ff88] text-sm font-bold mb-1">Launch Special: Lifetime Deal</p>
94 <p className="text-white/50 text-xs">
95 Get Pro features forever for <span className="text-[#00ff88] font-bold">$89 one-time</span>.
96 Limited to first 1,000 users. No subscription, no renewals, ever.
92 <div className="mb-12 p-5 rounded-2xl bg-indigo-50 border border-indigo-100 text-center">
93 <p className="text-indigo-700 text-[15px] font-semibold mb-1">Launch Special: Lifetime Deal — $89</p>
94 <p className="text-gray-500 text-[13px]">
95 Get Pro features forever. One payment, no subscription, no renewals. Limited to first 1,000 users.
9796 </p>
98 <a href="/download" className="inline-block mt-3 px-6 py-2 rounded-xl bg-[#00ff88]/10 border border-[#00ff88]/30 text-[#00ff88] text-[11px] tracking-wider hover:bg-[#00ff88]/20 transition-all">
97 <a href="/download" className="inline-block mt-3 px-6 py-2 rounded-lg bg-indigo-600 text-white text-[13px] font-medium hover:bg-indigo-500 transition-all">
9998 Claim Lifetime Deal
10099 </a>
101100 </div>
@@ -103,90 +102,117 @@ export default function PricingPage() {
103102 {/* Plans */}
104103 <div className="grid md:grid-cols-3 gap-6">
105104 {plans.map((plan) => (
106 <div
107 key={plan.name}
108 className={`rounded-2xl p-6 flex flex-col ${
109 plan.highlight
110 ? 'bg-[#00f0ff]/[0.05] border-2 border-[#00f0ff]/30 relative'
111 : 'bg-white/[0.02] border border-white/[0.06]'
112 }`}
113 >
105 <div key={plan.name} className={`rounded-2xl p-6 flex flex-col border ${
106 plan.highlight ? 'border-indigo-200 bg-indigo-50/30 shadow-lg shadow-indigo-500/5 relative' : 'border-gray-200'
107 }`}>
114108 {plan.badge && (
115 <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#00f0ff] text-[#0a0a0e] text-[9px] font-bold tracking-wider px-3 py-1 rounded-full">
109 <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[10px] font-bold tracking-wider px-3 py-1 rounded-full">
116110 {plan.badge}
117111 </span>
118112 )}
119
120 <h2 className="text-lg font-bold text-white/90 mb-1">{plan.name}</h2>
121 <div className="mb-4">
122 <span className="text-3xl font-bold text-white">{plan.price}</span>
123 <span className="text-[11px] text-white/30 ml-1">{plan.period}</span>
113 <h2 className="text-lg font-bold text-gray-800 mb-1">{plan.name}</h2>
114 <div className="mb-5">
115 <span className="text-4xl font-bold text-gray-900">{plan.price}</span>
116 <span className="text-[13px] text-gray-400 ml-1">{plan.period}</span>
124117 </div>
125
126 <ul className="flex-1 space-y-2 mb-6">
118 <ul className="flex-1 space-y-2.5 mb-6">
127119 {plan.features.map((f, i) => (
128 <li key={i} className="text-[11px] text-white/50 flex items-start gap-2">
129 <span className="text-[#00f0ff] mt-0.5 flex-shrink-0">+</span>
120 <li key={i} className="text-[13px] text-gray-500 flex items-start gap-2">
121 <svg className="w-4 h-4 text-indigo-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2"><path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round"/></svg>
130122 {f}
131123 </li>
132124 ))}
133125 </ul>
134
135 <a
136 href={plan.ctaHref}
137 className={`block text-center py-2.5 rounded-xl text-[11px] tracking-wider transition-all ${
138 plan.highlight
139 ? 'bg-[#00f0ff]/20 border border-[#00f0ff]/40 text-[#00f0ff] hover:bg-[#00f0ff]/30'
140 : 'bg-white/[0.04] border border-white/[0.08] text-white/50 hover:text-white/80'
141 }`}
142 >
126 <a href={plan.ctaHref} className={`block text-center py-2.5 rounded-xl text-[13px] font-medium transition-all ${
127 plan.highlight ? 'bg-indigo-600 text-white hover:bg-indigo-500' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
128 }`}>
143129 {plan.cta}
144130 </a>
145131 </div>
146132 ))}
147133 </div>
148134
135 {/* vs Grammarly */}
136 <div className="mt-20 max-w-3xl mx-auto">
137 <div className="text-center mb-10">
138 <h2 className="text-2xl font-bold text-gray-900 mb-2">48co Pro vs Grammarly Premium</h2>
139 <p className="text-[14px] text-gray-400">Same job, better AI, lower price.</p>
140 </div>
141
142 <div className="border border-gray-200 rounded-2xl overflow-hidden">
143 <table className="w-full text-[13px]">
144 <thead>
145 <tr className="border-b border-gray-100 bg-gray-50">
146 <th className="text-left py-3 px-5 text-gray-400 font-normal">Feature</th>
147 <th className="text-center py-3 px-5 text-indigo-600 font-semibold">48co Pro</th>
148 <th className="text-center py-3 px-5 text-gray-400 font-normal">Grammarly Premium</th>
149 </tr>
150 </thead>
151 <tbody>
152 {[
153 { f: 'Monthly price', us: '$12/mo', them: '$30/mo' },
154 { f: 'Annual price', us: '$99/year', them: '$144/year' },
155 { f: 'Lifetime option', us: '$89', them: 'No' },
156 { f: 'AI grammar correction', us: true, them: true },
157 { f: 'Tone adjustment', us: true, them: true },
158 { f: 'Voice-to-text', us: true, them: false },
159 { f: 'AI Rewrite Mode', us: true, them: 'Limited' },
160 { f: 'Context-aware (app detection)', us: true, them: false },
161 { f: 'Desktop app (types into any app)', us: true, them: false },
162 { f: 'Offline mode', us: true, them: false },
163 { f: 'AI engine', us: 'Claude (latest)', them: 'Proprietary' },
164 { f: 'Developer mode (code fences)', us: true, them: false },
165 ].map((row) => (
166 <tr key={row.f} className="border-b border-gray-50">
167 <td className="py-2.5 px-5 text-gray-500">{row.f}</td>
168 <td className="py-2.5 px-5 text-center font-medium">
169 {row.us === true ? <span className="text-green-600">Yes</span> :
170 row.us === false ? <span className="text-gray-300">No</span> :
171 <span className="text-gray-700">{row.us}</span>}
172 </td>
173 <td className="py-2.5 px-5 text-center">
174 {row.them === true ? <span className="text-green-600">Yes</span> :
175 row.them === false ? <span className="text-gray-300">No</span> :
176 <span className="text-gray-400">{row.them}</span>}
177 </td>
178 </tr>
179 ))}
180 </tbody>
181 </table>
182 </div>
183 </div>
184
149185 {/* FAQ */}
150186 <div className="mt-20 max-w-2xl mx-auto">
151 <h2 className="text-lg font-bold text-white/80 mb-8 text-center">Frequently Asked Questions</h2>
152
187 <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">Frequently Asked Questions</h2>
153188 <div className="space-y-6">
154 <div>
155 <h3 className="text-sm text-white/60 font-bold mb-1">Do I need an API key?</h3>
156 <p className="text-[11px] text-white/35 leading-relaxed">
157 The Free tier uses Web Speech API (no key needed, Chrome/Edge only). Pro uses OpenAI Whisper API for higher accuracy — you'll need an OpenAI key (~$0.006/min). AI Rewrite uses Claude API (~$0.003/rewrite).
158 </p>
159 </div>
160 <div>
161 <h3 className="text-sm text-white/60 font-bold mb-1">How is this different from Wispr Flow?</h3>
162 <p className="text-[11px] text-white/35 leading-relaxed">
163 Wispr Flow sends all audio to the cloud. 48co offers fully offline mode — your voice never leaves your computer. We also cost $3/mo less and offer a $89 lifetime deal that Wispr never will.
164 </p>
165 </div>
166 <div>
167 <h3 className="text-sm text-white/60 font-bold mb-1">What about SuperWhisper?</h3>
168 <p className="text-[11px] text-white/35 leading-relaxed">
169 SuperWhisper is excellent but started Mac-only. 48co works on both Mac and Windows from day one, with AI rewrite and context-aware formatting that SuperWhisper doesn't offer.
170 </p>
171 </div>
172 <div>
173 <h3 className="text-sm text-white/60 font-bold mb-1">Can I cancel anytime?</h3>
174 <p className="text-[11px] text-white/35 leading-relaxed">
175 Yes. No contracts, no penalties. Or grab the lifetime deal and never think about it again.
176 </p>
177 </div>
178 <div>
179 <h3 className="text-sm text-white/60 font-bold mb-1">What's AI Rewrite Mode?</h3>
180 <p className="text-[11px] text-white/35 leading-relaxed">
181 You speak rough thoughts, and Claude AI polishes them before typing. It automatically adjusts tone based on which app you're in — professional for email, casual for Slack, technical for code editors. No other dictation tool does this.
182 </p>
183 </div>
189 {[
190 { q: 'How does the free tier work?', a: 'You get 10 AI grammar corrections per day in the Chrome extension, plus 60 minutes of voice dictation per month. No credit card required. The free tier never expires.' },
191 { q: 'What does Pro include that Free doesn\'t?', a: 'Unlimited corrections, unlimited voice, AI Rewrite Mode (polishes your tone), context-aware formatting, desktop app, offline mode, and the upcoming mobile keyboards.' },
192 { q: 'How is this better than Grammarly?', a: '48co uses Claude AI (the latest model) instead of rules-based checking. It also includes voice-to-text, works as a desktop app that types into ANY application (not just browsers), costs $12/mo vs $30/mo, and offers a $89 lifetime deal.' },
193 { q: 'Do I need an API key?', a: 'The free tier works out of the box. Pro uses Claude API for grammar and Whisper API for voice — you bring your own keys (costs ~$0.003 per correction). We\'re adding managed API access so you won\'t need keys soon.' },
194 { q: 'Will it work on my phone?', a: 'iPhone and Android keyboard apps are coming soon. They\'ll replace your default keyboard and correct everything you type — texts, emails, notes, everything.' },
195 { q: 'Can I cancel anytime?', a: 'Yes, instantly. Or grab the $89 lifetime deal and never think about it again.' },
196 ].map((faq) => (
197 <div key={faq.q}>
198 <h3 className="text-[14px] text-gray-800 font-semibold mb-1">{faq.q}</h3>
199 <p className="text-[13px] text-gray-400 leading-relaxed">{faq.a}</p>
200 </div>
201 ))}
184202 </div>
185203 </div>
186204 </div>
187205
188 <footer className="border-t border-white/[0.06] py-6 text-center">
189 <p className="text-[10px] text-white/15 tracking-wider">48co · Built in NZ · Privacy-first voice-to-text</p>
206 <footer className="border-t border-black/[0.06] py-8">
207 <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
208 <span className="text-[14px] font-bold text-gray-400">48<span className="text-indigo-500">co</span></span>
209 <div className="flex gap-6 text-[12px] text-gray-400">
210 <a href="/download" className="hover:text-gray-700 transition-colors">Download</a>
211 <a href="/compare" className="hover:text-gray-700 transition-colors">Compare</a>
212 <a href="/live" className="hover:text-gray-700 transition-colors">Try Live</a>
213 </div>
214 <p className="text-[11px] text-gray-300">Built in New Zealand</p>
215 </div>
190216 </footer>
191217 </main>
192218 )
Addedmobile/README.md+69−0View fileUnifiedSplit
@@ -0,0 +1,69 @@
1# 48co Mobile Keyboard
2
3AI grammar correction keyboard for iOS and Android. Corrects everything you type — texts, emails, notes, social media — before you hit send.
4
5## Architecture
6
7### How Custom Keyboards Work
8
9**iOS:** Custom keyboard extension (App Extension). Ships inside the main app. User enables it in Settings → Keyboards → Add New Keyboard → 48co.
10
11**Android:** Input Method Editor (IME). Ships as part of the main app. User enables it in Settings → Languages & Input → Manage Keyboards → 48co.
12
13### Tech Stack
14
15- **React Native** (Expo) for the companion app (settings, onboarding, account)
16- **Native keyboard extensions** for the actual keyboard (Swift/Kotlin)
17 - iOS: Custom Keyboard Extension (UIInputViewController)
18 - Android: InputMethodService
19- **Claude Haiku API** for grammar checking (fast, cheap — ~$0.001/check)
20- **Whisper API** for voice-to-text from the keyboard mic button
21
22### Why Native Keyboard Extensions?
23
24React Native cannot render a custom keyboard directly — iOS and Android require native code for keyboard extensions. The architecture is:
25
261. **Companion App** (React Native/Expo) — Settings, API key management, account, onboarding
272. **Keyboard Extension** (Swift for iOS, Kotlin for Android) — The actual keyboard UI
283. **Shared Logic** — Grammar API calls, settings sync via App Groups (iOS) / SharedPreferences (Android)
29
30### Features
31
32- Standard QWERTY keyboard layout
33- Real-time grammar underlines (red squiggly)
34- Tap correction to apply fix
35- Autocorrect bar with AI suggestions
36- Voice button for dictation (Whisper API)
37- Works in every app: Messages, WhatsApp, Gmail, Slack, Notes, etc.
38- Dark + light mode (matches system)
39
40### Build & Deploy
41
42```bash
43# Companion app (Expo)
44npm install
45npm run ios # dev
46npm run android # dev
47npm run build:ios # production (via EAS Build)
48npm run build:android
49
50# Keyboard extensions are built as part of the native build
51# iOS: Xcode project in ios/
52# Android: Gradle project in android/
53```
54
55### Development Roadmap
56
571. **Phase 1:** Companion app with settings + onboarding
582. **Phase 2:** iOS keyboard extension (Swift)
593. **Phase 3:** Android keyboard extension (Kotlin)
604. **Phase 4:** Voice-to-text from keyboard mic button
615. **Phase 5:** App Store + Play Store submission
62
63### App Store Notes
64
65- iOS keyboard extensions require "Full Access" permission for network (API calls)
66- User must be informed that keystrokes are sent to Claude API for grammar checking
67- Privacy policy must clearly state data handling
68- Apple Review: ~1 week, keyboard extensions get extra scrutiny
69- Google Play: ~2-3 days review
Addedmobile/app.json+38−0View fileUnifiedSplit
@@ -0,0 +1,38 @@
1{
2 "expo": {
3 "name": "48co Grammar",
4 "slug": "48co-grammar",
5 "version": "1.0.0",
6 "orientation": "portrait",
7 "icon": "./assets/icon.png",
8 "splash": {
9 "image": "./assets/splash.png",
10 "resizeMode": "contain",
11 "backgroundColor": "#ffffff"
12 },
13 "ios": {
14 "bundleIdentifier": "nz.co.48co.grammar",
15 "supportsTablet": true,
16 "infoPlist": {
17 "NSMicrophoneUsageDescription": "48co needs microphone access for voice-to-text dictation.",
18 "NSSpeechRecognitionUsageDescription": "48co uses speech recognition for voice-to-text."
19 }
20 },
21 "android": {
22 "package": "nz.co.fortyeightco.grammar",
23 "adaptiveIcon": {
24 "foregroundImage": "./assets/adaptive-icon.png",
25 "backgroundColor": "#ffffff"
26 },
27 "permissions": [
28 "RECORD_AUDIO",
29 "INTERNET"
30 ]
31 },
32 "extra": {
33 "eas": {
34 "projectId": "48co-grammar"
35 }
36 }
37 }
38}
Addedmobile/package.json+27−0View fileUnifiedSplit
@@ -0,0 +1,27 @@
1{
2 "name": "48co-keyboard",
3 "version": "1.0.0",
4 "description": "48co AI Grammar Keyboard — iOS + Android custom keyboard with AI grammar correction and voice-to-text.",
5 "main": "index.js",
6 "scripts": {
7 "start": "expo start",
8 "android": "expo run:android",
9 "ios": "expo run:ios",
10 "build:ios": "eas build --platform ios",
11 "build:android": "eas build --platform android",
12 "build:all": "eas build --platform all"
13 },
14 "dependencies": {
15 "expo": "~52.0.0",
16 "react": "18.3.1",
17 "react-native": "0.76.0",
18 "@react-native-voice/voice": "^3.2.4",
19 "expo-clipboard": "~7.0.0",
20 "expo-haptics": "~14.0.0",
21 "@react-native-async-storage/async-storage": "^2.1.0"
22 },
23 "devDependencies": {
24 "@types/react": "~18.3.0",
25 "typescript": "~5.3.3"
26 }
27}
028
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts