JoeBot/HOALedgerIQ_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add interest income benefit calculator widget to hero

Browse Source 
- New "✦ Calculate Your Interest Income Potential" button between hero CTAs
  with gradient border styling distinct from primary/ghost buttons
- Modal overlay collects: homesites, property type, annual dues + frequency,
  reserve fund balance, and 2025 actual interest income
- Conservative calculation model: 4.0% HYSA for operating cash, 4.25% CD
  ladder for 65% of investable reserves; operating multiplier varies by
  payment frequency (monthly 10%, quarterly 20%, annual 35%)
- Results screen shows animated dollar counter, operating vs reserve
  breakdown, AI-style narrative recommendation, and direct CTA to signup
- Modal closes on backdrop click or Escape key; CTA closes modal and
  scrolls to early access signup form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
olsch01
2026-03-11 09:49:18 -04:00
parent 1563a183fb
commit ba9ddee99d
3 changed files with 436 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
index.html
View File

@@ -63,6 +63,7 @@
</p>
<div class="hero-actions">
<a href="#preview-signup" class="btn btn-primary btn-lg">Join the Preview List</a>
<button class="btn btn-calc btn-lg" id="openCalc">✦ Calculate Your Interest Income Potential</button>
<a href="#features" class="btn btn-ghost btn-lg">See What's Inside ↓</a>
</div>
<div class="hero-trust">
@@ -428,6 +429,106 @@
</div>
</footer>
<!-- ── BENEFIT CALCULATOR MODAL ─────────────────────── -->
<div class="calc-overlay" id="calcOverlay" aria-modal="true" role="dialog">
<div class="calc-modal">
<button class="calc-close" id="calcClose" aria-label="Close calculator">×</button>
<div class="calc-header">
<div class="section-label">ROI Calculator</div>
<h2>See What LedgerIQ Could Earn Your Community</h2>
<p>Answer a few quick questions for a personalized, conservative interest income estimate.</p>
</div>
<!-- INPUTS -->
<div id="calcForm">
<div class="calc-grid">
<div class="calc-field">
<label for="calcHomesites">Number of Homesites</label>
<input type="number" id="calcHomesites" placeholder="e.g. 150" min="1" />
</div>
<div class="calc-field">
<label for="calcPropertyType">Property Type</label>
<select id="calcPropertyType">
<option value="">Select type...</option>
<option value="sfh">Single Family Homes</option>
<option value="townhomes">Townhomes</option>
<option value="condos">Condos</option>
<option value="mixed">Mixed Use</option>
</select>
</div>
<div class="calc-field">
<label for="calcAnnualIncome">Annual Dues Income</label>
<div class="input-prefix-wrap">
<span class="input-prefix">$</span>
<input type="number" id="calcAnnualIncome" placeholder="e.g. 250,000" min="0" />
</div>
</div>
<div class="calc-field">
<label for="calcPaymentFreq">Dues Payment Frequency</label>
<select id="calcPaymentFreq">
<option value="monthly">Monthly</option>
<option value="quarterly">Quarterly</option>
<option value="annually">Annually</option>
</select>
</div>
<div class="calc-field">
<label for="calcReserveFunds">Current Reserve Fund Balance</label>
<div class="input-prefix-wrap">
<span class="input-prefix">$</span>
<input type="number" id="calcReserveFunds" placeholder="e.g. 500,000" min="0" />
</div>
</div>
<div class="calc-field">
<label for="calcInterest2025">Interest Income Earned in 2025</label>
<div class="input-prefix-wrap">
<span class="input-prefix">$</span>
<input type="number" id="calcInterest2025" placeholder="e.g. 4,500" min="0" />
</div>
</div>
</div>
<p class="calc-error hidden" id="calcError">Please fill in homesites and annual dues income to continue.</p>
<button class="btn btn-primary btn-lg calc-submit-btn" id="calcSubmit">Calculate My Potential →</button>
<p class="calc-fine">Conservative estimates for illustrative purposes only. Not financial advice.</p>
</div>
<!-- RESULTS -->
<div id="calcResults" class="hidden">
<div class="result-highlight">
<div class="result-label">Estimated Annual Interest Income Potential</div>
<div class="result-amount" id="resultAmount">$0</div>
<div class="result-comparison">
<span>vs. your 2025 earnings: <strong id="resultCurrent">$0</strong></span>
<span class="result-badge" id="resultBadge"></span>
</div>
</div>
<div class="result-breakdown">
<div class="result-row">
<span>Operating fund cash management</span>
<span class="result-row-val" id="resultOperating">$0</span>
</div>
<div class="result-row">
<span>Reserve fund investment income</span>
<span class="result-row-val" id="resultReserve">$0</span>
</div>
</div>
<div class="calc-ai-bubble">
<span class="ai-label">✦ LedgerIQ AI Estimate</span>
<p id="calcAiText"></p>
</div>
<div class="calc-cta">
<p>Ready to put these gains to work for your community?</p>
<a href="#preview-signup" class="btn btn-primary btn-lg calc-cta-btn" id="calcCTABtn">Get Early Access — Reserve My Spot →</a>
<button class="btn btn-ghost calc-recalc" id="calcRecalc">← Recalculate</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>