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="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,44 +21,90 @@
</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 -->
<section class="hero investment-hero">
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<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">
HOA Investment Management<br />
<span class="gradient-text">That Actually Works</span>
<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 liquidity for operations
and capital projects.
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; ✓ 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>
</section>
<!-- Problem Section -->
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>Most HOAs Are Losing Money on Their Reserves</h2>
@@ -64,43 +112,43 @@
<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>
<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>
<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>
<p>Board members worry about making investment decisions. What's allowed? What's safe? What fulfills our fiduciary duty?</p>
</div>
<div class="problem-card">
<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>
</div>
</div>
</div>
</section>
<!-- Solution Section -->
<section class="solution-section">
<!-- SOLUTION SECTION -->
<section id="features" 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="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 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 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>
<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 class="solution-card">
<div class="solution-icon">🎯</div>
@@ -116,7 +164,7 @@
</div>
</section>
<!-- Investment Strategies Section -->
<!-- INVESTMENT STRATEGIES SECTION -->
<section id="strategies" class="strategies-section">
<div class="container">
<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>
<ul>
<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>✓ Short-term CDs (3-12 months)</li>
<li><strong>Expected Return:</strong> 4-5% annually</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>
<p><strong>For:</strong> HOAs with healthy reserves and a 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>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>
<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 (10-20%)</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>Expected Return:</strong> 7–9% annually</li>
<li><strong>Risk Level:</strong> Moderate</li>
</ul>
</div>
</div>
</section>
<!-- Calculator 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" />
<label for="reserveAmount">Total Reserve Funds</label>
<input type="number" id="reserveAmount" placeholder="e.g. 500,000" />
</div>
<div class="calc-input-group">
<label>Current Annual Return (%)</label>
<input type="number" id="currentReturn" placeholder="e.g., 0.5" value="0.5" />
<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>Potential Return (%)</label>
<input type="number" id="potentialReturn" placeholder="e.g., 5.0" value="5.0" />
<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" 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>
<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>
</div>
</div>
</div>
</section>
<!-- Compliance 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>
<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>
@@ -207,27 +255,47 @@
</div>
</section>
<!-- CTA 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>
<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 • 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>
</section>
<!-- Footer -->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p>
<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">
<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#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>
</footer>
@@ -244,9 +312,8 @@
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';
document.getElementById('investCalcResults').style.display = 'block';
// Track event
if (typeof gtag !== 'undefined') {
gtag('event', 'calculator_submit', {
'event_category': 'conversion',
@@ -255,5 +322,22 @@
}
}
</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>

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="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) -->
@@ -19,44 +21,90 @@
</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="#comparison">Comparison</a>
<a href="#pricing">Pricing</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="#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 -->
<section class="hero reserve-study-hero">
<!-- HERO -->
<section class="hero">
<div class="hero-glow"></div>
<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">
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 confidence
that your HOA is financially prepared.
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; ✓ 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>
</section>
<!-- Problem Section -->
<!-- PROBLEM SECTION -->
<section class="problem-section">
<div class="container">
<h2>The Problem with Traditional Reserve Studies</h2>
@@ -68,8 +116,8 @@
</div>
<div class="problem-card">
<div class="problem-icon">💸</div>
<h3>Expensive & 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>
<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>
</div>
<div class="problem-card">
<div class="problem-icon">📊</div>
@@ -85,12 +133,12 @@
</div>
</section>
<!-- Solution Section -->
<section class="solution-section">
<!-- SOLUTION SECTION -->
<section id="features" class="solution-section">
<div class="container">
<h2 class="section-title">The AI-Powered Alternative</h2>
<p class="section-sub">HOA LedgerIQ replaces your static reserve study with dynamic, continuous planning that adapts to real-world changes.</p>
<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>
@@ -116,7 +164,7 @@
</div>
</section>
<!-- Comparison Section -->
<!-- COMPARISON SECTION -->
<section id="comparison" class="comparison-section">
<div class="container">
<h2>Traditional vs. AI-Powered Reserve Studies</h2>
@@ -128,13 +176,13 @@
</div>
<div class="comparison-row">
<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>
<div class="comparison-row">
<div class="comparison-feature">Cost</div>
<div class="comparison-traditional">$1,500-$5,000</div>
<div class="comparison-ai">$99/month ✓</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>
@@ -160,40 +208,77 @@
</div>
</section>
<!-- Calculator 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 calculator.</p>
<a href="index.html#calculator" class="btn btn-primary btn-lg">Open Reserve Calculator</a>
<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 -->
<!-- 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 • 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>
</section>
<!-- Footer -->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<p>&copy; 2026 HOA LedgerIQ. All rights reserved.</p>
<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">
<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#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>
</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>

251
styles.css
View File

@@ -1047,3 +1047,254 @@ body {
.banner-text { display: none; }
.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; }
}