262 lines
13 KiB
XML
262 lines
13 KiB
XML
|
<svg width="1200" height="650" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<!-- Modern Gradients -->
|
||
|
|
<linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="secondaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#0EA5E9;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="successGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="warningGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="flowLineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:0.3" />
|
||
|
|
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.7" />
|
||
|
|
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#F8FAFC;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#F1F5F9;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Filters -->
|
||
|
|
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="130%">
|
||
|
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#6366F1" flood-opacity="0.15"/>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<filter id="glowEffect" x="-30%" y="-30%" width="160%" height="160%">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Arrow markers -->
|
||
|
|
<marker id="arrowPrimary" markerWidth="12" markerHeight="12" refX="10" refY="4" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,8 L12,4 z" fill="#8B5CF6"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<marker id="arrowSuccess" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L10,3 z" fill="#10B981"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<!-- Dot pattern -->
|
||
|
|
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
|
||
|
|
<circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.1"/>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
|
||
|
|
.accent-text { fill: #6366F1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.title-text { fill: #F1F5F9; }
|
||
|
|
.main-text { fill: #E2E8F0; }
|
||
|
|
.secondary-text { fill: #94A3B8; }
|
||
|
|
.mono-text { fill: #CBD5E1; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<rect width="1200" height="650" fill="url(#bgGradient)"/>
|
||
|
|
<rect width="1200" height="650" fill="url(#dots)"/>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="600" y="45" text-anchor="middle" font-size="26" font-weight="700" class="title-text">Feature Parity Flow</text>
|
||
|
|
<text x="600" y="72" text-anchor="middle" font-size="14" class="secondary-text">From Enterprise Cloud Services to Self-Hosted Freedom</text>
|
||
|
|
|
||
|
|
<!-- Source Platform Box -->
|
||
|
|
<g transform="translate(50, 110)">
|
||
|
|
<rect x="0" y="0" width="300" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="300" height="50" rx="12" fill="url(#secondaryGradient)"/>
|
||
|
|
<rect x="0" y="38" width="300" height="12" fill="url(#secondaryGradient)"/>
|
||
|
|
<text x="150" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">Enterprise Cloud</text>
|
||
|
|
|
||
|
|
<!-- Service items -->
|
||
|
|
<g transform="translate(20, 70)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Exchange Online</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Mail, Calendar, Contacts</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 120)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">OneDrive / SharePoint</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Files, Versioning, Sharing</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 170)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Teams</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Chat, Video, Collaboration</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 220)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Power Automate</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Workflows, Triggers</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 270)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F1F5F9"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Copilot</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">AI Assistant ($30/user)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 320)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F8FAFC"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="#0078D4"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Azure AD / Entra</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Identity, Auth, SSO</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Migration Arrow Center -->
|
||
|
|
<g transform="translate(380, 250)">
|
||
|
|
<!-- Flow line -->
|
||
|
|
<path d="M0,60 Q220,60 440,60" stroke="url(#flowLineGradient)" stroke-width="4" fill="none" marker-end="url(#arrowPrimary)"/>
|
||
|
|
|
||
|
|
<!-- Migration badge -->
|
||
|
|
<rect x="170" y="20" width="100" height="80" rx="10" fill="url(#primaryGradient)" filter="url(#glowEffect)"/>
|
||
|
|
<text x="220" y="55" text-anchor="middle" font-size="11" font-weight="600" class="white-text">MIGRATE</text>
|
||
|
|
<text x="220" y="72" text-anchor="middle" font-size="10" class="white-text" opacity="0.8">100% Parity</text>
|
||
|
|
|
||
|
|
<!-- Checkmarks -->
|
||
|
|
<g transform="translate(190, 95)">
|
||
|
|
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
|
||
|
|
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
|
||
|
|
</g>
|
||
|
|
<g transform="translate(220, 95)">
|
||
|
|
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
|
||
|
|
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
|
||
|
|
</g>
|
||
|
|
<g transform="translate(250, 95)">
|
||
|
|
<circle cx="0" cy="0" r="10" fill="url(#successGradient)"/>
|
||
|
|
<path d="M-4,0 L-1,3 L5,-3" stroke="#FFF" stroke-width="2" fill="none"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Target Platform Box -->
|
||
|
|
<g transform="translate(850, 110)">
|
||
|
|
<rect x="0" y="0" width="300" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="300" height="50" rx="12" fill="url(#primaryGradient)"/>
|
||
|
|
<rect x="0" y="38" width="300" height="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="150" y="32" text-anchor="middle" font-size="16" font-weight="600" class="white-text">General Bots</text>
|
||
|
|
|
||
|
|
<!-- Service items -->
|
||
|
|
<g transform="translate(20, 70)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Stalwart Mail</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">IMAP/SMTP/JMAP + CalDAV</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 120)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">SeaweedFS Drive</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">S3-compatible + Versioning</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 170)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">LiveKit Meet</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">WebRTC + Multi-channel</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 220)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">BASIC Scripts</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">90+ Keywords + Cron</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 270)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#EEF2FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">LLM Integration</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">Any Provider (Free)</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g transform="translate(20, 320)">
|
||
|
|
<rect x="0" y="0" width="260" height="40" rx="6" fill="#F5F3FF"/>
|
||
|
|
<circle cx="20" cy="20" r="12" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="45" y="17" font-size="12" font-weight="600" class="main-text">Zitadel IAM</text>
|
||
|
|
<text x="45" y="32" font-size="10" class="mono-text">OIDC/OAuth2 + MFA</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Benefits Bar -->
|
||
|
|
<g transform="translate(50, 540)">
|
||
|
|
<rect x="0" y="0" width="1100" height="80" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
|
||
|
|
|
||
|
|
<!-- Benefit 1 -->
|
||
|
|
<g transform="translate(50, 15)">
|
||
|
|
<rect x="0" y="0" width="200" height="50" rx="8" fill="#ECFDF5"/>
|
||
|
|
<circle cx="25" cy="25" r="15" fill="url(#successGradient)"/>
|
||
|
|
<text x="22" y="30" text-anchor="middle" font-size="14" font-weight="700" class="white-text">✓</text>
|
||
|
|
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Self-Hosted</text>
|
||
|
|
<text x="55" y="38" font-size="10" class="secondary-text">Full Data Control</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Benefit 2 -->
|
||
|
|
<g transform="translate(280, 15)">
|
||
|
|
<rect x="0" y="0" width="200" height="50" rx="8" fill="#EEF2FF"/>
|
||
|
|
<circle cx="25" cy="25" r="15" fill="url(#primaryGradient)"/>
|
||
|
|
<text x="25" y="31" text-anchor="middle" font-size="14" font-weight="700" class="white-text">$0</text>
|
||
|
|
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">No Per-User Fee</text>
|
||
|
|
<text x="55" y="38" font-size="10" class="secondary-text">Unlimited Users</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Benefit 3 -->
|
||
|
|
<g transform="translate(510, 15)">
|
||
|
|
<rect x="0" y="0" width="200" height="50" rx="8" fill="#FEF3C7"/>
|
||
|
|
<circle cx="25" cy="25" r="15" fill="url(#warningGradient)"/>
|
||
|
|
<text x="25" y="31" text-anchor="middle" font-size="12" font-weight="700" class="white-text">AI</text>
|
||
|
|
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Native LLM</text>
|
||
|
|
<text x="55" y="38" font-size="10" class="secondary-text">Built-in RAG + Tools</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Benefit 4 -->
|
||
|
|
<g transform="translate(740, 15)">
|
||
|
|
<rect x="0" y="0" width="200" height="50" rx="8" fill="#F0FDF4"/>
|
||
|
|
<circle cx="25" cy="25" r="15" fill="url(#successGradient)"/>
|
||
|
|
<text x="25" y="31" text-anchor="middle" font-size="10" font-weight="700" class="white-text">OSS</text>
|
||
|
|
<text x="55" y="22" font-size="12" font-weight="600" class="main-text">Open Source</text>
|
||
|
|
<text x="55" y="38" font-size="10" class="secondary-text">AGPL Licensed</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Benefit 5 -->
|
||
|
|
<g transform="translate(970, 15)">
|
||
|
|
<rect x="0" y="0" width="80" height="50" rx="8" fill="#EEF2FF"/>
|
||
|
|
<text x="40" y="30" text-anchor="middle" font-size="20" font-weight="700" class="accent-text">90+</text>
|
||
|
|
<text x="40" y="45" text-anchor="middle" font-size="9" class="secondary-text">Keywords</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|