Split Phone Frame Hero Block for React

Replace each href="#" with your app's App Store and Google Play URLs. They're ordinary links that open in the same tab, which suits store links: a phone hands them to its store app anyway. Each one shows the store's name, and a visually hidden prefix gives it its full name for screen readers: Download on the App Store, Get it on Google Play. On Base UI, each button renders its link with render={<a href="…" />} and nativeButton={false}.

Replace the screen's contents, from the status bar to the tab bar, with an img (or your framework's image component) with className="size-full object-cover object-top"; the screen already clips to its rounded corners. The screen is a 1:2 portrait, so a screenshot at a phone's own resolution, such as 1170 by 2532, fills it with a little cropped at the bottom. If the screenshot matters to the visitor, take aria-hidden and inert off the panel and give the image an alt.

The frame's height decides: it's h-80 on phones, sm:h-96 and lg:h-[29rem], and the phone, 17rem wide and twice as tall, is cut off where the frame ends, with a short fade (the mask-image on the inner box). Make the frame taller to show the tab bar, or shorter to show just the top of the screen. The corner marks are drawn on an outer box, so the mask never clips them.

Edit the two lines beside the avatar stack: the user count, in a bdi so "500K+" keeps its order in right-to-left layouts, and the rating. The stack itself reads USERS, a list of initials; to show faces, add an AvatarImage with an empty alt in each Avatar. The stack is hidden from screen readers, since the sentence beside it says what it means.

The headline is the block's one h1, and the pill and both store buttons are links with full names; their icons are hidden. The proof is one sentence, "Loved by 500K+ people, 4.9 average rating". The phone is decoration: its panel is aria-hidden and inert, so screen readers skip it and nothing in it takes focus.

The two halves stack below the lg breakpoint, with the copy first and the phone under it, so the Shine Button is on the first screen. The phone is w-[min(17rem,72vw)] with a 1:2 aspect ratio, in a frame only 20rem tall on a phone, so it shows the top of the screen and the hero stays short. The store buttons wrap when the row runs out of room, down to 320px.