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

Merge pull request 'Improve SEO pages layout, styling, and add screenshot carousel' (#6) from feature/seo-pages-improvements into main

Browse Source 
Reviewed-on: #6
This commit is contained in:
JoeBot
2026-04-01 11:22:21 -04:00
parent 84e33ce23d 99ec08624e
commit b746116ede
3 changed files with 808 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
investment-management.html
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="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"> <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="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 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" /> <link rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
@@ -19,44 +21,90 @@
</script> </script>
</head> </head>
<body> <body>
<!-- Navigation -->
<nav class="navbar"> <!-- COMING SOON BANNER -->
<div class="container"> <div class="coming-soon-banner">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" /> <span class="banner-badge" id="bannerCountdown">Launching Soon</span>
<div class="nav-links"> <span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="index.html">Home</a> <a href="index.html#preview-signup" class="banner-cta">Get Early Access →</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>
</div> </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> </div>
</nav> </nav>
<!-- Hero Section --> <!-- HERO -->
<section class="hero investment-hero"> <section class="hero">
<div class="hero-glow"></div>
<div class="container"> <div class="container">
<div class="hero-badge">Smart Investment Management</div> <div class="hero-badge">
<span class="pulse-dot"></span>
Smart Investment Management
</div>
<h1 class="hero-headline"> <h1 class="hero-headline">
HOA Investment Management<br /> HOA Investment Management<br />
<span class="gradient-text">That Actually Works</span> <span class="gradient-text">That Maximizes Returns</span>
</h1> </h1>
<p class="hero-sub"> <p class="hero-sub">
Stop leaving money on the table. HOA LedgerIQ's AI-powered investment management 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 helps you maximize returns on reserve funds while maintaining the liquidity needed
and capital projects. for operations and capital projects.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="#calculator" class="btn btn-primary btn-lg">Calculate Potential Earnings</a> <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> <a href="#strategies" class="btn btn-ghost btn-lg">View Strategies →</a>
</div> </div>
<div class="hero-trust"> <div class="hero-trust">
<p>✓ FDIC-insured options &nbsp; ✓ State-compliant &nbsp; ✓ Risk-adjusted strategies</p> <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>
<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>
</div> </div>
</div> </div>
</section> </section>
<!-- Problem Section --> <!-- PROBLEM SECTION -->
<section class="problem-section"> <section class="problem-section">
<div class="container"> <div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2> <h2>Most HOAs Are Losing Money on Their Reserves</h2>
@@ -64,43 +112,43 @@
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">💰</div> <div class="problem-icon">💰</div>
<h3>Sitting in Checking Accounts</h3> <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> <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>
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">📉</div> <div class="problem-icon">📉</div>
<h3>Too Conservative</h3> <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> <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>
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">⚖️</div> <div class="problem-icon">⚖️</div>
<h3>Compliance Concerns</h3> <h3>Compliance Concerns</h3>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What's fiduciary?</p> <p>Board members worry about making investment decisions. What's allowed? What's safe? What fulfills our fiduciary duty?</p>
</div> </div>
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">📊</div> <div class="problem-icon">📊</div>
<h3>No Strategy</h3> <h3>No Formal Strategy</h3>
<p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p> <p>Without a formal investment policy, HOAs miss opportunities and leave money on the table year after year.</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Solution Section --> <!-- SOLUTION SECTION -->
<section class="solution-section"> <section id="features" class="solution-section">
<div class="container"> <div class="container">
<h2 class="section-title">Smart Investment Strategies for HOAs</h2> <div class="section-label">Smart Investment Management</div>
<p class="section-sub">AI-powered recommendations tailored to your HOA's specific needs and risk tolerance.</p> <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-grid">
<div class="solution-card"> <div class="solution-card">
<div class="solution-icon">🏦</div> <div class="solution-icon">🏦</div>
<h3>Operating Account Optimization</h3> <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> <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>
<div class="solution-card"> <div class="solution-card">
<div class="solution-icon">📈</div> <div class="solution-icon">📈</div>
<h3>Reserve Fund Laddering</h3> <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> <p>CD and Treasury ladders matched to your capital project timeline. Earn higher yields on money you won't need for 1–5 years.</p>
</div> </div>
<div class="solution-card"> <div class="solution-card">
<div class="solution-icon">🎯</div> <div class="solution-icon">🎯</div>
@@ -116,7 +164,7 @@
</div> </div>
</section> </section>
<!-- Investment Strategies Section --> <!-- INVESTMENT STRATEGIES SECTION -->
<section id="strategies" class="strategies-section"> <section id="strategies" class="strategies-section">
<div class="container"> <div class="container">
<h2>Investment Strategies by Risk Level</h2> <h2>Investment Strategies by Risk Level</h2>
@@ -126,77 +174,77 @@
<p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p> <p><strong>For:</strong> HOAs with low reserves or near-term capital projects</p>
<ul> <ul>
<li>✓ FDIC-insured accounts only</li> <li>✓ FDIC-insured accounts only</li>
<li>✓ High-yield savings accounts (4-5% APY)</li> <li>✓ High-yield savings accounts (4–5% APY)</li>
<li>✓ Money market funds</li> <li>✓ Money market funds</li>
<li>✓ Short-term CDs (3-12 months)</li> <li>✓ Short-term CDs (3–12 months)</li>
<li><strong>Expected Return:</strong> 4-5% annually</li> <li><strong>Expected Return:</strong> 4–5% annually</li>
<li><strong>Risk Level:</strong> Very Low</li> <li><strong>Risk Level:</strong> Very Low</li>
</ul> </ul>
</div> </div>
<div class="strategy-card moderate"> <div class="strategy-card moderate">
<h3>⚖️ Moderate Strategy</h3> <h3>⚖️ Moderate Strategy</h3>
<p><strong>For:</strong> HOAs with healthy reserves and 2-5 year project timeline</p> <p><strong>For:</strong> HOAs with healthy reserves and a 2–5 year project timeline</p>
<ul> <ul>
<li>✓ Treasury securities (T-bills, notes)</li> <li>✓ Treasury securities (T-bills, notes)</li>
<li>✓ CD laddering strategy</li> <li>✓ CD laddering strategy</li>
<li>✓ Government bond funds</li> <li>✓ Government bond funds</li>
<li>✓ Mix of liquid and term investments</li> <li>✓ Mix of liquid and term investments</li>
<li><strong>Expected Return:</strong> 5-7% annually</li> <li><strong>Expected Return:</strong> 5–7% annually</li>
<li><strong>Risk Level:</strong> Low</li> <li><strong>Risk Level:</strong> Low</li>
</ul> </ul>
</div> </div>
<div class="strategy-card aggressive"> <div class="strategy-card aggressive">
<h3>📈 Growth Strategy</h3> <h3>📈 Growth Strategy</h3>
<p><strong>For:</strong> HOAs with substantial reserves and long-term horizon (5+ years)</p> <p><strong>For:</strong> HOAs with substantial reserves and a long-term horizon (5+ years)</p>
<ul> <ul>
<li>✓ Diversified bond funds</li> <li>✓ Diversified bond funds</li>
<li>✓ Conservative equity exposure (10-20%)</li> <li>✓ Conservative equity exposure (10–20%)</li>
<li>✓ REITs for income</li> <li>✓ REITs for income</li>
<li>✓ Balanced fund approach</li> <li>✓ Balanced fund approach</li>
<li><strong>Expected Return:</strong> 7-9% annually</li> <li><strong>Expected Return:</strong> 7–9% annually</li>
<li><strong>Risk Level:</strong> Moderate</li> <li><strong>Risk Level:</strong> Moderate</li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<!-- Calculator Section --> <!-- CALCULATOR SECTION -->
<section id="calculator" class="calculator-section"> <section id="calculator" class="calculator-section">
<div class="container"> <div class="container">
<h2>How Much Could Your HOA Earn?</h2> <h2>How Much Could Your HOA Earn?</h2>
<p>Calculate the potential investment income your HOA is leaving on the table.</p> <p>Calculate the potential investment income your HOA is leaving on the table.</p>
<div class="calc-wrapper"> <div class="calc-wrapper">
<div class="calc-input-group"> <div class="calc-input-group">
<label>Total Reserve Funds</label> <label for="reserveAmount">Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g., 500000" /> <input type="number" id="reserveAmount" placeholder="e.g. 500,000" />
</div> </div>
<div class="calc-input-group"> <div class="calc-input-group">
<label>Current Annual Return (%)</label> <label for="currentReturn">Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g., 0.5" value="0.5" /> <input type="number" id="currentReturn" placeholder="e.g. 0.5" value="0.5" />
</div> </div>
<div class="calc-input-group"> <div class="calc-input-group">
<label>Potential Return (%)</label> <label for="potentialReturn">Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g., 5.0" value="5.0" /> <input type="number" id="potentialReturn" placeholder="e.g. 5.0" value="5.0" />
</div> </div>
<button class="btn btn-primary btn-lg" onclick="calculateInvestment()">Calculate Potential</button> <button class="btn btn-primary btn-lg" style="width:100%; justify-content:center;" onclick="calculateInvestment()">Calculate Potential</button>
<div id="calcResults" class="calc-results" style="display:none;"> <div id="investCalcResults" class="calc-results" style="display:none;">
<h3>Your HOA Could Earn:</h3> <h3>Your HOA Could Earn:</h3>
<div class="result-highlight">$<span id="yearlyGain">0</span> more per year</div> <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> <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> <a href="index.html#preview-signup" class="btn btn-primary">Start Optimizing Today</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Compliance Section --> <!-- COMPLIANCE SECTION -->
<section class="compliance-section"> <section class="compliance-section">
<div class="container"> <div class="container">
<h2>State-Compliant Investment Guidance</h2> <h2>State-Compliant Investment Guidance</h2>
<p>Every state has different laws about HOA investments. HOA LedgerIQ ensures compliance:</p> <p>Every state has different laws about HOA investments. HOA LedgerIQ keeps you compliant:</p>
<ul class="compliance-list"> <ul class="compliance-list">
<li>✓ Permitted investment types by state</li> <li>✓ Permitted investment types by state</li>
<li>✓ Diversification requirements</li> <li>✓ Diversification requirements</li>
@@ -207,27 +255,47 @@
</div> </div>
</section> </section>
<!-- CTA Section --> <!-- CTA SECTION -->
<section class="cta-section"> <section class="cta-section">
<div class="container"> <div class="container">
<h2>Start Maximizing Your HOA's Investment Income</h2> <h2>Start Maximizing Your HOA's Investment Income</h2>
<p>Get personalized investment recommendations for your community.</p> <p>Get personalized investment recommendations for your community — free during early access.</p>
<div class="cta-form"> <div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Get Free Investment Analysis</a> <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> <p class="cta-note">No credit card required &nbsp;·&nbsp; 30-day free trial &nbsp;·&nbsp; State-compliant strategies</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container footer-inner">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p> <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-links">
<a href="index.html">Home</a> <div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="index.html#features">Features</a> <a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a> <a href="index.html#pricing">Pricing</a>
<a href="index.html#contact">Contact</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>
</div> </div>
</footer> </footer>
@@ -244,9 +312,8 @@
document.getElementById('yearlyGain').textContent = yearlyGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0}); 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('totalGain').textContent = totalGain.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
document.getElementById('calcResults').style.display = 'block'; document.getElementById('investCalcResults').style.display = 'block';
// Track event
if (typeof gtag !== 'undefined') { if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', { gtag('event', 'calculator_submit', {
'event_category': 'conversion', 'event_category': 'conversion',
@@ -255,5 +322,22 @@
} }
} }
</script> </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> </body>
</html> </html>

