@contextmirror/claude-memory 0.2.0 โ†’ 0.2.2

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.
@@ -4,17 +4,23 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Claude Memory - Cross-project memory for Claude Code</title>
7
- <meta name="description" content="Give Claude awareness of ALL your projects. One command, and Claude knows your entire development environment.">
7
+ <meta name="description" content="Cross-project memory for Claude Code. Know about ALL your projects, not just the one you're in. No more cold starts.">
8
8
 
9
9
  <style>
10
10
  :root {
11
- --bg: #0a0a0a;
12
- --text: #e5e5e5;
13
- --accent: #6366f1;
14
- --accent-light: #818cf8;
15
- --muted: #737373;
16
- --card-bg: #171717;
17
- --border: #262626;
11
+ --bg: #09090b;
12
+ --text: #fafafa;
13
+ --text-secondary: #a1a1aa;
14
+ --accent: #8b5cf6;
15
+ --accent-light: #a78bfa;
16
+ --accent-glow: rgba(139, 92, 246, 0.15);
17
+ --muted: #71717a;
18
+ --card-bg: #18181b;
19
+ --border: #27272a;
20
+ --green: #22c55e;
21
+ --green-dim: #16a34a;
22
+ --red: #ef4444;
23
+ --yellow: #facc15;
18
24
  }
19
25
 
20
26
  * {
@@ -24,47 +30,100 @@
24
30
  }
25
31
 
26
32
  body {
27
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
33
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28
34
  background: var(--bg);
29
35
  color: var(--text);
30
36
  line-height: 1.6;
31
37
  }
32
38
 
33
39
  .container {
34
- max-width: 900px;
40
+ max-width: 1000px;
35
41
  margin: 0 auto;
36
42
  padding: 0 24px;
37
43
  }
38
44
 
39
45
  /* Header */
40
46
  header {
41
- padding: 24px 0;
47
+ padding: 20px 0;
42
48
  border-bottom: 1px solid var(--border);
49
+ background: rgba(9, 9, 11, 0.8);
50
+ backdrop-filter: blur(12px);
51
+ position: sticky;
52
+ top: 0;
53
+ z-index: 100;
54
+ }
55
+
56
+ .header-inner {
57
+ display: flex;
58
+ justify-content: space-between;
59
+ align-items: center;
43
60
  }
44
61
 
45
62
  .logo {
46
- font-size: 20px;
63
+ font-size: 18px;
47
64
  font-weight: 600;
48
65
  display: flex;
49
66
  align-items: center;
50
- gap: 8px;
67
+ gap: 10px;
51
68
  }
52
69
 
53
70
  .logo-icon {
54
- font-size: 24px;
71
+ font-size: 22px;
72
+ }
73
+
74
+ .header-cta {
75
+ background: var(--accent);
76
+ color: white;
77
+ padding: 8px 16px;
78
+ border-radius: 6px;
79
+ text-decoration: none;
80
+ font-size: 14px;
81
+ font-weight: 500;
82
+ transition: all 0.2s;
83
+ }
84
+
85
+ .header-cta:hover {
86
+ background: var(--accent-light);
87
+ transform: translateY(-1px);
55
88
  }
56
89
 
57
90
  /* Hero */
58
91
  .hero {
59
- padding: 80px 0;
92
+ padding: 100px 0 80px;
60
93
  text-align: center;
94
+ position: relative;
95
+ }
96
+
97
+ .hero::before {
98
+ content: "";
99
+ position: absolute;
100
+ top: 0;
101
+ left: 50%;
102
+ transform: translateX(-50%);
103
+ width: 600px;
104
+ height: 400px;
105
+ background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
106
+ pointer-events: none;
107
+ }
108
+
109
+ .badge {
110
+ display: inline-block;
111
+ background: var(--accent-glow);
112
+ border: 1px solid var(--accent);
113
+ color: var(--accent-light);
114
+ padding: 6px 14px;
115
+ border-radius: 20px;
116
+ font-size: 13px;
117
+ font-weight: 500;
118
+ margin-bottom: 24px;
61
119
  }
