import * as React from "react";
import { cn } from "@/lib/utils";
/**
* Phone-shaped frame (390 × 844 proportions) for the mobile product mocks. The screen is a flex
* column: mocks render a header, a scrolling body (`min-h-0 flex-1`) and a fixed bottom bar.
* Nothing inside is interactive by default; callers opt in.
*/
export function PhoneFrame({ children, className, screenClassName, label }: { children: React.ReactNode; className?: string; screenClassName?: string; label?: string }) {
return (
{/* Side buttons */}
{/* Status bar + dynamic island */}
9:41
{children}
{/* Home indicator */}
);
}
/** Desktop app window chrome. Same look as the marketing `Window`, sized for the product mocks. */
export function DesktopFrame({ title, children, className, url }: { title?: string; children: React.ReactNode; className?: string; url?: string }) {
return (