Files
HOALedgerIQ_Website/reserve-study-software.html
olsch01 99ec08624e 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>
2026-04-01 11:21:24 -04:00

285 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOA Reserve Study Software - AI-Powered Planning | HOA LedgerIQ</title>
<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">
<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 rel="stylesheet" href="styles.css" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RTWNVXPMRF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RTWNVXPMRF');
</script>
</head>
<body>
<!-- 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="#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>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<div class="container">
<div class="hero-badge">
<span class="pulse-dot"></span>
AI-Powered Reserve Planning
</div>
<h1 class="hero-headline">
HOA Reserve Study Software<br />
<span class="gradient-text">That Actually Works</span>
</h1>
<p class="hero-sub">
Replace outdated, static reserve studies with AI-powered continuous planning.
Get real-time funding analysis, capital project forecasts, and the confidence
that your HOA is financially prepared — year round.
</p>
<div class="hero-actions">
<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>
</div>
<div class="hero-trust">
<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>
</section>
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>The Problem with Traditional Reserve Studies</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">📅</div>
<h3>Outdated Immediately</h3>
<p>Traditional studies are static snapshots. By the time you get the report, it's already outdated. Construction costs change, emergencies happen, and your study doesn't adapt.</p>
</div>
<div class="problem-card">
<div class="problem-icon">💸</div>
<h3>Expensive &amp; Infrequent</h3>
<p>Professional reserve studies cost $1,500$5,000 and are only done every 35 years. That's like navigating with a 5-year-old map.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
<h3>Spreadsheet Chaos</h3>
<p>Most HOAs track reserves in spreadsheets that are error-prone, hard to update, and impossible to share with the board in real-time.</p>
</div>
<div class="problem-card">
<div class="problem-icon">😰</div>
<h3>Surprise Special Assessments</h3>
<p>Without continuous monitoring, HOAs often discover funding shortfalls too late, leading to emergency special assessments that homeowners hate.</p>
</div>
</div>
</div>
</section>
<!-- SOLUTION SECTION -->
<section id="features" class="solution-section">
<div class="container">
<div class="section-label">The AI-Powered Alternative</div>
<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-card">
<div class="solution-icon">🤖</div>
<h3>Continuous Monitoring</h3>
<p>Real-time tracking of reserve balances, expenses, and funding levels. Get alerts before problems become crises.</p>
</div>
<div class="solution-card">
<div class="solution-icon">📈</div>
<h3>Dynamic Forecasting</h3>
<p>AI-powered projections that adjust based on actual spending, inflation, and construction cost trends.</p>
</div>
<div class="solution-card">
<div class="solution-icon">🎯</div>
<h3>Smart Recommendations</h3>
<p>Get actionable insights: "Increase monthly reserves by $X" or "Delay roof project by 6 months to optimize cash flow."</p>
</div>
<div class="solution-card">
<div class="solution-icon">📱</div>
<h3>Board-Ready Reports</h3>
<p>Generate professional reserve funding reports in seconds, not hours. Perfect for board meetings and homeowner communications.</p>
</div>
</div>
</div>
</section>
<!-- COMPARISON SECTION -->
<section id="comparison" class="comparison-section">
<div class="container">
<h2>Traditional vs. AI-Powered Reserve Studies</h2>
<div class="comparison-table">
<div class="comparison-row header">
<div class="comparison-feature">Feature</div>
<div class="comparison-traditional">Traditional Study</div>
<div class="comparison-ai">HOA LedgerIQ</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Update Frequency</div>
<div class="comparison-traditional">Every 35 years</div>
<div class="comparison-ai">Real-time ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Cost</div>
<div class="comparison-traditional">$1,500$5,000</div>
<div class="comparison-ai">From $29/month ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Accuracy</div>
<div class="comparison-traditional">Static snapshot</div>
<div class="comparison-ai">Dynamic AI adjustments ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Board Reports</div>
<div class="comparison-traditional">Manual creation</div>
<div class="comparison-ai">One-click generation ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Alerts</div>
<div class="comparison-traditional">None</div>
<div class="comparison-ai">Proactive notifications ✓</div>
</div>
<div class="comparison-row">
<div class="comparison-feature">Special Assessment Prevention</div>
<div class="comparison-traditional">Reactive</div>
<div class="comparison-ai">Predictive ✓</div>
</div>
</div>
</div>
</section>
<!-- CALCULATOR CTA SECTION -->
<section class="calculator-section">
<div class="container">
<h2>Calculate Your Reserve Funding Needs</h2>
<p>See how much your HOA should have in reserves with our free AI-powered calculator.</p>
<a href="index.html#preview-signup" class="btn btn-primary btn-lg">Open Reserve Calculator</a>
</div>
</section>
<!-- CTA SECTION -->
<section class="cta-section">
<div class="container">
<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>
<div class="cta-form">
<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 &nbsp;·&nbsp; Cancel anytime &nbsp;·&nbsp; Free preview access</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 reserve study &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>
<!-- 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>