Feature 238 - Giant headline with layered browser cards

Pro

A centered marketing feature with eyebrow icon label, towering headline, muted intro, signup button beside text demo link with chevron drift, and three stacked faux browser cards animated with Motion.

Shadcn Feature 238 block

Component Data

  • ID:feature238
  • Access:pro
  • Created:Mar 16, 2025
  • Type:block

Feature 238 block design & features

Feature238 stacks a compact icon plus eyebrow heading, then a towering two-line headline, centered muted paragraph, and a vertical pair of rounded primary button and subdued text-style demo link whose chevron nudges on hover. Beneath sits a staged trio of overlapping Shadcn card frames styled like browser shells with faux window dots and centered logos, lifted by Framer Motion on load and hover on desktop while the rear card hides on small screens.

Background stays default with strong contrast on the hero title. Cards mix muted chrome on the outer frames with one dark inner face for contrast. Buttons use thick rounded rectangles and soft outer glow on the primary control. Motion eases vertical travel for the fan of cards, creating depth without continuous loops.

Bold product-launch energy with a component-library story. Moderate to elaborate complexity from Motion timing, stacked cards, and dual CTAs. The faux browser stack is the memorable hook compared with flat mockups.

Mobile keeps the typographic stack and CTAs; the layered preview collapses to fewer visible cards so the section still fits typical phone heights.