// TIM "Agente de Contas" prototype — device frame, status bar, brand icons. // Faithful to the attached Figma (375px screen width, exact TIM colors). const TIM = { blue: "#0026D9", navy: "#002E46", red: "#EB0028", blue2: "#3152EF", grayBg: "#F0F1F2", border: "#E5E5E5", stroke: "#BABABA", txtGray:"#696969", pink: "#FBCCD4", yellow: "#FAB932", yellowBg:"#FEF5E0", }; // ── Brand mark: TAIS smile (two eyes + smile), red. ────────────── function SmileLogo({ size = 28, color = TIM.red }) { return ( ); } // ── TIM logo: four-square mark (home dark header), monochrome. ─── function TimSquares({ size = 30, color = "#fff" }) { const u = size / 3.4, g = u * 0.18; const sq = (x, y) => ; const o = (size - (u * 2 + g)) / 2; return ( {sq(o, o)}{sq(o + u + g, o)} {sq(o, o + u + g)}{sq(o + u + g, o + u + g)} ); } const Ic = { close: (c = "#000", s = 24) => ( ), chevR: (c = "#000", s = 24) => ( ), chevDown: (c = "#fff", s = 20) => ( ), menu: (c = "#fff", s = 24) => ( ), thumbUp: (c = TIM.txtGray, s = 20, fill = "none") => ( ), thumbDown: (c = TIM.txtGray, s = 20, fill = "none") => ( ), alertTri: (c = TIM.red, s = 18) => ( ), clock: (c = TIM.yellow, s = 18) => ( ), refresh: (c = "#000", s = 22) => ( ), info: (c = TIM.blue, s = 22) => ( ), pix: (c = TIM.navy, s = 26) => ( ), share: (c = TIM.stroke, s = 22) => ( ), copy: (c = TIM.txtGray, s = 18) => ( ), whatsapp: (c = "#000", s = 24) => ( ), bars: (c = "#000", s = 22) => ( ), }; // ── iOS status bar (color adapts per screen). ─────────────────── function StatusBar({ tone = "dark" }) { const c = tone === "dark" ? "#fff" : "#000"; return (
9:41
); } // ── Realistic iPhone frame with dynamic island + home indicator. ─ function Phone({ statusTone = "dark", children }) { return (
{/* dynamic island */}
{children} {/* home indicator */}
); } Object.assign(window, { TIM, SmileLogo, TimSquares, Ic, StatusBar, Phone });