Blocks/Hero

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

PRO

hero97

Bottom-Aligned Hero with Stack Cards

Fullscreen bottom-aligned hero with vertical stack cards and inset background video with gradient overlay

PRO

hero98

Cinematic Hero with Social Proof

Cinematic hero with announcement pill, avatar social proof, and overlapping dashboard media

PRO

hero99

Fullscreen Hero with Marquee Ticker

Cinematic fullscreen hero with scrolling marquee keyword band over inset background video

PRO

hero100

Fullscreen Hero with Browser Mockup

Fullscreen hero with centered content and browser window frame mockup over inset background video

PRO

hero101

Split Hero with Terminal Card

Fullscreen split hero with content left and realistic terminal/CLI card right over inset background video

PRO

hero102

Split Hero with Timeline Steps

50/50 split hero with content left and vertical numbered timeline overlay on video right

PRO

hero103

Mobile App Hero with Phone Mockup

Fullscreen hero with app store buttons and phone mockup over inset background video

PRO

hero104

IDE Mockup Split Hero

Split hero with heading, trust line, and CTA buttons on the left, IDE file-tree and code editor mockup on the right

PRO

hero105

Mobile Hero with Dual Phone Mockups

Fullscreen hero with two overlapping angled phone mockups and app store buttons over inset background video

PRO

hero106

Mobile Hero with Flanking Features

Fullscreen hero with centered phone mockup flanked by feature columns on each side over inset background video

PRO

hero107

Mobile Hero with 3D Perspective Phone

Fullscreen split hero with content left and 3D perspective-tilted phone mockup right over inset background video

PRO

hero108

Mobile Hero with Review Card

Fullscreen hero with phone mockup, star rating review card, and app store buttons over inset background video

PRO

hero109

Bounded Carousel Hero

Contained 16:9 hero carousel with badge, title, description, and CTA over an image background. Auto-rotates with centered, clickable dots at the bottom — same carousel engine as hero19 but not full-height.

PRO

hero110

Bounded Carousel Hero — Aligned

Contained 16:9 hero carousel with badge, title, description, and CTA. Vertically centered content that anchors to the left, center, or right via the contentAlign prop. Auto-rotates with centered, clickable dots.

PRO

hero111

Hero with Feature List and Image

Two-column hero with heading, description, icon-only feature list, and CTA on one side and a square image on the other. Image position is configurable.