Blocks/Hero94

A library of production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.

PRO

hero121

Split Hero with Stats

Split hero with a big headline and CTA on the left, a divided vertical stat rail on the right, and a full-width wide image strip below.

PRO

hero122

Typographic Card Hero

Centered typographic hero on a muted card with an oversized heading, inline CTA, and a bottom monospace meta row of three labels.

PRO

hero123

Trust Hero with Logos

Trust hero with a heading, description and CTA beside a tall portrait image, over a grayscale logo marquee.

PRO

hero124

Profile Hero With Chart

Studio-profile hero: an eyebrow, oversized heading, supporting copy and a CTA on the left, beside a muted stage showcasing a slider-control piece on the right.

PRO

hero125

Hero with Portrait Gallery

Centered eyebrow, oversized heading and CTA above a responsive 3-up portrait gallery with monospace captions.

PRO

hero126

Waitlist Email Hero

Centered waitlist hero with eyebrow, big heading, description, an inline email-capture form and an overlapping avatar trust row.

PRO

hero127

Slideshow Hero with Background Crossfade

Full-bleed background-driven slideshow hero. The active item's image fills the section and crossfades on selection, with a giant fixed heading and a floating card whose thumbnail, category, numbered pagination, name, and location swap to match the active slide. Auto-loops.

PRO

hero128

Vertical Index List Hero

Full-bleed monochrome hero whose background crossfades to the active project. A giant heading sits bottom-left while a numbered vertical project index on the right highlights and swaps the active row on hover, click, or auto-loop.

PRO

hero129

Chapter Progress Tabs Hero

Full-bleed monochrome hero with a giant bottom-left heading and a row of equal-width chapter tabs. The active chapter's thin track fills left to right over the interval, then auto-advances and crossfades the background image. Each tab links to its href.

PRO

hero130

Monochrome Hero with Rotating Announcement Ticker

Full-bleed hero with a static background image, a giant display heading, and a slim bordered bar that auto-rotates through short, clickable announcement messages with position dots.

PRO

hero131

Filmstrip Hero

Full-bleed hero whose background crossfades between frames, with a clickable filmstrip of thumbnails pinned along the bottom and an auto-advancing active tile.

PRO

hero132

Expanding Panels Hero

Full-bleed hero filled with side-by-side image panels that expand on hover and auto-cycle, each revealing a name and caption while a giant heading floats above.

PRO

hero133

Kinetic Rotating-Word Hero

Full-bleed monochrome hero with a giant headline whose final word auto-cycles through a list, plus clickable chips to pick a word and pause the rotation.

PRO

hero134

Vertical Dot Pager Hero

Full-bleed hero whose background crossfades across items, steered by a minimal vertical pager pinned to the right edge. The active control grows taller while the rest stay short and dimmed; a giant heading and the clickable active item name sit bottom-left.

PRO

hero135

Editorial Split Masthead

Two-pane masthead hero: a solid dark editorial panel with eyebrow, value-prop heading, supporting copy, a CTA and an availability note on one side, and a full-bleed image on the other.

PRO

hero136

Thumbnail Marquee Hero

Full-bleed hero whose background crossfades to the active item, with an auto-scrolling marquee of clickable thumbnails along the bottom and a giant heading above the strip.

PRO

hero137

Slideshow Hero with Click Controls

Full-bleed monochrome hero that crossfades across a set of slides, navigated by explicit previous/next arrows and clickable dots with an auto-loop, plus a caption linking the active slide.

PRO

hero138

Editorial Trust Hero

Static full-bleed editorial hero with an eyebrow badge, a giant display heading, a supporting paragraph, dual seal CTAs, and an overlapping avatar trust row.

PRO

hero139

Rotating Quote Hero

Full-bleed monochrome hero with a giant display heading over a static image, paired with a card that auto-cycles through testimonials and click-to-select dots.

PRO

hero140

Animated Tab Hero

Full-bleed monochrome hero with a giant heading and a row of clickable tab chips that fade between text panels (title, description, stat), auto-advancing on a timer with no background swap.

PRO

hero141

Capability Marquee Hero

Full-bleed monochrome hero with a giant display heading, short description, and a continuous bottom marquee of capability chips that pauses on hover.

PRO

hero142

Centered Studio Hero

A simple centered hero for the Auralis set: a parenthetical eyebrow badge above a balanced heading, a short description, and a pair of animated seal buttons.