Mobile App Hero with Phone Mockup

Hero103: Mobile App Hero with Phone Mockup

Fullscreen app-download hero: heading, description, and App Store/Google Play badge links on the left, a single notched phone-frame mockup showing a screenshot on the right, over an inset background video panel.

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/hero103?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero103.tsx and its dependencies: the badge and button shadcn/ui primitives.

Quick start

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

import { Hero103, hero103Demo } from "@/components/beste/block/hero103";

export default function Page() {
  return <Hero103 {...hero103Demo} />;
}

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

import { Hero103 } from "@/components/beste/block/hero103";

export default function Page() {
  return (
    <Hero103
      badge={{ label: "Mobile App", variant: "secondary" }}
      heading="Everything you need, right in your pocket"
      description="Stay connected wherever you go."
      appStores={[
        { image: { src: "/badges/app-store.svg", alt: "Download on App Store" }, href: "/ios" },
        { image: { src: "/badges/google-play.svg", alt: "Get it on Google Play" }, href: "/android" },
      ]}
      backgroundMedia={{ type: "video", src: "/videos/hero.mp4" }}
      phoneScreenshot={{ src: "/images/app-screen.png", alt: "App screenshot" }}
    />
  );
}

Props

type Badge = { label: string; variant?: "default" | "secondary" | "outline" };
type BackgroundMedia = { type: "image" | "video"; src: string; alt?: string };
type AppStore = { image: { src: string; alt: string }; href: string };

Behavior notes

• appStores renders the badge images as-is inside plain links with a hover opacity fade (hover:opacity-80); there is no built-in App Store / Play Store SVG, the caller supplies both badge images.
• The phone frame is pure CSS: a rounded-[3rem] bordered box with a small absolutely positioned notch bar at the top and a 9:19.5 aspect screen; phoneScreenshot fills that screen edge to edge with object-cover.
• The badge and button shadcn/ui dependencies both ship with the install, but only Badge is actually rendered by this hero; there is no button/CTA row, only the app-store link row.
• Layout stacks to a single centered column below lg (text above, phone below) and goes side by side at lg and up.
• The background video is inset on all sides (inset-x-6 top-6 bottom-6, wider from lg) with a dark or light overlay depending on invertColor, matching the panel treatment used across this hero set.