Dimensional personality app split hero with phone mockups

Dark grid hero for a personality social app with centered headline, overlapping phone mockups, and stacked App Store and sign-in options on the right.

Colordark, light, cool
Palette
#111111
#FFFFFF
#888888

Summary

Charcoal grid-background hero with "Know yourself. Connect with others" headline, two overlapping iPhone profile screens, and a right rail of download and sign-in buttons.

Visual description

Dark background with subtle light square grid. Top nav: geometric Dimensional logo left, Home (underlined active), Blog, About right. Left-center: large white headline and gray subcopy about personality tests and friends. Center-bottom: two phones overlapping�front shows a Jessica Morenz profile with summary traits; rear shows a Love & Romance similarity gauge scoring 29 "Very Different" with trait lists. Right column: "Download the App" with App Store badge, web app beta note, and three stacked dark gray sign-in buttons for Apple, Google, and email with provider icons. Small beta disclaimer footnote at bottom right.

Key takeaway

Overlapping phones at an angle sell social discovery better than a single flat screenshot. Keeping auth options in a dedicated right rail preserves focus on the product story left of center.

Reuse notes

Template for consumer social or dating apps with rich profiles. Grid backdrop adds tech texture without illustration budget. Many CTAs on the right may need simplification on mobile.

More hero sections

See all

More like this