161
reserve-study-software.html
View File

@@ -7,6 +7,8 @@
<meta name="description" content="Modernize your HOA reserve studies with AI-powered continuous planning. Replace static 5-year studies with dynamic, real-time reserve funding analysis. Free preview access."> <meta name="description" content="Modernize your HOA reserve studies with AI-powered continuous planning. Replace static 5-year studies with dynamic, real-time reserve funding analysis. Free preview access.">
<meta name="keywords" content="HOA reserve study software, reserve study analysis, HOA capital planning, HOA asset management, reserve funding calculator"> <meta name="keywords" content="HOA reserve study software, reserve study analysis, HOA capital planning, HOA asset management, reserve funding calculator">
<link rel="canonical" href="https://www.hoaledgeriq.com/reserve-study-software" /> <link rel="canonical" href="https://www.hoaledgeriq.com/reserve-study-software" />
<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 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" /> <link rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
@@ -19,44 +21,90 @@
</script> </script>
</head> </head>
<body> <body>
<!-- Navigation -->
<nav class="navbar"> <!-- COMING SOON BANNER -->
<div class="container"> <div class="coming-soon-banner">
<img src="logo_house_transparent.svg" alt="HOA LedgerIQ" class="logo-img" /> <span class="banner-badge" id="bannerCountdown">Launching Soon</span>
<div class="nav-links"> <span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="index.html">Home</a> <a href="index.html#preview-signup" class="banner-cta">Get Early Access →</a>
<a href="#features">Features</a>
<a href="#comparison">Comparison</a>
<a href="#pricing">Pricing</a>
<a href="index.html#preview-signup" class="btn btn-primary nav-btn">Get Early Access</a>
</div> </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="#comparison">Comparison</a></li>
<li><a href="index.html#pricing">Pricing</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> </div>
</nav> </nav>
<!-- Hero Section --> <!-- HERO -->
<section class="hero reserve-study-hero"> <section class="hero">
<div class="hero-glow"></div>
<div class="container"> <div class="container">
<div class="hero-badge">AI-Powered Reserve Planning</div> <div class="hero-badge">
<span class="pulse-dot"></span>
AI-Powered Reserve Planning
</div>
<h1 class="hero-headline"> <h1 class="hero-headline">
HOA Reserve Study Software<br /> HOA Reserve Study Software<br />
<span class="gradient-text">That Actually Works</span> <span class="gradient-text">That Actually Works</span>
</h1> </h1>
<p class="hero-sub"> <p class="hero-sub">
Replace outdated, static reserve studies with AI-powered continuous planning. Replace outdated, static reserve studies with AI-powered continuous planning.
Get real-time funding analysis, capital project forecasts, and confidence Get real-time funding analysis, capital project forecasts, and the confidence
that your HOA is financially prepared. that your HOA is financially prepared — year round.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Free Preview</a> <a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Free Preview</a>
<a href="#comparison" class="btn btn-ghost btn-lg">See Comparison →</a> <a href="#comparison" class="btn btn-ghost btn-lg">See Comparison →</a>
</div> </div>
<div class="hero-trust"> <div class="hero-trust">
<p>✓ No credit card required &nbsp; ✓ 14-day free trial &nbsp; ✓ Cancel anytime</p> <p>✓ No credit card required &nbsp;&nbsp; ✓ 30-day free trial &nbsp;&nbsp; ✓ Cancel anytime</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>
<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>
</div> </div>
</div> </div>
</section> </section>
<!-- Problem Section --> <!-- PROBLEM SECTION -->
<section class="problem-section"> <section class="problem-section">
<div class="container"> <div class="container">
<h2>The Problem with Traditional Reserve Studies</h2> <h2>The Problem with Traditional Reserve Studies</h2>
@@ -68,8 +116,8 @@
</div> </div>
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">💸</div> <div class="problem-icon">💸</div>
<h3>Expensive & Infrequent</h3> <h3>Expensive &amp; Infrequent</h3>
<p>Professional reserve studies cost $1,500-$5,000 and are only done every 3-5 years. That's like navigating with a 5-year-old map.</p> <p>Professional reserve studies cost $1,500–$5,000 and are only done every 3–5 years. That's like navigating with a 5-year-old map.</p>
</div> </div>
<div class="problem-card"> <div class="problem-card">
<div class="problem-icon">📊</div> <div class="problem-icon">📊</div>
@@ -85,12 +133,12 @@
</div> </div>
</section> </section>
<!-- Solution Section --> <!-- SOLUTION SECTION -->
<section class="solution-section"> <section id="features" class="solution-section">
<div class="container"> <div class="container">
<h2 class="section-title">The AI-Powered Alternative</h2> <div class="section-label">The AI-Powered Alternative</div>
<p class="section-sub">HOA LedgerIQ replaces your static reserve study with dynamic, continuous planning that adapts to real-world changes.</p> <h2 class="section-title">Continuous Planning That Adapts</h2>
<p class="section-sub">HOA LedgerIQ replaces your static reserve study with dynamic, continuous planning that adjusts to real-world changes automatically.</p>
<div class="solution-grid"> <div class="solution-grid">
<div class="solution-card"> <div class="solution-card">
<div class="solution-icon">🤖</div> <div class="solution-icon">🤖</div>
@@ -116,7 +164,7 @@
</div> </div>
</section> </section>
<!-- Comparison Section --> <!-- COMPARISON SECTION -->
<section id="comparison" class="comparison-section"> <section id="comparison" class="comparison-section">
<div class="container"> <div class="container">
<h2>Traditional vs. AI-Powered Reserve Studies</h2> <h2>Traditional vs. AI-Powered Reserve Studies</h2>
@@ -128,13 +176,13 @@
</div> </div>
<div class="comparison-row"> <div class="comparison-row">
<div class="comparison-feature">Update Frequency</div> <div class="comparison-feature">Update Frequency</div>
<div class="comparison-traditional">Every 3-5 years</div> <div class="comparison-traditional">Every 3–5 years</div>
<div class="comparison-ai">Real-time ✓</div> <div class="comparison-ai">Real-time ✓</div>
</div> </div>
<div class="comparison-row"> <div class="comparison-row">
<div class="comparison-feature">Cost</div> <div class="comparison-feature">Cost</div>
<div class="comparison-traditional">$1,500-$5,000</div> <div class="comparison-traditional">$1,500–$5,000</div>
<div class="comparison-ai">$99/month ✓</div> <div class="comparison-ai">From $29/month ✓</div>
</div> </div>
<div class="comparison-row"> <div class="comparison-row">
<div class="comparison-feature">Accuracy</div> <div class="comparison-feature">Accuracy</div>
@@ -160,40 +208,77 @@
</div> </div>
</section> </section>
<!-- Calculator Section --> <!-- CALCULATOR CTA SECTION -->
<section class="calculator-section"> <section class="calculator-section">
<div class="container"> <div class="container">
<h2>Calculate Your Reserve Funding Needs</h2> <h2>Calculate Your Reserve Funding Needs</h2>
<p>See how much your HOA should have in reserves with our free calculator.</p> <p>See how much your HOA should have in reserves with our free AI-powered calculator.</p>
<a href="index.html#calculator" class="btn btn-primary btn-lg">Open Reserve Calculator</a> <a href="index.html#preview-signup" class="btn btn-primary btn-lg">Open Reserve Calculator</a>
</div> </div>
</section> </section>
<!-- CTA Section --> <!-- CTA SECTION -->
<section class="cta-section"> <section class="cta-section">
<div class="container"> <div class="container">
<h2>Ready to Modernize Your Reserve Planning?</h2> <h2>Ready to Modernize Your Reserve Planning?</h2>
<p>Join forward-thinking HOAs that have replaced outdated reserve studies with AI-powered continuous planning.</p> <p>Join forward-thinking HOAs that have replaced outdated reserve studies with AI-powered continuous planning.</p>
<div class="cta-form"> <div class="cta-form">
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Your Free 30-Day Trial</a> <a href="index.html#preview-signup" class="btn btn-primary btn-lg">Start Your Free 30-Day Trial</a>
<p class="cta-note">No credit card required • Cancel anytime • Free preview access</p> <p class="cta-note">No credit card required &nbsp;·&nbsp; Cancel anytime &nbsp;·&nbsp; Free preview access</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> <!-- FOOTER -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container footer-inner">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p> <div class="footer-logo">
<img src="logo_house.svg" alt="HOA LedgerIQ" class="logo-img logo-img--footer" />
<p>AI-powered HOA reserve study &amp; finance management.</p>
</div>
<div class="footer-links"> <div class="footer-links">
<a href="index.html">Home</a> <div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="index.html#features">Features</a> <a href="index.html#features">Features</a>
<a href="index.html#pricing">Pricing</a> <a href="index.html#pricing">Pricing</a>
<a href="index.html#contact">Contact</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>
</div> </div>
</footer> </footer>
<script src="app.js"></script> <script src="app.js"></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> </body>
</html> </html>

