Improve SEO pages layout, styling, and add screenshot carousel

- Fix nav on both pages to use correct .nav/.nav-inner structure (was
  using .navbar which had no styles defined), matching index.html
- Add coming-soon banner and Login button to both SEO pages
- Add screenshot carousel (hero-visual) to both pages matching index.html
- Fix footer to use full footer-inner/footer-col structure with logo
- Add 200+ lines of missing CSS to styles.css: .problem-section,
  .solution-section, .comparison-table, .strategies-section,
  .calculator-section, .compliance-section, .cta-section, and all
  child components — all matching the dark theme design system
- Fix investment calculator element IDs to avoid conflicts with
  the main ROI calculator in app.js
- Add Chatwoot support widget to both pages for consistency
- Full mobile responsiveness for all new components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-01 11:21:24 -04:00
parent 84e33ce23d
commit 99ec08624e
3 changed files with 808 additions and 388 deletions

View File

@@ -7,6 +7,8 @@
<meta name="description" content="Maximize your HOA's investment income with AI-powered investment management. Smart strategies for reserve funds, operating accounts, and capital projects. Free analysis.">
<meta name="keywords" content="HOA investment management, HOA reserve fund investment, HOA investment policy, HOA cash management, HOA investment strategy">
<link rel="canonical" href="https://www.hoaledgeriq.com/investment-management" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) -->
@@ -19,241 +21,323 @@
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
<div class="nav-links">
<a href="index.html">Home</a>
<a href="#features">Features</a>
<a href="#strategies">Strategies</a>
<a href="#calculator">Calculator</a>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
<!-- COMING SOON BANNER -->
<div class="coming-soon-banner">
<span class="banner-badge" id="bannerCountdown">Launching Soon</span>
<span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="index.html#preview-signup" class="banner-cta">Get Early Access →</a>
</div>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" />
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#strategies">Strategies</a></li>
<li><a href="#calculator">Calculator</a></li>
</ul>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
<a href="https://app.hoaledgeriq.com" class="btn btn-outline nav-btn nav-login" target="_blank" rel="noopener">Login</a>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<div class="container">
<div class="hero-badge">
<span class="pulse-dot"></span>
Smart Investment Management
</div>
<h1 class="hero-headline">
HOA Investment Management<br />
<span class="gradient-text">That Maximizes Returns</span>
</h1>
<p class="hero-sub">
Stop leaving money on the table. HOA LedgerIQ's AI-powered investment management
helps you maximize returns on reserve funds while maintaining the liquidity needed
for operations and capital projects.
</p>
<div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">Calculate Potential Earnings</a>
<a href="#strategies" class="btn btn-ghost btn-lg">View Strategies →</a>
</div>
<div class="hero-trust">
<p>✓ FDIC-insured options &nbsp;&nbsp; ✓ State-compliant &nbsp;&nbsp; ✓ Risk-adjusted strategies</p>
</div>
</div>
<!-- Screenshot Carousel -->
<div class="hero-visual">
<div class="screenshot-carousel" id="screenshotCarousel">
<div class="carousel-frame">
<div class="carousel-slides">
<div class="carousel-slide active">
<img src="img/screenshot-dashboard.png" alt="HOA LedgerIQ Dashboard — Fund health scores, operating and reserve balances" />
<div class="slide-caption">Dashboard — Fund Health &amp; At-a-Glance Metrics</div>
</div>
<div class="carousel-slide">
<img src="img/screenshot-cashflow.png" alt="HOA LedgerIQ Cash Flow — Projected balances with forward forecasting chart" />
<div class="slide-caption">Cash Flow — Actuals &amp; Forward Projections</div>
</div>
<div class="carousel-slide">
<img src="img/screenshot-capital.png" alt="HOA LedgerIQ Capital Planning — Multi-year project timeline and budget view" />
<div class="slide-caption">Capital Planning — 5-Year Project Pipeline</div>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero investment-hero">
<div class="container">
<div class="hero-badge">Smart Investment Management</div>
<h1 class="hero-headline">
HOA Investment Management<br />
<span class="gradient-text">That Actually Works</span>
</h1>
<p class="hero-sub">
Stop leaving money on the table. HOA LedgerIQ's AI-powered investment management
helps you maximize returns on reserve funds while maintaining liquidity for operations
and capital projects.
</p>
<div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">Calculate Potential Earnings</a>
<a href="#strategies" class="btn btn-ghost btn-lg">View Strategies →</a>
</div>
<div class="hero-trust">
<p>✓ FDIC-insured options &nbsp; ✓ State-compliant &nbsp; ✓ Risk-adjusted strategies</p>
</div>
<div class="carousel-controls">
<button class="carousel-btn carousel-prev" aria-label="Previous screenshot">&#8592;</button>
<div class="carousel-dots">
<span class="carousel-dot active" data-index="0"></span>
<span class="carousel-dot" data-index="1"></span>
<span class="carousel-dot" data-index="2"></span>
</div>
<button class="carousel-btn carousel-next" aria-label="Next screenshot">&#8594;</button>
</div>
</section>
</div>
</div>
</section>
<!-- Problem Section -->
<section class="problem-section">
<div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">💰</div>
<h3>Sitting in Checking Accounts</h3>
<p>Most HOAs keep reserve funds in non-interest-bearing accounts, losing 3-5% annually to inflation. That's thousands in lost income every year.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📉</div>
<h3>Too Conservative</h3>
<p>Even "safe" investments like money markets now yield 4-5%, but many HOAs still earn 0.01% in traditional savings accounts.</p>
</div>
<div class="problem-card">
<div class="problem-icon">⚖️</div>
<h3>Compliance Concerns</h3>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What's fiduciary?</p>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>No Strategy</h3>
<p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p>
</div>
</div>
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">💰</div>
<h3>Sitting in Checking Accounts</h3>
<p>Most HOAs keep reserve funds in non-interest-bearing accounts, losing 35% annually to inflation. That's thousands in lost income every year.</p>
</div>
</section>
<!-- Solution Section -->
<section class="solution-section">
<div class="container">
<h2 class="section-title">Smart Investment Strategies for HOAs</h2>
<p class="section-sub">AI-powered recommendations tailored to your HOA's specific needs and risk tolerance.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🏦</div>
<h3>Operating Account Optimization</h3>
<p>Keep 3-6 months of operating expenses in a high-yield account. Earn 4-5% APY with full liquidity. Typical HOA: +$2,000-5,000/year.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Reserve Fund Laddering</h3>
<p>CD ladders and Treasury ladders match your capital project timeline. Earn higher yields on money you won't need for 1-5 years.</p>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Investment Policy Creation</h3>
<p>AI generates a compliant investment policy statement tailored to your state's HOA laws and your community's risk tolerance.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📊</div>
<h3>Performance Tracking</h3>
<p>Monitor investment performance across all accounts. Get alerts when rebalancing is needed or better rates become available.</p>
</div>
</div>
<div class="problem-card">
<div class="problem-icon">📉</div>
<h3>Too Conservative</h3>
<p>Even "safe" investments like money markets now yield 45%, but many HOAs still earn 0.01% in traditional savings accounts.</p>
</div>
</section>
<!-- Investment Strategies Section -->
<section id="strategies" class="strategies-section">
<div class="container">
<h2>Investment Strategies by Risk Level</h2>
<div class="strategy-card conservative">
<h3>🛡️ Conservative Strategy</h3>
<p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p>
<ul>
<li>✓ FDIC-insured accounts only</li>
<li>✓ High-yield savings accounts (4-5% APY)</li>
<li>✓ Money market funds</li>
<li>✓ Short-term CDs (3-12 months)</li>
<li><strong>Expected Return:</strong> 4-5% annually</li>
<li><strong>Risk Level:</strong> Very Low</li>
</ul>
</div>
<div class="strategy-card moderate">
<h3>⚖️ Moderate Strategy</h3>
<p><strong>For:</strong> HOAs with healthy reserves and 2-5 year project timeline</p>
<ul>
<li>✓ Treasury securities (T-bills, notes)</li>
<li>✓ CD laddering strategy</li>
<li>✓ Government bond funds</li>
<li>✓ Mix of liquid and term investments</li>
<li><strong>Expected Return:</strong> 5-7% annually</li>
<li><strong>Risk Level:</strong> Low</li>
</ul>
</div>
<div class="strategy-card aggressive">
<h3>📈 Growth Strategy</h3>
<p><strong>For:</strong> HOAs with substantial reserves and long-term horizon (5+ years)</p>
<ul>
<li>✓ Diversified bond funds</li>
<li>✓ Conservative equity exposure (10-20%)</li>
<li>✓ REITs for income</li>
<li>✓ Balanced fund approach</li>
<li><strong>Expected Return:</strong> 7-9% annually</li>
<li><strong>Risk Level:</strong> Moderate</li>
</ul>
</div>
<div class="problem-card">
<div class="problem-icon">⚖️</div>
<h3>Compliance Concerns</h3>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What fulfills our fiduciary duty?</p>
</div>
</section>
<!-- Calculator Section -->
<section id="calculator" class="calculator-section">
<div class="container">
<h2>How Much Could Your HOA Earn?</h2>
<p>Calculate the potential investment income your HOA is leaving on the table.</p>
<div class="calc-wrapper">
<div class="calc-input-group">
<label>Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g., 500000" />
</div>
<div class="calc-input-group">
<label>Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g., 0.5" value="0.5" />
</div>
<div class="calc-input-group">
<label>Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g., 5.0" value="5.0" />
</div>
<button class="btn btn-primary btn-lg" onclick="calculateInvestment()">Calculate Potential</button>
<div id="calcResults" class="calc-results" style="display:none;">
<h3>Your HOA Could Earn:</h3>
<div class="result-highlight">$<span id="yearlyGain">0</span> more per year</div>
<p>That's <span id="totalGain">0</span> over 10 years!</p>
<a href="index.html#preview-signup" class="btn btn-primary">Start Optimizing Today</a>
</div>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>No Formal Strategy</h3>
<p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p>
</div>
</section>
</div>
</div>
</section>
<!-- Compliance Section -->
<section class="compliance-section">
<div class="container">
<h2>State-Compliant Investment Guidance</h2>
<p>Every state has different laws about HOA investments. HOA LedgerIQ ensures compliance:</p>
<ul class="compliance-list">
<li>✓ Permitted investment types by state</li>
<li>✓ Diversification requirements</li>
<li>✓ Fiduciary duty guidance</li>
<li>✓ Investment policy templates</li>
<li>✓ Regular compliance updates</li>
</ul>
<!-- SOLUTION SECTION -->
<section id="features" class="solution-section">
<div class="container">
<div class="section-label">Smart Investment Management</div>
<h2 class="section-title">AI-Powered Strategies for HOAs</h2>
<p class="section-sub">Personalized investment recommendations tailored to your HOA's specific cash flow needs and risk tolerance.</p>
<div class="solution-grid">
<div class="solution-card">
<div class="solution-icon">🏦</div>
<h3>Operating Account Optimization</h3>
<p>Keep 36 months of operating expenses in a high-yield account. Earn 45% APY with full liquidity. Typical HOA: +$2,0005,000/year.</p>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Start Maximizing Your HOA's Investment Income</h2>
<p>Get personalized investment recommendations for your community.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Get Free Investment Analysis</a>
<p class="cta-note">No credit card required • 14-day free trial • State-compliant strategies</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Reserve Fund Laddering</h3>
<p>CD and Treasury ladders matched to your capital project timeline. Earn higher yields on money you won't need for 15 years.</p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p>
<div class="footer-links">
<a href="index.html">Home</a>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#contact">Contact</a>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Investment Policy Creation</h3>
<p>AI generates a compliant investment policy statement tailored to your state's HOA laws and your community's risk tolerance.</p>
</div>
</footer>
<div class="solution-card">
<div class="solution-icon">📊</div>
<h3>Performance Tracking</h3>
<p>Monitor investment performance across all accounts. Get alerts when rebalancing is needed or better rates become available.</p>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
<script>
function calculateInvestment() {
const reserves = parseFloat(document.getElementById('reserveAmount').value) || 0;
const currentRate = parseFloat(document.getElementById('currentReturn').value) || 0;
const potentialRate = parseFloat(document.getElementById('potentialReturn').value) || 0;
const yearlyGain = reserves * ((potentialRate - currentRate) / 100);
const totalGain = yearlyGain * 10;
document.getElementById('yearlyGain').textContent = yearlyGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('totalGain').textContent = totalGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('calcResults').style.display = 'block';
// Track event
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
'event_label': 'Investment Calculator'
});
}
}
</script>
<!-- INVESTMENT STRATEGIES SECTION -->
<section id="strategies" class="strategies-section">
<div class="container">
<h2>Investment Strategies by Risk Level</h2>
<div class="strategy-card conservative">
<h3>🛡️ Conservative Strategy</h3>
<p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p>
<ul>
<li>✓ FDIC-insured accounts only</li>
<li>✓ High-yield savings accounts (45% APY)</li>
<li>✓ Money market funds</li>
<li>✓ Short-term CDs (312 months)</li>
<li><strong>Expected Return:</strong> 45% annually</li>
<li><strong>Risk Level:</strong> Very Low</li>
</ul>
</div>
<div class="strategy-card moderate">
<h3>⚖️ Moderate Strategy</h3>
<p><strong>For:</strong> HOAs with healthy reserves and a 25 year project timeline</p>
<ul>
<li>✓ Treasury securities (T-bills, notes)</li>
<li>✓ CD laddering strategy</li>
<li>✓ Government bond funds</li>
<li>✓ Mix of liquid and term investments</li>
<li><strong>Expected Return:</strong> 57% annually</li>
<li><strong>Risk Level:</strong> Low</li>
</ul>
</div>
<div class="strategy-card aggressive">
<h3>📈 Growth Strategy</h3>
<p><strong>For:</strong> HOAs with substantial reserves and a long-term horizon (5+ years)</p>
<ul>
<li>✓ Diversified bond funds</li>
<li>✓ Conservative equity exposure (1020%)</li>
<li>✓ REITs for income</li>
<li>✓ Balanced fund approach</li>
<li><strong>Expected Return:</strong> 79% annually</li>
<li><strong>Risk Level:</strong> Moderate</li>
</ul>
</div>
</div>
</section>
<!-- CALCULATOR SECTION -->
<section id="calculator" class="calculator-section">
<div class="container">
<h2>How Much Could Your HOA Earn?</h2>
<p>Calculate the potential investment income your HOA is leaving on the table.</p>
<div class="calc-wrapper">
<div class="calc-input-group">
<label for="reserveAmount">Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g. 500,000" />
</div>
<div class="calc-input-group">
<label for="currentReturn">Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g. 0.5" value="0.5" />
</div>
<div class="calc-input-group">
<label for="potentialReturn">Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g. 5.0" value="5.0" />
</div>
<button class="btn btn-primary btn-lg" style="width:100%; justify-content:center;" onclick="calculateInvestment()">Calculate Potential</button>
<div id="investCalcResults" class="calc-results" style="display:none;">
<h3>Your HOA Could Earn:</h3>
<div class="result-highlight">$<span id="yearlyGain">0</span> more per year</div>
<p>That's <strong>$<span id="totalGain">0</span></strong> more over 10 years</p>
<a href="index.html#preview-signup" class="btn btn-primary">Start Optimizing Today</a>
</div>
</div>
</div>
</section>
<!-- COMPLIANCE SECTION -->
<section class="compliance-section">
<div class="container">
<h2>State-Compliant Investment Guidance</h2>
<p>Every state has different laws about HOA investments. HOA LedgerIQ keeps you compliant:</p>
<ul class="compliance-list">
<li>✓ Permitted investment types by state</li>
<li>✓ Diversification requirements</li>
<li>✓ Fiduciary duty guidance</li>
<li>✓ Investment policy templates</li>
<li>✓ Regular compliance updates</li>
</ul>
</div>
</section>
<!-- CTA SECTION -->
<section class="cta-section">
<div class="container">
<h2>Start Maximizing Your HOA's Investment Income</h2>
<p>Get personalized investment recommendations for your community — free during early access.</p>
<div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Get Free Investment Analysis</a>
<p class="cta-note">No credit card required &nbsp;·&nbsp; 30-day free trial &nbsp;·&nbsp; State-compliant strategies</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-logo">
<img src="logo_house.svg" alt="HOA LedgerIQ" class="logo-img logo-img--footer" />
<p>AI-powered HOA investment &amp; finance management.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a>
<a href="index.html#preview-signup">Early Access</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Pages</div>
<a href="investment-management.html">Investment Management</a>
<a href="reserve-study-software.html">Reserve Studies</a>
</div>
<div class="footer-col">
<div class="footer-col-title">Legal</div>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<span>&copy; 2026 HOA LedgerIQ. All rights reserved.</span>
</div>
</div>
</footer>
<script src="app.js"></script>
<script>
function calculateInvestment() {
const reserves = parseFloat(document.getElementById('reserveAmount').value) || 0;
const currentRate = parseFloat(document.getElementById('currentReturn').value) || 0;
const potentialRate = parseFloat(document.getElementById('potentialReturn').value) || 0;
const yearlyGain = reserves * ((potentialRate - currentRate) / 100);
const totalGain = yearlyGain * 10;
document.getElementById('yearlyGain').textContent = yearlyGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('totalGain').textContent = totalGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('investCalcResults').style.display = 'block';
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
'event_label': 'Investment Calculator'
});
}
}
</script>
<!-- Support Chat Widget -->
<script>
(function(d,t) {
var BASE_URL="https://chat.hoaledgeriq.com";
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.chatwootSDK.run({
websiteToken: '1QMW1fycL5xHvd6XMfg4Dbb4',
baseUrl: BASE_URL
})
}
})(document,"script");
</script>
</body>
</html>