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>
This commit is contained in:
2026-03-09 14:42:05 -04:00
parent e2a1790c75
commit 4f99e8c71a
3 changed files with 167 additions and 34 deletions

46
app.js
View File

@@ -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');