React Marketing Section Components

A Now / Next / Later three-lane roadmap board where item cards move between lanes with shared layout animation, supporting both read-only display and interactive dragging.

A dossier-style case study layout — a sticky metrics rail on the left lights up and counts as the long-form copy scrolls by, while full-bleed pull quotes periodically break the two-column rhythm to let it breathe.

An integrations showcase built on the studio patchbay metaphor — drag a cable from an output jack on the left into an integration jack on the right, with physically sagging curves and indicator lights that come on.

A gamified waitlist section — submit an email and a 3D card flip reveals your queue number and the crowd ahead of you; copy the referral link and you move up the line with a queue-jump animation.

A lock-screen depth hero — a cut-out subject partially occludes the oversized headline, and on scroll the subject, headline, and background separate at different rates to produce real depth.

A winding quest map section — as you scroll, a marker travels the path clearing stations, and each one it reaches pops its content open, raises a flag, and stamps itself complete.

An achievement trophy wall — a grid of glass cabinets displays your achievements; unlocking one raises the trophy, sweeps a highlight across it, and bursts a little confetti, while hovering lets you examine it in 3D and see its requirement and progress.

An engineering-blueprint take on the how-it-works layout — on graph paper, each step is a numbered, annotated station, and as you scroll the dashed leader lines, dimension callouts, and section marks are drawn in order as SVG stroke animations.

A product spec section styled like a nutrition label — rows stamp themselves in one by one as it scrolls into the window, and any row can expand to show notes and supporting links.

A full-bleed progress meter — the liquid level rises to fill the whole section from data or scroll, and every time it crosses a threshold the matching milestone card pops open, unlocked and lit.

A balance-scale comparison layout — check feature chips onto either side and the two columns physically sink and rise with their accumulated weight, while the beam on its fulcrum tilts to an angle that reflects the real gap.

A release changelog timeline section — version badges, type tags, and a staggered reveal.

An FAQ accordion section with live search filtering and category tags.

An interactive pricing section that computes the monthly bill live from a usage slider and recommends a plan automatically.

A plan feature comparison table with a sticky first column and header, highlighted difference rows, and animated checks and crosses.

A self-playing prompt box React component for marketing pages. A glowing pill types out a prompt, a fake cursor glides in and clicks send, and a result card pops up, on loop, pausing on hover.

A React component where integration cards drop into a grid in sequence, then flip one by one to a connected state with a drawn checkmark. Autoplay it as a showcase, or let users click to connect and await async authorization.

As you type into the input, surrounding pain-point cards crowd inward one by one; on submit they scatter away — a marketing visual for the pain of fragmented tools.