// Getfiit landing: the painted phone and the live WhatsApp screen inside it.
//
// phone.webp is a Nano Banana render with its display keyed out to black.
// The screen box (gf-landing.css, .lp-device-screen) was measured off that
// render, and the WhatsApp UI is laid out in iPhone screen points (393 wide)
// and scaled to whatever size the phone is drawn at, so the text stays sharp.
const SCREEN_W = 393;
// The painted display is 798x1738, a touch narrower than an iPhone's 393x852.
const SCREEN_H = Math.round(SCREEN_W / (798 / 1738));
function Device({ label, children, className = '', eager = false }) {
const screenRef = React.useRef(null);
const [scale, setScale] = React.useState(0);
React.useLayoutEffect(() => {
const el = screenRef.current;
if (!el) return undefined;
const measure = () => setScale(el.clientWidth / SCREEN_W);
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
return (
);
}
function WaDate({ children = 'Today' }) {
return
{children}
;
}
function WaMeta({ time, sent }) {
return (
{time}
{sent && }
);
}
function WaOut({ children, time, style }) {
return (
{children}
);
}
function WaIn({ children, time, style }) {
return (
{children}
);
}
function WaPhoto({ src, caption, time, small, style }) {
return (
{caption}
);
}
// A voice note as WhatsApp draws a sent one: play, waveform, then the
// sender's face with the blue mic once it has been played.
const WAVE = [6, 10, 16, 22, 14, 9, 18, 26, 20, 12, 8, 14, 24, 28, 18, 10, 7, 12, 20, 15, 9, 6, 11, 17, 13, 8, 5, 9];
function WaVoice({ dur, time, style }) {
return (
{WAVE.map((h, i) => )}
{dur}
);
}
// One card of a WhatsApp carousel: media, the card's text, its quick replies.
function WaCard({ img, text, buttons = [], style }) {
return (
{text}
{buttons.map((b) =>
{b}
)}
);
}
function WaTyping() {
return (
);
}
// ─────────── Icons (screen points) ───────────
function ReadTicks() {
return (
);
}
function SignalIcon() {
return (
);
}
function WifiIcon() {
return (
);
}
function BatteryIcon() {
return (
);
}
function ChevronLeft() {
return (
);
}
function VideoIcon() {
return (
);
}
function PhoneIcon() {
return (
);
}
function PlusIcon() {
return (
);
}
function CameraIcon() {
return (
);
}
function MicIcon() {
return (
);
}
function PlayIcon() {
return (
);
}
function PersonIcon() {
return (
);
}
function MicSmall() {
return (
);
}
window.GfDevice = { Device, WaScreen, WaDate, WaOut, WaIn, WaPhoto, WaVoice, WaCard, WaTyping };
