Files
HOALedgerIQ_Website/index.html
olsch01 4f99e8c71a Replace hero mockup with auto-rotating screenshot carousel
- Swap static dashboard card for 3-slide image carousel in hero section
- Slides auto-advance every 4.5s, pause on hover, support manual prev/next and dot navigation
- Add carousel CSS with fade transition, dot indicators, and glow border treatment
- Add carousel JS with goTo/prev/next/auto-rotate logic
- Images expected at img/screenshot-dashboard.png, img/screenshot-cashflow.png, img/screenshot-capital.png

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-09 14:42:05 -04:00

434 lines
21 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 LedgerIQ — AI-Powered HOA Finance Management</title>
<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" />
</head>
<!-- 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>
<body>
<!-- COMING SOON BANNER -->
<div class="coming-soon-banner">
<span class="banner-badge" id="bannerCountdown">Launching in 60 Days</span>
<span class="banner-text">HOA LedgerIQ is almost here — be first in line.</span>
<a href="#preview-signup" class="banner-cta">Get Early Access →</a>
</div>
<!-- NAV -->
<nav class="nav">
<div class="nav-inner">
<a href="#" class="nav-logo">
<img src="logo_house.svg" alt="HOA LedgerIQ" class="logo-img" />
</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#preview-signup">Early Access</a></li>
</ul>
<a href="#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 HOA Finance Management
</div>
<h1 class="hero-headline">
Your HOA Finances,<br />
<span class="gradient-text">Finally Under Control</span>
</h1>
<p class="hero-sub">
HOA LedgerIQ brings enterprise-grade AI analytics to community associations of any size.
Bank and Investment tracking, real-time budget insights, delinquency tracking, and intelligent
forecasting and planning — all in one beautifully simple platform. Stop wasting time with
outdated &amp; manual spreadsheets, while optimizing your community's finances.
</p>
<div class="hero-actions">
<a href="#preview-signup" class="btn btn-primary btn-lg">Join the Preview List</a>
<a href="#features" class="btn btn-ghost btn-lg">See What's Inside ↓</a>
</div>
<div class="hero-trust">
<span>Built for board treasurers, presidents, property managers &amp; CPAs</span>
</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>
<!-- SOCIAL PROOF STRIP -->
<div class="proof-strip">
<div class="container proof-inner">
<span class="proof-label">Trusted workflow for</span>
<div class="proof-items">
<span>Self-Managed HOAs</span>
<span class="sep">·</span>
<span>Property Management Firms</span>
<span class="sep">·</span>
<span>Community CPAs</span>
<span class="sep">·</span>
<span>Board Treasurers</span>
</div>
</div>
</div>
<!-- FEATURES -->
<section class="features" id="features">
<div class="container">
<div class="section-label">Core Capabilities</div>
<h2 class="section-title">Everything your HOA's<br />finances demand</h2>
<p class="section-sub">From dues collection to reserve fund forecasting, LedgerIQ handles the heavy lifting so your board can focus on the community.</p>
<div class="features-grid">
<div class="feature-card feature-card--highlight">
<div class="feature-icon"></div>
<h3>AI Financial Analytics</h3>
<p>Receive intelligent AI Powered investment recommendations designed to maximize investment income while ensuring sufficient funding for operating costs and capital projects.</p>
<div class="feature-tag">Powered by GPT-4</div>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Intelligent Cash Flow Visibility</h3>
<p>Understand budget vs. actuals in real time, accurately forecast your cash management throughout the year to make intelligent decisions, and optimize capital project timing.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏦</div>
<h3>Reserve Fund Forecasting</h3>
<p>AI-Enabled 5 Year Comprehensive Capital Project Planning. Easily understand the community's full inventory of assets, date of last repair and expected lifespan, estimated costs and timing to enable continuous planning capability around capital projects and ensure your community is on track — before the board meeting.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔔</div>
<h3>Delinquency Tracking & Alerts</h3>
<p>Automated late-fee calculations, escalation workflows, and homeowner reminders. Reduce delinquencies without awkward board calls.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📄</div>
<h3>One-Click Board Reports</h3>
<p>Beautiful, professional PDF and Excel reports ready for every board meeting — income statements, balance sheets, variance analysis, and more.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Audit-Ready Compliance</h3>
<p>Every transaction is timestamped, signed, and stored with a complete audit trail. Year-end CPA handoffs take minutes, not weeks.</p>
</div>
</div>
</div>
</section>
<!-- AI HIGHLIGHT SECTION -->
<section class="ai-section">
<div class="container ai-inner">
<div class="ai-text">
<div class="section-label">AI at the Core</div>
<h2>Optimize your Community's Finances</h2>
<p>HOA LedgerIQ's AI engine doesn't just review your data — it understands it. Get proactive anomaly alerts, funding shortfalls, investment strategy ideas around your predicted cash flow, spending pattern insights, and plain-English answers to complex financial questions without needing a CPA on speed dial. Turn that stale reserve study into an ongoing, active process. Most importantly, ditch the outdated and error prone spreadsheets.</p>
<ul class="ai-bullets">
<li><span class="check"></span> Budget vs. actual variance reporting</li>
<li><span class="check"></span> Predictive cash flow modeling</li>
<li><span class="check"></span> AI assisted investment recommendations</li>
<li><span class="check"></span> Integrated Capital Project Planning</li>
<li><span class="check"></span> Budget vs. actual variance reporting</li>
<li><span class="check"></span> One Click Board Meeting Reports</li>
<li><span class="check"></span> AI rated health scores of Operating and Reserve Funding</li>
</ul>
</div>
<div class="ai-visual">
<div class="chat-bubble user-bubble">What investment strategy should we implement given our forecasted cash flow?</div>
<div class="chat-bubble ai-bubble">
<span class="ai-label">✦ HOA LedgerIQ AI</span>
Operating funds are currently under-utilized. With over $100k projected in cash by April, deploying $40k into a short-term CD significantly boosts interest income without compromising the ability to pay monthly expenses or handle emergencies.
</div>
<div class="chat-bubble user-bubble">Are we on track to fund reserves fully by year-end?</div>
<div class="chat-bubble ai-bubble">
<span class="ai-label">✦ HOA LedgerIQ AI</span>
Yes — at current contribution rate you'll hit 98% reserve funding by Dec 31. No corrective action needed. Reserve study renewal is due in March.
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="pricing" id="pricing">
<div class="container">
<div class="section-label">Simple Pricing</div>
<h2 class="section-title">Pick the plan that fits your community</h2>
<p class="section-sub">No setup fees. No contracts. All plans include a 30-day free trial.</p>
<div class="pricing-grid">
<!-- STARTER -->
<div class="pricing-card">
<div class="plan-name">Starter</div>
<div class="plan-tagline">Perfect for small community HOAs</div>
<div class="plan-price"><span class="price-amount">$49</span><span class="price-period">/mo</span></div>
<div class="plan-units">Up to 100 units</div>
<ul class="plan-features">
<li><span class="check"></span> Account balance tracking</li>
<li><span class="check"></span> Investment account tracking</li>
<li><span class="check"></span> Dues collection tracking</li>
<li><span class="check"></span> Basic delinquency alerts</li>
<li><span class="check"></span> Monthly board-ready PDF reports</li>
<li><span class="check"></span> Monthly Actuals reconciliation</li>
<li><span class="check"></span> 5-year reserve forecasting</li>
<li><span class="check"></span> Role based access for board members (Up to 5 user accounts)</li>
<li><span class="check"></span> Email support</li>
<li class="dim"><span></span> AI Analytics</li>
<li class="dim"><span></span> Reserve forecasting</li>
<li class="dim"><span></span> Mixed Purpose Community management (SFH, Condo, Apartment)</li>
</ul>
<a href="#preview-signup" class="btn btn-outline plan-btn">Get Early Access</a>
</div>
<!-- PROFESSIONAL — FEATURED -->
<div class="pricing-card pricing-card--featured">
<div class="plan-badge">Most Popular</div>
<div class="plan-name">Professional</div>
<div class="plan-tagline">Advanced AI Features For growing communities &amp; property managers</div>
<div class="plan-price"><span class="price-amount">$99</span><span class="price-period">/mo</span></div>
<div class="plan-units">Up to 500 units</div>
<ul class="plan-features">
<li><span class="check"></span> Everything in Starter</li>
<li><span class="check"></span> <strong>AI Financial Analytics</strong></li>
<li><span class="check"></span> Reserve fund forecasting (5-yr)</li>
<li><span class="check"></span> Automated late fees &amp; escalations</li>
<li><span class="check"></span> Custom chart of accounts</li>
<li><span class="check"></span> Next fiscal budget planning</li>
<li><span class="check"></span> Audit trail &amp; compliance pack</li>
<li><span class="check"></span> Priority email &amp; chat support</li>
<li><span class="check"></span> Mixed Purpose Community management (SFH, Condo, Apartment)</li>
</ul>
<a href="#preview-signup" class="btn btn-primary plan-btn">Get Early Access</a>
</div>
<!-- ENTERPRISE -->
<div class="pricing-card">
<div class="plan-name">Enterprise</div>
<div class="plan-tagline">For management companies &amp; large communities</div>
<div class="plan-price"><span class="price-amount price-amount--quote">Request Quote</span></div>
<div class="plan-units">Unlimited units</div>
<ul class="plan-features">
<li><span class="check"></span> Everything in Professional</li>
<li><span class="check"></span> <strong>Multi-property management</strong></li>
<li><span class="check"></span> Custom API integrations</li>
<li><span class="check"></span> Advanced AI anomaly detection</li>
<li><span class="check"></span> SLA-backed uptime guarantee</li>
<li><span class="check"></span> Custom onboarding &amp; training</li>
</ul>
<a href="#preview-signup" class="btn btn-outline plan-btn">Get Early Access</a>
</div>
</div>
</div>
</section>
<!-- PREVIEW SIGNUP -->
<section class="signup-section" id="preview-signup">
<div class="signup-glow"></div>
<div class="container">
<div class="signup-card">
<div class="countdown-badge">
<span class="pulse-dot pulse-dot--white"></span>
<span id="signupCountdown">Launching in 60 days</span>
</div>
<h2>Get Early Access to HOA LedgerIQ</h2>
<p>Join the waitlist and be first through the door. </p>
<form class="signup-form" id="signupForm" novalidate>
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="Jane" required />
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="Smith" required />
</div>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="jane@myhoa.com" required />
</div>
<div class="form-group">
<label for="orgName">Organization Name *</label>
<input type="text" id="orgName" name="orgName" placeholder="Maplewood Village HOA" required />
</div>
<div class="form-row">
<div class="form-group">
<label for="state">Organization Location *</label>
<select id="state" name="state" required>
<option value="">Select state...</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
</div>
<div class="form-group">
<label for="unitCount">Community Size</label>
<select id="unitCount" name="unitCount">
<option value="">Number of units...</option>
<option value="1-50">150 units</option>
<option value="51-250">51250 units</option>
<option value="251-500">251500 units</option>
<option value="500+">500+ units</option>
</select>
</div>
</div>
<div class="form-group">
<label for="role">Your Role</label>
<select id="role" name="role">
<option value="">Select your role...</option>
<option value="board_member">Board Member</option>
<option value="property_manager">Property Manager</option>
<option value="treasurer">HOA Treasurer</option>
<option value="cpa">CPA / Accountant</option>
<option value="homeowner">Homeowner</option>
<option value="other">Other</option>
</select>
</div>
<div class="beta-group">
<input type="checkbox" id="betaInterest" name="betaInterest" />
<label for="betaInterest">I'm interested in joining the Beta Program</label>
</div>
<p class="beta-disclaimer">Beta program selection will be determined based on the makeup of role and community size. You will be contacted directly if offered to join the beta program. Beta customers will be offered discounted launch pricing</p>
<button type="submit" class="btn btn-primary btn-lg signup-btn" id="submitBtn">
<span class="btn-text">Reserve My Spot →</span>
<span class="btn-loading hidden">Saving...</span>
</button>
<p class="form-fine">No spam, ever. Unsubscribe anytime. We'll reach out within 48 hours.</p>
</form>
<div class="signup-success hidden" id="signupSuccess">
<div class="success-icon"></div>
<h3>You're on the list!</h3>
<p>We'll be in touch soon with your early access details. Keep an eye on your inbox.</p>
</div>
</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 finance management.<br /></p>
</div>
<div class="footer-links">
<div class="footer-col">
<div class="footer-col-title">Product</div>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#preview-signup">Early Access</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>© 2026 HOA LedgerIQ. All rights reserved.</span>
</div>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>