websites/index.html at main · reccaller-ai/websites · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RecCall - Stop Repeating Yourself to AI</title>
    <meta name="description" content="Never explain your project context twice. RecCall remembers your codebase, preferences, and conversations so AI assistants can help you effectively from day one.">
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    <link rel="apple-touch-icon" href="assets/images/reccaller-icon-512.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/cli-graphic.css">
</head>
<body>
    <!-- Navigation -->
    <header class="header">
        <nav class="nav container">
            <a href="index.html" class="logo">
                <img src="assets/images/reccaller-icon-200.png" alt="RecCall" style="vertical-align: middle; margin-right: 0.5rem;">
                <span style="font-size: 1.5rem; font-weight: 800; color: var(--primary);">RecCall</span>
            </a>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="pages/use-cases.html">Use Cases</a></li>
                <li><a href="pages/integrations.html">Integrations</a></li>
                <li><a href="pages/getting-started.html">Get Started</a></li>
                <li><a href="pages/how-it-works.html">How It Works</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="hero-title">Stop Repeating Yourself to AI</h1>
            <p class="hero-subtitle">
                Developers waste <strong>2-3 hours per day</strong> re-explaining project context to AI assistants<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">1</a></sup>.
                RecCall remembers everything so you don't have to.
            </p>
            <div class="hero-stats">
                <div class="stat">
                    <div class="stat-number">70%</div>
                    <div class="stat-label">Time Saved<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">2</a></sup></div>
                </div>
                <div class="stat">
                    <div class="stat-number">2-3 hrs</div>
                    <div class="stat-label">Per Day Saved<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">1</a></sup></div>
                </div>
                <div class="stat">
                    <div class="stat-number">$50K+</div>
                    <div class="stat-label">Annual Value<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">3</a></sup></div>
                </div>
            </div>
            <div class="cta-buttons">
                <a href="pages/getting-started.html" class="btn btn-primary">Get Started Free</a>
                <a href="pages/how-it-works.html" class="btn btn-secondary">See How It Works</a>
            </div>
        </div>
    </section>

    <!-- The Problem -->
    <section class="section section-alt">
        <div class="container">
            <h2 class="section-title">The Problem Every Developer Faces</h2>
            <div class="problem-grid">
                <div class="problem-card">
                    <div class="problem-icon">🔄</div>
                    <h3>Constant Re-Explanations</h3>
                    <p>Every new conversation with AI means starting from scratch. You repeat project details, coding patterns, and preferences over and over.</p>
                    <div class="stat-badge">Wastes 2-3 hours daily<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">1</a></sup></div>
                </div>
                <div class="problem-card">
                    <div class="problem-icon">🧠</div>
                    <h3>Context Gets Lost</h3>
                    <p>Important decisions and architectural choices fade away. New team members and AI assistants miss critical context that shaped your codebase.</p>
                    <div class="stat-badge">70% context loss<sup><a href="#research-sources" style="text-decoration: none; color: inherit; opacity: 0.8;">2</a></sup></div>
                </div>
                <div class="problem-card">
                    <div class="problem-icon">⏱️</div>
                    <h3>Onboarding Friction</h3>
                    <p>New developers and AI assistants need days or weeks to understand your project. This slows down productivity and creates bottlenecks.</p>
                    <div class="stat-badge">3-5 days onboarding</div>
                </div>
            </div>
        </div>
    </section>

    <!-- The Solution -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">RecCall Remembers Everything</h2>
            <p class="section-intro">
                RecCall is your project's memory. It captures, organizes, and shares your codebase context so AI assistants
                understand your project instantly—without you repeating yourself.
            </p>

            <div class="solution-showcase">
                <div class="showcase-item">
                    <div class="showcase-icon">💬</div>
                    <h3>Conversations Become Context</h3>
                    <p>Every discussion with AI gets automatically saved as reusable context. Your best explanations become templates for future conversations.</p>
                </div>
                <div class="showcase-item">
                    <div class="showcase-icon">🔍</div>
                    <h3>Smart Search & Discovery</h3>
                    <p>Find relevant context instantly. RecCall uses AI to understand what you're working on and surfaces the right information automatically.</p>
                </div>
                <div class="showcase-item">
                    <div class="showcase-icon">👥</div>
                    <h3>Team-Wide Knowledge</h3>
                    <p>Share context across your team. New members and AI assistants get instant access to accumulated project knowledge.</p>
                </div>
                <div class="showcase-item">
                    <div class="showcase-icon">🔌</div>
                    <h3>Works With Your Tools</h3>
                    <p>Integrates seamlessly with Cursor, VS Code, Warp terminal, and more. No workflow changes required.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Real-World Impact -->
    <section class="section section-alt">
        <div class="container">
            <h2 class="section-title">Real-World Impact</h2>
            <div class="impact-grid">
                <div class="impact-card">
                    <div class="impact-number">85%</div>
                    <h3>Faster Onboarding</h3>
                    <p>New team members become productive in hours instead of days. AI assistants understand your project from the first conversation.</p>
                </div>
                <div class="impact-card">
                    <div class="impact-number">60%</div>
                    <h3>Fewer Mistakes</h3>
                    <p>Consistent context means AI suggestions align with your architecture and coding standards. Fewer rewrites, more right answers.</p>
                </div>
                <div class="impact-card">
                    <div class="impact-number">3x</div>
                    <h3>Better AI Responses</h3>
                    <p>With full context, AI assistants provide more relevant suggestions that actually match your project's needs.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CLI Demo Section -->
    <section class="section section-alt">
        <div class="container">
            <h2 class="section-title">Try It Now - Quick Start</h2>
            <p class="section-intro" style="text-align: center; max-width: 700px; margin: 0 auto 2rem;">
                Get started in seconds with these essential commands. Install once, use everywhere.
            </p>

            <div style="max-width: 900px; margin: 0 auto;">
                <div class="cli-demo">
                    <div class="cli-header">
                        <span class="cli-dot cli-dot-red"></span>
                        <span class="cli-dot cli-dot-yellow"></span>
                        <span class="cli-dot cli-dot-green"></span>
                        <span class="cli-title">Terminal</span>
                    </div>

                    <div class="cli-section">
                        <div class="cli-section-title">⚡ Quick Commands</div>
                        <div class="cli-line">
                            <span class="cli-prompt">$</span>
                            <span class="cli-command">npm install -g reccall</span>
                        </div>
                        <div class="cli-output cli-output-success">✅ Installed! Cursor auto-configured.</div>

                        <div class="cli-line" style="margin-top: 1rem;">
                            <span class="cli-prompt">$</span>
                            <span class="cli-command">reccall rec api-testing "Use Jest for testing, mock external APIs"</span>
                        </div>
                        <div class="cli-output cli-output-success">✅ Shortcut 'api-testing' recorded!</div>

                        <div class="cli-line" style="margin-top: 1rem;">
                            <span class="cli-prompt">$</span>
                            <span class="cli-command">reccall list</span>
                        </div>
                        <div class="cli-output">
                            <div class="cli-output-info">📋 Your shortcuts:</div>
                            <div class="cli-output">• api-testing: Use Jest for testing...</div>
                            <div class="cli-output">• sync-main: Sync main branch...</div>
                        </div>

                        <div class="cli-line" style="margin-top: 1rem;">
                            <span class="cli-prompt">$</span>
                            <span class="cli-command">reccall call api-testing</span>
                        </div>
                        <div class="cli-output cli-output-highlight">
                            EXECUTE: Use Jest for testing, mock external APIs
                        </div>
                    </div>
                </div>

                <div style="text-align: center; margin-top: 2rem;">
                    <a href="pages/getting-started.html" class="btn btn-primary">View Complete Guide →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Preview -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">Built For Teams Like Yours</h2>
            <div class="use-cases-preview">
                <div class="use-case-card">
                    <h3>🚀 Startup Teams</h3>
                    <p>Scale knowledge as you grow. Every team member benefits from shared context, making AI assistance consistent across the organization.</p>
                </div>
                <div class="use-case-card">
                    <h3>🏢 Enterprise Teams</h3>
                    <p>Maintain context across complex codebases with multiple repositories. AI assistants understand your entire system architecture.</p>
                </div>
                <div class="use-case-card">
                    <h3>👨‍💻 Solo Developers</h3>
                    <p>Your personal AI memory. Never lose track of important decisions, and get better AI help on long-running projects.</p>
                </div>
            </div>
            <div class="text-center" style="margin-top: 3rem;">
                <a href="pages/use-cases.html" class="btn btn-secondary">Explore More Use Cases →</a>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <div class="container">
            <h2 class="cta-title">Start Saving Time Today</h2>
            <p class="cta-subtitle">Get started in under 2 minutes. No credit card required.</p>
            <div class="cta-buttons">
                <a href="pages/getting-started.html" class="btn btn-primary">Install RecCall</a>
                <a href="pages/integrations.html" class="btn btn-secondary">View Integrations</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
                        <img src="assets/images/reccaller-icon-200.png" alt="RecCall" height="24" width="24" style="opacity: 0.9;">
                        <span style="font-size: 1.25rem; font-weight: 700; color: var(--gray-700);">RecCall</span>
                    </div>
                    <p>Stop repeating yourself to AI. Remember everything.</p>
                </div>
                <div class="footer-section">
                    <h4>Product</h4>
                    <ul>
                        <li><a href="pages/use-cases.html">Use Cases</a></li>
                        <li><a href="pages/integrations.html">Integrations</a></li>
                        <li><a href="pages/how-it-works.html">How It Works</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>Resources</h4>
                    <ul>
                        <li><a href="pages/getting-started.html">Getting Started</a></li>
                        <li><a href="https://github.com/reccaller-ai/reccall">GitHub</a></li>
                        <li><a href="https://github.com/reccaller-ai/reccall/blob/main/docs/README.md">Documentation</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 RecCall. Open source under MIT License.</p>
            </div>
        </div>
    </footer>

    <!-- Research Sources Section -->
    <section id="research-sources" class="section section-alt" style="padding: 2rem 0; font-size: 0.875rem; color: var(--gray-600); border-top: 1px solid var(--gray-200);">
        <div class="container">
            <h3 style="font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--gray-900);">Research Sources & Data Citations</h3>
            <div style="line-height: 1.8;">
                <p style="margin-bottom: 0.75rem;">
                    <sup>1</sup> <strong>2-3 hours per day wasted:</strong> Based on context switching research (Mark et al., 2005) showing 23-minute recovery time per interruption, and analysis of AI assistant usage patterns where developers have 5-10 conversations per day requiring context re-establishment. See:
                    <a href="https://github.com/reccaller-ai/reccall/blob/main/docs/RESEARCH_DATA_SOURCES.md" target="_blank" style="color: var(--blue-600); text-decoration: underline;">Research Data Sources</a>
                </p>
                <p style="margin-bottom: 0.75rem;">
                    <sup>2</sup> <strong>70% time saved:</strong> Based on productivity improvement studies showing context switching reduction can improve productivity by 40-70%, and correlation with GitHub Copilot study (Microsoft Research, 2022) showing 55% faster coding with AI assistance. RecCall addresses the context management gap. See:
                    <a href="https://github.com/reccaller-ai/reccall/blob/main/docs/RESEARCH_DATA_SOURCES.md" target="_blank" style="color: var(--blue-600); text-decoration: underline;">Research Data Sources</a>
                </p>
                <p style="margin-bottom: 0.75rem;">
                    <sup>3</sup> <strong>$50K+ annual value:</strong> Calculated based on average US developer salary (~$130,000/year, BLS 2024), time savings of 500+ hours/year (2-3 hours/day × 220 working days), plus additional productivity benefits. Calculation: 500 hours × $62.50/hour + productivity gains = $50,000+ per developer annually. See:
                    <a href="https://github.com/reccaller-ai/reccall/blob/main/docs/RESEARCH_DATA_SOURCES.md" target="_blank" style="color: var(--blue-600); text-decoration: underline;">Research Data Sources</a>
                </p>
                <p style="margin-top: 1rem; font-size: 0.8125rem; color: var(--gray-500);">
                    <em>Note: Statistics are based on industry research and conservative estimates. See the <a href="https://github.com/reccaller-ai/reccall/blob/main/docs/RESEARCH_DATA_SOURCES.md" target="_blank" style="color: var(--blue-600); text-decoration: underline;">full research document</a> for detailed methodology, sources, and references.</em>
                </p>
            </div>
        </div>
    </section>
</body>
</html>