If you are building a mobile app landing page and need an above-the-fold hero that shows the app in action, communicates quality via ratings, and drives downloads via store badges, this snippet gives you everything in a two-column layout: left side has the star rating, headline, subtitle, App Store and Google Play badges, and a user count social proof row; the right side shows a CSS phone mockup with a realistic app UI.

The CSS phone mockup

The phone frame is built entirely with CSS — no images, no SVG. A 240px wide div with border-radius: 36px, border: 8px solid #1e293b, and box-shadow: 0 30px 80px rgba(0,0,0,0.2) creates the handset. A narrower div at the top with border-radius: 0 0 14px 14px simulates the notch. Inside, the app UI shows a greeting header, a stats grid (calories and steps), a weekly goal progress bar, and a workout list — all CSS layout with no images.

App Store and Google Play badges

Both badges are built with HTML and inline SVG icons — no image files needed. The Apple badge uses background: #000 and the Google Play badge uses a white card with border. Both have hover lift effects via translateY(-2px) and box-shadow. The SVG paths are Apple's and Google Play's actual brand icons, safe to use in personal and commercial projects.

The star rating row

The five stars use the ★ Unicode character with letter-spacing: 2px and amber colour. The rating text shows the score and review count. This pattern is the strongest trust signal above the fold on an app landing page — place it immediately above the headline.

The gradient phone progress bar

The weekly goal progress bar inside the phone mockup uses background: linear-gradient(90deg, indigo, green) for a branded gradient fill — communicating goal completion visually without a number.

Making it your own

Update the app greeting, stat values, workout names, and progress percentage in the HTML. Change the phone border colour to match your app brand. Replace the placeholder content with your actual app screens using a screenshot in the .phone-screen background.

Using with real App Store data

For production, pull real store ratings via the App Store Connect API or iTunes Search API and inject them server-side. Replace the hardcoded "4.9 · 28,000 ratings" with fetched data rendered at build time in Next.js via getStaticProps or an RSC fetch. This keeps the rating current without client-side fetching on the landing page load, maintaining fast first-paint performance.

Build with AI

Build, Understand, Optimize, and Extend It With AI

There's no JavaScript here to step through, so the real work is understanding the layering that makes the CSS phone mockup and glow background feel real. Paste the HTML and CSS into an AI coding assistant like Claude and ask it to explain exactly how the glow-l and glow-r radial gradients are positioned to avoid competing with each other, or why the phone-notch uses a fixed width with rounded bottom corners rather than a clip-path. The same assistant is a good partner for optimizing it — ask whether the flex-wrap based responsive layout could be replaced with a cleaner container-query approach, or whether the repeated gradient color stops across accent, prog-fill, and app-av could be consolidated into CSS custom properties. It's equally useful for extending the hero: ask it to animate the prog-fill bar filling in on scroll into view, swap the workout list for a real data-driven prop in a component library, or add a second phone screen that cross-fades in in place of the static one. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a light-theme "app download hero" in plain HTML and CSS only — no JavaScript, no images, no icon libraries.

Requirements:
- A flex layout (not grid) with flex-wrap so the two-column split — left-side copy, right-side phone mockup — collapses to a single stacked column on narrow viewports without a media query being strictly required for the reflow itself.
- Two independent radial-gradient glow layers positioned at opposite corners of the hero (top-left and bottom-right) using absolutely positioned, pointer-events: none divs, layered behind the content with z-index.
- The headline's accent word must be clipped from a diagonal two-color linear-gradient using background-clip: text with a transparent text fill color, matching one of the two glow colors for visual cohesion.
- Build a phone mockup from plain divs only: an outer frame with a thick solid border and large border-radius simulating an iPhone bezel, a centered notch div with rounded bottom corners, and an inner screen containing a header row, a two-column stats grid with icon/value/label cells, a labeled progress bar whose fill width is set from a percentage, and a short list of workout rows each ending in a status badge.
- Store badges (Apple and Google) must be built with inline SVG brand icons and a two-line text label, with distinct visual treatments — one dark filled badge, one white bordered badge — and a hover lift transform.
- A row of overlapping circular initials avatars (using negative margin) next to bold user-count social proof text.

