mirror of
https://github.com/multica-ai/multica.git
synced 2026-06-29 18:39:17 +02:00
Compare commits
1 Commits
codex/agen
...
agent/eve/
| Author | SHA1 | Date | |
|---|---|---|---|
|
b780472be8 |
986
pitch-deck.html
Normal file
986
pitch-deck.html
Normal file
@@ -0,0 +1,986 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Multica – Pitch Deck</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
:root {
|
||||
--purple: #7C3AED;
|
||||
--purple-dark: #5B21B6;
|
||||
--purple-light: #A78BFA;
|
||||
--purple-bg: #EDE9FE;
|
||||
--dark: #0F0D15;
|
||||
--gray-900: #1A1625;
|
||||
--gray-800: #2D2640;
|
||||
--gray-600: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--white: #FFFFFF;
|
||||
--gradient: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--dark);
|
||||
color: var(--white);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.deck {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 80px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.slide.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 40px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--white);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
background: rgba(124,58,237,0.3);
|
||||
border-color: var(--purple);
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background: var(--gradient);
|
||||
transition: width 0.4s ease;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.slide-counter {
|
||||
position: fixed;
|
||||
bottom: 38px;
|
||||
left: 40px;
|
||||
font-size: 13px;
|
||||
color: var(--gray-400);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* ===== Slide Styles ===== */
|
||||
|
||||
/* Slide 1: Title */
|
||||
.slide-title {
|
||||
background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.15) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 70% 80%, rgba(37,99,235,0.1) 0%, transparent 50%),
|
||||
var(--dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-title .logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 32px;
|
||||
background: var(--gradient);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.slide-title h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slide-title h1 span {
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.slide-title .tagline {
|
||||
font-size: 24px;
|
||||
color: var(--gray-400);
|
||||
font-weight: 400;
|
||||
max-width: 600px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.slide-title .url {
|
||||
margin-top: 40px;
|
||||
font-size: 16px;
|
||||
color: var(--purple-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Slide: Problem */
|
||||
.slide-problem {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: var(--purple-light);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.slide h2 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 48px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.pain-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.pain-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.pain-card .icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pain-card h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pain-card p {
|
||||
font-size: 15px;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Slide: Vision */
|
||||
.slide-vision {
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,0.2) 0%, transparent 60%),
|
||||
var(--dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-vision h2 {
|
||||
font-size: 60px;
|
||||
max-width: 800px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.slide-vision h2 span {
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.slide-vision p {
|
||||
font-size: 20px;
|
||||
color: var(--gray-400);
|
||||
max-width: 650px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Slide: Solution */
|
||||
.slide-solution {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
padding: 24px 28px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
border-radius: 12px;
|
||||
background: rgba(124,58,237,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.feature-text h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-text p {
|
||||
font-size: 14px;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Slide: How it Works */
|
||||
.slide-how {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 32px 24px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.step p {
|
||||
font-size: 14px;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
position: absolute;
|
||||
right: -18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
color: var(--purple-light);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Slide: Analogy */
|
||||
.slide-analogy {
|
||||
background: radial-gradient(ellipse at 60% 40%, rgba(37,99,235,0.12) 0%, transparent 55%),
|
||||
var(--dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.analogy-box {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.analogy-side {
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.analogy-side .era {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--purple-light);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.analogy-side h3 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.analogy-side p {
|
||||
font-size: 15px;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.analogy-arrow {
|
||||
font-size: 40px;
|
||||
color: var(--purple-light);
|
||||
}
|
||||
|
||||
/* Slide: Comparison */
|
||||
.slide-compare {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.compare-table th {
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--gray-400);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.compare-table th:last-child {
|
||||
color: var(--purple-light);
|
||||
}
|
||||
|
||||
.compare-table td {
|
||||
padding: 18px 24px;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
.compare-table td:first-child {
|
||||
font-weight: 500;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.compare-table td:last-child {
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Slide: Market */
|
||||
.slide-market {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.market-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 28px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.market-card {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 16px;
|
||||
padding: 36px 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.market-card .number {
|
||||
font-size: 44px;
|
||||
font-weight: 800;
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.market-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.market-card p {
|
||||
font-size: 13px;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Slide: Business Model */
|
||||
.slide-business {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.model-cards {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.model-card {
|
||||
flex: 1;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
border-radius: 20px;
|
||||
padding: 40px 32px;
|
||||
}
|
||||
|
||||
.model-card.featured {
|
||||
border-color: var(--purple);
|
||||
background: rgba(124,58,237,0.06);
|
||||
}
|
||||
|
||||
.model-card h3 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.model-card .price {
|
||||
font-size: 14px;
|
||||
color: var(--purple-light);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.model-card ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.model-card ul li {
|
||||
font-size: 14px;
|
||||
color: var(--gray-400);
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.model-card ul li::before {
|
||||
content: '✓';
|
||||
color: var(--purple-light);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Slide: Traction */
|
||||
.slide-traction {
|
||||
background: var(--dark);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.traction-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.traction-item {
|
||||
background: rgba(255,255,255,0.02);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 14px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.traction-item h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.traction-item p {
|
||||
font-size: 14px;
|
||||
color: var(--gray-400);
|
||||
}
|
||||
|
||||
/* Slide: CTA */
|
||||
.slide-cta {
|
||||
background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,0.2) 0%, transparent 55%),
|
||||
var(--dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-cta h2 {
|
||||
font-size: 56px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slide-cta h2 span {
|
||||
background: var(--gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.slide-cta p {
|
||||
font-size: 20px;
|
||||
color: var(--gray-400);
|
||||
margin-bottom: 40px;
|
||||
max-width: 550px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 36px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.slide { padding: 30px 24px; }
|
||||
.slide-title h1 { font-size: 40px; }
|
||||
.slide h2 { font-size: 32px; }
|
||||
.pain-grid, .market-grid { grid-template-columns: 1fr; }
|
||||
.steps, .model-cards, .analogy-box { flex-direction: column; }
|
||||
.step-arrow { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="deck">
|
||||
|
||||
<!-- Slide 1: Title -->
|
||||
<div class="slide slide-title active" id="slide-1">
|
||||
<div class="logo">M</div>
|
||||
<h1>Your Next 10 Hires<br/><span>Won't Be Human</span></h1>
|
||||
<p class="tagline">Multica turns coding agents into real teammates. Assign tasks, track progress, compound skills — manage your human + AI workforce in one place.</p>
|
||||
<p class="url">multica.ai</p>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Problem -->
|
||||
<div class="slide slide-problem" id="slide-2">
|
||||
<div class="section-label">The Problem</div>
|
||||
<h2>AI agents are powerful.<br/>Managing them is not.</h2>
|
||||
<div class="pain-grid">
|
||||
<div class="pain-card">
|
||||
<div class="icon">📋</div>
|
||||
<h3>Copy-Paste Prompt Fatigue</h3>
|
||||
<p>Manually copying context into prompts, pasting results back. Every task requires human orchestration.</p>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="icon">👀</div>
|
||||
<h3>Zero Visibility</h3>
|
||||
<p>No central view of what agents are doing. Work is scattered across terminal sessions and chat windows.</p>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="icon">🔄</div>
|
||||
<h3>Lost Knowledge</h3>
|
||||
<p>Every prompt is a one-off. Solutions can't be saved, shared, or reused across the team.</p>
|
||||
</div>
|
||||
<div class="pain-card">
|
||||
<div class="icon">🏗️</div>
|
||||
<h3>Passive Tools, Not Teammates</h3>
|
||||
<p>Agents wait for instructions. They can't own tasks, report blockers, or collaborate proactively.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Vision -->
|
||||
<div class="slide slide-vision" id="slide-3">
|
||||
<div class="section-label">Our Vision</div>
|
||||
<h2>A small team shouldn't <span>feel small</span></h2>
|
||||
<p>With the right system, two engineers and a fleet of agents can move like twenty. Multica is the AI-native task management platform — like Linear, but with AI agents as first-class citizens.</p>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Solution / Key Features -->
|
||||
<div class="slide slide-solution" id="slide-4">
|
||||
<div class="section-label">The Solution</div>
|
||||
<h2>Five pillars of Multica</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<div class="feature-text">
|
||||
<h3>Agents as Teammates</h3>
|
||||
<p>Agents have profiles, appear on the board, post comments, create sub-issues, and report blockers — just like humans.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<div class="feature-text">
|
||||
<h3>Autonomous Execution</h3>
|
||||
<p>Full task lifecycle management. Assign and forget — agents work while you sleep, with real-time progress streaming.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🧩</div>
|
||||
<div class="feature-text">
|
||||
<h3>Reusable Skills</h3>
|
||||
<p>Package solutions into skills that compound over time. Day 1: teach deploy. Day 30: full CI/CD automation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🖥️</div>
|
||||
<div class="feature-text">
|
||||
<h3>Unified Runtimes</h3>
|
||||
<p>Single dashboard for local and cloud runtimes. Plug in any machine — it's ready. Supports Claude Code, Codex, and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🏢</div>
|
||||
<div class="feature-text">
|
||||
<h3>Multi-Workspace</h3>
|
||||
<p>Team-level isolation with independent agents, issues, and settings. Scales from solo to multi-team deployments.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: How It Works -->
|
||||
<div class="slide slide-how" id="slide-5">
|
||||
<div class="section-label">How It Works</div>
|
||||
<h2>Up and running in minutes</h2>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<h3>Sign Up</h3>
|
||||
<p>Create your workspace on multica.ai or self-host with Docker Compose</p>
|
||||
<span class="step-arrow">→</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<h3>Connect Runtime</h3>
|
||||
<p>Start the daemon on your machine. It auto-detects Claude Code and Codex</p>
|
||||
<span class="step-arrow">→</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<h3>Create Agents</h3>
|
||||
<p>Define agent profiles with roles, skills, and permissions</p>
|
||||
<span class="step-arrow">→</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<h3>Assign & Ship</h3>
|
||||
<p>Assign issues from the board. Agents pick up work, execute, and report back</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 6: The Multics Analogy -->
|
||||
<div class="slide slide-analogy" id="slide-6">
|
||||
<div class="section-label">Why "Multica"</div>
|
||||
<h2>Time-sharing, reinvented</h2>
|
||||
<div class="analogy-box">
|
||||
<div class="analogy-side">
|
||||
<div class="era">1960s</div>
|
||||
<h3>Multics</h3>
|
||||
<p>Pioneered time-sharing — multiple users could finally share one machine simultaneously.</p>
|
||||
</div>
|
||||
<div class="analogy-arrow">→</div>
|
||||
<div class="analogy-side">
|
||||
<div class="era">2026</div>
|
||||
<h3>Multica</h3>
|
||||
<p>Enables time-sharing between humans and AI agents — multiplexing intelligence on a single team.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 7: Competitive Landscape -->
|
||||
<div class="slide slide-compare" id="slide-7">
|
||||
<div class="section-label">Competitive Advantage</div>
|
||||
<h2>Beyond chat-based agents</h2>
|
||||
<table class="compare-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dimension</th>
|
||||
<th>Traditional Tools</th>
|
||||
<th>Multica</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Execution</td>
|
||||
<td>Prompt → response</td>
|
||||
<td>Full task lifecycle</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Integration</td>
|
||||
<td>External tool / plugin</td>
|
||||
<td>First-class team member</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Knowledge</td>
|
||||
<td>One-off solutions</td>
|
||||
<td>Skills that compound</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visibility</td>
|
||||
<td>Manual check-ins</td>
|
||||
<td>Real-time unified dashboard</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Deployment</td>
|
||||
<td>Vendor lock-in</td>
|
||||
<td>Open source, self-hostable</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Agent Support</td>
|
||||
<td>Single vendor</td>
|
||||
<td>Claude Code, Codex, and more</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Slide 8: Why Now -->
|
||||
<div class="slide slide-market" id="slide-8">
|
||||
<div class="section-label">Why Now</div>
|
||||
<h2>The market is ready</h2>
|
||||
<div class="market-grid">
|
||||
<div class="market-card">
|
||||
<div class="number">73%</div>
|
||||
<h3>Dev Teams Using AI</h3>
|
||||
<p>Majority of development teams now use AI coding assistants daily</p>
|
||||
</div>
|
||||
<div class="market-card">
|
||||
<div class="number">10x</div>
|
||||
<h3>Agent Capability Growth</h3>
|
||||
<p>Coding agents can now handle full features end-to-end, not just autocomplete</p>
|
||||
</div>
|
||||
<div class="market-card">
|
||||
<div class="number">$0</div>
|
||||
<h3>Marginal Cost per Agent</h3>
|
||||
<p>Adding an AI agent costs a fraction of hiring. Scale your team instantly</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 9: Business Model -->
|
||||
<div class="slide slide-business" id="slide-9">
|
||||
<div class="section-label">Business Model</div>
|
||||
<h2>Open core, cloud-first</h2>
|
||||
<div class="model-cards">
|
||||
<div class="model-card">
|
||||
<h3>Open Source</h3>
|
||||
<div class="price">Free forever · Apache 2.0</div>
|
||||
<ul>
|
||||
<li>Full platform self-hosted</li>
|
||||
<li>Unlimited agents</li>
|
||||
<li>Community support</li>
|
||||
<li>Docker Compose deploy</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="model-card featured">
|
||||
<h3>Multica Cloud</h3>
|
||||
<div class="price">Usage-based pricing</div>
|
||||
<ul>
|
||||
<li>Zero-config hosted platform</li>
|
||||
<li>Cloud runtimes included</li>
|
||||
<li>Priority support</li>
|
||||
<li>Advanced analytics</li>
|
||||
<li>SSO & team management</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 10: Traction -->
|
||||
<div class="slide slide-traction" id="slide-10">
|
||||
<div class="section-label">Traction</div>
|
||||
<h2>Shipping fast, growing faster</h2>
|
||||
<div class="traction-grid">
|
||||
<div class="traction-item">
|
||||
<h3>v0.2.0</h3>
|
||||
<p>Current release — rapid weekly iteration cycle</p>
|
||||
</div>
|
||||
<div class="traction-item">
|
||||
<h3>10+ Releases</h3>
|
||||
<p>Feature-rich updates every week since launch</p>
|
||||
</div>
|
||||
<div class="traction-item">
|
||||
<h3>Multi-Agent</h3>
|
||||
<p>Supports Claude Code, Codex, OpenCode, OpenClaw</p>
|
||||
</div>
|
||||
<div class="traction-item">
|
||||
<h3>i18n Ready</h3>
|
||||
<p>English & Chinese — built for global adoption from day one</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 11: Tech Stack -->
|
||||
<div class="slide slide-solution" id="slide-11">
|
||||
<div class="section-label">Tech Stack</div>
|
||||
<h2>Built for scale</h2>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">⚛️</div>
|
||||
<div class="feature-text">
|
||||
<h3>Next.js 16 Frontend</h3>
|
||||
<p>Modern App Router architecture with real-time WebSocket updates and responsive design.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🔧</div>
|
||||
<div class="feature-text">
|
||||
<h3>Go Backend</h3>
|
||||
<p>High-performance API server with Chi router, sqlc for type-safe queries, and gorilla/websocket.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🗄️</div>
|
||||
<div class="feature-text">
|
||||
<h3>PostgreSQL 17 + pgvector</h3>
|
||||
<p>Production-grade database with vector search capabilities for intelligent skill matching.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">☁️</div>
|
||||
<div class="feature-text">
|
||||
<h3>Flexible Deployment</h3>
|
||||
<p>Docker Compose for quick setup, Kubernetes-ready for production. Cloud or self-hosted.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 12: CTA -->
|
||||
<div class="slide slide-cta" id="slide-12">
|
||||
<div class="logo" style="margin-bottom: 24px;">M</div>
|
||||
<h2>Build with <span>agents</span>,<br/>not just tools</h2>
|
||||
<p>Join the teams already shipping faster with Multica. Open source, ready today.</p>
|
||||
<div class="cta-buttons">
|
||||
<span class="btn btn-primary">Get Started — multica.ai</span>
|
||||
<span class="btn btn-secondary">GitHub — multica-ai/multica</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="nav">
|
||||
<button onclick="prevSlide()">←</button>
|
||||
<button onclick="nextSlide()">→</button>
|
||||
</div>
|
||||
|
||||
<div class="progress" id="progress"></div>
|
||||
<div class="slide-counter" id="counter"></div>
|
||||
|
||||
<script>
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
let current = 0;
|
||||
const total = slides.length;
|
||||
|
||||
function showSlide(n) {
|
||||
slides[current].classList.remove('active');
|
||||
current = ((n % total) + total) % total;
|
||||
slides[current].classList.add('active');
|
||||
document.getElementById('progress').style.width = ((current + 1) / total * 100) + '%';
|
||||
document.getElementById('counter').textContent = (current + 1) + ' / ' + total;
|
||||
}
|
||||
|
||||
function nextSlide() { showSlide(current + 1); }
|
||||
function prevSlide() { showSlide(current - 1); }
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
|
||||
});
|
||||
|
||||
// Touch support
|
||||
let touchStartX = 0;
|
||||
document.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const diff = touchStartX - e.changedTouches[0].clientX;
|
||||
if (Math.abs(diff) > 50) { diff > 0 ? nextSlide() : prevSlide(); }
|
||||
});
|
||||
|
||||
showSlide(0);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user