Make your AI a shadcn expert

Hero Split Phone Frame

A split-layout hero section for React and Next.js with headline, dual ShadcnioButton CTAs, and avatar social proof on the left and a portrait phone frame mockup with notch and home indicator on the right built with shadcn/ui and Tailwind CSS

Scroll to load preview

Pair a bold left-side pitch with a portrait phone frame mockup using this split phone frame hero block for React and Next.js. Features an availability pill, headline, descriptive subtitle, dual ShadcnioButton call-to-action buttons with fixed widths, and an avatar stack with rating text on the left, with a standalone portrait phone frame on the right that includes a rounded bezel, top notch, home indicator, and a crosshair image placeholder signaling where to drop your app screenshot. Built with TypeScript, the ShadcnioButton component, motion/react entrance animations, and Tailwind CSS. Perfect for mobile app landing pages, phone-centric product hero sections, iOS and Android app launches, and any Next.js page where a device mockup should anchor the visual side of a split hero.

FAQ

Last updated on April 8, 2026

Was this page helpful?

Sign in to leave feedback.