251
styles.css
View File

@@ -1047,3 +1047,254 @@ body {
.banner-text { display: none; } .banner-text { display: none; }
.dash-body { grid-template-columns: 1fr; } .dash-body { grid-template-columns: 1fr; }
} }
/* =============================================
SEO Landing Pages — Shared Component Styles
============================================= */
/* ---- Problem Section ---- */
.problem-section { padding: 80px 0; }
.problem-section h2 {
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.problem-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius);
padding: 28px;
transition: transform 0.18s, box-shadow 0.18s;
}
.problem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.problem-icon { font-size: 32px; margin-bottom: 14px; }
.problem-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.problem-card p { font-size: 14px; color: var(--gray-400); line-height: 1.65; }
/* ---- Solution Section ---- */
.solution-section {
background: linear-gradient(180deg, rgba(79,70,229,0.07) 0%, transparent 100%);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 80px 0;
text-align: center;
}
.solution-section .section-title { margin-bottom: 12px; }
.solution-section .section-sub { margin: 0 auto 48px; }
.solution-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: left;
}
.solution-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius);
padding: 28px;
transition: transform 0.18s, box-shadow 0.18s;
}
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.solution-icon { font-size: 28px; margin-bottom: 14px; }
.solution-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.solution-card p { font-size: 14px; color: var(--gray-400); line-height: 1.65; }
/* ---- Comparison Section ---- */
.comparison-section { padding: 80px 0; }
.comparison-section h2 {
font-size: clamp(24px, 3vw, 38px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.comparison-table {
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1.5fr 1.5fr;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row.header {
background: var(--gray-800);
}
.comparison-row.header > div {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-500);
}
.comparison-feature,
.comparison-traditional,
.comparison-ai { padding: 16px 20px; font-size: 14px; }
.comparison-feature { color: var(--gray-200); font-weight: 500; }
.comparison-traditional { color: var(--gray-600); }
.comparison-ai { color: var(--green); font-weight: 600; }
.comparison-row:not(.header) { background: var(--gray-900); }
.comparison-row:not(.header):hover { background: rgba(255,255,255,0.02); }
/* ---- Inline Calculator Section (investment page) ---- */
.calculator-section {
padding: 80px 0;
text-align: center;
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
}
.calculator-section h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.calculator-section > .container > p {
font-size: 16px;
color: var(--gray-400);
margin-bottom: 28px;
}
.calc-wrapper {
max-width: 560px;
margin: 0 auto;
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 36px;
text-align: left;
}
.calc-input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.calc-input-group label { font-size: 13px; font-weight: 600; color: var(--gray-400); }
.calc-input-group input {
background: var(--gray-900);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 12px 14px;
color: var(--gray-100);
font-size: 15px;
font-family: inherit;
width: 100%;
outline: none;
transition: border-color 0.15s;
}
.calc-input-group input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.calc-input-group input::placeholder { color: var(--gray-700); }
.calc-results {
margin-top: 24px;
padding: 28px;
background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(14,165,233,0.1));
border: 1px solid rgba(79,70,229,0.35);
border-radius: var(--radius);
text-align: center;
}
.calc-results h3 { font-size: 15px; font-weight: 700; color: var(--gray-300); margin-bottom: 10px; }
.calc-results .result-highlight {
font-size: 40px;
font-weight: 900;
color: var(--green);
letter-spacing: -0.03em;
margin-bottom: 8px;
}
.calc-results p { font-size: 14px; color: var(--gray-400); margin-bottom: 20px; }
/* ---- CTA Section ---- */
.cta-section {
padding: 100px 0;
text-align: center;
background: linear-gradient(180deg, transparent 0%, rgba(79,70,229,0.08) 100%);
border-top: 1px solid rgba(255,255,255,0.06);
}
.cta-section h2 {
font-size: clamp(24px, 3.5vw, 42px);
font-weight: 800;
color: #fff;
letter-spacing: -0.025em;
margin-bottom: 16px;
}
.cta-section > .container > p {
font-size: 18px;
color: var(--gray-400);
margin-bottom: 36px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.cta-form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-note { font-size: 13px; color: var(--gray-600); }
/* ---- Investment Strategies Section ---- */
.strategies-section { padding: 80px 0; }
.strategies-section h2 {
font-size: clamp(24px, 3vw, 38px);
font-weight: 800;
color: #fff;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 48px;
}
.strategy-card {
background: var(--gray-800);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 36px;
margin-bottom: 20px;
border-left-width: 4px;
}
.strategy-card h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.strategy-card > p { font-size: 14px; color: var(--gray-400); margin-bottom: 20px; }
.strategy-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.strategy-card ul li { font-size: 14px; color: var(--gray-400); line-height: 1.5; }
.strategy-card ul li strong { color: var(--gray-200); }
.strategy-card.conservative { border-left-color: var(--green); }
.strategy-card.moderate { border-left-color: var(--blue); }
.strategy-card.aggressive { border-left-color: var(--amber); }
/* ---- Compliance Section ---- */
.compliance-section {
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 80px 0;
}
.compliance-section h2 {
font-size: clamp(22px, 3vw, 36px);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.compliance-section > .container > p {
font-size: 16px;
color: var(--gray-400);
margin-bottom: 28px;
}
.compliance-list { list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.compliance-list li { font-size: 16px; color: var(--gray-300); font-weight: 500; }
/* ---- SEO Page Responsive ---- */
@media (max-width: 900px) {
.problem-grid { grid-template-columns: repeat(2, 1fr); }
.solution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.problem-grid { grid-template-columns: 1fr; }
.solution-grid { grid-template-columns: 1fr; }
.comparison-row { grid-template-columns: 1fr; }
.comparison-row.header { display: none; }
.comparison-feature { font-weight: 700; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.04); }
.comparison-traditional::before { content: 'Traditional: '; color: var(--gray-600); font-size: 12px; display: block; margin-bottom: 2px; }
.comparison-ai::before { content: 'HOA LedgerIQ: '; color: var(--blue); font-size: 12px; display: block; margin-bottom: 2px; }
.calc-wrapper { padding: 24px 20px; }
.strategy-card { padding: 24px; }
}