<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide 8: Investment Requirements</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.slide-container {
flex: 1;
display: flex;
flex-direction: column;
padding: 40px 60px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}
.header {
text-align: center;
margin-bottom: 30px;
animation: fadeInDown 0.8s ease-out;
}
.main-title {
font-size: 52px;
font-weight: 700;
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 15px;
line-height: 1.1;
}
.subtitle {
font-size: 24px;
color: #e2e8f0;
font-weight: 400;
opacity: 0;
animation: fadeIn 1s ease-out 0.3s forwards;
}
.main-content {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 25px;
align-items: start;
margin-bottom: 20px;
}
.investment-pillar {
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 16px;
padding: 25px;
backdrop-filter: blur(10px);
height: fit-content;
transition: transform 0.3s ease;
animation: slideInUp 1s ease-out both;
}
.investment-pillar:nth-child(1) {
animation-delay: 0.5s;
border-top: 4px solid #10b981;
}
.investment-pillar:nth-child(2) {
animation-delay: 0.7s;
border-top: 4px solid #60a5fa;
}
.investment-pillar:nth-child(3) {
animation-delay: 0.9s;
border-top: 4px solid #a78bfa;
}
.investment-pillar:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(96, 165, 250, 0.2);
}
.pillar-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.pillar-icon {
font-size: 32px;
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.pillar-title {
font-size: 22px;
font-weight: 700;
color: #f59e0b;
}
.pillar-subtitle {
font-size: 14px;
color: #94a3b8;
margin-top: 5px;
}
.investment-total {
background: rgba(251, 191, 36, 0.1);
border-left: 4px solid #fbbf24;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
text-align: center;
}
.total-label {
font-size: 14px;
color: #fcd34d;
font-weight: 600;
margin-bottom: 5px;
}
.total-value {
font-size: 28px;
color: #fbbf24;
font-weight: 700;
}
.investment-list {
list-style: none;
}
.investment-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
margin-bottom: 10px;
opacity: 0;
animation: fadeInLeft 0.6s ease-out forwards;
}
.investment-item:nth-child(1) { animation-delay: 0.8s; }
.investment-item:nth-child(2) { animation-delay: 1.0s; }
.investment-item:nth-child(3) { animation-delay: 1.2s; }
.investment-item:nth-child(4) { animation-delay: 1.4s; }
.investment-item:nth-child(5) { animation-delay: 1.6s; }
.investment-item:nth-child(6) { animation-delay: 1.8s; }
.investment-item:last-child {
border-bottom: none;
}
.investment-detail {
flex: 1;
}
.investment-name {
font-size: 16px;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 5px;
}
.investment-description {
font-size: 14px;
color: #cbd5e1;
line-height: 1.4;
}
.investment-cost {
font-size: 16px;
font-weight: 700;
color: #10b981;
margin-left: 15px;
}
.team-investment {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}
.technology-investment {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.05) 100%);
}
.marketing-investment {
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
}
.roi-summary {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0f172a;
padding: 25px;
border-radius: 16px;
text-align: center;
font-weight: 700;
box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
animation: slideUp 0.8s ease-out 1.8s both;
}
.roi-title {
font-size: 28px;
margin-bottom: 15px;
}
.roi-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.roi-metric {
background: rgba(15, 23, 42, 0.8);
color: white;
padding: 20px;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.3);
}
.roi-metric-value {
font-size: 36px;
font-weight: 700;
color: #fbbf24;
display: block;
margin-bottom: 10px;
}
.roi-metric-label {
font-size: 14px;
color: #e2e8f0;
line-height: 1.3;
}
.investment-breakdown {
background: rgba(15, 23, 42, 0.8);
border-radius: 12px;
padding: 15px;
margin-top: 15px;
}
.breakdown-title {
font-size: 16px;
font-weight: 600;
color: #f59e0b;
margin-bottom: 10px;
}
.breakdown-item {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 14px;
}
.breakdown-label {
color: #cbd5e1;
}
.breakdown-value {
color: #10b981;
font-weight: 600;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-note {
position: absolute;
bottom: 20px;
right: 40px;
font-size: 14px;
color: #64748b;
font-style: italic;
}
</style>
</head>
<body>
<div class="slide-container">
<div class="header">
<h1 class="main-title">Investment Requirements</h1>
<p class="subtitle">Strategic investment for market leadership</p>
</div>
<div class="main-content">
<div class="investment-pillar team-investment">
<div class="pillar-header">
<div class="pillar-icon">👥</div>
<div>
<div class="pillar-title">Team Investment</div>
<div class="pillar-subtitle">Core Capabilities</div>
</div>
</div>
<div class="investment-total">
<div class="total-label">Total Investment</div>
<div class="total-value">$2.5M</div>
</div>
<ul class="investment-list">
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">5 MCP Architects</div>
<div class="investment-description">Senior-level MCP implementation specialists</div>
</div>
<div class="investment-cost">$750K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">10 Implementation Consultants</div>
<div class="investment-description">Mid-level project delivery resources</div>
</div>
<div class="investment-cost">$1.2M</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">3 Solution Architects</div>
<div class="investment-description">Enterprise architecture and design</div>
</div>
<div class="investment-cost">$540K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Additional Staff</div>
<div class="investment-description">Technical writers, DevRel, support</div>
</div>
<div class="investment-cost">$360K</div>
</li>
</ul>
</div>
<div class="investment-pillar technology-investment">
<div class="pillar-header">
<div class="pillar-icon">🖥️</div>
<div>
<div class="pillar-title">Technology Platform</div>
<div class="pillar-subtitle">Infrastructure & Tools</div>
</div>
</div>
<div class="investment-total">
<div class="total-label">Total Investment</div>
<div class="total-value">$800K</div>
</div>
<ul class="investment-list">
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">MCP Lab Environment</div>
<div class="investment-description">Development and testing infrastructure</div>
</div>
<div class="investment-cost">$250K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Security Testing Tools</div>
<div class="investment-description">Vulnerability and compliance testing</div>
</div>
<div class="investment-cost">$200K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Monitoring Infrastructure</div>
<div class="investment-description">Performance and reliability monitoring</div>
</div>
<div class="investment-cost">$180K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Development Toolchain</div>
<div class="investment-description">CI/CD, automation, and dev tools</div>
</div>
<div class="investment-cost">$170K</div>
</li>
</ul>
</div>
<div class="investment-pillar marketing-investment">
<div class="pillar-header">
<div class="pillar-icon">📢</div>
<div>
<div class="pillar-title">Marketing & Sales</div>
<div class="pillar-subtitle">Market Presence</div>
</div>
</div>
<div class="investment-total">
<div class="total-label">Total Investment</div>
<div class="total-value">$1.2M</div>
</div>
<ul class="investment-list">
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Conference Presence</div>
<div class="investment-description">Speaking, sponsorships, and events</div>
</div>
<div class="investment-cost">$400K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Content Creation</div>
<div class="investment-description">Thought leadership and marketing materials</div>
</div>
<div class="investment-cost">$300K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Partner Enablement</div>
<div class="investment-description">Channel programs and training</div>
</div>
<div class="investment-cost">$250K</div>
</li>
<li class="investment-item">
<div class="investment-detail">
<div class="investment-name">Sales Training</div>
<div class="investment-description">Team certification and enablement</div>
</div>
<div class="investment-cost">$250K</div>
</li>
</ul>
</div>
</div>
<div class="roi-summary">
<div class="roi-title">Investment ROI Summary</div>
<div class="roi-metrics">
<div class="roi-metric">
<span class="roi-metric-value">$4.5M</span>
<span class="roi-metric-label">Total Initial Investment</span>
</div>
<div class="roi-metric">
<span class="roi-metric-value">18 months</span>
<span class="roi-metric-label">Breakeven Timeline</span>
</div>
<div class="roi-metric">
<span class="roi-metric-value">400%</span>
<span class="roi-metric-label">ROI by Year 3</span>
</div>
</div>
</div>
</div>
<div class="footer-note">
MCP Investment Requirements - Strategic Foundation for Growth
</div>
</body>
</html>