62
120
 
63
121
  .hero h1 {
64
- font-size: 48px;
122
+ font-size: 56px;
65
123
  font-weight: 700;
66
- margin-bottom: 16px;
67
- background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
124
+ margin-bottom: 20px;
125
+ letter-spacing: -0.02em;
126
+ background: linear-gradient(180deg, #fff 0%, #a1a1aa 100%);
68
127
  -webkit-background-clip: text;
69
128
  -webkit-text-fill-color: transparent;
70
129
  background-clip: text;
@@ -72,174 +131,342 @@
72
131
 
73
132
  .hero .subtitle {
74
133
  font-size: 20px;
75
- color: var(--muted);
76
- margin-bottom: 40px;
134
+ color: var(--text-secondary);
135
+ margin-bottom: 48px;
77
136
  max-width: 600px;
78
137
  margin-left: auto;
79
138
  margin-right: auto;
80
139
  }
81
140
 
141
+ .hero .highlight {
142
+ color: var(--accent-light);
143
+ font-weight: 500;
144
+ }
145
+
146
+ /* Visual Diagram - Simplified */
147
+ .sync-visual {
148
+ display: flex;
149
+ justify-content: center;
150
+ align-items: center;
151
+ gap: 20px;
152
+ margin-bottom: 48px;
153
+ flex-wrap: wrap;
154
+ }
155
+
156
+ .sync-node {
157
+ background: var(--card-bg);
158
+ border: 1px solid var(--border);
159
+ border-radius: 12px;
160
+ padding: 20px 28px;
161
+ text-align: center;
162
+ min-width: 140px;
163
+ }
164
+
165
+ .sync-node .icon {
166
+ font-size: 28px;
167
+ margin-bottom: 8px;
168
+ }
169
+
170
+ .sync-node .label {
171
+ font-weight: 600;
172
+ font-size: 14px;
173
+ margin-bottom: 4px;
174
+ }
175
+
176
+ .sync-node .sublabel {
177
+ font-size: 12px;
178
+ color: var(--muted);
179
+ }
180
+
181
+ .sync-arrow {
182
+ color: var(--green);
183
+ font-size: 24px;
184
+ font-weight: bold;
185
+ }
186
+
187
+ .sync-center {
188
+ background: linear-gradient(135deg, var(--accent-glow), rgba(34, 197, 94, 0.1));
189
+ border: 1px solid var(--green);
190
+ padding: 16px 24px;
191
+ }
192
+
193
+ .sync-center .icon {
194
+ color: var(--green);
195
+ }
196
+
197
+ .sync-center .label {
198
+ color: var(--green);
199
+ }
200
+
82
201
  /* Install box */
83
202
  .install-box {
84
203
  background: var(--card-bg);
85
204
  border: 1px solid var(--border);
86
205
  border-radius: 12px;
87
- padding: 24px;
88
- margin-bottom: 40px;
89
- max-width: 500px;
90
- margin-left: auto;
91
- margin-right: auto;
206
+ padding: 28px;
207
+ max-width: 480px;
208
+ margin: 0 auto;
209
+ text-align: center;
92
210
  }
93
211
 
94
212
  .install-box code {
95
213
  display: block;
96
- font-family: 'SF Mono', 'Fira Code', monospace;
97
- font-size: 16px;
214
+ font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
215
+ font-size: 14px;
98
216
  color: var(--accent-light);
99
- margin-bottom: 16px;
217
+ background: var(--bg);
218
+ padding: 12px 16px;
219
+ border-radius: 8px;
220
+ margin-bottom: 12px;
100
221
  }
101
222
 
102
223
  .install-box .note {
103
- font-size: 14px;
224
+ font-size: 13px;
104
225
  color: var(--muted);
226
+ margin-top: 16px;
227
+ }
228
+
229
+ /* Problem/Solution */
230
+ .problem-solution {
231
+ display: grid;
232
+ grid-template-columns: 1fr 1fr;
233
+ gap: 24px;
234
+ padding: 80px 0;
235
+ }
236
+
237
+ .comparison-card {
238
+ background: var(--card-bg);
239
+ border-radius: 16px;
240
+ padding: 28px;
241
+ border: 2px solid var(--border);
242
+ }
243
+
244
+ .comparison-card.problem {
245
+ border-color: rgba(239, 68, 68, 0.3);
246
+ background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, var(--card-bg) 100%);
247
+ }
248
+
249
+ .comparison-card.solution {
250
+ border-color: rgba(34, 197, 94, 0.3);
251
+ background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, var(--card-bg) 100%);
252
+ }
253
+
254
+ .comparison-card h3 {
255
+ font-size: 18px;
256
+ margin-bottom: 20px;
257
+ display: flex;
258
+ align-items: center;
259
+ gap: 10px;
260
+ }
261
+
262
+ .comparison-card.problem h3 {
263
+ color: var(--red);
264
+ }
265
+
266
+ .comparison-card.solution h3 {
267
+ color: var(--green);
268
+ }
269
+
270
+ .comparison-card ul {
271
+ list-style: none;
272
+ }
273
+
274
+ .comparison-card li {
275
+ padding: 10px 0;
276
+ color: var(--text-secondary);
277
+ padding-left: 28px;
278
+ position: relative;
279
+ font-size: 15px;
280
+ }
281
+
282
+ .comparison-card.problem li::before {
283
+ content: "โœ•";
284
+ position: absolute;
285
+ left: 0;
286
+ color: var(--red);
287
+ font-weight: bold;
288
+ }
289
+
290
+ .comparison-card.solution li::before {
291
+ content: "โœ“";
292
+ position: absolute;
293
+ left: 0;
294
+ color: var(--green);
295
+ font-weight: bold;
105
296
  }
