From 4f99e8c71a55ddcb790a4ab76f099dea9090d6bb Mon Sep 17 00:00:00 2001 From: olsch01 Date: Mon, 9 Mar 2026 14:42:05 -0400 Subject: [PATCH] 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 --- app.js | 46 ++++++++++++++++++++++++++ index.html | 58 ++++++++++++++------------------ styles.css | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 167 insertions(+), 34 deletions(-) diff --git a/app.js b/app.js index 170396d..2c60ebe 100644 --- a/app.js +++ b/app.js @@ -20,6 +20,52 @@ if (signupEl) signupEl.textContent = text; })(); +// ── Screenshot Carousel ────────────────────────────────── +(function initCarousel() { + const carousel = document.getElementById('screenshotCarousel'); + if (!carousel) return; + + const slides = carousel.querySelectorAll('.carousel-slide'); + const dots = carousel.querySelectorAll('.carousel-dot'); + let current = 0; + let timer; + + function goTo(index) { + slides[current].classList.remove('active'); + dots[current].classList.remove('active'); + current = (index + slides.length) % slides.length; + slides[current].classList.add('active'); + dots[current].classList.add('active'); + } + + function next() { goTo(current + 1); } + function prev() { goTo(current - 1); } + + function startAuto() { + timer = setInterval(next, 4500); + } + function resetAuto() { + clearInterval(timer); + startAuto(); + } + + carousel.querySelector('.carousel-next').addEventListener('click', () => { next(); resetAuto(); }); + carousel.querySelector('.carousel-prev').addEventListener('click', () => { prev(); resetAuto(); }); + + dots.forEach(dot => { + dot.addEventListener('click', () => { + goTo(parseInt(dot.dataset.index, 10)); + resetAuto(); + }); + }); + + // Pause on hover + carousel.addEventListener('mouseenter', () => clearInterval(timer)); + carousel.addEventListener('mouseleave', startAuto); + + startAuto(); +})(); + // ── Form Handler ───────────────────────────────────────── document.addEventListener('DOMContentLoaded', () => { const form = document.getElementById('signupForm'); diff --git a/index.html b/index.html index 931f246..4375105 100644 --- a/index.html +++ b/index.html @@ -70,43 +70,33 @@ - +
-
-
- - - - LedgerIQ Dashboard +