src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/tools/roi-calculator.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  2. {% include '@HoneybeeWeb/inc/_web_design_system.html.twig' %}
  4. {# ─── ERP ROI CALCULATOR — interactive estimator ─── #}
  5. <style>
  6. .roi-hero { background: var(--n-cream); padding: 120px 0 40px; position: relative; overflow: hidden; }
  7. .roi-hero::before {
  8.     content:''; position:absolute; top:0; right:0; width:55%; height:100%;
  9.     background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(61,107,82,.08) 0%, transparent 65%),
  10.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(192,125,42,.06) 0%, transparent 60%);
  11.     pointer-events:none;
  12. }
  13. .roi-hero-inner { max-width: 760px; position: relative; }
  14. .roi-hero h1 {
  15.     font-family:'Montserrat',sans-serif; font-size: clamp(34px,4.6vw,56px);
  16.     font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--n-dark);
  17. }
  18. .roi-hero h1 em { font-style: normal; color: var(--n-amber); }
  19. .roi-hero p { font-size: 17px; line-height: 1.7; color: var(--n-muted); max-width: 600px; margin-top: 18px; }
  21. .roi-calc {
  22.     display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  23.     background: var(--n-white); border: 1px solid var(--n-border-md);
  24.     border-radius: var(--n-radius-lg); overflow: hidden;
  25.     box-shadow: var(--n-shadow-md); margin-top: 8px;
  26. }
  27. .roi-inputs { padding: 40px; }
  28. .roi-field { margin-bottom: 18px; }
  29. .roi-field label { display: block; font-size: 13px; font-weight: 600; color: var(--n-dark); margin-bottom: 6px; }
  30. .roi-field input {
  31.     width: 100%; padding: 11px 14px; font-size: 15px; font-family: var(--n-font);
  32.     color: var(--n-dark); background: var(--n-cream);
  33.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius-sm);
  34.     transition: border-color .15s, box-shadow .15s;
  35. }
  36. .roi-field input:focus { outline: none; border-color: var(--n-amber); box-shadow: 0 0 0 3px var(--n-amber-dim); }
  38. .roi-result { background: var(--n-dark); padding: 40px; color: #fff; display: flex; flex-direction: column; }
  39. .roi-result .n-label { color: var(--n-amber); }
  40. .roi-result .n-label::before { background: var(--n-amber); }
  41. .roi-bignum {
  42.     font-family:'Montserrat',sans-serif; font-size: clamp(34px,4.5vw,52px); font-weight: 900;
  43.     line-height: 1.05; letter-spacing: -.02em; color: var(--n-amber-lt); margin: 6px 0 4px;
  44. }
  45. .roi-bigsub { font-size: 13px; color: var(--n-muted-2); margin-bottom: 22px; }
  46. .roi-breakdown { list-style: none; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
  47. .roi-breakdown li {
  48.     display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  49.     font-size: 13px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  50. }
  51. .roi-breakdown li span:first-child { color: rgba(255,255,255,.72); }
  52. .roi-breakdown li span:last-child { font-weight: 700; font-family: monospace; color: #fff; white-space: nowrap; }
  53. .roi-plan {
  54.     margin-top: 22px; padding: 16px 18px; border-radius: var(--n-radius-sm);
  55.     background: rgba(61,107,82,.18); border: 1px solid rgba(61,107,82,.4);
  56. }
  57. .roi-plan .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fc6a8; }
  58. .roi-plan .val { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; color: #fff; margin-top: 3px; }
  59. .roi-disclaimer { font-size: 12px; color: var(--n-muted-2); margin-top: auto; padding-top: 18px; }
  61. .roi-cta { background: var(--n-cream-2); padding: 90px 0; text-align: center; border-top: 1px solid var(--n-border); }
  62. .roi-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.4vw,40px); font-weight: 900; color: var(--n-dark); margin-bottom: 14px; }
  63. .roi-cta h2 em { font-style: normal; color: var(--n-amber); }
  64. .roi-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
  66. @media (max-width: 920px) { .roi-calc { grid-template-columns: 1fr; } }
  67. </style>
  69. {# ══ 1. HERO + CALCULATOR ════════════════════════════════════════════════════ #}
  70. <section class="roi-hero">
  71.     <div class="n-wrap">
  72.         <div class="roi-hero-inner">
  73.             <span class="n-label">Free estimator · Any business</span>
  74.             <h1>ERP <em>ROI</em> Calculator</h1>
  75.             <p>
  76.                 Estimate the time and money your team could reclaim once approvals, invoices and projects
  77.                 run on one connected system instead of scattered spreadsheets and email.
  78.             </p>
  79.         </div>
  80.     </div>
  81. </section>
  83. <section class="n-sec" style="padding-top:36px">
  84.     <div class="n-wrap">
  85.         <div class="roi-calc">
  86.             {# ── Inputs ── #}
  87.             <div class="roi-inputs">
  88.                 <span class="n-label" style="color:var(--n-amber)">Your numbers</span>
  89.                 <div class="roi-field">
  90.                     <label for="roi-emp">Employees</label>
  91.                     <input type="number" id="roi-emp" min="0" step="1" value="25">
  92.                 </div>
  93.                 <div class="roi-field">
  94.                     <label for="roi-hours">Admin hours wasted weekly (per employee)</label>
  95.                     <input type="number" id="roi-hours" min="0" step="0.5" value="5">
  96.                 </div>
  97.                 <div class="roi-field">
  98.                     <label for="roi-cost">Cost per employee (&euro;/month)</label>
  99.                     <input type="number" id="roi-cost" min="0" step="100" value="3200">
  100.                 </div>
  101.                 <div class="roi-field">
  102.                     <label for="roi-approvals">Approvals per month</label>
  103.                     <input type="number" id="roi-approvals" min="0" step="1" value="120">
  104.                 </div>
  105.                 <div class="roi-field">
  106.                     <label for="roi-invoices">Invoices per month</label>
  107.                     <input type="number" id="roi-invoices" min="0" step="1" value="200">
  108.                 </div>
  109.                 <div class="roi-field" style="margin-bottom:0">
  110.                     <label for="roi-projects">Number of projects</label>
  111.                     <input type="number" id="roi-projects" min="0" step="1" value="15">
  112.                 </div>
  113.             </div>
  115.             {# ── Result ── #}
  116.             <div class="roi-result">
  117.                 <span class="n-label">Estimated monthly savings</span>
  118.                 <div class="roi-bignum" id="roi-savings">&euro;0</div>
  119.                 <div class="roi-bigsub">Indicative recurring saving from reclaimed admin time.</div>
  120.                 <ul class="roi-breakdown">
  121.                     <li><span>Time saved per month</span><span id="roi-timesaved">0 hrs</span></li>
  122.                     <li><span>Effective hourly cost</span><span id="roi-hourly">&euro;0</span></li>
  123.                     <li><span>Annualised savings</span><span id="roi-annual">&euro;0</span></li>
  124.                 </ul>
  125.                 <div class="roi-plan">
  126.                     <div class="lbl">Suggested HoneyBee plan</div>
  127.                     <div class="val" id="roi-planname">Core Business ERP</div>
  128.                 </div>
  129.                 <div class="roi-disclaimer">Estimates only — not a quote. Based on a ~40% efficiency gain on current admin overhead.</div>
  130.             </div>
  131.         </div>
  132.     </div>
  133. </section>
  135. {# ══ 2. CLOSING CTA ══════════════════════════════════════════════════════════ #}
  136. <section class="roi-cta">
  137.     <div class="n-wrap-sm">
  138.         <h2>See the saving on <em>your</em> numbers.</h2>
  139.         <p class="n-body" style="max-width:54ch;margin:0 auto">
  140.             Book a demo and we'll walk through approvals, invoicing and project tracking on a HoneyBee
  141.             workspace shaped to your business. EUR pricing, EU data residency.
  142.         </p>
  143.         <div class="roi-cta-actions">
  144.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  145.                 Book Demo <i class="fa-solid fa-arrow-right"></i>
  146.             </a>
  147.             <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-outline">
  148.                 Explore pricing
  149.             </a>
  150.         </div>
  151.     </div>
  152. </section>
  154. <script>
  155. (function () {
  156.     var eur = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 });
  157.     var ids = ['roi-emp','roi-hours','roi-cost','roi-approvals','roi-invoices','roi-projects'];
  158.     var EFFICIENCY = 0.40;   // share of wasted admin time HoneyBee realistically recovers
  159.     var WEEKS_PER_MONTH = 4.3;
  160.     var HOURS_PER_MONTH = 160;
  162.     function num(id) {
  163.         var v = parseFloat(document.getElementById(id).value);
  164.         return (isNaN(v) || v < 0) ? 0 : v;
  165.     }
  167.     function recalc() {
  168.         var employees = num('roi-emp');
  169.         var hoursWk   = num('roi-hours');
  170.         var costMo    = num('roi-cost');
  171.         var projects  = num('roi-projects');
  173.         var hourlyCost   = costMo / HOURS_PER_MONTH;                       // €/hour per employee
  174.         var wastedMonth  = employees * hoursWk * WEEKS_PER_MONTH;          // total wasted admin hrs/month
  175.         var timeSaved    = wastedMonth * EFFICIENCY;                       // hrs reclaimed/month
  176.         var savings      = timeSaved * hourlyCost;                         // €/month saved
  177.         var annual       = savings * 12;
  179.         document.getElementById('roi-timesaved').textContent = Math.round(timeSaved).toLocaleString('de-DE') + ' hrs';
  180.         document.getElementById('roi-hourly').textContent    = eur.format(Math.round(hourlyCost));
  181.         document.getElementById('roi-savings').textContent   = eur.format(Math.round(savings));
  182.         document.getElementById('roi-annual').textContent    = eur.format(Math.round(annual));
  184.         // Suggested HoneyBee plan
  185.         var plan = 'Core Business ERP';
  186.         if (projects >= 10 || employees >= 60) {
  187.             plan = 'Project ERP';
  188.         } else if (employees >= 25) {
  189.             plan = 'Business ERP Plus';
  190.         }
  191.         document.getElementById('roi-planname').textContent = plan;
  192.     }
  194.     ids.forEach(function (id) {
  195.         var el = document.getElementById(id);
  196.         el.addEventListener('input', recalc);
  197.         el.addEventListener('change', recalc);
  198.     });
  199.     recalc();
  200. })();
  201. </script>
  203. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}