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

448 lines
No EOL
21 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-trophy text-warning"></i> Why Larger Investments Win Big</h2>
<div class="alert alert-success">
<h5><i class="bi bi-graph-up-arrow"></i> The More You Invest, The Better Your ROI</h5>
<p class="mb-0">Our calculator uses exponential scaling to reward larger investments with dramatically better returns. This isn't just about more money - it's about exponentially better performance per CHF / EUR invested.</p>
</div>
<h3>Exponential Scaling 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>15%</td>
<td>Base period</td>
<td class="text-success"><strong>200-250%</strong></td>
</tr>
<tr class="table-warning">
<td><strong>1,000,000</strong></td>
<td><span class="text-primary">2.2x</span></td>
<td><span class="text-primary">+20% per instance</span></td>
<td>20%</td>
<td>+6 months</td>
<td class="text-success"><strong>250-300%</strong></td>
</tr>
<tr class="table-info">
<td><strong>1,500,000</strong></td>
<td><span class="text-success">3.5x</span></td>
<td><span class="text-success">+40% per instance</span></td>
<td>25%</td>
<td>+12 months</td>
<td class="text-success"><strong>300-350%</strong></td>
</tr>
<tr class="table-success">
<td><strong>2,000,000</strong></td>
<td><span class="text-success fw-bold">5.0x</span></td>
<td><span class="text-success fw-bold">+60% per instance</span></td>
<td><span class="text-success fw-bold">35%</span></td>
<td>+12 months</td>
<td class="text-success"><strong>350-400%</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>200-400% Potential Returns</strong></p>
<p>Performance-based revenue sharing with exponential scaling bonuses and extended grace periods.</p>
<ul class="text-success small">
<li>Exponential scaling rewards</li>
<li>Revenue premiums up to 60%</li>
<li>Performance bonuses up to 35%</li>
<li>Extended grace periods</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>250-300% over 3 years</td>
<td>15-21 months</td>
<td>2,500,000 - 3,000,000</td>
</tr>
<tr class="table-success">
<td><strong>Direct Investment (2M)</strong></td>
<td><span class="badge bg-danger">High</span></td>
<td>350-400% over 3 years</td>
<td>18-24 months</td>
<td>7,000,000 - 8,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% monthly churn</strong></p>
<p>Steady growth: 50-150 new instances/month</p>
<p>Best for: Established markets, risk-averse CSPs</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: 100-400 new instances/month</p>
<p>Best for: Competitive markets, balanced approach</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>5% monthly churn</strong></p>
<p>Rapid growth: 200-800 new instances/month</p>
<p>Best for: High-growth strategies, active sales</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>
<!-- 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 35% 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 %}