814 lines
29 KiB
HTML
814 lines
29 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>LetsBe Biz — ROI Calculator</title>
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--celes-blue: #449DD1;
|
|||
|
|
--dark-navy: #1C3144;
|
|||
|
|
--light-sky: #6CB4E4;
|
|||
|
|
--pale-blue: #F0F5FA;
|
|||
|
|
--steel-blue: #C4D5E8;
|
|||
|
|
--mid-gray: #94A3B8;
|
|||
|
|
--dark-gray: #334155;
|
|||
|
|
--success: #22C55E;
|
|||
|
|
--warning: #EAB308;
|
|||
|
|
--error: #EF4444;
|
|||
|
|
--white: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
background: var(--pale-blue);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1100px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Header */
|
|||
|
|
.header {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px 20px 30px;
|
|||
|
|
background: linear-gradient(135deg, var(--dark-navy) 0%, #2a4a6b 100%);
|
|||
|
|
color: var(--white);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.header h1 {
|
|||
|
|
font-size: 2.2rem;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.header h1 span { color: var(--light-sky); }
|
|||
|
|
.header p {
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
color: var(--steel-blue);
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Cards */
|
|||
|
|
.card {
|
|||
|
|
background: var(--white);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 28px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
box-shadow: 0 1px 3px rgba(28,49,68,0.08);
|
|||
|
|
border: 1px solid var(--steel-blue);
|
|||
|
|
}
|
|||
|
|
.card h2 {
|
|||
|
|
font-size: 1.3rem;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
.card h2 .step {
|
|||
|
|
background: var(--celes-blue);
|
|||
|
|
color: white;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.card .subtitle {
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
margin-left: 42px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Tool Grid */
|
|||
|
|
.tool-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.tool-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 10px 14px;
|
|||
|
|
background: var(--pale-blue);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
transition: all 0.15s;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
}
|
|||
|
|
.tool-row:hover { border-color: var(--steel-blue); }
|
|||
|
|
.tool-row.active {
|
|||
|
|
background: #e8f4fd;
|
|||
|
|
border-color: var(--celes-blue);
|
|||
|
|
}
|
|||
|
|
.tool-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.tool-left input[type="checkbox"] {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
accent-color: var(--celes-blue);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.tool-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
}
|
|||
|
|
.tool-desc {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
}
|
|||
|
|
.tool-price {
|
|||
|
|
text-align: right;
|
|||
|
|
min-width: 70px;
|
|||
|
|
}
|
|||
|
|
.tool-price input {
|
|||
|
|
width: 70px;
|
|||
|
|
padding: 4px 6px;
|
|||
|
|
border: 1px solid var(--steel-blue);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
text-align: right;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
}
|
|||
|
|
.tool-price input:focus {
|
|||
|
|
outline: none;
|
|||
|
|
border-color: var(--celes-blue);
|
|||
|
|
box-shadow: 0 0 0 2px rgba(68,157,209,0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Category headers */
|
|||
|
|
.category-header {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
color: var(--celes-blue);
|
|||
|
|
padding: 12px 0 6px;
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
border-bottom: 1px solid var(--steel-blue);
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
.category-header:first-child { margin-top: 0; }
|
|||
|
|
|
|||
|
|
/* Custom entry */
|
|||
|
|
.custom-entry {
|
|||
|
|
margin-top: 16px;
|
|||
|
|
padding: 16px;
|
|||
|
|
background: var(--pale-blue);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.custom-entry h3 {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.custom-inputs {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
.custom-inputs label {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 3px;
|
|||
|
|
}
|
|||
|
|
.custom-inputs input {
|
|||
|
|
padding: 6px 10px;
|
|||
|
|
border: 1px solid var(--steel-blue);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
width: 200px;
|
|||
|
|
}
|
|||
|
|
.custom-inputs input[type="number"] { width: 90px; }
|
|||
|
|
.btn-add {
|
|||
|
|
padding: 6px 16px;
|
|||
|
|
background: var(--celes-blue);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.btn-add:hover { background: #3a8bc0; }
|
|||
|
|
|
|||
|
|
/* Results */
|
|||
|
|
.results-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 14px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.results-grid { grid-template-columns: repeat(2, 1fr); }
|
|||
|
|
}
|
|||
|
|
.tier-card {
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 2px solid var(--steel-blue);
|
|||
|
|
background: var(--white);
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.tier-card.recommended {
|
|||
|
|
border-color: var(--celes-blue);
|
|||
|
|
box-shadow: 0 4px 12px rgba(68,157,209,0.2);
|
|||
|
|
}
|
|||
|
|
.tier-card.recommended::after {
|
|||
|
|
content: 'BEST VALUE';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -12px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
background: var(--celes-blue);
|
|||
|
|
color: white;
|
|||
|
|
font-size: 0.7rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
padding: 2px 12px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
}
|
|||
|
|
.tier-name {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
}
|
|||
|
|
.tier-spec {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.tier-price {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: var(--celes-blue);
|
|||
|
|
}
|
|||
|
|
.tier-price span { font-size: 0.9rem; font-weight: 400; color: var(--mid-gray); }
|
|||
|
|
.tier-savings {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.savings-positive { color: var(--success); }
|
|||
|
|
.savings-negative { color: var(--error); }
|
|||
|
|
.tier-percent {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
.tier-features {
|
|||
|
|
text-align: left;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
padding-top: 12px;
|
|||
|
|
border-top: 1px solid var(--steel-blue);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--dark-gray);
|
|||
|
|
}
|
|||
|
|
.tier-features div {
|
|||
|
|
padding: 2px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Summary bar */
|
|||
|
|
.summary-bar {
|
|||
|
|
background: linear-gradient(135deg, var(--dark-navy) 0%, #2a4a6b 100%);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 24px 28px;
|
|||
|
|
color: white;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
.summary-item {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.summary-label {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--steel-blue);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
}
|
|||
|
|
.summary-value {
|
|||
|
|
font-size: 1.8rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
}
|
|||
|
|
.summary-value.highlight { color: var(--light-sky); }
|
|||
|
|
.summary-value.savings { color: var(--success); }
|
|||
|
|
|
|||
|
|
/* Breakdown table */
|
|||
|
|
.breakdown-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
.breakdown-table th {
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.03em;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
border-bottom: 2px solid var(--steel-blue);
|
|||
|
|
}
|
|||
|
|
.breakdown-table td {
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
border-bottom: 1px solid var(--pale-blue);
|
|||
|
|
}
|
|||
|
|
.breakdown-table tr:hover td { background: var(--pale-blue); }
|
|||
|
|
.breakdown-table .cost-col { text-align: right; font-weight: 600; color: var(--error); }
|
|||
|
|
.breakdown-table .total-row td {
|
|||
|
|
font-weight: 700;
|
|||
|
|
border-top: 2px solid var(--dark-navy);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* VA comparison */
|
|||
|
|
.va-compare {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 16px;
|
|||
|
|
margin-top: 16px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 600px) { .va-compare { grid-template-columns: 1fr; } }
|
|||
|
|
.va-box {
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.va-box.va-human {
|
|||
|
|
background: #fef3f2;
|
|||
|
|
border: 1px solid #fecaca;
|
|||
|
|
}
|
|||
|
|
.va-box.va-letsbe {
|
|||
|
|
background: #f0fdf4;
|
|||
|
|
border: 1px solid #bbf7d0;
|
|||
|
|
}
|
|||
|
|
.va-box h3 { font-size: 0.9rem; margin-bottom: 6px; }
|
|||
|
|
.va-box .va-price { font-size: 1.6rem; font-weight: 800; }
|
|||
|
|
.va-box .va-detail { font-size: 0.8rem; color: var(--mid-gray); margin-top: 4px; }
|
|||
|
|
.va-human .va-price { color: var(--error); }
|
|||
|
|
.va-letsbe .va-price { color: var(--success); }
|
|||
|
|
|
|||
|
|
/* Footnotes */
|
|||
|
|
.footnote {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
margin-top: 16px;
|
|||
|
|
padding-top: 12px;
|
|||
|
|
border-top: 1px solid var(--steel-blue);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Toggle */
|
|||
|
|
.toggle-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
background: var(--pale-blue);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 3px;
|
|||
|
|
width: fit-content;
|
|||
|
|
}
|
|||
|
|
.toggle-btn {
|
|||
|
|
padding: 6px 18px;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
color: var(--mid-gray);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
transition: all 0.15s;
|
|||
|
|
}
|
|||
|
|
.toggle-btn.active {
|
|||
|
|
background: var(--white);
|
|||
|
|
color: var(--dark-navy);
|
|||
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<!-- Header -->
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>How much could you <span>save</span> with LetsBe?</h1>
|
|||
|
|
<p>Select the SaaS tools you're currently paying for. We'll show you the real numbers.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Step 1: Select Tools -->
|
|||
|
|
<div class="card">
|
|||
|
|
<h2><span class="step">1</span> What are you paying for today?</h2>
|
|||
|
|
<p class="subtitle">Check the tools you use and adjust prices to match your actual spend. Pre-filled with typical SMB pricing.</p>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 16px; background: var(--pale-blue); border-radius: 8px; border: 1px solid var(--steel-blue);">
|
|||
|
|
<label for="teamSize" style="font-weight: 600; font-size: 0.9rem; color: var(--dark-navy); white-space: nowrap;">Team size:</label>
|
|||
|
|
<input type="number" id="teamSize" value="3" min="1" max="100" step="1"
|
|||
|
|
style="width: 60px; padding: 6px 8px; border: 1px solid var(--celes-blue); border-radius: 6px; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--dark-navy);"
|
|||
|
|
onchange="calculate()" oninput="calculate()">
|
|||
|
|
<span style="font-size: 0.8rem; color: var(--mid-gray);">Per-seat tools (marked <strong style="color: var(--celes-blue);">×N</strong>) are multiplied by team size. Flat-rate tools are not.</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="toggle-group">
|
|||
|
|
<button class="toggle-btn active" onclick="setView('preset')">Common Tools</button>
|
|||
|
|
<button class="toggle-btn" onclick="setView('custom')">Custom Entry</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="presetView">
|
|||
|
|
<div class="tool-grid" id="toolGrid"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="customView" style="display:none;">
|
|||
|
|
<div id="customList"></div>
|
|||
|
|
<div class="custom-entry">
|
|||
|
|
<h3>Add a tool or subscription</h3>
|
|||
|
|
<div class="custom-inputs">
|
|||
|
|
<div>
|
|||
|
|
<label>Tool / Service Name</label>
|
|||
|
|
<input type="text" id="customName" placeholder="e.g. Notion">
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>Monthly Cost (€)</label>
|
|||
|
|
<input type="number" id="customCost" placeholder="29" min="0" step="0.01">
|
|||
|
|
</div>
|
|||
|
|
<button class="btn-add" onclick="addCustomTool()">+ Add</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Step 2: Results -->
|
|||
|
|
<div class="card">
|
|||
|
|
<h2><span class="step">2</span> Your savings with LetsBe Biz</h2>
|
|||
|
|
<p class="subtitle">All tiers include your tools, AI agents, hosting, backups, monitoring, and support.</p>
|
|||
|
|
|
|||
|
|
<div class="summary-bar" id="summaryBar">
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">Current Monthly Spend</div>
|
|||
|
|
<div class="summary-value highlight" id="currentTotal">€0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">Best LetsBe Price</div>
|
|||
|
|
<div class="summary-value" id="bestPrice">€45</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">Monthly Savings</div>
|
|||
|
|
<div class="summary-value savings" id="monthlySavings">€0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">Annual Savings</div>
|
|||
|
|
<div class="summary-value savings" id="annualSavings">€0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="results-grid" id="tierCards" style="margin-top: 20px;"></div>
|
|||
|
|
|
|||
|
|
<!-- VA comparison -->
|
|||
|
|
<div style="margin-top: 10px;">
|
|||
|
|
<h3 style="font-size: 1rem; color: var(--dark-navy); margin-bottom: 4px;">Compared to a human virtual assistant</h3>
|
|||
|
|
<p style="font-size: 0.85rem; color: var(--mid-gray); margin-bottom: 12px;">LetsBe replaces the tasks you'd outsource to a VA — scheduling, follow-ups, data entry, email management, reporting — 24/7.</p>
|
|||
|
|
<div class="va-compare">
|
|||
|
|
<div class="va-box va-human">
|
|||
|
|
<h3>Part-Time VA (10 hrs/week)</h3>
|
|||
|
|
<div class="va-price">€1,000–2,500/mo</div>
|
|||
|
|
<div class="va-detail">$25–60/hr · Limited hours · Training required · Turnover risk</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="va-box va-letsbe">
|
|||
|
|
<h3>LetsBe AI Team (24/7)</h3>
|
|||
|
|
<div class="va-price" id="vaLetsbePrice">€45/mo</div>
|
|||
|
|
<div class="va-detail">All tools included · Always available · Learns your business · No turnover</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Step 3: Breakdown -->
|
|||
|
|
<div class="card">
|
|||
|
|
<h2><span class="step">3</span> Your current cost breakdown</h2>
|
|||
|
|
<p class="subtitle">Every tool you selected, with the price you're paying.</p>
|
|||
|
|
<table class="breakdown-table" id="breakdownTable">
|
|||
|
|
<thead>
|
|||
|
|
<tr><th>Tool / Service</th><th>Replaced By</th><th style="text-align:right">Monthly Cost</th></tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="breakdownBody"></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Footer -->
|
|||
|
|
<div class="footnote" style="text-align: center; padding: 20px 0;">
|
|||
|
|
<p><strong>LetsBe Biz</strong> — Your AI team, your private server, your rules.</p>
|
|||
|
|
<p>Prices as of February 2026. Competitor pricing sourced from public pricing pages. LetsBe prices in EUR, billed monthly. Annual billing saves 15%.</p>
|
|||
|
|
<p style="margin-top: 8px;">LetsBe Solutions LLC · 221 North Broad Street, Suite 3A, Middletown, DE 19709</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// ===== TOOL DATA =====
|
|||
|
|
// Prices verified February 2026 (monthly billing)
|
|||
|
|
// perSeat: true = price is per user/seat (multiplied by team size)
|
|||
|
|
// perSeat: false = flat rate (same price regardless of team size)
|
|||
|
|
const TOOLS = [
|
|||
|
|
// CRM & Sales
|
|||
|
|
{ cat: "CRM & Sales", name: "HubSpot CRM", desc: "Starter", price: 20, perSeat: true, replacement: "Odoo CRM" },
|
|||
|
|
{ cat: "CRM & Sales", name: "Salesforce", desc: "Starter Suite", price: 35, perSeat: true, replacement: "Odoo CRM" },
|
|||
|
|
{ cat: "CRM & Sales", name: "Pipedrive", desc: "Lite", price: 24, perSeat: true, replacement: "Odoo CRM" },
|
|||
|
|
{ cat: "CRM & Sales", name: "Freshsales", desc: "Growth", price: 18, perSeat: true, replacement: "Odoo CRM" },
|
|||
|
|
|
|||
|
|
// Email & Communication
|
|||
|
|
{ cat: "Email & Communication", name: "Google Workspace", desc: "Business Starter", price: 8, perSeat: true, replacement: "Stalwart Mail + Chatwoot" },
|
|||
|
|
{ cat: "Email & Communication", name: "Microsoft 365", desc: "Business Basic", price: 6, perSeat: true, replacement: "Stalwart Mail" },
|
|||
|
|
{ cat: "Email & Communication", name: "Slack", desc: "Pro", price: 9, perSeat: true, replacement: "Chatwoot / Mattermost" },
|
|||
|
|
{ cat: "Email & Communication", name: "Intercom", desc: "Essential", price: 39, perSeat: true, replacement: "Chatwoot" },
|
|||
|
|
{ cat: "Email & Communication", name: "Zendesk", desc: "Suite Team", price: 69, perSeat: true, replacement: "Chatwoot" },
|
|||
|
|
|
|||
|
|
// Email Marketing
|
|||
|
|
{ cat: "Email Marketing", name: "Mailchimp", desc: "Essentials · 500 contacts", price: 13, perSeat: false, replacement: "Listmonk" },
|
|||
|
|
{ cat: "Email Marketing", name: "Kit (fka ConvertKit)", desc: "Creator · 1k subscribers", price: 39, perSeat: false, replacement: "Listmonk" },
|
|||
|
|
{ cat: "Email Marketing", name: "ActiveCampaign", desc: "Starter · 1k contacts", price: 19, perSeat: false, replacement: "Listmonk" },
|
|||
|
|
|
|||
|
|
// Project Management
|
|||
|
|
{ cat: "Project Management", name: "Asana", desc: "Starter", price: 13, perSeat: true, replacement: "Plane" },
|
|||
|
|
{ cat: "Project Management", name: "Monday.com", desc: "Basic (min 3 seats)", price: 12, perSeat: true, replacement: "Plane" },
|
|||
|
|
{ cat: "Project Management", name: "Trello", desc: "Standard", price: 6, perSeat: true, replacement: "Plane" },
|
|||
|
|
{ cat: "Project Management", name: "Basecamp", desc: "Pro Unlimited · flat rate", price: 349, perSeat: false, replacement: "Plane" },
|
|||
|
|
{ cat: "Project Management", name: "ClickUp", desc: "Unlimited", price: 10, perSeat: true, replacement: "Plane" },
|
|||
|
|
|
|||
|
|
// File Storage & Docs
|
|||
|
|
{ cat: "File Storage & Docs", name: "Dropbox", desc: "Plus", price: 20, perSeat: true, replacement: "Nextcloud" },
|
|||
|
|
{ cat: "File Storage & Docs", name: "Google One", desc: "100GB", price: 2, perSeat: true, replacement: "Nextcloud" },
|
|||
|
|
{ cat: "File Storage & Docs", name: "Notion", desc: "Plus", price: 12, perSeat: true, replacement: "Nextcloud + Wiki.js" },
|
|||
|
|
|
|||
|
|
// Invoicing & Accounting
|
|||
|
|
{ cat: "Invoicing & Accounting", name: "QuickBooks", desc: "Simple Start", price: 38, perSeat: false, replacement: "Bigcapital" },
|
|||
|
|
{ cat: "Invoicing & Accounting", name: "FreshBooks", desc: "Lite", price: 19, perSeat: false, replacement: "Bigcapital" },
|
|||
|
|
{ cat: "Invoicing & Accounting", name: "Xero", desc: "Early (Starter)", price: 13, perSeat: false, replacement: "Bigcapital" },
|
|||
|
|
{ cat: "Invoicing & Accounting", name: "Wave", desc: "Pro plan", price: 19, perSeat: false, replacement: "Bigcapital" },
|
|||
|
|
|
|||
|
|
// Website & CMS
|
|||
|
|
{ cat: "Website & CMS", name: "Squarespace", desc: "Business", price: 25, perSeat: false, replacement: "Ghost" },
|
|||
|
|
{ cat: "Website & CMS", name: "Wix", desc: "Business", price: 39, perSeat: false, replacement: "Ghost" },
|
|||
|
|
{ cat: "Website & CMS", name: "WordPress.com", desc: "Business", price: 25, perSeat: false, replacement: "Ghost" },
|
|||
|
|
|
|||
|
|
// Scheduling & Calendar
|
|||
|
|
{ cat: "Scheduling & Calendar", name: "Calendly", desc: "Standard", price: 16, perSeat: true, replacement: "Cal.com" },
|
|||
|
|
{ cat: "Scheduling & Calendar", name: "Acuity Scheduling", desc: "Emerging", price: 20, perSeat: false, replacement: "Cal.com" },
|
|||
|
|
|
|||
|
|
// Analytics
|
|||
|
|
{ cat: "Analytics", name: "Google Analytics", desc: "Standard (free)", price: 0, perSeat: false, replacement: "Umami (free, self-hosted)" },
|
|||
|
|
{ cat: "Analytics", name: "Hotjar", desc: "Plus", price: 39, perSeat: false, replacement: "Umami" },
|
|||
|
|
{ cat: "Analytics", name: "Mixpanel", desc: "Growth · ~1M events/mo", price: 20, perSeat: false, replacement: "Umami" },
|
|||
|
|
|
|||
|
|
// Automation
|
|||
|
|
{ cat: "Automation", name: "Zapier", desc: "Professional · 750 tasks", price: 30, perSeat: false, replacement: "n8n + Activepieces" },
|
|||
|
|
{ cat: "Automation", name: "Make.com", desc: "Core · 10k ops", price: 11, perSeat: false, replacement: "n8n + Activepieces" },
|
|||
|
|
|
|||
|
|
// Design
|
|||
|
|
{ cat: "Design", name: "Canva", desc: "Pro", price: 15, perSeat: true, replacement: "Penpot" },
|
|||
|
|
|
|||
|
|
// Forms & Surveys
|
|||
|
|
{ cat: "Forms & Surveys", name: "Typeform", desc: "Basic", price: 29, perSeat: false, replacement: "Formbricks" },
|
|||
|
|
{ cat: "Forms & Surveys", name: "JotForm", desc: "Bronze", price: 39, perSeat: false, replacement: "Formbricks" },
|
|||
|
|
|
|||
|
|
// Documents & E-Signing
|
|||
|
|
{ cat: "Documents & E-Signing", name: "DocuSign", desc: "Personal", price: 15, perSeat: false, replacement: "Documenso" },
|
|||
|
|
{ cat: "Documents & E-Signing", name: "PandaDoc", desc: "Essentials", price: 25, perSeat: true, replacement: "Documenso" },
|
|||
|
|
|
|||
|
|
// Password Management
|
|||
|
|
{ cat: "Password Management", name: "1Password", desc: "Teams (up to 10 users)", price: 20, perSeat: false, replacement: "Vaultwarden" },
|
|||
|
|
{ cat: "Password Management", name: "LastPass", desc: "Teams", price: 4, perSeat: true, replacement: "Vaultwarden" },
|
|||
|
|
|
|||
|
|
// AI Assistants
|
|||
|
|
{ cat: "AI Assistants", name: "ChatGPT Plus", desc: "Monthly", price: 20, perSeat: true, replacement: "LetsBe AI (included)" },
|
|||
|
|
{ cat: "AI Assistants", name: "Claude Pro", desc: "Monthly", price: 20, perSeat: true, replacement: "LetsBe AI (included)" },
|
|||
|
|
{ cat: "AI Assistants", name: "Microsoft Copilot", desc: "M365 add-on", price: 21, perSeat: true, replacement: "LetsBe AI (included)" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// ===== LETSBE TIERS =====
|
|||
|
|
const TIERS = [
|
|||
|
|
{ name: "Lite", price: 29, annual: Math.round(29 * 0.85), spec: "4c / 8GB / 5-8 tools", tools: "5-8", tokens: "8M", target: "Solo freelancer" },
|
|||
|
|
{ name: "Build", price: 45, annual: Math.round(45 * 0.85), spec: "8c / 16GB / 10-15 tools", tools: "10-15", tokens: "15M", target: "SMB (1-10 people)" },
|
|||
|
|
{ name: "Scale", price: 75, annual: Math.round(75 * 0.85), spec: "12c / 32GB / 15-25 tools", tools: "15-25", tokens: "25M", target: "Agency / e-commerce" },
|
|||
|
|
{ name: "Enterprise", price: 109, annual: Math.round(109 * 0.85), spec: "16c / 64GB / All tools", tools: "28+", tokens: "40M", target: "Power user / regulated" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let customTools = [];
|
|||
|
|
|
|||
|
|
// ===== RENDER =====
|
|||
|
|
function renderToolGrid() {
|
|||
|
|
const grid = document.getElementById('toolGrid');
|
|||
|
|
let currentCat = '';
|
|||
|
|
let html = '';
|
|||
|
|
|
|||
|
|
TOOLS.forEach((tool, i) => {
|
|||
|
|
if (tool.cat !== currentCat) {
|
|||
|
|
currentCat = tool.cat;
|
|||
|
|
html += `<div class="category-header">${currentCat}</div>`;
|
|||
|
|
}
|
|||
|
|
const seatBadge = tool.perSeat
|
|||
|
|
? '<span style="font-size:0.7rem;font-weight:700;color:var(--celes-blue);margin-left:4px;vertical-align:middle;" title="Per seat — multiplied by team size">×N</span>'
|
|||
|
|
: '';
|
|||
|
|
const priceLabel = tool.perSeat ? '/seat' : '/mo';
|
|||
|
|
html += `
|
|||
|
|
<div class="tool-row" id="row-${i}" onclick="toggleTool(${i})">
|
|||
|
|
<div class="tool-left">
|
|||
|
|
<input type="checkbox" id="cb-${i}" onchange="calculate()" onclick="event.stopPropagation()">
|
|||
|
|
<div>
|
|||
|
|
<div class="tool-name">${tool.name}${seatBadge}</div>
|
|||
|
|
<div class="tool-desc">${tool.desc} · Replaced by ${tool.replacement}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tool-price">
|
|||
|
|
<input type="number" id="price-${i}" value="${tool.price}" min="0" step="0.01"
|
|||
|
|
onclick="event.stopPropagation()" onchange="calculate()" onfocus="this.select()"
|
|||
|
|
title="${tool.perSeat ? 'Price per seat/user — multiplied by team size' : 'Flat monthly rate'}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
grid.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleTool(i) {
|
|||
|
|
const cb = document.getElementById(`cb-${i}`);
|
|||
|
|
cb.checked = !cb.checked;
|
|||
|
|
const row = document.getElementById(`row-${i}`);
|
|||
|
|
row.classList.toggle('active', cb.checked);
|
|||
|
|
calculate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setView(view) {
|
|||
|
|
document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
|
|||
|
|
event.target.classList.add('active');
|
|||
|
|
document.getElementById('presetView').style.display = view === 'preset' ? '' : 'none';
|
|||
|
|
document.getElementById('customView').style.display = view === 'custom' ? '' : 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function addCustomTool() {
|
|||
|
|
const name = document.getElementById('customName').value.trim();
|
|||
|
|
const cost = parseFloat(document.getElementById('customCost').value) || 0;
|
|||
|
|
if (!name) return;
|
|||
|
|
|
|||
|
|
customTools.push({ name, cost, enabled: true });
|
|||
|
|
document.getElementById('customName').value = '';
|
|||
|
|
document.getElementById('customCost').value = '';
|
|||
|
|
renderCustomList();
|
|||
|
|
calculate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeCustomTool(i) {
|
|||
|
|
customTools.splice(i, 1);
|
|||
|
|
renderCustomList();
|
|||
|
|
calculate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderCustomList() {
|
|||
|
|
const list = document.getElementById('customList');
|
|||
|
|
if (customTools.length === 0) {
|
|||
|
|
list.innerHTML = '<p style="color: var(--mid-gray); font-size: 0.85rem; padding: 10px 0;">No custom tools added yet. Use the form below to add your subscriptions.</p>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let html = '<div style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;">';
|
|||
|
|
customTools.forEach((t, i) => {
|
|||
|
|
html += `
|
|||
|
|
<div class="tool-row active">
|
|||
|
|
<div class="tool-left">
|
|||
|
|
<div>
|
|||
|
|
<div class="tool-name">${t.name}</div>
|
|||
|
|
<div class="tool-desc">Custom entry</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|||
|
|
<span style="font-weight: 600;">€${t.cost.toFixed(2)}/mo</span>
|
|||
|
|
<button onclick="removeCustomTool(${i})" style="background: none; border: none; color: var(--error); cursor: pointer; font-size: 1.1rem; padding: 2px 6px;">×</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
html += '</div>';
|
|||
|
|
list.innerHTML = html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== CALCULATE =====
|
|||
|
|
function calculate() {
|
|||
|
|
let totalCurrent = 0;
|
|||
|
|
let selectedTools = [];
|
|||
|
|
const teamSize = Math.max(1, parseInt(document.getElementById('teamSize').value) || 1);
|
|||
|
|
|
|||
|
|
// Preset tools
|
|||
|
|
TOOLS.forEach((tool, i) => {
|
|||
|
|
const cb = document.getElementById(`cb-${i}`);
|
|||
|
|
const priceEl = document.getElementById(`price-${i}`);
|
|||
|
|
const row = document.getElementById(`row-${i}`);
|
|||
|
|
if (cb && cb.checked) {
|
|||
|
|
const unitPrice = parseFloat(priceEl.value) || 0;
|
|||
|
|
const effectivePrice = tool.perSeat ? unitPrice * teamSize : unitPrice;
|
|||
|
|
totalCurrent += effectivePrice;
|
|||
|
|
const label = tool.perSeat ? `${tool.name} (×${teamSize})` : tool.name;
|
|||
|
|
selectedTools.push({ name: label, replacement: tool.replacement, cost: effectivePrice });
|
|||
|
|
row.classList.add('active');
|
|||
|
|
} else if (row) {
|
|||
|
|
row.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Custom tools
|
|||
|
|
customTools.forEach(t => {
|
|||
|
|
if (t.enabled) {
|
|||
|
|
totalCurrent += t.cost;
|
|||
|
|
selectedTools.push({ name: t.name, replacement: "LetsBe (included)", cost: t.cost });
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Update summary
|
|||
|
|
document.getElementById('currentTotal').textContent = `€${totalCurrent.toFixed(0)}`;
|
|||
|
|
|
|||
|
|
// Find best tier
|
|||
|
|
const toolCount = selectedTools.length;
|
|||
|
|
let recommendedIdx = 1; // Default to Build
|
|||
|
|
if (toolCount <= 8) recommendedIdx = 0;
|
|||
|
|
else if (toolCount <= 15) recommendedIdx = 1;
|
|||
|
|
else if (toolCount <= 25) recommendedIdx = 2;
|
|||
|
|
else recommendedIdx = 3;
|
|||
|
|
|
|||
|
|
const bestPrice = TIERS[recommendedIdx].price;
|
|||
|
|
const savings = totalCurrent - bestPrice;
|
|||
|
|
|
|||
|
|
document.getElementById('bestPrice').textContent = `€${bestPrice}`;
|
|||
|
|
document.getElementById('monthlySavings').textContent = savings >= 0 ? `€${savings.toFixed(0)}` : `-€${Math.abs(savings).toFixed(0)}`;
|
|||
|
|
document.getElementById('annualSavings').textContent = savings >= 0 ? `€${(savings * 12).toFixed(0)}` : `-€${(Math.abs(savings) * 12).toFixed(0)}`;
|
|||
|
|
document.getElementById('vaLetsbePrice').textContent = `€${bestPrice}/mo`;
|
|||
|
|
|
|||
|
|
// Tier cards
|
|||
|
|
let tierHTML = '';
|
|||
|
|
TIERS.forEach((tier, idx) => {
|
|||
|
|
const tierSavings = totalCurrent - tier.price;
|
|||
|
|
const percent = totalCurrent > 0 ? Math.round((tierSavings / totalCurrent) * 100) : 0;
|
|||
|
|
const isRec = idx === recommendedIdx;
|
|||
|
|
|
|||
|
|
tierHTML += `
|
|||
|
|
<div class="tier-card ${isRec ? 'recommended' : ''}">
|
|||
|
|
<div class="tier-name">${tier.name}</div>
|
|||
|
|
<div class="tier-spec">${tier.spec}</div>
|
|||
|
|
<div class="tier-price">€${tier.price}<span>/mo</span></div>
|
|||
|
|
<div class="tier-savings ${tierSavings >= 0 ? 'savings-positive' : 'savings-negative'}">
|
|||
|
|
${tierSavings >= 0 ? `Save €${tierSavings.toFixed(0)}/mo` : `€${Math.abs(tierSavings).toFixed(0)} more/mo`}
|
|||
|
|
</div>
|
|||
|
|
${totalCurrent > 0 && tierSavings > 0 ? `<div class="tier-percent savings-positive">${percent}% less</div>` : ''}
|
|||
|
|
<div class="tier-features">
|
|||
|
|
<div>Up to ${tier.tools} tools</div>
|
|||
|
|
<div>${tier.tokens} AI tokens/mo</div>
|
|||
|
|
<div>Unlimited agents</div>
|
|||
|
|
<div>${tier.target}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
});
|
|||
|
|
document.getElementById('tierCards').innerHTML = tierHTML;
|
|||
|
|
|
|||
|
|
// Breakdown table
|
|||
|
|
let tableHTML = '';
|
|||
|
|
selectedTools.sort((a, b) => b.cost - a.cost);
|
|||
|
|
selectedTools.forEach(t => {
|
|||
|
|
tableHTML += `<tr><td>${t.name}</td><td style="color: var(--celes-blue); font-size: 0.85rem;">${t.replacement}</td><td class="cost-col">€${t.cost.toFixed(2)}</td></tr>`;
|
|||
|
|
});
|
|||
|
|
if (selectedTools.length > 0) {
|
|||
|
|
tableHTML += `<tr class="total-row"><td colspan="2">Total Current Monthly Spend</td><td class="cost-col" style="color: var(--dark-navy);">€${totalCurrent.toFixed(2)}</td></tr>`;
|
|||
|
|
tableHTML += `<tr><td colspan="2" style="color: var(--success); font-weight: 600;">LetsBe ${TIERS[recommendedIdx].name} (replaces all above)</td><td style="text-align: right; color: var(--success); font-weight: 700;">€${bestPrice.toFixed(2)}</td></tr>`;
|
|||
|
|
} else {
|
|||
|
|
tableHTML = '<tr><td colspan="3" style="text-align: center; color: var(--mid-gray); padding: 20px;">Select tools above to see your breakdown</td></tr>';
|
|||
|
|
}
|
|||
|
|
document.getElementById('breakdownBody').innerHTML = tableHTML;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== INIT =====
|
|||
|
|
renderToolGrid();
|
|||
|
|
renderCustomList();
|
|||
|
|
calculate();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|