Hero with Press Mentions and Founder Quote — Free HTML CSS JS Snippet

A headline promises a product is good; a press mention or an investor's own words prove someone independent already agreed. This hero section pairs both trust signals in one composition — a press-logo strip sitting under the primary copy and CTA, and a self-rotating quote card on the opposite side that cycles between a founder testimonial, an investor endorsement, and a customer story.

One rotation function drives every part of the card

showQuote(index, isManual) is the single source of truth for the quote card's state. It updates the quote text, the person's name and role, the avatar initials, and the active dot — all from one quotes array entry — so there's no risk of the name updating while the quote text lags behind, a common bug in hand-rolled rotators that update each field with separate logic.

Fading text and avatar, not the whole card

Rather than fading the entire .pfq-quote-card (which would visibly dim the surrounding chrome and border on every rotation), only .pfq-quote-text and .pfq-avatar have their opacity toggled, with the actual content swap happening inside a setTimeout timed to the CSS transition's midpoint. This keeps the card's border, background, and dots fully visible and stable throughout the rotation — only the content that's actually changing appears to fade.

`min-height` on the quote text prevents layout jump

Quotes of different lengths would otherwise cause the card — and everything below it, including the dots — to jump vertically each time the text changes. Setting a min-height on .pfq-quote-text reserves enough vertical space for a two-to-three line quote regardless of which one is currently showing, so the dots and avatar stay anchored in place.

Dots are both an indicator and a control

renderDots() rebuilds the dot row on every rotation so the active dot always matches current, and each dot is a real <button> with a click handler bound via an IIFE closure over its own index — a common pitfall in a loop-generated event handler is every handler closing over the same final loop variable, which the IIFE avoids. Clicking a dot calls showQuote(index, true), where the true flag tells the function to call restartTimer() — so a manual click resets the five-second auto-advance clock instead of immediately being overridden by it.

The press-logo strip as understated proof, not a carousel

The press mentions are deliberately static text logotypes below a divider, not another rotating or animated element — stacking two moving elements in one hero would compete for attention. The static row reads as ambient credibility while the quote card, which changes over time, is the one element inviting a second look.

Customizing it

Add or remove entries from the quotes array — each needs text, name, role, and initials; the dots and rotation logic scale automatically to however many entries the array holds. Replace the avatar initials with real <img> photos by swapping .pfq-avatar's textContent assignment for an src update. Adjust the auto-advance interval by changing the 5000 millisecond value passed to setInterval inside restartTimer().