Mobile App Hero with Phone Mockup

Hero53: Mobile App Hero with Phone Mockup

Split hero for app landing pages: a text column with App Store and Google Play download badges next to a hand-built iPhone frame (rounded bezel, notch, and a full-bleed screenshot) rather than a plain product image.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero53?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero53?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero53.tsx and its shadcn/ui dependencies: Badge, Button.

Quick start

The installed file exports hero53Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero53, hero53Demo } from "@/components/beste/block/hero53";

export default function Page() {
  return <Hero53 {...hero53Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero53 } from "@/components/beste/block/hero53";

export default function Page() {
  return (
    <Hero53
      badge={{ label: "Mobile App", variant: "secondary" }}
      heading="Your pocket companion for productivity"
      description="Take your workflow anywhere."
      appStores={[
        { image: { src: "/badges/app-store.svg", alt: "Download on the App Store" }, href: "https://apps.apple.com" },
        { image: { src: "/badges/google-play.svg", alt: "Get it on Google Play" }, href: "https://play.google.com" },
      ]}
      phoneScreenshot={{
        src: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=1300&fit=crop",
        alt: "Mobile app screenshot",
      }}
      displayPosition="right"
    />
  );
}

Props

type AppStore = {
  image: { src: string; alt: string };
  href: string;
};

Behavior notes

• displayPosition describes where the phone mockup sits: the default, "right", puts the text in lg:order-1 and the phone in lg:order-2 (natural left-to-right reading order); "left" swaps both.
• The phone frame is hand-built from Tailwind primitives, not an image: an 8px border-zinc-900 bezel with rounded-[3rem] corners, a fixed-size absolutely positioned notch bar, and a 9:19.5 aspect screen that clips phoneScreenshot with object-cover.
• appStores renders each entry as a plain <img> badge inside a next/link (not a Button), so store badge artwork (SVG/PNG) controls its own visual style; hover only dims the link to opacity-80.
• The layout stacks vertically on small screens (flex-col) and switches to a horizontal split at the lg breakpoint (lg:flex-row); the phone frame's width is fixed at w-64 on mobile and w-72 from md up rather than scaling with the container.