Phone Trio App Download Hero Block for React

Each screen is a small component at the top of the file (TodayScreen, InboxScreen, WeekScreen) built on Screen; edit TASKS, MESSAGES, WEEK and TABS to show your own app's words. For real screenshots, replace a screen inside its Phone with an img (or your framework's image component) with className="size-full rounded-[2rem] object-cover object-top". 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 a screenshot matters to the visitor, take aria-hidden and inert off the band and give each image an alt.

Replace each href="#" with your app's App Store and Google Play URLs. They're ordinary links, so they open in the same tab; leave them that way unless you have a reason not to, since a phone hands store links to the store app anyway. Each link's visible label is 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}.

They are the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column (max-w-6xl, the same in every block) has Guides bleed marks="top" rules="top": two side rails that run the section's full height, so they join the rails of the blocks above and below, and one rule along the top edge that runs to the page's edges, with a plus on each crossing. The block below draws the next rule, so a stack of blocks never doubles a line. Inside, the band's top edge is <Guides marks="top" rules="top" sides={false} />, a rule from rail to rail with a plus on each end, and the three cells are split by md:divide-x. The band runs to the end of the section, so the next block's top rule closes it. Every line is solid and is the theme's border colour, so it follows any preset.

The headline is the block's one h1, the proof line is a list whose separator is hidden, and the pill and both store buttons are links with full names. The phones are decoration: the whole band is aria-hidden and inert, so screen readers skip it and nothing in it takes focus.

The headline wraps, balanced, from text-4xl up to text-6xl, and the two store buttons sit side by side or wrap, with the primary on the first screen of a phone. The band is 20rem tall below md and shows only the middle phone, so nothing scrolls sideways; from md it shows all three in a three-column band 27rem tall, and each phone's width steps from w-44 to w-52 at lg. A 1:2 aspect ratio sets each phone's height, and the band's fade hides where the phones are cut.

The bezel is a 6px border in foreground at 90%, so it's near black in a light theme and near white in a dark one, and the notch uses the same colour. Change the border-6 width, the rounded-[2.5rem] corners (with the screen's rounded-[2rem] inside them) or the notch's w-1/3 in Phone to match a particular device; leave the notch out for a hole-punch look. The side phones' mt-20 against the middle one's mt-10 sets how much lower they sit.