website/hub/services/templates/calculator/roi_calculator_help.html

526 lines
No EOL
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'base.html' %}
{% load static %}
{% block title %}ROI Calculator Help - Servala Investment Models{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
<style>
.help-section {
margin-bottom: 2rem;
}
.help-section h2 {
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.help-section h3 {
color: #28a745;
margin-top: 1.5rem;
}
.comparison-table {
font-size: 0.9rem;
}
.model-card {
border-left: 4px solid;
padding: 1rem;
margin-bottom: 1rem;
background: #f8f9fa;
}
.loan-model {
border-left-color: #ffc107;
}
.direct-model {
border-left-color: #28a745;
}
/* Enhanced navigation styling */
.list-group-item {
border: none !important;
font-size: 0.9rem;
transition: all 0.2s ease;
display: block !important;
width: 100% !important;
clear: both;
}
.list-group-flush {
display: flex !important;
flex-direction: column !important;
}
.list-group-item:hover {
background-color: #f8f9fa;
padding-left: 1rem !important;
}
.list-group-item.active {
background-color: #007bff;
color: white;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Section spacing */
.help-section {
scroll-margin-top: 2rem;
}
</style>
{% endblock %}
{% block content %}
<div class="container my-4">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1>ROI Calculator Help</h1>
<p class="text-muted">Understanding Servala's Investment Models</p>
</div>
<div>
<a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-primary">
<i class="bi bi-arrow-left"></i> Back to Calculator
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- Investment Scaling Benefits Section (MOST IMPORTANT) -->
<div class="help-section" id="investment-benefits">
<h2><i class="bi bi-graph-up text-primary"></i> Investment Benefits & Market-Realistic Returns</h2>
<div class="alert alert-info">
<h5><i class="bi bi-bar-chart"></i> Conservative Scaling Based on Industry Standards</h5>
<p class="mb-0">Our calculator uses proven, market-realistic scaling based on European managed services industry data. Returns are conservative and align with current investment expectations.</p>
</div>
<h3>Market-Realistic Investment Benefits</h3>
<div class="table-responsive">
<table class="table table-striped comparison-table">
<thead class="table-success">
<tr>
<th>Investment Amount</th>
<th>Instance Multiplier</th>
<th>Revenue Premium</th>
<th>Performance Bonus Cap</th>
<th>Grace Period Bonus</th>
<th>Expected 3-Year ROI</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>500,000</strong></td>
<td>1.0x</td>
<td>Standard rates</td>
<td>8%</td>
<td>Base period</td>
<td class="text-success"><strong>40-60%</strong></td>
</tr>
<tr class="table-warning">
<td><strong>1,000,000</strong></td>
<td><span class="text-primary">1.5x</span></td>
<td><span class="text-primary">+10% per instance</span></td>
<td>10%</td>
<td>+2 months</td>
<td class="text-success"><strong>60-80%</strong></td>
</tr>
<tr class="table-info">
<td><strong>1,500,000</strong></td>
<td><span class="text-success">1.8x</span></td>
<td><span class="text-success">+15% per instance</span></td>
<td>12%</td>
<td>+3 months</td>
<td class="text-success"><strong>70-90%</strong></td>
</tr>
<tr class="table-success">
<td><strong>2,000,000</strong></td>
<td><span class="text-success fw-bold">2.0x</span></td>
<td><span class="text-success fw-bold">+20% per instance</span></td>
<td><span class="text-success fw-bold">15%</span></td>
<td>+3 months</td>
<td class="text-success"><strong>80-100%</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Model Comparison Section -->
<div class="help-section" id="comparison">
<h2><i class="bi bi-bar-chart"></i> Investment Model Comparison</h2>
<div class="row">
<div class="col-md-6">
<div class="model-card loan-model">
<h5><i class="bi bi-bank"></i> Loan Model</h5>
<p><strong>3-8% Annual Returns</strong></p>
<p>Fixed interest lending with guaranteed monthly payments. Low risk, predictable returns.</p>
<ul class="text-muted small">
<li>Guaranteed monthly payments</li>
<li>No performance risk</li>
<li>Fixed 3-8% annual returns</li>
<li>Contractual protection</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="model-card direct-model">
<h5><i class="bi bi-rocket"></i> Direct Investment</h5>
<p><strong>40-100% Market-Realistic Returns</strong></p>
<p>Performance-based revenue sharing with conservative scaling and sustainable grace periods.</p>
<ul class="text-success small">
<li>Linear scaling up to 2.0x instances</li>
<li>Revenue premiums up to 20%</li>
<li>Performance bonuses up to 15%</li>
<li>Grace periods max 6 months</li>
</ul>
</div>
</div>
</div>
<h3>Direct Comparison - 3 Years ROI:</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Model</th>
<th>Risk Level</th>
<th>Expected ROI</th>
<th>Break-even</th>
<th>Profit Potential</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Loan Model (1M)</strong></td>
<td><span class="badge bg-success">Low</span></td>
<td>15-25% over 3 years</td>
<td>12-18 months</td>
<td>150,000 - 250,000</td>
</tr>
<tr class="table-warning">
<td><strong>Direct Investment (1M)</strong></td>
<td><span class="badge bg-warning">Moderate</span></td>
<td>60-80% over 3 years</td>
<td>18-24 months</td>
<td>600,000 - 800,000</td>
</tr>
<tr class="table-success">
<td><strong>Direct Investment (2M)</strong></td>
<td><span class="badge bg-danger">High</span></td>
<td>80-100% over 3 years</td>
<td>20-26 months</td>
<td>1,600,000 - 2,000,000</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Calculator Guide Section -->
<div class="help-section" id="calculator-guide">
<h2><i class="bi bi-calculator"></i> How to Use the Calculator</h2>
<h3>Quick Start Guide</h3>
<div class="row">
<div class="col-md-6">
<h5>Essential Settings</h5>
<ol>
<li><strong>Investment Amount:</strong> Use slider or type amount (100K - 2M)</li>
<li><strong>Timeframe:</strong> Choose 1-5 years for your projection</li>
<li><strong>Currency:</strong> Select CHF or EUR</li>
<li><strong>Growth Scenario:</strong> Enable scenarios that match your market</li>
</ol>
</div>
<div class="col-md-6">
<h5>Understanding Results</h5>
<ul>
<li><strong>Net Position:</strong> Your profit after investment</li>
<li><strong>ROI Percentage:</strong> Return on investment rate</li>
<li><strong>Investment Benefits:</strong> Real-time scaling display</li>
<li><strong>Break-even:</strong> When you start profiting</li>
</ul>
</div>
</div>
<h3>Advanced Parameters (Optional)</h3>
<div class="row">
<div class="col-md-6">
<ul>
<li><strong>Service Revenue/Instance:</strong> Monthly Servala service fee (20-200)</li>
<li><strong>Core Revenue/Instance:</strong> Additional infrastructure revenue (0-500)</li>
<li><strong>Loan Rate:</strong> Annual interest for loan model (3-8%)</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li><strong>Servala Share:</strong> Revenue split for direct investment (10-40%)</li>
<li><strong>Grace Period:</strong> 100% revenue retention period (0-24 months)</li>
<li><strong>Churn Rates:</strong> Customer loss by scenario (0-15%)</li>
</ul>
</div>
</div>
</div>
<!-- Growth Scenarios Section -->
<div class="help-section" id="scenarios">
<h2><i class="bi bi-speedometer2"></i> Growth Scenarios</h2>
<p>Choose the scenarios that best match your market conditions and sales capabilities:</p>
<div class="row">
<div class="col-md-4">
<div class="card border-success">
<div class="card-header bg-success text-white">
<h5 class="mb-0">Safe (Conservative)</h5>
</div>
<div class="card-body">
<p><strong>2.5% monthly churn</strong></p>
<p>Steady growth: 15-40 new instances/month</p>
<p>Best for: Established markets, risk-averse CSPs</p>
<p class=\"small text-muted\">~5-8 new clients/month × 3-5 instances each</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-warning">
<div class="card-header bg-warning text-white">
<h5 class="mb-0">Balanced (Moderate)</h5>
</div>
<div class="card-body">
<p><strong>3% monthly churn</strong></p>
<p>Balanced growth: 25-90 new instances/month</p>
<p>Best for: Competitive markets, balanced approach</p>
<p class=\"small text-muted\">~8-15 new clients/month × 3-6 instances each</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card border-danger">
<div class="card-header bg-danger text-white">
<h5 class="mb-0">Fast (Aggressive)</h5>
</div>
<div class="card-body">
<p><strong>3.5% monthly churn</strong></p>
<p>Rapid growth: 40-150 new instances/month</p>
<p>Best for: High-growth strategies, active sales</p>
<p class=\"small text-muted\">~12-25 new clients/month × 3-6 instances each</p>
</div>
</div>
</div>
</div>
</div>
<!-- Understanding Charts Section -->
<div class="help-section" id="charts">
<h2><i class="bi bi-graph-up"></i> Reading the Charts</h2>
<h3>Key Charts Explained</h3>
<div class="row">
<div class="col-md-6">
<h5>1. ROI Progression Over Time</h5>
<p>Shows when your investment becomes profitable and how returns develop monthly. Look for the point where lines cross zero.</p>
<h5>2. Net Financial Position</h5>
<p>Your cumulative profit/loss over time. Above zero = profitable, below zero = still recovering investment.</p>
</div>
<div class="col-md-6">
<h5>3. Performance Comparison</h5>
<p>ROI percentages across different growth scenarios - compare best and worst-case outcomes.</p>
<h5>4. CSP Revenue Breakdown</h5>
<p>Monthly revenue analysis showing service revenue, core revenue, CSP total, and Servala revenue share.</p>
</div>
</div>
<h4>Chart Legend</h4>
<ul>
<li><strong>Solid Lines:</strong> Direct Investment Model</li>
<li><strong>Dashed Lines:</strong> Loan Model</li>
<li><strong>Green:</strong> Conservative Scenario | <strong>Yellow:</strong> Moderate | <strong>Red:</strong> Aggressive</li>
</ul>
</div>
<!-- Market Context & Risk Factors Section -->
<div class=\"help-section\" id=\"market-context\">
<h2><i class=\"bi bi-exclamation-triangle text-warning\"></i> Market Context & Risk Factors</h2>
<div class=\"alert alert-warning\">
<h6><i class=\"bi bi-info-circle\"></i> Important Disclaimer</h6>
<p class=\"mb-0\">These projections are based on European managed services market data (13-15% CAGR) and current industry standards. Actual results may vary significantly based on market conditions, execution, and competitive factors.</p>
</div>
<h3>Key Risk Factors</h3>
<div class=\"row\">
<div class=\"col-md-6\">
<h5>Market Risks</h5>
<ul>
<li><strong>Competition:</strong> US hyperscalers (AWS, Azure, Google) may respond aggressively</li>
<li><strong>Market Maturity:</strong> European managed services adoption varies by region</li>
<li><strong>Economic Conditions:</strong> Recession or funding limitations could impact growth</li>
<li><strong>Regulatory Changes:</strong> Data sovereignty laws may change</li>
</ul>
</div>
<div class=\"col-md-6\">
<h5>Execution Risks</h5>
<ul>
<li><strong>Technology Development:</strong> Platform development may face delays</li>
<li><strong>Partner Adoption:</strong> CSPs may be slower to adopt than projected</li>
<li><strong>Talent Acquisition:</strong> Skilled technical resources are scarce</li>
<li><strong>Customer Churn:</strong> Actual churn rates may exceed projections</li>
</ul>
</div>
</div>
<h3>Conservative Scenario Modeling</h3>
<div class="table-responsive">
<table class="table table-striped comparison-table">
<thead class="table-success">
<tr>
<th>Scenario</th>
<th>Market Conditions</th>
<th>Expected Growth</th>
<th>Break-even Time</th>
<th>3-Year ROI Range</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<td><strong>Pessimistic</strong></td>
<td>Economic downturn, strong competition</td>
<td>5-10% annually</td>
<td>30-36 months</td>
<td>20-40%</td>
</tr>
<tr class="table-warning">
<td><strong>Realistic</strong></td>
<td>Normal market conditions</td>
<td>15-25% annually</td>
<td>18-24 months</td>
<td>50-80%</td>
</tr>
<tr class="table-success">
<td><strong>Optimistic</strong></td>
<td>Favorable market, rapid adoption</td>
<td>25-35% annually</td>
<td>12-18 months</td>
<td>80-120%</td>
</tr>
</tbody>
</table>
</div>
<div class=\"alert alert-info mt-3\">
<h6><i class=\"bi bi-lightbulb\"></i> Investment Recommendation</h6>
<p class=\"mb-0\">Consider these projections as best-case scenarios under favorable conditions. Prudent investors should plan for the \"Realistic\" scenario while hoping for \"Optimistic\" outcomes.</p>
</div>
</div>
<!-- Currency Support Section -->
<div class="help-section" id="currency-support">
<h2><i class="bi bi-cash-stack"></i> Currency Support</h2>
<div class="row">
<div class="col-md-6">
<h5><i class="bi bi-cash"></i> Swiss Franc (CHF) - Default</h5>
<ul>
<li>Swiss locale formatting (de-CH)</li>
<li>Traditional Swiss business format</li>
</ul>
</div>
<div class="col-md-6">
<h5><i class="bi bi-currency-euro"></i> Euro (EUR)</h5>
<ul>
<li>European locale formatting (de-DE)</li>
<li>EU business format compliance</li>
</ul>
</div>
</div>
<div class="alert alert-info mt-3">
<h6><i class="bi bi-info-circle"></i> Important</h6>
<p class="mb-0">Currency selection only changes display format - no conversion is performed. Enter all amounts in your chosen currency.</p>
</div>
</div>
<!-- Technical Details Section (LOWER PRIORITY) -->
<div class="help-section" id="technical-details">
<h2><i class="bi bi-gear"></i> Technical Details</h2>
<div class="row">
<div class="col-md-6">
<h4>Loan Model Details</h4>
<ul>
<li><strong>Payment Calculation:</strong> Standard amortization formula</li>
<li><strong>Interest Rates:</strong> 3-8% annually</li>
<li><strong>Risk Level:</strong> Very low - contractually guaranteed</li>
<li><strong>Break-even:</strong> Typically 12-18 months</li>
</ul>
<h5>Monthly Payment Formula</h5>
<code>Monthly Payment = P × [r(1+r)^n] / [(1+r)^n - 1]</code>
<p class="small text-muted mt-2">Where P = Principal, r = Monthly rate, n = Total payments</p>
</div>
<div class="col-md-6">
<h4>Direct Investment Details</h4>
<ul>
<li><strong>Revenue Streams:</strong> Service fees + Core infrastructure sales</li>
<li><strong>Performance Tracking:</strong> Automatic baseline comparison</li>
<li><strong>Grace Periods:</strong> 100% revenue retention periods</li>
<li><strong>Churn Reduction:</strong> Investment-based customer success</li>
</ul>
<h5>Performance Multiplier</h5>
<p>Automatically calculated: Actual instances ÷ Baseline instances</p>
<p class="text-muted small">1.0x = baseline, 1.5x = 50% above baseline, 2.0x = double baseline</p>
</div>
</div>
</div>
<!-- FAQ Section (LOWEST PRIORITY) -->
<div class="help-section" id="faq">
<h2><i class="bi bi-question-circle"></i> Frequently Asked Questions</h2>
<div class="row">
<div class="col-md-6">
<h5>Basic Questions</h5>
<h6>What does "Net Position" mean?</h6>
<p>Your profit after subtracting your initial investment. Positive = profitable.</p>
<h6>What is Core Service Revenue?</h6>
<p>Additional income from selling compute/storage per instance. <strong>100% retained by CSP</strong> - not shared with Servala.</p>
<h6>What happens during grace periods?</h6>
<p>You keep 100% of service revenue + all core revenue. Larger investments get longer grace periods.</p>
</div>
<div class="col-md-6">
<h5>Advanced Questions</h5>
<h6>How are performance bonuses calculated?</h6>
<p>Bonuses apply when you exceed 110% of baseline growth, providing up to 15% additional revenue share for large investments.</p>
<h6>What is the Performance Multiplier?</h6>
<p>Automatically calculated metric: actual results ÷ baseline expectations. Cannot be manually configured.</p>
<h6>How accurate are projections?</h6>
<p>Based on industry benchmarks and historical data, but actual results may vary with market conditions.</p>
</div>
</div>
</div>
<div class="text-center mt-5 mb-4">
<a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-success btn-lg me-3">
<i class="bi bi-calculator"></i> Start Calculating Your ROI
</a>
<a href="{% url 'services:csp_roi_calculator' %}" class="btn btn-outline-primary">
<i class="bi bi-arrow-left"></i> Back to Calculator
</a>
</div>
</div>
</div>
</div>
{% endblock %}