106
297
 
107
298
  /* Features */
108
299
  .features {
109
- padding: 60px 0;
300
+ padding: 80px 0;
301
+ border-top: 1px solid var(--border);
110
302
  }
111
303
 
112
- .features h2 {
304
+ .section-header {
113
305
  text-align: center;
114
- font-size: 32px;
115
- margin-bottom: 48px;
306
+ margin-bottom: 56px;
307
+ }
308
+
309
+ .section-header h2 {
310
+ font-size: 36px;
311
+ margin-bottom: 12px;
312
+ font-weight: 700;
313
+ }
314
+
315
+ .section-header p {
316
+ color: var(--text-secondary);
317
+ font-size: 18px;
116
318
  }
117
319
 
118
320
  .feature-grid {
119
321
  display: grid;
120
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
121
- gap: 24px;
322
+ grid-template-columns: repeat(2, 1fr);
323
+ gap: 20px;
122
324
  }
123
325
 
124
326
  .feature-card {
125
327
  background: var(--card-bg);
126
328
  border: 1px solid var(--border);
127
329
  border-radius: 12px;
128
- padding: 24px;
330
+ padding: 28px;
331
+ transition: all 0.2s;
332
+ }
333
+
334
+ .feature-card:hover {
335
+ border-color: var(--accent);
336
+ transform: translateY(-2px);
337
+ }
338
+
339
+ .feature-card .icon {
340
+ font-size: 32px;
341
+ margin-bottom: 16px;
129
342
  }
130
343
 
131
344
  .feature-card h3 {
132
345
  font-size: 18px;
133
- margin-bottom: 8px;
134
- display: flex;
135
- align-items: center;
136
- gap: 8px;
346
+ margin-bottom: 10px;
347
+ font-weight: 600;
137
348
  }
138
349
 
139
350
  .feature-card p {
140
- color: var(--muted);
141
- font-size: 15px;
351
+ color: var(--text-secondary);
352
+ font-size: 14px;
353
+ line-height: 1.7;
142
354
  }
143
355
 
144
- /* How it works */
145
- .how-it-works {
146
- padding: 60px 0;
147
- border-top: 1px solid var(--border);
356
+ .feature-card.pro {
357
+ border-color: var(--accent);
358
+ background: linear-gradient(180deg, var(--accent-glow) 0%, var(--card-bg) 100%);
148
359
  }
149
360
 
150
- .how-it-works h2 {
151
- text-align: center;
152
- font-size: 32px;
153
- margin-bottom: 48px;
361
+ .feature-card .pro-badge {
362
+ display: inline-block;
363
+ background: var(--accent);
364
+ color: white;
365
+ font-size: 10px;
366
+ font-weight: 600;
367
+ padding: 3px 8px;
368
+ border-radius: 4px;
369
+ margin-left: 8px;
370
+ vertical-align: middle;
154
371
  }
155
372
 
156
- .steps {
157
- display: flex;
158
- flex-direction: column;
159
- gap: 32px;
160
- max-width: 600px;
161
- margin: 0 auto;
373
+ /* Use Cases */
374
+ .use-cases {
375
+ padding: 80px 0;
376
+ border-top: 1px solid var(--border);
162
377
  }
163
378
 
164
- .step {
165
- display: flex;
166
- gap: 16px;
379
+ .use-case {
380
+ background: var(--card-bg);
381
+ border: 1px solid var(--border);
382
+ border-radius: 12px;
383
+ padding: 28px;
384
+ margin-bottom: 20px;
167
385
  }
168
386
 
169
- .step-number {
170
- width: 32px;
171
- height: 32px;
172
- background: var(--accent);
173
- border-radius: 50%;
174
- display: flex;
175
- align-items: center;
176
- justify-content: center;
387
+ .use-case h3 {
388
+ font-size: 14px;
389
+ color: var(--accent-light);
390
+ margin-bottom: 16px;
391
+ text-transform: uppercase;
392
+ letter-spacing: 0.05em;
177
393
  font-weight: 600;
178
- flex-shrink: 0;
179
394
  }
180
395
 
181
- .step-content h3 {
182
- font-size: 18px;
183
- margin-bottom: 4px;
396
+ .use-case .conversation {
397
+ font-size: 15px;
184
398
  }
185
399
 
186
- .step-content p {
187
- color: var(--muted);
188
- font-size: 15px;
400
+ .use-case .user {
401
+ color: var(--text);
402
+ margin-bottom: 12px;
403
+ padding: 12px 16px;
404
+ background: var(--bg);
405
+ border-radius: 8px;
406
+ border-left: 3px solid var(--accent);
189
407
  }
190
408
 
191
- .step-content code {
192
- display: block;
193
- background: var(--card-bg);
194
- border: 1px solid var(--border);
195
- border-radius: 6px;
196
- padding: 8px 12px;
197
- margin-top: 8px;
198
- font-family: 'SF Mono', 'Fira Code', monospace;
199
- font-size: 14px;
200
- color: var(--accent-light);
409
+ .use-case .claude {
410
+ color: var(--text-secondary);
411
+ padding: 12px 16px;
412
+ background: rgba(34, 197, 94, 0.05);
413
+ border-radius: 8px;
414
+ border-left: 3px solid var(--green);
415
+ font-style: italic;
201
416
  }
202
417
 
203
418
  /* Pricing */
204
419
  .pricing {
205
- padding: 60px 0;
420
+ padding: 80px 0;
206
421
  border-top: 1px solid var(--border);
207
422
  }
208
423
 
209
- .pricing h2 {
210
- text-align: center;
211
- font-size: 32px;
212
- margin-bottom: 48px;
213
- }
214
-
215
424
  .pricing-grid {
216
425
  display: grid;
217
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
426
+ grid-template-columns: repeat(2, 1fr);
218
427
  gap: 24px;
219
- max-width: 700px;
428
+ max-width: 800px;
220
429
  margin: 0 auto;
221
430
  }
222
431
 
223
432
  .pricing-card {
224
433
  background: var(--card-bg);
225
- border: 1px solid var(--border);
226
- border-radius: 12px;
227
- padding: 32px;
434
+ border: 2px solid var(--border);
435
+ border-radius: 16px;
436
+ padding: 36px;
228
437
  }
229
438
 
230
439
  .pricing-card.featured {
231
440
  border-color: var(--accent);
441
+ position: relative;
442
+ background: linear-gradient(180deg, var(--accent-glow) 0%, var(--card-bg) 50%);
443
+ }
444
+
445
+ .pricing-card.featured::before {
446
+ content: "COMING SOON";
447
+ position: absolute;
448
+ top: -14px;
449
+ left: 50%;
450
+ transform: translateX(-50%);
451
+ background: var(--accent);
452
+ color: white;
453
+ font-size: 11px;
454
+ font-weight: 700;
455
+ padding: 6px 14px;
456
+ border-radius: 20px;
457
+ letter-spacing: 0.05em;
232
458
  }
233
459
 
234
460
  .pricing-card h3 {
235
- font-size: 20px;
461
+ font-size: 22px;
236
462
  margin-bottom: 8px;
463
+ font-weight: 600;
237
464
  }
238
465
 
239
466
  .pricing-card .price {
240
- font-size: 36px;
467
+ font-size: 48px;
241
468
  font-weight: 700;
242
- margin-bottom: 16px;
469
+ margin-bottom: 24px;
243
470
  }
244
471
 
245
472
  .pricing-card .price span {
@@ -250,162 +477,240 @@
250
477
 
251
478
  .pricing-card ul {
252
479
  list-style: none;
253
- margin-bottom: 24px;
480
+ margin-bottom: 28px;
254
481
  }
255
482
 
256
483
  .pricing-card li {
257
- padding: 8px 0;
258
- color: var(--muted);
484
+ padding: 10px 0;
485
+ color: var(--text-secondary);
259
486
  display: flex;
260
487
  align-items: center;
261
- gap: 8px;
488
+ gap: 10px;
489
+ font-size: 15px;
262
490
  }
263
491
 
264
492
  .pricing-card li::before {
265
493
  content: "โœ“";
266
- color: var(--accent-light);
494
+ color: var(--green);
495
+ font-weight: bold;
496
+ }
497
+
498
+ .pricing-card li.coming::before {
499
+ content: "โ—ฆ";
500
+ color: var(--yellow);
267
501
  }
268
502
 
269
503
  .btn {
270
504
  display: inline-block;
271
505
  background: var(--accent);
272
506
  color: white;
273
- padding: 12px 24px;
507
+ padding: 14px 28px;
274
508
  border-radius: 8px;
275
509
  text-decoration: none;
276
- font-weight: 500;
510
+ font-weight: 600;
277
511
  text-align: center;
278
512
  width: 100%;
279
- transition: background 0.2s;
513
+ transition: all 0.2s;
514
+ font-size: 15px;
280
515
  }
281
516
 
282
517
  .btn:hover {
283
518
  background: var(--accent-light);
519
+ transform: translateY(-1px);
284
520
  }
285
521
 
286
522
  .btn-outline {
287
523
  background: transparent;
288
- border: 1px solid var(--border);
524
+ border: 2px solid var(--border);
289
525
  }
290
526
 
291
527
  .btn-outline:hover {
292
528
  background: var(--card-bg);
529
+ border-color: var(--accent);
293
530
  }
294
531
 
295
532
  /* Footer */
296
533
  footer {
297
- padding: 40px 0;
534
+ padding: 48px 0;
298
535
  border-top: 1px solid var(--border);
299
536
  text-align: center;
537
+ }
538
+
539
+ footer p {
300
540
  color: var(--muted);
301
541
  font-size: 14px;
302
542
  }
303
543
 
304
544
  footer a {
305
- color: var(--text);
545
+ color: var(--text-secondary);
306
546
  text-decoration: none;
547
+ transition: color 0.2s;
307
548
  }
308
549
 
309
550
  footer a:hover {
310
- text-decoration: underline;
551
+ color: var(--accent-light);
311
552
  }
312
553
 
313
- /* Badge */
314
- .badge {
315
- display: inline-block;
316
- background: var(--accent);
317
- color: white;
318
- font-size: 12px;
319
- padding: 2px 8px;
320
- border-radius: 4px;
321
- margin-left: 8px;
554
+ footer .tagline {
555
+ margin-top: 12px;
556
+ font-size: 13px;
557
+ color: var(--muted);
322
558
  }
323
559
 
324
- @media (max-width: 600px) {
560
+ @media (max-width: 768px) {
325
561
  .hero h1 {
326
- font-size: 32px;
562
+ font-size: 36px;
327
563
  }
328
564
  .hero .subtitle {
329
565
  font-size: 16px;
330
566
  }
567
+ .problem-solution,
568
+ .feature-grid,
569
+ .pricing-grid {
570
+ grid-template-columns: 1fr;
571
+ }
572
+ .sync-visual {
573
+ flex-direction: column;
574
+ }
575
+ .sync-arrow {
576
+ transform: rotate(90deg);
577
+ }
331
578
  }
332
579
  </style>
333
580
  </head>
334
581
  <body>
335
582
  <header>
336
583
  <div class="container">
337
- <div class="logo">
338
- <span class="logo-icon">๐Ÿง </span>
339
- claude-memory
584
+ <div class="header-inner">
585
+ <div class="logo">
586
+ <span class="logo-icon">๐Ÿง </span>
587
+ claude-memory
588
+ </div>
589
+ <a href="https://www.npmjs.com/package/@contextmirror/claude-memory" class="header-cta">Get Started</a>
340
590
  </div>
341
591
  </div>
342
592
  </header>
343
593
 
344
594
  <section class="hero">
345
595
  <div class="container">
596
+ <div class="badge">Now available on npm</div>
346
597
  <h1>Cross-project memory for Claude Code</h1>
347
598
  <p class="subtitle">
348
- Every Claude session starts fresh. Not anymore. Give Claude awareness of ALL your projects with one command.
599
+ Know about <span class="highlight">ALL your projects</span>, not just the one you're in. No more cold starts. No more re-explaining.
349
600
  </p>
350
601
 
602
+ <div class="sync-visual">
603
+ <div class="sync-node">
604
+ <div class="icon">๐Ÿ“</div>
605
+ <div class="label">Project A</div>
606
+ <div class="sublabel">React App</div>
607
+ </div>
608
+ <div class="sync-arrow">โ†’</div>
609
+ <div class="sync-node sync-center">
610
+ <div class="icon">๐Ÿง </div>
611
+ <div class="label">Claude Memory</div>
612
+ <div class="sublabel">MCP Server</div>
613
+ </div>
614
+ <div class="sync-arrow">โ†</div>
615
+ <div class="sync-node">
616
+ <div class="icon">๐Ÿ“</div>
617
+ <div class="label">Project B</div>
618
+ <div class="sublabel">API Server</div>
619
+ </div>
620
+ </div>
621
+
351
622
  <div class="install-box">
352
623
  <code>npm install -g @contextmirror/claude-memory</code>
353
624
  <code>claude-memory setup</code>
354
- <p class="note">Then restart Claude Code. That's it.</p>
625
+ <p class="note">Works with your existing Claude subscription. No extra API costs.</p>
626
+ </div>
627
+ </div>
628
+ </section>
629
+
630
+ <section class="problem-solution">
631
+ <div class="container" style="display: contents;">
632
+ <div class="comparison-card problem">
633
+ <h3>Without Claude Memory</h3>
634
+ <ul>
635
+ <li>Every Claude session starts cold</li>
636
+ <li>Switch projects = re-explain everything</li>
637
+ <li>Claude doesn't know about your other projects</li>
638
+ <li>CLAUDE.md files are manual and outdated</li>
639
+ <li>No cross-project awareness</li>
640
+ </ul>
641
+ </div>
642
+ <div class="comparison-card solution">
643
+ <h3>With Claude Memory</h3>
644
+ <ul>
645
+ <li>Claude knows all your projects instantly</li>
646
+ <li>Auto-generated, always-current CLAUDE.md</li>
647
+ <li>Ask about any project from any directory</li>
648
+ <li>Cross-project pattern detection</li>
649
+ <li>Search across your entire codebase</li>
650
+ </ul>
355
651
  </div>
356
652
  </div>
357
653
  </section>
358
654
 
359
655
  <section class="features">
360
656
  <div class="container">
361
- <h2>What you get</h2>
657
+ <div class="section-header">
658
+ <h2>What you get</h2>
659
+ <p>Everything Claude needs to remember you</p>
660
+ </div>
362
661
  <div class="feature-grid">
363
662
  <div class="feature-card">
364
- <h3>๐Ÿ” Project Discovery</h3>
365
- <p>Automatically scans your projects folder and detects all your codebases - Node.js, Python, Rust, Go, and more.</p>
663
+ <div class="icon">๐Ÿ”</div>
664
+ <h3>Project Discovery</h3>
665
+ <p>Automatically scans your projects folder and detects all codebases - Node.js, Python, Rust, Go. Claude knows what you're working on before you tell it.</p>
366
666
  </div>
367
667
  <div class="feature-card">
368
- <h3>๐Ÿ“ Auto-generated CLAUDE.md</h3>
369
- <p>Generate comprehensive context files for any project. Structure, patterns, dependencies - all analyzed automatically.</p>
668
+ <div class="icon">๐Ÿ“</div>
669
+ <h3>Auto CLAUDE.md</h3>
670
+ <p>Generates comprehensive context files automatically. Project structure, patterns, dependencies, entry points - all analyzed and documented for you.</p>
370
671
  </div>
371
672
  <div class="feature-card">
372
- <h3>๐Ÿ”Œ MCP Integration</h3>
373
- <p>Exposes your project knowledge via MCP, so Claude Code can query it in real-time.</p>
673
+ <div class="icon">๐Ÿ”Œ</div>
674
+ <h3>MCP Integration</h3>
675
+ <p>Native Model Context Protocol support. Claude Code queries your project memory in real-time. Ask "what projects do I have?" and get instant answers.</p>
374
676
  </div>
375
- <div class="feature-card">
376
- <h3>๐Ÿ’ฌ Natural Queries</h3>
377
- <p>"What projects do I have?" "Tell me about my API project" - Claude just knows.</p>
677
+ <div class="feature-card pro">
678
+ <div class="icon">๐Ÿ”</div>
679
+ <h3>Cross-Project Search <span class="pro-badge">PRO</span></h3>
680
+ <p>Search across all your projects at once. Find patterns, discover how you solved similar problems before, and get insights across your entire codebase.</p>
378
681
  </div>
379
682
  </div>
380
683
  </div>
381
684
  </section>
382
685
 
383
- <section class="how-it-works">
686
+ <section class="use-cases">
384
687
  <div class="container">
385
- <h2>How it works</h2>
386
- <div class="steps">
387
- <div class="step">
388
- <div class="step-number">1</div>
389
- <div class="step-content">
390
- <h3>Install globally</h3>
391
- <p>One npm command to install</p>
392
- <code>npm install -g @contextmirror/claude-memory</code>
393
- </div>
688
+ <div class="section-header">
689
+ <h2>How it works in practice</h2>
690
+ <p>Real scenarios, real productivity gains</p>
691
+ </div>
692
+
693
+ <div class="use-case">
694
+ <h3>Cross-Project Awareness</h3>
695
+ <div class="conversation">
696
+ <div class="user">You: "What other projects do I have that use React?"</div>
697
+ <div class="claude">Claude: "You have 3 React projects: dashboard-app (Next.js), component-library (Storybook), and landing-site (Vite)."</div>
394
698
  </div>
395
- <div class="step">
396
- <div class="step-number">2</div>
397
- <div class="step-content">
398
- <h3>Run setup</h3>
399
- <p>Scans your projects, generates CLAUDE.md files, configures MCP</p>
400
- <code>claude-memory setup</code>
401
- </div>
699
+ </div>
700
+
701
+ <div class="use-case">
702
+ <h3>Pattern Discovery</h3>
703
+ <div class="conversation">
704
+ <div class="user">You: "How do I handle authentication in my other projects?"</div>
705
+ <div class="claude">Claude: "Your api-server uses JWT with refresh tokens, and your dashboard-app uses the same pattern with HttpOnly cookies."</div>
402
706
  </div>
403
- <div class="step">
404
- <div class="step-number">3</div>
405
- <div class="step-content">
406
- <h3>Restart Claude Code</h3>
407
- <p>Claude now has memory of all your projects</p>
408
- </div>
707
+ </div>
708
+
709
+ <div class="use-case">
710
+ <h3>Instant Context</h3>
711
+ <div class="conversation">
712
+ <div class="user">You: "Tell me about the component-library project"</div>
713
+ <div class="claude">Claude: "It's a Storybook-based React component library with 24 components, TypeScript, and CSS modules. Last commit was 3 days ago."</div>
409
714
  </div>
410
715
  </div>
411
716
  </div>
@@ -413,28 +718,31 @@
413
718
 
414
719
  <section class="pricing">
415
720
  <div class="container">
416
- <h2>Pricing</h2>
721
+ <div class="section-header">
722
+ <h2>Pricing</h2>
723
+ <p>Start free, upgrade when you need more</p>
724
+ </div>
417
725
  <div class="pricing-grid">
418
726
  <div class="pricing-card">
419
727
  <h3>Free</h3>
420
728
  <div class="price">$0</div>
421
729
  <ul>
422
730
  <li>Unlimited project scanning</li>
423
- <li>Basic CLAUDE.md generation</li>
424
- <li>MCP server integration</li>
425
- <li>CLI tools</li>
731
+ <li>Auto CLAUDE.md generation</li>
732
+ <li>MCP server for Claude Code</li>
733
+ <li>New project auto-detection</li>
426
734
  </ul>
427
735
  <a href="https://www.npmjs.com/package/@contextmirror/claude-memory" class="btn btn-outline">Install Free</a>
428
736
  </div>
429
737
  <div class="pricing-card featured">
430
- <h3>Pro <span class="badge">Coming Soon</span></h3>
738
+ <h3>Pro</h3>
431
739
  <div class="price">$8 <span>/month</span></div>
432
740
  <ul>
433
741
  <li>Everything in Free</li>
434
- <li>AI-enhanced briefings</li>
435
- <li>Pattern detection</li>
436
- <li>Auto-sync on changes</li>
437
- <li>Priority support</li>
742
+ <li class="coming">Team memory sync</li>
743
+ <li class="coming">Semantic search</li>
744
+ <li class="coming">Custom CLAUDE.md templates</li>
745
+ <li class="coming">Priority support</li>
438
746
  </ul>
439
747
  <a href="#" class="btn">Join Waitlist</a>
440
748
  </div>
@@ -449,6 +757,7 @@
449
757
  <a href="https://www.npmjs.com/package/@contextmirror/claude-memory">npm</a> ยท
450
758
  <a href="https://github.com/contextmirror/claude-memory">GitHub</a>
451
759
  </p>
760
+ <p class="tagline">Making Claude better at its job, one memory at a time.</p>
452
761
  </div>
453
762
  </footer>
454
763
  </body>