mirror of
https://github.com/multica-ai/multica.git
synced 2026-06-17 03:38:32 +02:00
Add Multica pitch deck
Interactive HTML presentation covering problem, vision, solution (5 pillars), how it works, competitive positioning, market timing, business model, traction, tech stack, and CTA. Navigate with arrow keys or on-screen buttons. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Devv
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