React feature section components
The middle of a landing page is where the product has to prove itself. These sections do that with a control grid, a row of product cards, a prompt on a blurred still, or an empty ingest tray.
Built with the stack you already ship
Feature section blocks you can copy
Each block is one file covering the headline, the proof layout and the responsive rules. Preview it live, then copy the source into your project.
Feature Section With Security GridAdaptive feature section with WebGL side rays, two hero-style CTAs, and a six cell bordered matrix of security controls with original hairline icons.
Feature Section With Workspace ComposerAdaptive AI workspace feature with copy and bullets on the left, a chat composer on one blurred still with Calendar Meet and Drive chips, and three product claims below.
Feature Section With Gradient Product CardsAdaptive three card feature section with a left aligned headline, sea glass and lilac gradient panels of coded product UI, and a full bleed photograph in the middle card.
Feature Section With Media Upload StageStacked ingest feature: compact empty dropzone on a blurred still, then three proof mockups for page read, plate hold, and cut index. Heading, CTAs, and claims sit around the tray.
Feature Section With Blurred Prompt StageAdaptive split feature section with a serif headline, a one-open accordion of desks, and a tall blurred photograph carrying a live prompt card.
SaaS surfaces that sit beside a feature section
Pricing tables, dashboards and heavy product UI from the same library, for pages that need more than a six cell grid.
Subscription Tier CardAn animated 1px conic-gradient border with a soft Wensity Red halo on hover and a CTA that shimmers as you approach.
Fluid Drag-and-Drop KanbanA Trello-grade board running real pointer physics, where every card tilts toward the velocity you throw it across at.
Metric Card with SparklineDashboard cards with a hand-rolled monotone-cubic SVG line and a glowing dot that snaps to wherever you scrub.
GitHub-Style Activity Grid365 squares sharing one tooltip that flies between days on rails, with a reveal that ripples backward from today.
Multi-Step Morphing WizardAn onboarding card whose container physically reshapes to wrap each new step as the content slides in behind it.
How to choose a feature section
A feature section is not a second hero. The hero already spent the visitor's first attention. This block has to survive a slower read: someone who scrolled past the headline and now wants to know whether the product can be trusted, operated, or measured. If the copy would also work on a pricing card, it is too thin for this slot.
Start from the job the visitor is doing. Feature Section With Security Grid is for a buyer who will not sign until vaults, seats, and review letters are named in public. The six cells are equal on purpose. No cell is a screenshot, because a compliance claim that lives only in an image is the first thing a legal review deletes. Put the claims in the DOM.
Feature Section With Gradient Product Cards is for a product that has to be seen. Two cards hold a coded interface on a sea glass and lilac gradient, and the middle card is a photograph. Swap the image URL and rewrite the two panels before you ship. A photo that has nothing to do with the product will make the interfaces look like decoration.
Feature Section With Blurred Prompt Stage is for a product that is a night board. The left column is a serif headline and three watches that open one at a time. The right column is a location still, kept soft, with the log sitting on it. Opening a watch rewrites the card. Replace the cliff photograph and the board name. Do not ship it as an AI directory with a sunset field behind the prompt.
Feature Section With Workspace Composer is for an AI workspace that has to prove the prompt can reach Calendar, Meet, and Drive. Copy and three bullets sit on the left. The composer sits on one blurred still. Replace the still, the prompt, the model pill, and the three claims.
Feature Section With Media Upload Stage is a heading above one card. The card is a blurred still. An empty dropzone sits on it, with choose files and a dashed border. Nothing is uploaded yet. Replace the still and the button label.
Keep every cell a real claim. Region-locked storage, least-privilege seats, yearly control letters, masked logs, model reviews, and a clinical boundary only earn a square if you can stand behind the sentence in a security review. A thinner stroke on the icon does not make a weaker policy look finished. If a cell is a synonym of its neighbour, cut it and give the remaining five more room.
Do not follow this grid with another feature wall on the same page. Six claims are already a full argument. The next section should be a decision: pricing, a FAQ, or a walkthrough. If you need more than six claims, you need a docs page, not a denser grid.
Keep the buttons honest. Talk to security and see the controls belong on this grid because that buyer is not going to self serve. An empty button that jumps to a hash is worse than no button.
