// Wrapper that puts a real AFTER app screen inside a clean phone bezel,
// scaled to fit the marketing layout. The screens were designed for ~390×844;
// we render at 380×800 and scale down with transform.
//
// Bezel is hand-drawn (not IOSDevice from the starter) because the AFTER screens
// already have their own internal top safe-area padding (64px) and aren't iOS-themed.
const APP_W = 380; // viewport width the screen was designed against
const APP_H = 800; // viewport height we crop to (screens scroll, this is the visible chunk)
function PhoneBezel({ children, scale = 0.74 }) {
// Outer container reserves the SCALED size; inner is full size and transformed.
const outerW = Math.round(APP_W * scale);
const outerH = Math.round(APP_H * scale);
return (
{/* screen */}
{/* dynamic island */}
{/* status bar text — sits beside the island */}
9:41
{/* the actual app screen */}
{children}
{/* home indicator */}
);
}
// ─── Three marketing previews ────────────────────────────
function DashboardPreview() {
return ;
}
function CoachPreview() {
return ;
}
function TrendPreview() {
return ;
}
Object.assign(window, { PhoneBezel, DashboardPreview, CoachPreview, TrendPreview });