Phone Frame Mockup Hero Block for React

The screen is an Aspect Ratio of 9 / 19.5, the shape of most phone screenshots, holding a drawing of the app in markup (edit SERVICES and TABS to make it yours). Replace the drawing with an img of your screenshot (absolute inset-0 size-full object-cover); the screen's overflow-hidden and rounded corners clip it to the phone's shape. The stage is decorative (aria-hidden and inert): once it shows your real app, take those off and give the image an alt that says what the screen shows.

Both are links (href="#"): point them at your App Store and Google Play pages. Lucide has no store logos, so the buttons use its Apple and Play icons; for a live listing, use the badges each store provides, as both ask in their marketing guidelines. Each button renders the link it's given with render, with nativeButton={false}.

The two cards are the blocks of markup after the phone in the stage, hidden below lg: edit DEPLOYS and the alert text, or remove them for the phone alone. The stage's height (h-72, md:h-[26rem]) sets how much of the phone shows, and the mask on the phone (black_55%) sets where it starts to fade; a shorter stage crops more, and the stats band always meets the foot of the stage.

The headline is the page's h1. Each store link is named by its whole label, so it reads "Download on the App Store" and "Get it on Google Play" (the first words are visually hidden), and its icon is hidden. The stage is hidden from assistive tech and can't take focus. The stats are a description list, each label read with its number. With reduced motion nothing fades or rises.

The headline steps down from text-6xl to text-4xl, the two store links sit side by side and wrap when they don't fit, and both end on the first screen. The stage becomes 288 px tall with the phone alone, cropped and faded, and the two cards are dropped. The three stats stay in one row with their hairlines down to a 320 px screen.

Use it when the app is the product and an install is the goal: the store links come first and the phone rises under them. When you have more to say beside the app (features, a sign-up form, a desktop product), a split layout such as Split Phone Frame keeps the copy and the phone side by side.