Step by step

How to Use

1
Update the rating and headlineChange the star rating score ("4.9") and review count ("28,000 ratings") to your App Store or Play Store actual ratings. Edit the headline to match your app value proposition.
2
Wire the store badge linksSet href="#" on .store-badge.apple to your App Store URL (https://apps.apple.com/...) and on .store-badge.google to your Play Store URL. Both open with standard link behaviour.
3
Update the phone screen contentIn the HTML, change the greeting text, stat values (calories, steps), progress percentage (style="width:68%"), and workout item names and metadata to match your actual app content.
4
Replace the CSS phone with a screenshotTo show a real screenshot: remove the .phone-notch and .phone-screen content, set background: url("screenshot.png") center top / cover on the phone div, and adjust height: 500px. Keep the border and shadow CSS for the frame.
5
Update the user countChange "2M+ active users" to your real download or user count. Update the avatar initials and gradients. Replace the badge colour from indigo/green to your app brand colours in .accent and .prog-fill.
6
Export in your formatClick "HTML" for a standalone file, "JSX" to download as a React component, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Mobile app download and installation landing pages

The two-column layout with phone mockup and dual store badges is the standard pattern for mobile app download pages. The phone shows users what the app looks like before they download it, reducing sign-up hesitation.

Health, fitness, and wellness app marketing pages

The fitness-themed phone UI (calories, steps, workouts, progress bar) maps directly to health app data. Adapt stat labels to your app domain — "Distance", "Sleep", "Meditation" — and update the stat values and icons.

App Store Optimisation and pre-launch web presence

The star rating row above the headline is the most high-impact trust signal on an app landing page. Users trust App Store ratings — displaying them prominently above the fold communicates quality before they read a word of copy.

SaaS products with mobile companion apps

If your web SaaS has a mobile app, use this hero variant for the mobile app page. Pair it with your main product hero (see Startup Hero or Product Hero) for the web version. Both can share the same brand colour in the .accent gradient.

Learn CSS phone frame and app mockup technique

The phone mockup uses only border-radius, border, and box-shadow — no SVG or images. The notch is a narrow div with rounded bottom corners. The phone shadow is a blurred, scaled-down div below. All are pure CSS techniques applicable to any device mockup.

Productivity, finance, and utility app landing pages

Adapt the phone UI content for any app domain — a finance app would show account balance and transactions; a productivity app would show tasks and deadlines. The card grid, progress bar, and list structure accommodate any data type.

Got questions?

Frequently Asked Questions

The phone frame is a 240px div with border-radius: 36px (matching iPhone corner radius), border: 8px solid #1e293b (the dark bezel), and box-shadow: 0 30px 80px rgba(0,0,0,0.2) for depth. The notch is a separate div inside the phone positioned at the top — width: 80px, border-radius: 0 0 14px 14px, with the same dark background as the bezel. The phone shadow below is a blurred, elliptical div with filter: blur(8px) at 12% black opacity.

Replace the .phone-screen div content with an img tag: <img src="screenshot.png" style="width:100%; display:block;" alt="App screenshot" />. Or set background: url("screenshot.png") center top / cover no-repeat; height: 480px on the .phone-screen div and remove its child elements. For a crisp result, export the screenshot at the phone display width × 2 (480px × 2 = 960px wide) for Retina/HiDPI screens.

Both Apple and Google provide usage guidelines for their app store badges. The standard policy: use official badge artwork in your marketing materials to promote your listed app. Apple provides official badge assets at apple.com/app-store/marketing/guidelines/. Google provides them at play.google.com/intl/en_us/badges/. For production, download the official badge image assets — the SVG icons in this snippet are functional placeholders that match the standard badge appearance.

The .hero already uses flex-wrap: wrap so the layout collapses to a single column when the viewport is too narrow to fit both columns. The .left has min-width: 280px so it never gets squeezed below 280px. For better mobile control, add @media (max-width: 640px) { .right { display: none; } } to hide the phone mockup on small screens and let the copy take full width, or add flex-direction: column-reverse to show the phone above the copy on mobile.

Loading…