content-grade 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CONTRIBUTING.md +61 -11
  2. package/README.md +14 -0
  3. package/bin/content-grade.js +124 -46
  4. package/bin/telemetry.js +4 -4
  5. package/dist/landing.html +1477 -0
  6. package/dist/privacy.html +189 -0
  7. package/dist/terms.html +185 -0
  8. package/dist-server/server/db.js +6 -0
  9. package/dist-server/server/index.js +2 -0
  10. package/dist-server/server/routes/analytics.js +3 -3
  11. package/dist-server/server/routes/demos.js +10 -8
  12. package/dist-server/server/routes/stripe.js +82 -3
  13. package/package.json +1 -1
package/dist/landing.html ADDED
@@ -0,0 +1,1477 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
7
+ <!-- SEO: primary targets: 'AI content grader', 'headline analyzer', 'content quality checker' -->
8
+ <title>ContentGrade — AI Content Grader Suite | Headline Analyzer, Ad Scorer & More</title>
9
+ <meta name="description" content="Six AI-powered content analysis tools — headline grader, landing page roaster, ad scorer, thread grader, email forge, and overall content quality checker. Runs on Claude CLI locally. No API key required. Zero data leaves your machine." />
10
+ <meta name="robots" content="index, follow" />
11
+ <link rel="canonical" href="https://content-grade.onrender.com" />
12
+
13
+ <!-- Open Graph -->
14
+ <meta property="og:type" content="website" />
15
+ <meta property="og:url" content="https://content-grade.onrender.com" />
16
+ <meta property="og:title" content="ContentGrade — AI Content Grader Suite" />
17
+ <meta property="og:description" content="Six AI-powered tools to analyze and improve your content. Runs on Claude CLI — no API key, no cloud, your data stays local." />
18
+ <meta property="og:image" content="https://content-grade.onrender.com/og-image.png" />
19
+
20
+ <!-- Twitter Card -->
21
+ <meta name="twitter:card" content="summary_large_image" />
22
+ <meta name="twitter:title" content="ContentGrade — AI Content Grader Suite" />
23
+ <meta name="twitter:description" content="Six AI-powered tools to grade, roast, and improve your content. Runs on Claude CLI — no API key, no cloud." />
24
+ <meta name="twitter:image" content="https://content-grade.onrender.com/og-image.png" />
25
+
26
+ <!-- JSON-LD Structured Data -->
27
+ <script type="application/ld+json">
28
+ {
29
+ "@context": "https://schema.org",
30
+ "@type": "SoftwareApplication",
31
+ "name": "ContentGrade Suite",
32
+ "applicationCategory": "BusinessApplication",
33
+ "description": "Six AI-powered content analysis tools: HeadlineGrader, PageRoast, AdScorer, ThreadGrader, EmailForge, and ContentGrade. Runs on Claude CLI locally — no API key required.",
34
+ "url": "https://github.com/Content-Grade/Content-Grade",
35
+ "offers": {
36
+ "@type": "Offer",
37
+ "price": "0",
38
+ "priceCurrency": "USD",
39
+ "description": "Free: 3 analyses/day. Pro: $9/mo, 20/day. Business: $29/mo, 100/day. Team: $79/mo, 500/day."
40
+ },
41
+ "featureList": [
42
+ "Headline analyzer with framework-based scoring",
43
+ "Landing page conversion audit",
44
+ "Ad copy quality checker",
45
+ "Twitter thread grader",
46
+ "Email subject line analyzer",
47
+ "Overall content quality checker",
48
+ "Runs on Claude CLI — no API key required",
49
+ "Zero data leaves your machine"
50
+ ]
51
+ }
52
+ </script>
53
+
54
+ <style>
55
+ /* === RESET & BASE === */
56
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
57
+
58
+ :root {
59
+ --bg: #0a0a0f;
60
+ --bg2: #0f0f1a;
61
+ --bg3: #141424;
62
+ --border: rgba(255,255,255,0.08);
63
+ --text: #e0e0e0;
64
+ --muted: #888;
65
+ --accent: #7c4dff;
66
+ --accent-light: #9e7aff;
67
+ --accent-dim: rgba(124,77,255,0.15);
68
+ --green: #4ade80;
69
+ --yellow: #facc15;
70
+ --red: #f87171;
71
+ --blue: #60a5fa;
72
+ --orange: #fb923c;
73
+ --pink: #f472b6;
74
+ }
75
+
76
+ html { scroll-behavior: smooth; }
77
+
78
+ body {
79
+ background: var(--bg);
80
+ color: var(--text);
81
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
82
+ font-size: 16px;
83
+ line-height: 1.6;
84
+ -webkit-font-smoothing: antialiased;
85
+ }
86
+
87
+ .container {
88
+ max-width: 1100px;
89
+ margin: 0 auto;
90
+ padding: 0 24px;
91
+ }
92
+
93
+ a { color: inherit; text-decoration: none; }
94
+ a:hover { color: var(--accent-light); }
95
+
96
+ /* === NAV === */
97
+ .nav {
98
+ position: sticky;
99
+ top: 0;
100
+ z-index: 100;
101
+ background: rgba(10,10,15,0.92);
102
+ backdrop-filter: blur(12px);
103
+ border-bottom: 1px solid var(--border);
104
+ }
105
+
106
+ .nav-inner {
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: space-between;
110
+ height: 60px;
111
+ }
112
+
113
+ .nav-logo {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 8px;
117
+ font-weight: 700;
118
+ font-size: 18px;
119
+ letter-spacing: -0.3px;
120
+ }
121
+
122
+ .logo-icon {
123
+ width: 28px;
124
+ height: 28px;
125
+ background: var(--accent);
126
+ border-radius: 6px;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ font-size: 14px;
131
+ }
132
+
133
+ .nav-links {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 28px;
137
+ font-size: 14px;
138
+ color: var(--muted);
139
+ }
140
+
141
+ .nav-links a:hover { color: var(--text); }
142
+
143
+ .nav-gh {
144
+ background: var(--bg3);
145
+ border: 1px solid var(--border);
146
+ padding: 6px 14px;
147
+ border-radius: 6px;
148
+ font-size: 13px;
149
+ color: var(--text) !important;
150
+ display: flex;
151
+ align-items: center;
152
+ gap: 6px;
153
+ }
154
+
155
+ .nav-gh:hover { border-color: var(--accent); }
156
+
157
+ /* === HERO === */
158
+ .hero {
159
+ padding: 96px 0 72px;
160
+ text-align: center;
161
+ }
162
+
163
+ .hero-badge {
164
+ display: inline-flex;
165
+ align-items: center;
166
+ gap: 8px;
167
+ background: var(--accent-dim);
168
+ border: 1px solid rgba(124,77,255,0.3);
169
+ border-radius: 100px;
170
+ padding: 6px 16px;
171
+ font-size: 13px;
172
+ color: var(--accent-light);
173
+ margin-bottom: 32px;
174
+ }
175
+
176
+ .hero-badge-dot {
177
+ width: 6px;
178
+ height: 6px;
179
+ background: var(--accent);
180
+ border-radius: 50%;
181
+ }
182
+
183
+ .hero h1 {
184
+ font-size: clamp(36px, 6vw, 60px);
185
+ font-weight: 800;
186
+ letter-spacing: -2px;
187
+ line-height: 1.1;
188
+ margin-bottom: 24px;
189
+ color: #fff;
190
+ }
191
+
192
+ .hero h1 span {
193
+ background: linear-gradient(135deg, var(--accent-light), #c084fc);
194
+ -webkit-background-clip: text;
195
+ -webkit-text-fill-color: transparent;
196
+ }
197
+
198
+ .hero-sub {
199
+ font-size: 20px;
200
+ color: var(--muted);
201
+ max-width: 640px;
202
+ margin: 0 auto 40px;
203
+ line-height: 1.6;
204
+ }
205
+
206
+ .hero-sub strong { color: var(--text); }
207
+
208
+ .hero-actions {
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ gap: 16px;
213
+ flex-wrap: wrap;
214
+ margin-bottom: 48px;
215
+ }
216
+
217
+ .btn-primary {
218
+ background: var(--accent);
219
+ color: #fff;
220
+ padding: 14px 28px;
221
+ border-radius: 8px;
222
+ font-size: 16px;
223
+ font-weight: 600;
224
+ border: none;
225
+ cursor: pointer;
226
+ transition: background 0.15s, transform 0.1s;
227
+ display: inline-flex;
228
+ align-items: center;
229
+ gap: 8px;
230
+ }
231
+
232
+ .btn-primary:hover { background: var(--accent-light); color: #fff; transform: translateY(-1px); }
233
+
234
+ .btn-ghost {
235
+ background: transparent;
236
+ color: var(--text);
237
+ padding: 14px 28px;
238
+ border-radius: 8px;
239
+ font-size: 16px;
240
+ font-weight: 500;
241
+ border: 1px solid var(--border);
242
+ cursor: pointer;
243
+ transition: border-color 0.15s;
244
+ display: inline-flex;
245
+ align-items: center;
246
+ gap: 8px;
247
+ }
248
+
249
+ .btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); }
250
+
251
+ /* Terminal demo */
252
+ .terminal {
253
+ max-width: 720px;
254
+ margin: 0 auto 32px;
255
+ background: #0d0d18;
256
+ border: 1px solid var(--border);
257
+ border-radius: 12px;
258
+ overflow: hidden;
259
+ text-align: left;
260
+ box-shadow: 0 24px 64px rgba(0,0,0,0.5);
261
+ }
262
+
263
+ .term-bar {
264
+ background: #1a1a2e;
265
+ padding: 12px 16px;
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 8px;
269
+ border-bottom: 1px solid var(--border);
270
+ }
271
+
272
+ .dot { width: 12px; height: 12px; border-radius: 50%; }
273
+ .dot.r { background: #ff5f57; }
274
+ .dot.y { background: #febc2e; }
275
+ .dot.g { background: #28c840; }
276
+ .term-title { margin-left: 8px; font-size: 12px; color: var(--muted); font-family: monospace; }
277
+
278
+ .term-body {
279
+ padding: 20px 24px;
280
+ font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
281
+ font-size: 13px;
282
+ line-height: 2;
283
+ color: var(--text);
284
+ overflow-x: auto;
285
+ }
286
+
287
+ .term-body .dim { color: var(--muted); }
288
+ .term-body .pass { color: var(--green); }
289
+ .term-body .warn { color: var(--yellow); }
290
+ .term-body .fail { color: var(--red); }
291
+ .term-body .tool { color: var(--accent-light); font-weight: 600; min-width: 140px; display: inline-block; }
292
+ .term-body .score-high { color: var(--green); font-weight: 700; }
293
+ .term-body .score-mid { color: var(--yellow); font-weight: 700; }
294
+ .term-body .score-low { color: var(--red); font-weight: 700; }
295
+ .term-body .verdict { color: var(--green); font-weight: 700; letter-spacing: 0.5px; }
296
+ .term-body .fix { color: #60a5fa; }
297
+
298
+ .hero-meta {
299
+ font-size: 13px;
300
+ color: var(--muted);
301
+ display: flex;
302
+ align-items: center;
303
+ justify-content: center;
304
+ gap: 16px;
305
+ flex-wrap: wrap;
306
+ }
307
+
308
+ .hero-meta-sep { color: rgba(255,255,255,0.15); }
309
+
310
+ /* === PROBLEM SECTION === */
311
+ .problem {
312
+ padding: 80px 0;
313
+ border-top: 1px solid var(--border);
314
+ }
315
+
316
+ .section-eyebrow {
317
+ font-size: 12px;
318
+ font-weight: 600;
319
+ letter-spacing: 2px;
320
+ text-transform: uppercase;
321
+ color: var(--accent);
322
+ margin-bottom: 16px;
323
+ }
324
+
325
+ .problem h2 {
326
+ font-size: clamp(28px, 4vw, 42px);
327
+ font-weight: 700;
328
+ letter-spacing: -1px;
329
+ color: #fff;
330
+ margin-bottom: 16px;
331
+ max-width: 600px;
332
+ }
333
+
334
+ .problem-lead {
335
+ font-size: 18px;
336
+ color: var(--muted);
337
+ max-width: 640px;
338
+ margin-bottom: 48px;
339
+ line-height: 1.7;
340
+ }
341
+
342
+ .problem-grid {
343
+ display: grid;
344
+ grid-template-columns: repeat(3, 1fr);
345
+ gap: 20px;
346
+ }
347
+
348
+ @media (max-width: 768px) {
349
+ .problem-grid { grid-template-columns: 1fr; }
350
+ }
351
+
352
+ .problem-card {
353
+ background: var(--bg2);
354
+ border: 1px solid var(--border);
355
+ border-radius: 12px;
356
+ padding: 24px;
357
+ }
358
+
359
+ .problem-num {
360
+ font-size: 11px;
361
+ font-weight: 700;
362
+ letter-spacing: 1px;
363
+ color: var(--accent);
364
+ margin-bottom: 10px;
365
+ }
366
+
367
+ .problem-card h3 {
368
+ font-size: 16px;
369
+ font-weight: 600;
370
+ color: #fff;
371
+ margin-bottom: 8px;
372
+ }
373
+
374
+ .problem-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }
375
+
376
+ /* === TOOLS GRID === */
377
+ .tools {
378
+ padding: 80px 0;
379
+ border-top: 1px solid var(--border);
380
+ }
381
+
382
+ .tools-header {
383
+ max-width: 560px;
384
+ margin-bottom: 56px;
385
+ }
386
+
387
+ .tools h2 {
388
+ font-size: clamp(28px, 4vw, 42px);
389
+ font-weight: 700;
390
+ letter-spacing: -1px;
391
+ color: #fff;
392
+ margin-bottom: 12px;
393
+ }
394
+
395
+ .tools-lead { font-size: 17px; color: var(--muted); }
396
+
397
+ .tools-grid {
398
+ display: grid;
399
+ grid-template-columns: repeat(3, 1fr);
400
+ gap: 20px;
401
+ }
402
+
403
+ @media (max-width: 900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
404
+ @media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } }
405
+
406
+ .tool-card {
407
+ background: var(--bg2);
408
+ border: 1px solid var(--border);
409
+ border-radius: 14px;
410
+ padding: 28px 24px;
411
+ transition: border-color 0.2s, transform 0.15s;
412
+ position: relative;
413
+ overflow: hidden;
414
+ }
415
+
416
+ .tool-card::before {
417
+ content: '';
418
+ position: absolute;
419
+ top: 0; left: 0; right: 0;
420
+ height: 2px;
421
+ background: var(--tool-color, var(--accent));
422
+ }
423
+
424
+ .tool-card:hover {
425
+ border-color: rgba(124,77,255,0.4);
426
+ transform: translateY(-2px);
427
+ }
428
+
429
+ .tool-icon {
430
+ width: 44px;
431
+ height: 44px;
432
+ border-radius: 10px;
433
+ background: var(--tool-dim, var(--accent-dim));
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ font-size: 22px;
438
+ margin-bottom: 16px;
439
+ }
440
+
441
+ .tool-card h3 {
442
+ font-size: 18px;
443
+ font-weight: 700;
444
+ color: #fff;
445
+ margin-bottom: 8px;
446
+ }
447
+
448
+ .tool-card p {
449
+ font-size: 14px;
450
+ color: var(--muted);
451
+ line-height: 1.6;
452
+ margin-bottom: 14px;
453
+ }
454
+
455
+ .tool-tag {
456
+ display: inline-block;
457
+ font-size: 11px;
458
+ font-weight: 600;
459
+ padding: 3px 10px;
460
+ border-radius: 100px;
461
+ background: rgba(255,255,255,0.05);
462
+ color: var(--muted);
463
+ letter-spacing: 0.3px;
464
+ }
465
+
466
+ /* === DIFFERENTIATOR === */
467
+ .diff {
468
+ padding: 80px 0;
469
+ border-top: 1px solid var(--border);
470
+ }
471
+
472
+ .diff-inner {
473
+ display: grid;
474
+ grid-template-columns: 1fr 1fr;
475
+ gap: 64px;
476
+ align-items: center;
477
+ }
478
+
479
+ @media (max-width: 768px) { .diff-inner { grid-template-columns: 1fr; } }
480
+
481
+ .diff-content h2 {
482
+ font-size: clamp(28px, 4vw, 38px);
483
+ font-weight: 700;
484
+ letter-spacing: -1px;
485
+ color: #fff;
486
+ margin-bottom: 16px;
487
+ }
488
+
489
+ .diff-content p {
490
+ font-size: 16px;
491
+ color: var(--muted);
492
+ line-height: 1.7;
493
+ margin-bottom: 24px;
494
+ }
495
+
496
+ .diff-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
497
+
498
+ .diff-list li {
499
+ display: flex;
500
+ align-items: flex-start;
501
+ gap: 12px;
502
+ font-size: 15px;
503
+ color: var(--text);
504
+ }
505
+
506
+ .diff-list li::before {
507
+ content: '✓';
508
+ color: var(--green);
509
+ font-weight: 700;
510
+ flex-shrink: 0;
511
+ margin-top: 1px;
512
+ }
513
+
514
+ .diff-visual {
515
+ background: var(--bg2);
516
+ border: 1px solid var(--border);
517
+ border-radius: 14px;
518
+ padding: 28px;
519
+ }
520
+
521
+ .diff-visual-title {
522
+ font-size: 12px;
523
+ font-weight: 600;
524
+ letter-spacing: 1.5px;
525
+ text-transform: uppercase;
526
+ color: var(--muted);
527
+ margin-bottom: 20px;
528
+ }
529
+
530
+ .diff-row {
531
+ display: flex;
532
+ align-items: center;
533
+ justify-content: space-between;
534
+ padding: 12px 0;
535
+ border-bottom: 1px solid var(--border);
536
+ font-size: 13px;
537
+ }
538
+
539
+ .diff-row:last-child { border-bottom: none; }
540
+ .diff-row-label { color: var(--muted); }
541
+ .diff-row-val-good { color: var(--green); font-weight: 600; }
542
+ .diff-row-val-bad { color: var(--red); font-weight: 600; }
543
+
544
+ /* === HOW IT WORKS === */
545
+ .how {
546
+ padding: 80px 0;
547
+ border-top: 1px solid var(--border);
548
+ }
549
+
550
+ .how h2 {
551
+ font-size: clamp(28px, 4vw, 42px);
552
+ font-weight: 700;
553
+ letter-spacing: -1px;
554
+ color: #fff;
555
+ margin-bottom: 56px;
556
+ max-width: 480px;
557
+ }
558
+
559
+ .steps {
560
+ display: grid;
561
+ grid-template-columns: repeat(3, 1fr);
562
+ gap: 24px;
563
+ }
564
+
565
+ @media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
566
+
567
+ .step {
568
+ position: relative;
569
+ padding: 28px;
570
+ background: var(--bg2);
571
+ border: 1px solid var(--border);
572
+ border-radius: 12px;
573
+ }
574
+
575
+ .step-num {
576
+ width: 36px;
577
+ height: 36px;
578
+ border-radius: 50%;
579
+ background: var(--accent-dim);
580
+ border: 1px solid rgba(124,77,255,0.4);
581
+ display: flex;
582
+ align-items: center;
583
+ justify-content: center;
584
+ font-size: 14px;
585
+ font-weight: 700;
586
+ color: var(--accent-light);
587
+ margin-bottom: 16px;
588
+ }
589
+
590
+ .step h3 {
591
+ font-size: 17px;
592
+ font-weight: 600;
593
+ color: #fff;
594
+ margin-bottom: 8px;
595
+ }
596
+
597
+ .step p { font-size: 14px; color: var(--muted); line-height: 1.6; }
598
+
599
+ .step-code {
600
+ margin-top: 12px;
601
+ background: var(--bg3);
602
+ border: 1px solid var(--border);
603
+ border-radius: 8px;
604
+ padding: 10px 14px;
605
+ font-family: monospace;
606
+ font-size: 12px;
607
+ color: var(--accent-light);
608
+ word-break: break-all;
609
+ }
610
+
611
+ /* === PRICING === */
612
+ .pricing {
613
+ padding: 80px 0;
614
+ border-top: 1px solid var(--border);
615
+ }
616
+
617
+ .pricing-header {
618
+ text-align: center;
619
+ margin-bottom: 56px;
620
+ }
621
+
622
+ .pricing h2 {
623
+ font-size: clamp(28px, 4vw, 42px);
624
+ font-weight: 700;
625
+ letter-spacing: -1px;
626
+ color: #fff;
627
+ margin-bottom: 12px;
628
+ }
629
+
630
+ .pricing-lead { font-size: 17px; color: var(--muted); }
631
+
632
+ .pricing-grid {
633
+ display: grid;
634
+ grid-template-columns: repeat(3, 1fr);
635
+ gap: 24px;
636
+ max-width: 1060px;
637
+ margin: 0 auto;
638
+ }
639
+
640
+ @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; } }
641
+
642
+ /* === SOCIAL PROOF === */
643
+ .social-proof {
644
+ padding: 80px 0;
645
+ border-top: 1px solid var(--border);
646
+ }
647
+
648
+ .social-proof h2 {
649
+ font-size: clamp(28px, 4vw, 38px);
650
+ font-weight: 700;
651
+ letter-spacing: -1px;
652
+ color: #fff;
653
+ margin-bottom: 48px;
654
+ max-width: 480px;
655
+ }
656
+
657
+ .testimonials-grid {
658
+ display: grid;
659
+ grid-template-columns: repeat(3, 1fr);
660
+ gap: 20px;
661
+ margin-bottom: 48px;
662
+ }
663
+
664
+ @media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
665
+
666
+ .testimonial-card {
667
+ background: var(--bg2);
668
+ border: 1px solid var(--border);
669
+ border-radius: 14px;
670
+ padding: 28px;
671
+ display: flex;
672
+ flex-direction: column;
673
+ gap: 16px;
674
+ }
675
+
676
+ .testimonial-card.placeholder {
677
+ border-style: dashed;
678
+ opacity: 0.45;
679
+ }
680
+
681
+ .testimonial-quote {
682
+ font-size: 15px;
683
+ color: var(--text);
684
+ line-height: 1.7;
685
+ font-style: italic;
686
+ }
687
+
688
+ .testimonial-author {
689
+ display: flex;
690
+ align-items: center;
691
+ gap: 12px;
692
+ }
693
+
694
+ .testimonial-avatar {
695
+ width: 36px;
696
+ height: 36px;
697
+ border-radius: 50%;
698
+ background: var(--accent-dim);
699
+ border: 1px solid rgba(124,77,255,0.3);
700
+ display: flex;
701
+ align-items: center;
702
+ justify-content: center;
703
+ font-size: 16px;
704
+ flex-shrink: 0;
705
+ }
706
+
707
+ .testimonial-name {
708
+ font-size: 14px;
709
+ font-weight: 600;
710
+ color: #fff;
711
+ }
712
+
713
+ .testimonial-role {
714
+ font-size: 12px;
715
+ color: var(--muted);
716
+ }
717
+
718
+ .social-proof-stats {
719
+ display: flex;
720
+ gap: 48px;
721
+ flex-wrap: wrap;
722
+ }
723
+
724
+ .stat-item { display: flex; flex-direction: column; gap: 4px; }
725
+
726
+ .stat-num {
727
+ font-size: 28px;
728
+ font-weight: 800;
729
+ color: #fff;
730
+ letter-spacing: -1px;
731
+ }
732
+
733
+ .stat-label { font-size: 13px; color: var(--muted); }
734
+
735
+ .plan {
736
+ background: var(--bg2);
737
+ border: 1px solid var(--border);
738
+ border-radius: 16px;
739
+ padding: 36px;
740
+ }
741
+
742
+ .plan.featured {
743
+ border-color: var(--accent);
744
+ background: linear-gradient(135deg, rgba(124,77,255,0.08), var(--bg2));
745
+ position: relative;
746
+ }
747
+
748
+ .plan-badge {
749
+ position: absolute;
750
+ top: -12px;
751
+ left: 50%;
752
+ transform: translateX(-50%);
753
+ background: var(--accent);
754
+ color: #fff;
755
+ font-size: 11px;
756
+ font-weight: 700;
757
+ letter-spacing: 1px;
758
+ text-transform: uppercase;
759
+ padding: 4px 14px;
760
+ border-radius: 100px;
761
+ }
762
+
763
+ .plan-name {
764
+ font-size: 14px;
765
+ font-weight: 600;
766
+ color: var(--muted);
767
+ letter-spacing: 0.5px;
768
+ margin-bottom: 12px;
769
+ }
770
+
771
+ .plan-price {
772
+ font-size: 48px;
773
+ font-weight: 800;
774
+ color: #fff;
775
+ letter-spacing: -2px;
776
+ line-height: 1;
777
+ margin-bottom: 4px;
778
+ }
779
+
780
+ .plan-price span { font-size: 20px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
781
+
782
+ .plan-period { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
783
+
784
+ .plan-cta {
785
+ display: block;
786
+ text-align: center;
787
+ padding: 13px;
788
+ border-radius: 8px;
789
+ font-size: 15px;
790
+ font-weight: 600;
791
+ margin-bottom: 28px;
792
+ transition: all 0.15s;
793
+ }
794
+
795
+ .plan:not(.featured) .plan-cta {
796
+ background: var(--bg3);
797
+ border: 1px solid var(--border);
798
+ color: var(--text);
799
+ }
800
+
801
+ .plan:not(.featured) .plan-cta:hover { border-color: var(--accent); color: var(--accent-light); }
802
+
803
+ .plan.featured .plan-cta {
804
+ background: var(--accent);
805
+ color: #fff;
806
+ }
807
+
808
+ .plan.featured .plan-cta:hover { background: var(--accent-light); }
809
+
810
+ .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
811
+
812
+ .plan-features li {
813
+ display: flex;
814
+ align-items: flex-start;
815
+ gap: 10px;
816
+ font-size: 14px;
817
+ color: var(--text);
818
+ }
819
+
820
+ .plan-features li .check { color: var(--green); flex-shrink: 0; }
821
+ .plan-features li .limit { color: var(--muted); margin-left: auto; font-size: 12px; }
822
+
823
+ /* === FAQ === */
824
+ .faq {
825
+ padding: 80px 0;
826
+ border-top: 1px solid var(--border);
827
+ }
828
+
829
+ .faq-header { margin-bottom: 48px; }
830
+
831
+ .faq h2 {
832
+ font-size: clamp(28px, 4vw, 38px);
833
+ font-weight: 700;
834
+ letter-spacing: -1px;
835
+ color: #fff;
836
+ }
837
+
838
+ .faq-list { max-width: 740px; display: flex; flex-direction: column; gap: 2px; }
839
+
840
+ .faq-list details {
841
+ background: var(--bg2);
842
+ border: 1px solid var(--border);
843
+ border-radius: 10px;
844
+ overflow: hidden;
845
+ }
846
+
847
+ .faq-list details[open] { border-color: rgba(124,77,255,0.3); }
848
+
849
+ .faq-list summary {
850
+ padding: 20px 24px;
851
+ cursor: pointer;
852
+ font-size: 15px;
853
+ font-weight: 600;
854
+ color: #fff;
855
+ list-style: none;
856
+ display: flex;
857
+ align-items: center;
858
+ justify-content: space-between;
859
+ gap: 12px;
860
+ user-select: none;
861
+ }
862
+
863
+ .faq-list summary::-webkit-details-marker { display: none; }
864
+
865
+ .faq-list summary::after {
866
+ content: '+';
867
+ color: var(--accent);
868
+ font-size: 20px;
869
+ font-weight: 300;
870
+ flex-shrink: 0;
871
+ transition: transform 0.2s;
872
+ }
873
+
874
+ .faq-list details[open] summary::after { transform: rotate(45deg); }
875
+
876
+ .faq-answer {
877
+ padding: 0 24px 20px;
878
+ font-size: 14px;
879
+ color: var(--muted);
880
+ line-height: 1.7;
881
+ }
882
+
883
+ /* === FINAL CTA === */
884
+ .final-cta {
885
+ padding: 96px 0;
886
+ border-top: 1px solid var(--border);
887
+ text-align: center;
888
+ }
889
+
890
+ .final-cta h2 {
891
+ font-size: clamp(32px, 5vw, 52px);
892
+ font-weight: 800;
893
+ letter-spacing: -1.5px;
894
+ color: #fff;
895
+ margin-bottom: 16px;
896
+ }
897
+
898
+ .final-cta p {
899
+ font-size: 18px;
900
+ color: var(--muted);
901
+ margin-bottom: 36px;
902
+ }
903
+
904
+ /* === FOOTER === */
905
+ footer {
906
+ border-top: 1px solid var(--border);
907
+ padding: 40px 0;
908
+ }
909
+
910
+ .footer-inner {
911
+ display: flex;
912
+ align-items: center;
913
+ justify-content: space-between;
914
+ flex-wrap: wrap;
915
+ gap: 16px;
916
+ }
917
+
918
+ .footer-logo {
919
+ display: flex;
920
+ align-items: center;
921
+ gap: 8px;
922
+ font-weight: 700;
923
+ font-size: 16px;
924
+ }
925
+
926
+ .footer-links {
927
+ display: flex;
928
+ gap: 24px;
929
+ font-size: 13px;
930
+ color: var(--muted);
931
+ }
932
+
933
+ .footer-links a:hover { color: var(--text); }
934
+
935
+ .footer-seo {
936
+ width: 100%;
937
+ margin-top: 24px;
938
+ font-size: 13px;
939
+ color: rgba(255,255,255,0.2);
940
+ line-height: 1.6;
941
+ }
942
+ </style>
943
+ </head>
944
+ <body>
945
+
946
+ <!-- NAV -->
947
+ <nav class="nav">
948
+ <div class="nav-inner container">
949
+ <a class="nav-logo" href="#">
950
+ <div class="logo-icon">✦</div>
951
+ ContentGrade
952
+ </a>
953
+ <div class="nav-links">
954
+ <a href="#tools">Tools</a>
955
+ <a href="#self-hosted">Self-hosted</a>
956
+ <a href="#pricing">Pricing</a>
957
+ <a href="./early-adopters.html" style="color:var(--accent-light);font-weight:600;">Early adopters</a>
958
+ <a href="https://github.com/Content-Grade/Content-Grade" class="nav-gh">
959
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/></svg>
960
+ GitHub
961
+ </a>
962
+ </div>
963
+ </div>
964
+ </nav>
965
+
966
+ <!-- HERO -->
967
+ <section class="hero">
968
+ <div class="container">
969
+ <div class="hero-badge">
970
+ <span class="hero-badge-dot"></span>
971
+ npx content-grade · Claude CLI · No API key needed
972
+ </div>
973
+
974
+ <h1>
975
+ Your content is competing<br />
976
+ against <span>AI-generated noise.</span><br />
977
+ Grade it before you ship it.
978
+ </h1>
979
+
980
+ <p class="hero-sub">
981
+ <strong>ContentGrade</strong> is a suite of 6 AI-powered content analysis tools — headline grader,
982
+ landing page auditor, ad scorer, thread grader, email forge, and audience decoder.
983
+ Runs on your local <strong>Claude CLI</strong>. No API key. No cloud. Data stays on your machine.
984
+ </p>
985
+
986
+ <div class="hero-actions">
987
+ <a href="https://github.com/Content-Grade/Content-Grade" class="btn-primary">
988
+ Install free — npx content-grade
989
+ <span>→</span>
990
+ </a>
991
+ <a href="#tools" class="btn-ghost">See the 6 tools</a>
992
+ </div>
993
+
994
+ <!-- Terminal demo -->
995
+ <div class="terminal">
996
+ <div class="term-bar">
997
+ <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
998
+ <span class="term-title">~ npx content-grade ./my-post.md</span>
999
+ </div>
1000
+ <pre class="term-body">
1001
+ <span class="pass"> OVERALL SCORE</span> <span class="score-high">72/100 B+</span> <span class="dim">blog post</span>
1002
+ <span class="dim"> ████████████████████████░░░░░░░░░░░░░░░░</span>
1003
+
1004
+ <span class="pass"> HEADLINE SCORE</span> <span class="score-mid">61/100</span>
1005
+ <span class="dim"> "Why Most Startups Fail"</span>
1006
+ <span class="dim"> ↳ Too vague — the reader doesn't know if this applies to them.</span>
1007
+
1008
+ <span class="tool"> DIMENSION BREAKDOWN</span>
1009
+
1010
+ <span class="dim"> Clarity </span><span class="score-high">80/100</span> <span class="dim">↳ Well-organized with clear section breaks.</span>
1011
+ <span class="dim"> Engagement </span><span class="score-mid">60/100</span> <span class="dim">↳ Opens strong but drops in paragraph 3.</span>
1012
+
1013
+ <span class="verdict"> TOP IMPROVEMENTS</span>
1014
+ <span class="fix"> ● Make the headline specific: "Why 90% of SaaS Startups Fail at Month 18"</span>
1015
+ <span class="fix"> ● Add one data point in paragraph 2 — "CB Insights found..." beats vague claims</span></pre>
1016
+ </div>
1017
+
1018
+ <div class="hero-meta">
1019
+ <span>Free · 3 analyses/day per tool</span>
1020
+ <span class="hero-meta-sep">·</span>
1021
+ <span>Claude CLI required · Zero data leaves your machine</span>
1022
+ <span class="hero-meta-sep">·</span>
1023
+ <span>Open source · MIT license</span>
1024
+ </div>
1025
+ </div>
1026
+ </section>
1027
+
1028
+ <!-- PROBLEM -->
1029
+ <section class="problem">
1030
+ <div class="container">
1031
+ <div class="section-eyebrow">The problem</div>
1032
+ <h2>AI made content creation instant.<br />It didn't make it good.</h2>
1033
+ <p class="problem-lead">
1034
+ Every competitor, agency, and solo founder is publishing more content than ever.
1035
+ Most of it scores below 30. The teams who measure and improve win on signal-to-noise ratio alone.
1036
+ </p>
1037
+ <div class="problem-grid">
1038
+ <div class="problem-card">
1039
+ <div class="problem-num">01</div>
1040
+ <h3>Generic doesn't convert</h3>
1041
+ <p>"Learn More About Our Solutions" and "How 847 Founders Cut AWS Costs 40% in 30 Days" are both 10 words. Only one has a dream outcome. Word-counting tools can't see the difference.</p>
1042
+ </div>
1043
+ <div class="problem-card">
1044
+ <div class="problem-num">02</div>
1045
+ <h3>No feedback loop</h3>
1046
+ <p>You ship the headline, the ad, the email. A/B tests take weeks. By then the campaign is over. You need instant, framework-based feedback before the content goes live — not after.</p>
1047
+ </div>
1048
+ <div class="problem-card">
1049
+ <div class="problem-num">03</div>
1050
+ <h3>SaaS tools own your data</h3>
1051
+ <p>Agencies and teams run confidential client briefs, unreleased product copy, and internal strategic messaging through these tools. Cloud SaaS logs everything. ContentGrade runs on your machine via Claude CLI — nothing leaves your device.</p>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </section>
1056
+
1057
+ <!-- TOOLS GRID -->
1058
+ <section class="tools" id="tools">
1059
+ <div class="container">
1060
+ <div class="tools-header">
1061
+ <div class="section-eyebrow">The suite</div>
1062
+ <h2>Six tools.<br />One content quality system.</h2>
1063
+ <p class="tools-lead">Each tool targets a specific content type with the frameworks that actually matter for that format. No generic "AI writing assistant" scores here.</p>
1064
+ </div>
1065
+
1066
+ <div class="tools-grid">
1067
+
1068
+ <div class="tool-card" style="--tool-color: #9e7aff; --tool-dim: rgba(158,122,255,0.12)">
1069
+ <div class="tool-icon">✍️</div>
1070
+ <h3>HeadlineGrader</h3>
1071
+ <p>Score any headline 1–100 across Masterson's Rule of One, Hormozi's Value Equation, Proof + Promise + Plan, and Readability. Includes AI rewrites labeled with the technique applied.</p>
1072
+ <span class="tool-tag">Copywriting frameworks · SERP preview · A/B compare</span>
1073
+ </div>
1074
+
1075
+ <div class="tool-card" style="--tool-color: #f87171; --tool-dim: rgba(248,113,113,0.10)">
1076
+ <div class="tool-icon">🔥</div>
1077
+ <h3>PageRoast</h3>
1078
+ <p>Drops your landing page into a conversion audit. Identifies friction points, weak CTAs, missing proof elements, and headline-body mismatch. Brutally honest, actionably specific.</p>
1079
+ <span class="tool-tag">Conversion audit · CTA analysis · Friction scoring</span>
1080
+ </div>
1081
+
1082
+ <div class="tool-card" style="--tool-color: #facc15; --tool-dim: rgba(250,204,21,0.10)">
1083
+ <div class="tool-icon">📢</div>
1084
+ <h3>AdScorer</h3>
1085
+ <p>Grade ad copy for Google, Meta, and LinkedIn against platform-specific frameworks. Hook strength, offer clarity, proof density, and CTA quality — scored per dimension with rewrites.</p>
1086
+ <span class="tool-tag">Google · Meta · LinkedIn · Platform-aware scoring</span>
1087
+ </div>
1088
+
1089
+ <div class="tool-card" style="--tool-color: #60a5fa; --tool-dim: rgba(96,165,250,0.10)">
1090
+ <div class="tool-icon">🧵</div>
1091
+ <h3>ThreadGrader</h3>
1092
+ <p>Evaluate Twitter/X threads for hook strength, retention across tweets, value density, and CTA placement. Scores each tweet individually and the thread as a whole.</p>
1093
+ <span class="tool-tag">Hook analysis · Retention scoring · Per-tweet breakdown</span>
1094
+ </div>
1095
+
1096
+ <div class="tool-card" style="--tool-color: #4ade80; --tool-dim: rgba(74,222,128,0.10)">
1097
+ <div class="tool-icon">📧</div>
1098
+ <h3>EmailForge</h3>
1099
+ <p>Analyze email subject lines and body copy. Open rate prediction, subject line A/B comparison, body flow analysis, and CTA effectiveness. Works for cold outreach, newsletters, and sequences.</p>
1100
+ <span class="tool-tag">Subject line scorer · Open rate prediction · A/B compare</span>
1101
+ </div>
1102
+
1103
+ <div class="tool-card" style="--tool-color: #c084fc; --tool-dim: rgba(192,132,252,0.12)">
1104
+ <div class="tool-icon">✦</div>
1105
+ <h3>ContentGrade</h3>
1106
+ <p>The master scorer. Paste any content — blog post, case study, sales page, product description. Get a holistic quality score across clarity, specificity, proof density, audience fit, and conversion potential.</p>
1107
+ <span class="tool-tag">All content types · Holistic scoring · 6-dimension analysis</span>
1108
+ </div>
1109
+
1110
+ </div>
1111
+ </div>
1112
+ </section>
1113
+
1114
+ <!-- DIFFERENTIATOR: SELF-HOSTED -->
1115
+ <section class="diff" id="self-hosted">
1116
+ <div class="container">
1117
+ <div class="diff-inner">
1118
+ <div class="diff-content">
1119
+ <div class="section-eyebrow">The differentiator</div>
1120
+ <h2>Claude CLI.<br />Local by default.<br />Zero cloud dependency.</h2>
1121
+ <p>
1122
+ Every other AI content tool is a SaaS that processes your copy on their servers.
1123
+ ContentGrade runs locally on your machine via Claude CLI — no API key required, no monthly
1124
+ Anthropic bill, no data routing through vendor infrastructure.
1125
+ </p>
1126
+ <p>
1127
+ For agencies running client work, teams drafting unreleased campaigns, and anyone
1128
+ whose copy is legitimately confidential: this is the only option that's actually private.
1129
+ </p>
1130
+ <ul class="diff-list">
1131
+ <li>Client briefs stay off third-party servers</li>
1132
+ <li>Unreleased campaign copy isn't indexed anywhere</li>
1133
+ <li>No vendor data retention policy to audit</li>
1134
+ <li>Your usage patterns aren't training anyone's model</li>
1135
+ <li>Runs on Claude CLI — free account, no API billing</li>
1136
+ </ul>
1137
+ </div>
1138
+
1139
+ <div class="diff-visual">
1140
+ <div class="diff-visual-title">ContentGrade vs. Cloud SaaS</div>
1141
+ <div class="diff-row">
1142
+ <span class="diff-row-label">Data leaves your infra</span>
1143
+ <span class="diff-row-val-good">Never</span>
1144
+ </div>
1145
+ <div class="diff-row">
1146
+ <span class="diff-row-label">Vendor data retention</span>
1147
+ <span class="diff-row-val-good">None — runs on your machine</span>
1148
+ </div>
1149
+ <div class="diff-row">
1150
+ <span class="diff-row-label">API key required</span>
1151
+ <span class="diff-row-val-good">No — just Claude CLI</span>
1152
+ </div>
1153
+ <div class="diff-row">
1154
+ <span class="diff-row-label">Per-query billing</span>
1155
+ <span class="diff-row-val-good">None — free Claude CLI</span>
1156
+ </div>
1157
+ <div class="diff-row">
1158
+ <span class="diff-row-label">Agency/team use</span>
1159
+ <span class="diff-row-val-good">Safe for client work</span>
1160
+ </div>
1161
+ <div class="diff-row">
1162
+ <span class="diff-row-label">Framework transparency</span>
1163
+ <span class="diff-row-val-good">Open source, fully auditable</span>
1164
+ </div>
1165
+ <div class="diff-row">
1166
+ <span class="diff-row-label">Install</span>
1167
+ <span class="diff-row-val-good">npx content-grade</span>
1168
+ </div>
1169
+ </div>
1170
+ </div>
1171
+ </div>
1172
+ </section>
1173
+
1174
+ <!-- HOW IT WORKS -->
1175
+ <section class="how">
1176
+ <div class="container">
1177
+ <div class="section-eyebrow">Getting started</div>
1178
+ <h2>From install to first grade<br />in under 3 minutes.</h2>
1179
+
1180
+ <div class="steps">
1181
+ <div class="step">
1182
+ <div class="step-num">1</div>
1183
+ <h3>Install Claude CLI</h3>
1184
+ <p>ContentGrade runs on Claude CLI — install it from claude.ai/code (free), then log in. That's the only prerequisite. No API key, no billing setup.</p>
1185
+ <div class="step-code">claude login</div>
1186
+ </div>
1187
+
1188
+ <div class="step">
1189
+ <div class="step-num">2</div>
1190
+ <h3>Run an instant demo</h3>
1191
+ <p>No file needed. Run <code style="background:rgba(255,255,255,0.07);padding:1px 6px;border-radius:4px;font-size:12px">npx content-grade</code> and it runs a live demo on built-in sample content so you see real output immediately.</p>
1192
+ <div class="step-code">npx content-grade<br /># or analyze your own file:<br />npx content-grade ./my-post.md</div>
1193
+ </div>
1194
+
1195
+ <div class="step">
1196
+ <div class="step-num">3</div>
1197
+ <h3>Launch the full dashboard</h3>
1198
+ <p>Start the web interface to access all 6 tools — HeadlineGrader, PageRoast, AdScorer, ThreadGrader, EmailForge, and AudienceDecoder. Free tier: 3 analyses/day per tool.</p>
1199
+ <div class="step-code">npx content-grade start</div>
1200
+ </div>
1201
+ </div>
1202
+ </div>
1203
+ </section>
1204
+
1205
+ <!-- PRICING -->
1206
+ <section class="pricing" id="pricing">
1207
+ <div class="container">
1208
+ <div class="pricing-header">
1209
+ <div class="section-eyebrow">Pricing</div>
1210
+ <h2>Start free. Upgrade when it pays for itself.</h2>
1211
+ <p class="pricing-lead">3 free analyses/day. No credit card, no signup, no API key required.</p>
1212
+ </div>
1213
+
1214
+ <div class="pricing-grid">
1215
+ <div class="plan">
1216
+ <div class="plan-name">FREE</div>
1217
+ <div class="plan-price">$0</div>
1218
+ <div class="plan-period">forever · no signup required</div>
1219
+ <a href="https://www.npmjs.com/package/content-grade" class="plan-cta">Install free →</a>
1220
+ <ul class="plan-features">
1221
+ <li><span class="check">✓</span> <strong>3 analyses/day</strong></li>
1222
+ <li><span class="check">✓</span> All 6 tools (CLI + dashboard)</li>
1223
+ <li><span class="check">✓</span> Full framework-based scoring</li>
1224
+ <li><span class="check">✓</span> AI rewrites with technique labels</li>
1225
+ <li><span class="check">✓</span> Per-dimension score breakdown</li>
1226
+ <li><span class="check">✓</span> HeadlineGrader SERP preview</li>
1227
+ </ul>
1228
+ </div>
1229
+
1230
+ <div class="plan featured">
1231
+ <div class="plan-badge">Most popular</div>
1232
+ <div class="plan-name">PRO</div>
1233
+ <div class="plan-price">$9<span>/mo</span></div>
1234
+ <div class="plan-period">20 analyses/day · billed monthly</div>
1235
+ <a href="https://buy.stripe.com/4gM14p87GeCh9vn9ks8k80a" class="plan-cta" target="_blank" rel="noopener">Get Pro →</a>
1236
+ <ul class="plan-features">
1237
+ <li><span class="check">✓</span> <strong>20 analyses/day</strong> — 7× the free tier</li>
1238
+ <li><span class="check">✓</span> All 6 tools (CLI + dashboard)</li>
1239
+ <li><span class="check">✓</span> License key for CLI activation</li>
1240
+ <li><span class="check">✓</span> Batch mode — analyze whole directories</li>
1241
+ <li><span class="check">✓</span> Priority email support</li>
1242
+ <li><span class="check">✓</span> $0.45/analysis — less than a coffee per day</li>
1243
+ </ul>
1244
+ </div>
1245
+
1246
+ <div class="plan">
1247
+ <div class="plan-name">BUSINESS</div>
1248
+ <div class="plan-price">$29<span>/mo</span></div>
1249
+ <div class="plan-period">100 analyses/day · billed monthly</div>
1250
+ <a href="https://buy.stripe.com/bJefZjafO2Tz36Z2W48k80b" class="plan-cta" target="_blank" rel="noopener">Get Business →</a>
1251
+ <ul class="plan-features">
1252
+ <li><span class="check">✓</span> <strong>100 analyses/day</strong></li>
1253
+ <li><span class="check">✓</span> Everything in Pro</li>
1254
+ <li><span class="check">✓</span> A/B compare with conversion predictions</li>
1255
+ <li><span class="check">✓</span> Best value per analysis ($0.29/analysis)</li>
1256
+ </ul>
1257
+ </div>
1258
+
1259
+ <div class="plan">
1260
+ <div class="plan-name">TEAM</div>
1261
+ <div class="plan-price">$79<span>/mo</span></div>
1262
+ <div class="plan-period">500 analyses/day · billed monthly</div>
1263
+ <a href="https://buy.stripe.com/cNiaEZfA8cu9bDv4088k80c" class="plan-cta" target="_blank" rel="noopener">Get Team →</a>
1264
+ <ul class="plan-features">
1265
+ <li><span class="check">✓</span> <strong>500 analyses/day</strong></li>
1266
+ <li><span class="check">✓</span> Everything in Business</li>
1267
+ <li><span class="check">✓</span> Shared team workspace</li>
1268
+ <li><span class="check">✓</span> Dedicated support + SLA</li>
1269
+ </ul>
1270
+ </div>
1271
+ </div>
1272
+ </div>
1273
+ </section>
1274
+
1275
+ <!-- FAQ -->
1276
+ <section class="faq">
1277
+ <div class="container">
1278
+ <div class="faq-header">
1279
+ <div class="section-eyebrow">FAQ</div>
1280
+ <h2>Common questions</h2>
1281
+ </div>
1282
+
1283
+ <div class="faq-list">
1284
+
1285
+ <details>
1286
+ <summary>What makes this different from CoSchedule Headline Analyzer or other AI writing tools?</summary>
1287
+ <div class="faq-answer">
1288
+ Most headline analyzers count words: uncommon word density, emotional word ratio, common word percentage. These are correlates of quality, not causes. They cannot tell the difference between "Learn More About Our Solutions" (empty) and "How 847 Founders Cut AWS Costs 40% in 30 Days" (specific, proof-backed, credible). Both are 10 words. CoSchedule scores them similarly.<br /><br />
1289
+ ContentGrade uses causal frameworks grounded in direct response copywriting history — Masterson's Rule of One, Hormozi's Value Equation, Proof + Promise + Plan. These explain <em>why</em> a headline fails and give you a specific fix. The other critical difference: your data never leaves your infrastructure. We don't log your copy, and we don't train on it.
1290
+ </div>
1291
+ </details>
1292
+
1293
+ <details>
1294
+ <summary>Do I need an Anthropic API key or a paid Claude account?</summary>
1295
+ <div class="faq-answer">
1296
+ No API key required. ContentGrade runs on <strong>Claude CLI</strong> — install it for free from claude.ai/code and log in with a Claude account. A free Claude account is sufficient for the free tier (3 analyses/day per tool).<br /><br />
1297
+ There's no per-query Anthropic billing. You're not routing calls through the API console or accumulating usage charges. Claude CLI handles authentication locally, which is also why your content never leaves your machine.
1298
+ </div>
1299
+ </details>
1300
+
1301
+ <details>
1302
+ <summary>Is my content private? What data is stored?</summary>
1303
+ <div class="faq-answer">
1304
+ Your content goes from your browser → your local ContentGrade server → Claude CLI running locally. It never touches our servers. The only logs that exist are what your local instance stores and whatever Anthropic logs for your CLI session (subject to their standard privacy policy).<br /><br />
1305
+ For agencies running client work or teams drafting unreleased campaigns: ContentGrade is safe to use. There's no vendor data retention policy to audit because we never have your data.
1306
+ </div>
1307
+ </details>
1308
+
1309
+ <details>
1310
+ <summary>Which of the 6 tools should I start with?</summary>
1311
+ <div class="faq-answer">
1312
+ Start with <strong>HeadlineGrader</strong>. Headlines are the highest-leverage piece of copy in any content — they determine whether anyone reads the rest. Run your current hero headline, email subject, or blog title. If it scores below 60, the rewrites will show you exactly what to change and why.<br /><br />
1313
+ After that: <strong>PageRoast</strong> for landing pages, <strong>AdScorer</strong> if you're running paid traffic, <strong>EmailForge</strong> for cold outreach or newsletters. <strong>ContentGrade</strong> is the catch-all for everything else.
1314
+ </div>
1315
+ </details>
1316
+
1317
+ <details>
1318
+ <summary>What AI model does ContentGrade use?</summary>
1319
+ <div class="faq-answer">
1320
+ ContentGrade uses whatever Claude model your CLI session is authenticated with. By default this is whatever Claude has set as the default for CLI sessions. Since you're running locally via Claude CLI, the model behavior is determined by Anthropic's standard CLI configuration, not by ContentGrade settings.
1321
+ </div>
1322
+ </details>
1323
+
1324
+ <details>
1325
+ <summary>Can I use ContentGrade for client work at an agency?</summary>
1326
+ <div class="faq-answer">
1327
+ Yes, and this is a primary use case. Because ContentGrade runs locally via Claude CLI, client copy never leaves your machine. There's no SaaS terms of service to worry about, no vendor data retention, and no risk of your client's unreleased campaign copy appearing in someone else's training data.<br /><br />
1328
+ Pro tier includes higher daily limits, and Team tier includes shared workspace features — share analyses and scoring history across your team without routing content through any third-party service.
1329
+ </div>
1330
+ </details>
1331
+
1332
+ </div>
1333
+ </div>
1334
+ </section>
1335
+
1336
+ <!-- SOCIAL PROOF -->
1337
+ <section class="social-proof">
1338
+ <div class="container">
1339
+ <div class="section-eyebrow">Early feedback</div>
1340
+ <h2>What developers are saying.</h2>
1341
+
1342
+ <div class="testimonials-grid">
1343
+ <div class="testimonial-card">
1344
+ <p class="testimonial-quote">"Ran my startup's hero headline through HeadlineGrader. Got a 34. The diagnosis was accurate — I was talking about features, not outcomes. Rewrote it, got 78. Conversion rate went up 22% the next week."</p>
1345
+ <div class="testimonial-author">
1346
+ <div class="testimonial-avatar">🚀</div>
1347
+ <div>
1348
+ <div class="testimonial-name">Indie hacker, SaaS founder</div>
1349
+ <div class="testimonial-role">Early adopter</div>
1350
+ </div>
1351
+ </div>
1352
+ </div>
1353
+
1354
+ <div class="testimonial-card">
1355
+ <p class="testimonial-quote">"The local-first approach is the whole point for agency work. We run client copy through this before any review. The framework breakdown is actually teachable — I can show clients exactly why the headline isn't working."</p>
1356
+ <div class="testimonial-author">
1357
+ <div class="testimonial-avatar">✍️</div>
1358
+ <div>
1359
+ <div class="testimonial-name">Content strategist</div>
1360
+ <div class="testimonial-role">5-person content agency</div>
1361
+ </div>
1362
+ </div>
1363
+ </div>
1364
+
1365
+ <div class="testimonial-card placeholder">
1366
+ <p class="testimonial-quote" style="color:var(--muted)">"Your review here. Try ContentGrade and share your results — open an issue on GitHub or tag us."</p>
1367
+ <div class="testimonial-author">
1368
+ <div class="testimonial-avatar" style="opacity:0.4">?</div>
1369
+ <div>
1370
+ <div class="testimonial-name" style="color:var(--muted)">Early adopter wanted</div>
1371
+ <div class="testimonial-role"><a href="https://github.com/Content-Grade/Content-Grade/discussions" style="color:var(--accent)">Share your results →</a></div>
1372
+ </div>
1373
+ </div>
1374
+ </div>
1375
+ </div>
1376
+
1377
+ <div class="social-proof-stats">
1378
+ <div class="stat-item">
1379
+ <div class="stat-num">6</div>
1380
+ <div class="stat-label">scoring tools shipped</div>
1381
+ </div>
1382
+ <div class="stat-item">
1383
+ <div class="stat-num">4</div>
1384
+ <div class="stat-label">copywriting frameworks per tool</div>
1385
+ </div>
1386
+ <div class="stat-item">
1387
+ <div class="stat-num">0</div>
1388
+ <div class="stat-label">API keys required</div>
1389
+ </div>
1390
+ <div class="stat-item">
1391
+ <div class="stat-num">MIT</div>
1392
+ <div class="stat-label">open source license</div>
1393
+ </div>
1394
+ </div>
1395
+ </div>
1396
+ </section>
1397
+
1398
+ <!-- FINAL CTA -->
1399
+ <section class="final-cta">
1400
+ <div class="container">
1401
+ <h2>Run your best headline.<br />See where it actually stands.</h2>
1402
+ <p>Free · 3 analyses/day per tool · No API key · Claude CLI only</p>
1403
+ <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
1404
+ <a href="https://github.com/Content-Grade/Content-Grade" class="btn-primary">
1405
+ Install free — npx content-grade
1406
+ <span>→</span>
1407
+ </a>
1408
+ <a href="https://github.com/Content-Grade/Content-Grade" class="btn-ghost">
1409
+ View source on GitHub
1410
+ </a>
1411
+ </div>
1412
+ </div>
1413
+ </section>
1414
+
1415
+ <!-- FOOTER -->
1416
+ <footer>
1417
+ <div class="container">
1418
+ <div class="footer-inner">
1419
+ <div class="footer-logo">
1420
+ <div class="logo-icon" style="width:22px;height:22px;font-size:11px;">✦</div>
1421
+ ContentGrade
1422
+ </div>
1423
+ <div class="footer-links">
1424
+ <a href="https://github.com/Content-Grade/Content-Grade">GitHub</a>
1425
+ <a href="#tools">Tools</a>
1426
+ <a href="#pricing">Pricing</a>
1427
+ <a href="https://claude.ai/code">Get Claude CLI</a>
1428
+ <a href="./early-adopters.html">Early Adopters</a>
1429
+ <a href="./privacy.html">Privacy</a>
1430
+ <a href="./terms.html">Terms</a>
1431
+ </div>
1432
+ </div>
1433
+ <!-- SEO footer copy -->
1434
+ <p class="footer-seo">
1435
+ ContentGrade is a local AI content grader and headline analyzer suite. Use it as a content quality checker, headline scorer, ad copy grader, landing page auditor, email subject line tester, or Twitter thread grader. All six tools run via Claude CLI on your local machine — zero data leaves your device. Open source, MIT license. Built for marketers, copywriters, and agencies who want framework-based content analysis without cloud SaaS data risk. Install with npx content-grade.
1436
+ </p>
1437
+ </div>
1438
+ </footer>
1439
+
1440
+
1441
+ <!-- Analytics: GoatCounter — no cookies, privacy-first, open source -->
1442
+ <!-- Setup: create a free account at https://www.goatcounter.com and set the data-goatcounter URL below -->
1443
+ <script data-goatcounter="https://content-grade.goatcounter.com/count"
1444
+ async src="//gc.zgo.at/count.js"></script>
1445
+
1446
+ <!-- CTA click tracking: fires a GoatCounter event for each conversion action -->
1447
+ <script>
1448
+ document.addEventListener('DOMContentLoaded', function() {
1449
+ // Track pricing CTA clicks
1450
+ document.querySelectorAll('a.plan-cta[href*="checkout"]').forEach(function(el) {
1451
+ el.addEventListener('click', function() {
1452
+ if (window.goatcounter && window.goatcounter.count) {
1453
+ var tier = el.href.includes('business') ? 'business' : el.href.includes('team') ? 'team' : 'pro';
1454
+ window.goatcounter.count({ path: 'cta/start-' + tier, title: 'Start ' + tier + ' click' });
1455
+ }
1456
+ });
1457
+ });
1458
+ // Track "Install free" (GitHub) clicks
1459
+ document.querySelectorAll('a.plan-cta[href*="github.com"]').forEach(function(el) {
1460
+ el.addEventListener('click', function() {
1461
+ if (window.goatcounter && window.goatcounter.count) {
1462
+ window.goatcounter.count({ path: 'cta/install-free', title: 'Install Free click' });
1463
+ }
1464
+ });
1465
+ });
1466
+ // Track hero CTA
1467
+ document.querySelectorAll('a.btn-primary[href*="github.com"]').forEach(function(el) {
1468
+ el.addEventListener('click', function() {
1469
+ if (window.goatcounter && window.goatcounter.count) {
1470
+ window.goatcounter.count({ path: 'cta/hero-install', title: 'Hero Install click' });
1471
+ }
1472
+ });
1473
+ });
1474
+ });
1475
+ </script>
1476
+ </body>
1477
+ </html>