From 5d5d081209b9f76fdc9a577d760025dbd75a214d Mon Sep 17 00:00:00 2001
From: JoeBot <olson2cm@icloud.com>
Date: Sun, 17 May 2026 09:56:40 -0400
Subject: [PATCH] Update articles/hoa-treasurer-burnout-guide.html

Fixing Screenshot carousel issues
---
 articles/hoa-treasurer-burnout-guide.html | 57 ++++++++++++++---------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/articles/hoa-treasurer-burnout-guide.html b/articles/hoa-treasurer-burnout-guide.html
index 616e5ab..8d070d4 100644
--- a/articles/hoa-treasurer-burnout-guide.html
+++ b/articles/hoa-treasurer-burnout-guide.html
@@ -137,31 +137,42 @@
         </div>
     </section>
 
-    <!-- Screenshot Carousel -->
-    <section class="article-showcase">
-        <div class="container">
-            <h2 class="showcase-title">See How Modern HOA Financial Management Works</h2>
-            <p class="showcase-subtitle">HOA LedgerIQ streamlines every aspect of treasurer responsibilities</p>
-            <div id="screenshotCarousel" class="carousel">
-                <div class="carousel-track">
-                    <div class="carousel-slide">
-                        <img src="../img/screenshot-dashboard.png" alt="HOA LedgerIQ Dashboard showing financial overview" />
-                        <p class="carousel-caption">Real-time financial dashboard with instant visibility into cash flow and reserves</p>
-                    </div>
-                    <div class="carousel-slide">
-                        <img src="../img/screenshot-cashflow.png" alt="Cash flow tracking interface" />
-                        <p class="carousel-caption">Automated cash flow tracking and forecasting</p>
-                    </div>
-                    <div class="carousel-slide">
-                        <img src="../img/screenshot-capital.png" alt="Capital planning and reserve tracking" />
-                        <p class="carousel-caption">Reserve fund management and capital planning tools</p>
-                    </div>
-                </div>
-                <button class="carousel-nav carousel-prev" aria-label="Previous slide">‹</button>
-                <button class="carousel-nav carousel-next" aria-label="Next slide">›</button>
+	  <!-- SCREENSHOT CAROUSEL -->
+  <section class="article-showcase">
+    <div class="container">
+      <div class="article-showcase-header">
+        <div class="section-label">See How Modern HOA Financial Management Works</div>
+        <h2>HOA LedgerIQ streamlines every aspect of treasurer responsibilities</h2>
+    </div>
+      <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">Real-time financial dashboard with instant visibility into cash flow and reserves</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">Automated cash flow tracking and forecasting</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">Reserve fund management and capital planning tools</div>
+            </div>
+          </div>
         </div>
-    </section>
+        <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>
 
     <!-- More Article Content -->
     <section class="article-body-section">