-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
500 lines (483 loc) · 26.3 KB
/
index.html
File metadata and controls
500 lines (483 loc) · 26.3 KB
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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="OpenCollar.ai — Managed AI Employees for modern businesses. We build, deploy, and manage AI employees that do real work." />
<title>OpenCollar.ai — Hire an AI Employee</title>
<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="styles.css" />
</head>
<body>
<nav class="nav" id="nav">
<div class="nav-inner">
<a href="#" class="logo">OpenCollar<span class="logo-dot">.ai</span></a>
<div class="nav-links">
<a href="#solution">How It Works</a>
<a href="#differentiators">Why Us</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a href="#pricing" class="btn btn-sm">Get Started</a>
</div>
<button class="mobile-toggle" aria-label="Menu">☰</button>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-bg"></div>
<div class="container">
<div class="hero-content animate-in">
<div class="hero-badge">Managed AI Employees</div>
<h1 class="hero-headline">Hire an AI Employee</h1>
<p class="hero-sub">
As simple as hiring a human one. We build, deploy, and manage AI employees
that do real work — email, research, analysis, project management, and more.
</p>
<div class="hero-actions">
<a href="#pricing" class="btn btn-primary btn-lg">Get Started</a>
<a href="#solution" class="btn btn-ghost btn-lg">See How It Works</a>
</div>
<div class="hero-proof">
<span>Powered by frontier AI models</span>
<span class="divider">·</span>
<span>Up in <24 hours</span>
<span class="divider">·</span>
<span>Fully managed by us</span>
</div>
</div>
</div>
</section>
<!-- PROBLEM -->
<section class="section problem" id="problem">
<div class="container">
<div class="section-inner animate-on-scroll">
<div class="section-eyebrow">The Challenge</div>
<h2 class="section-title">AI Is Powerful.<br>Setting It Up Isn't.</h2>
<p class="section-body">
Setting up a capable AI agent today requires <strong>40+ hours of expert configuration</strong>,
ongoing technical maintenance, and deep knowledge of rapidly evolving tools.
Most businesses can't access this capability — even though they'd benefit most from it.
</p>
<div class="stats-row">
<div class="stat">
<span class="stat-number">40+</span>
<span class="stat-label">Hours to configure</span>
</div>
<div class="stat">
<span class="stat-number">∞</span>
<span class="stat-label">Ongoing maintenance</span>
</div>
<div class="stat">
<span class="stat-number">0</span>
<span class="stat-label">Time you have for this</span>
</div>
</div>
</div>
</div>
</section>
<!-- SOLUTION -->
<section class="section solution" id="solution">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">How It Works</div>
<h2 class="section-title">We Handle Everything</h2>
<p class="section-sub">Three steps. No technical expertise required.</p>
</div>
<div class="steps animate-on-scroll">
<div class="step">
<div class="step-number">01</div>
<div class="step-icon">🧑💼</div>
<h3 class="step-title">Hire</h3>
<p class="step-body">
Choose a role — Executive Assistant, CTO, CFO, Recruiter, Project Manager, and more.
We provision a fully equipped AI employee with their own email, calendar, tools, and workspace.
</p>
</div>
<div class="step-connector"></div>
<div class="step">
<div class="step-number">02</div>
<div class="step-icon">🎓</div>
<h3 class="step-title">Onboard</h3>
<p class="step-body">
Walk your new employee through your company's systems, processes, and preferences.
They learn and remember — just like a human hire.
</p>
</div>
<div class="step-connector"></div>
<div class="step">
<div class="step-number">03</div>
<div class="step-icon">⚡</div>
<h3 class="step-title">Manage</h3>
<p class="step-body">
Assign tasks, review work, provide feedback. Your AI employee collaborates alongside
your human team through familiar channels — email and chat.
</p>
</div>
</div>
</div>
</section>
<!-- CAPABILITIES -->
<section class="section capabilities" id="capabilities">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">What They Actually Do</div>
<h2 class="section-title">Everything a Remote Employee Does.<br><span class="accent">At a Fraction of the Cost.</span></h2>
<p class="section-sub">This isn't a chatbot. Your AI employee has real tools, real accounts, and does real work — autonomously.</p>
</div>
<div class="capabilities-grid animate-on-scroll">
<div class="capability">
<div class="capability-icon">📧</div>
<h3>Real Email on Your Domain</h3>
<p>Your employee gets a real email address — alex@yourcompany.com. They send, receive, and manage email just like any team member. No "sent by AI" disclaimers.</p>
</div>
<div class="capability">
<div class="capability-icon">💬</div>
<h3>Communicates with Your Team</h3>
<p>Emails colleagues, responds to customers, coordinates with vendors — following your rules about tone, escalation, and approvals.</p>
</div>
<div class="capability">
<div class="capability-icon">📄</div>
<h3>Creates Documents & Spreadsheets</h3>
<p>Works in Google Docs, Sheets, and Slides. Drafts reports, builds financial models, creates presentations — and shares them with your team.</p>
</div>
<div class="capability">
<div class="capability-icon">✅</div>
<h3>Executes Tasks Autonomously</h3>
<p>Assign a task and walk away. Your employee researches, drafts, reviews, and delivers — then reports back when it's done.</p>
</div>
<div class="capability">
<div class="capability-icon">📋</div>
<h3>Manages Complex Projects</h3>
<p>Breaks down projects into tasks, tracks progress, follows up with stakeholders, and keeps everything on schedule — without you micromanaging.</p>
</div>
<div class="capability">
<div class="capability-icon">🧠</div>
<h3>Remembers & Learns</h3>
<p>Every interaction makes them better. They remember your preferences, learn your processes, and get more effective over time — just like a human employee.</p>
</div>
</div>
</div>
</section>
<!-- REAL WORLD EXAMPLES -->
<section class="section examples" id="examples">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">See It In Action</div>
<h2 class="section-title">A Day in the Life</h2>
<p class="section-sub">Here's what your AI employee actually does — not what we promise, but what happens.</p>
</div>
<div class="examples-grid animate-on-scroll">
<div class="example-card">
<div class="example-header">
<div class="example-avatar">🎯</div>
<div>
<div class="example-name">Sam — AI Recruiter</div>
<div class="example-company">Hired by a 50-person SaaS startup</div>
</div>
</div>
<div class="example-trigger">
<div class="trigger-label">💬 CEO texts at 8:00 AM:</div>
<div class="trigger-message">"We need to hire 5 more engineers. Make it happen."</div>
</div>
<div class="example-timeline">
<div class="timeline-item">
<span class="timeline-time">8:15 AM</span>
<span class="timeline-event">Analyzes the existing engineering team's skills and gaps. Drafts 5 tailored job descriptions — optimized for each seniority level and specialty.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">8:45 AM</span>
<span class="timeline-event">Posts all 5 roles to LinkedIn, Indeed, Wellfound, and Hacker News. Creates A/B test variants of each posting to maximize application rates.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">10:30 AM</span>
<span class="timeline-event">Proactively sources 100+ candidates from public profiles matching the role criteria. Sends personalized outreach emails to the top 60.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">12:00 PM</span>
<span class="timeline-event">First wave of applications and replies coming in. Screens all 50+ applicants against technical requirements, culture fit signals, and salary expectations.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">1:00 PM</span>
<span class="timeline-event"><strong>Conducts live phone screenings</strong> with the top 30 candidates — asks role-specific technical and behavioral questions, scores responses, and records summaries.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">3:30 PM</span>
<span class="timeline-event">Runs reference checks on the top 15 candidates. Contacts previous employers, verifies employment history, collects feedback.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">4:30 PM</span>
<span class="timeline-event">Updates the ATS with full candidate profiles — resumes, screen scores, phone interview recordings, reference notes, and rankings.</span>
</div>
<div class="timeline-item timeline-item--result">
<span class="timeline-time">5:00 PM</span>
<span class="timeline-event"><strong>Emails the CEO:</strong> "Your top 10 candidates for 5 engineering roles are ready for review. Full profiles and phone interview recordings are in the ATS. Two candidates are exceptional — I recommend fast-tracking them to final interviews this week."</span>
</div>
</div>
<div class="example-result">
<span class="result-label">One text message. 9 hours. Result:</span> 5 job postings live, 100+ candidates sourced, 50 screened, 30 phone interviews, 15 reference checks, top 10 delivered.
</div>
</div>
<div class="example-card">
<div class="example-header">
<div class="example-avatar">💻</div>
<div>
<div class="example-name">Jordan — AI CTO</div>
<div class="example-company">Hired by a 15-person consulting firm</div>
</div>
</div>
<div class="example-trigger">
<div class="trigger-label">📅 Monday morning. No instructions needed.</div>
<div class="trigger-message">Jordan knows the routine — and handles the unexpected.</div>
</div>
<div class="example-timeline">
<div class="timeline-item">
<span class="timeline-time">7:00 AM</span>
<span class="timeline-event"><strong>Runs a full security audit</strong> of all company systems — scans for vulnerabilities, checks firewall rules, verifies SSL certs, reviews access logs. Flags one suspicious login attempt and locks the account.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">8:30 AM</span>
<span class="timeline-event">Employee emails: "My laptop won't connect to the VPN." Jordan <strong>remotes into the device</strong>, diagnoses a misconfigured DNS setting, fixes it, and replies: "Fixed. Try now." Total time: 4 minutes.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">9:30 AM</span>
<span class="timeline-event">CEO asks: "Can we build a client portal for project status updates?" Jordan <strong>designs the architecture, writes the code, and deploys a working prototype</strong> to a staging environment — all before lunch.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">12:00 PM</span>
<span class="timeline-event">Sends the CEO a link to the working prototype with a walkthrough video. Includes cost estimates for production deployment and a recommended hosting setup.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">1:30 PM</span>
<span class="timeline-event"><strong>Manages the full DevOps pipeline:</strong> reviews and merges 3 pull requests, runs the CI/CD suite, deploys the latest release to production, monitors for errors post-deploy.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">3:00 PM</span>
<span class="timeline-event">Network performance degraded. Jordan <strong>troubleshoots the local network</strong> — identifies a misconfigured switch, updates the routing table, and restores full throughput. Documents the fix.</span>
</div>
<div class="timeline-item">
<span class="timeline-time">4:00 PM</span>
<span class="timeline-event">New vendor contract arrives. Reads all 18 pages, identifies 4 problematic clauses (data ownership, SLA gaps, auto-renewal trap, liability cap), drafts a redline with suggested amendments.</span>
</div>
<div class="timeline-item timeline-item--result">
<span class="timeline-time">5:00 PM</span>
<span class="timeline-event"><strong>Sends weekly CTO report:</strong> Security audit clean (1 incident contained), 1 employee IT issue resolved, client portal prototype delivered, 3 deployments shipped, network issue fixed, vendor contract reviewed. Zero escalations needed.</span>
</div>
</div>
<div class="example-result">
<span class="result-label">No hand-holding. No tickets. Result:</span> Security audit, IT support, a working software prototype, DevOps management, network troubleshooting, and contract review — all in one day.
</div>
</div>
</div>
</div>
</section>
<!-- DIFFERENTIATORS -->
<section class="section differentiators" id="differentiators">
<div class="container">
<div class="diff-inner animate-on-scroll">
<div class="diff-text">
<div class="section-eyebrow">Why OpenCollar</div>
<h2 class="section-title">Not a chatbot.<br>Not a copilot.<br><span class="accent">An employee.</span></h2>
<p class="diff-sub">
Most AI tools assist you. OpenCollar employees work for you — with their own identity,
tools, memory, and the ability to collaborate with your whole team.
</p>
<ul class="diff-list">
<li><span class="diff-check">✓</span><span><strong>Own email address</strong> and persistent identity</span></li>
<li><span class="diff-check">✓</span><span><strong>Own computer</strong> with browser, terminal, and tools</span></li>
<li><span class="diff-check">✓</span><span><strong>Persistent memory</strong> that grows over time</span></li>
<li><span class="diff-check">✓</span><span><strong>Collaborative</strong> — works with AI and human teammates</span></li>
<li><span class="diff-check">✓</span><span><strong>Self-improving</strong> — learns from feedback and corrections</span></li>
<li><span class="diff-check">✓</span><span><strong>Fully managed</strong> — maintenance and updates handled by us</span></li>
</ul>
</div>
<div class="diff-visual">
<div class="employee-card">
<div class="employee-avatar">
<div class="avatar-inner">AI</div>
<div class="status-dot"></div>
</div>
<div class="employee-info">
<div class="employee-name">Alex Chen</div>
<div class="employee-role">Executive Assistant</div>
<div class="employee-email">alex@yourcompany.com</div>
</div>
<div class="employee-tags">
<span class="tag">Email</span>
<span class="tag">Calendar</span>
<span class="tag">Research</span>
<span class="tag">Docs</span>
</div>
<div class="employee-status"><span class="pulse"></span> Working now</div>
</div>
</div>
</div>
</div>
</section>
<!-- USE CASES -->
<section class="section use-cases" id="roles">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">Roles Available</div>
<h2 class="section-title">Find the Right Hire</h2>
<p class="section-sub">Every role comes fully provisioned and ready on day one.</p>
</div>
<div class="roles-grid animate-on-scroll">
<div class="role-card"><div class="role-icon">📋</div><h3>Executive Assistant</h3><p>Manages your inbox, calendar, travel, and executive communications.</p></div>
<div class="role-card"><div class="role-icon">💻</div><h3>CTO / IT</h3><p>Handles technical research, vendor evaluation, and IT operations.</p></div>
<div class="role-card"><div class="role-icon">💰</div><h3>CFO / Finance</h3><p>Manages reporting, budget tracking, and financial analysis.</p></div>
<div class="role-card"><div class="role-icon">🎯</div><h3>Recruiter</h3><p>Sources candidates, screens resumes, and coordinates interviews.</p></div>
<div class="role-card"><div class="role-icon">📊</div><h3>Project Manager</h3><p>Tracks progress, coordinates tasks, and keeps projects on schedule.</p></div>
<div class="role-card"><div class="role-icon">🤝</div><h3>Customer Success</h3><p>Onboards customers, handles support, and monitors account health.</p></div>
<div class="role-card"><div class="role-icon">📣</div><h3>Marketing</h3><p>Drafts content, runs campaigns, and tracks performance metrics.</p></div>
<div class="role-card role-card--cta"><div class="role-icon">✨</div><h3>Custom Role</h3><p>Don't see what you need? We'll build the right employee for your team.</p><a href="mailto:hello@opencollar.ai" class="btn btn-outline btn-sm">Talk to Us</a></div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section pricing" id="pricing">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">Pricing</div>
<h2 class="section-title">Simple, Predictable Pricing</h2>
<p class="section-sub">One AI employee, one price. No hidden fees. No long-term contracts. Pay month-to-month and cancel anytime.</p>
</div>
<div class="pricing-cards animate-on-scroll">
<div class="pricing-card">
<div class="pricing-name">Standard</div>
<div class="pricing-price"><span class="price-amount">$500</span><span class="price-period">/mo per AI employee</span></div>
<p class="pricing-desc">Business hours coverage for steady-state operations.</p>
<ul class="pricing-features">
<li>50 hours/week working time (M–F, 7am–5pm)</li>
<li>Full ops setup and management</li>
<li>Health checks, upgrades, and maintenance</li>
<li>Frontier AI models (Claude, GPT)</li>
<li>Email and chat communication</li>
<li>Persistent memory and learning</li>
<li>No long-term contract — cancel anytime</li>
</ul>
<a href="mailto:hello@opencollar.ai?subject=Standard%20Plan%20Inquiry" class="btn btn-primary btn-block">Get Started</a>
</div>
<div class="pricing-card pricing-card--featured">
<div class="pricing-badge">Most Popular</div>
<div class="pricing-name">24/7</div>
<div class="pricing-price"><span class="price-amount">$800</span><span class="price-period">/mo per AI employee</span></div>
<p class="pricing-desc">Round-the-clock availability for always-on operations.</p>
<ul class="pricing-features">
<li>Everything in Standard</li>
<li>24/7/365 availability</li>
<li>Higher token allocation</li>
<li>Priority support</li>
<li>Extended working memory</li>
<li>Multi-timezone operations</li>
<li>No long-term contract — cancel anytime</li>
</ul>
<a href="mailto:hello@opencollar.ai?subject=24/7%20Plan%20Inquiry" class="btn btn-primary btn-block">Get Started</a>
</div>
</div>
<div class="pricing-guarantee animate-on-scroll">
<div class="guarantee-badge">🛡️</div>
<h3>30-Day Money-Back Guarantee</h3>
<p>Not satisfied with your AI employee after the first month? We'll refund your money. No questions asked. No risk.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section faq" id="faq">
<div class="container">
<div class="animate-on-scroll">
<div class="section-eyebrow">FAQ</div>
<h2 class="section-title">Common Questions</h2>
</div>
<div class="faq-list animate-on-scroll">
<details class="faq-item">
<summary>How does my AI employee communicate?</summary>
<p>Via email and chat, just like a human colleague. Your employee gets their own email address and can participate in group conversations alongside your team.</p>
</details>
<details class="faq-item">
<summary>What can it access?</summary>
<p>Email, calendar, documents, web search, and any tools you provision — just like setting up a new hire's accounts. Each employee has their own computer with a browser, terminal, and workspace.</p>
</details>
<details class="faq-item">
<summary>Is my data private?</summary>
<p>Each employee runs on fully isolated infrastructure. Your data never touches another customer's systems. Standard enterprise security controls apply.</p>
</details>
<details class="faq-item">
<summary>How long does setup take?</summary>
<p>Less than 24 hours from signup to a working employee. We handle all the technical setup — you just onboard them on your company's processes.</p>
</details>
<details class="faq-item">
<summary>Can I train it on our processes?</summary>
<p>Yes. Upload documents, walk through processes in conversation, provide corrections — your employee learns and retains. Training becomes durable skills, not ephemeral chat context.</p>
</details>
<details class="faq-item">
<summary>What AI models does it use?</summary>
<p>We use frontier models including Claude (Anthropic) and GPT (OpenAI). Your employee automatically uses the best available model for each task, with fallback chains for reliability.</p>
</details>
<details class="faq-item">
<summary>Can I have multiple AI employees?</summary>
<p>Absolutely. Hire as many as you need — they can even collaborate with each other and with your human team on shared projects.</p>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="section cta" id="cta">
<div class="container">
<div class="cta-inner animate-on-scroll">
<h2 class="cta-title">Ready to hire your first AI employee?</h2>
<p class="cta-sub">Get a fully equipped, managed AI employee working for you in less than 24 hours.</p>
<a href="mailto:hello@opencollar.ai?subject=I%20want%20to%20hire%20an%20AI%20employee" class="btn btn-primary btn-lg">Get Started Today</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="footer-inner">
<div class="footer-brand">
<a href="#" class="logo">OpenCollar<span class="logo-dot">.ai</span></a>
<p class="footer-tagline">A Fieldcrest Ventures Company</p>
</div>
<div class="footer-links">
<a href="mailto:hello@opencollar.ai">Contact</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 OpenCollar.ai. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
const target = document.querySelector(a.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
// Scroll animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
// Nav background on scroll
window.addEventListener('scroll', () => {
document.getElementById('nav').classList.toggle('scrolled', window.scrollY > 50);
});
// Mobile menu
const toggle = document.querySelector('.mobile-toggle');
const links = document.querySelector('.nav-links');
if (toggle) toggle.addEventListener('click', () => links.classList.toggle('open'));
</script>
</body>
</html>