/* ============================================================ AppShowcase.jsx — "Apps web e mobile com IA" Showcase interativo: web app + tablet + celular, com abas por módulo (Gestão, Atendimento, Financeiro, Estoque, Vendas, RH). Escala responsiva via ScaleBox. ============================================================ */ /* ---- ScaleBox: encaixa um palco de tamanho fixo na largura do pai ---- Usa medição no mount + resize da janela (ResizeObserver não é confiável neste runtime). ---- */ const ScaleBox = ({ designW, designH, maxScale = 1, children }) => { const wrapRef = React.useRef(null); const [scale, setScale] = React.useState(maxScale); React.useLayoutEffect(() => { const measure = () => { const el = wrapRef.current; if (!el) return; const w = el.clientWidth; if (w > 0) setScale(Math.min(maxScale, w / designW)); }; measure(); const t1 = setTimeout(measure, 60); const t2 = setTimeout(measure, 400); window.addEventListener('resize', measure); return () => { clearTimeout(t1); clearTimeout(t2); window.removeEventListener('resize', measure); }; }, [designW, maxScale]); return (
{children}
); }; /* ---- molduras de dispositivos ---- */ const BrowserFrame = ({ children, style }) => (
{['#FF5F57', '#FEBC2E', '#28C840'].map(c => )}
app.suaempresa.com.br
{children}
); const TabletFrame = ({ children, style }) => (
{children}
); const PhoneFrame = ({ children, style }) => (
{children}
); /* ---- badges de loja (sem logos de terceiros) ---- */ const StoreBadge = ({ kind }) => { const apple = kind === 'apple'; return (
{ e.currentTarget.style.borderColor = 'rgba(0,94,255,0.45)'; e.currentTarget.style.background = 'rgba(0,94,255,0.08)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.14)'; e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }}> {apple ? ( ) : ( )}
{apple ? 'Disponível na' : 'Disponível no'}
{apple ? 'App Store' : 'Google Play'}
); }; /* ---- rótulo leve de dispositivo (nome + papel) ---- */ const DeviceLabel = ({ name, role, style }) => (
{name} {role && · {role}}
); /* ---- a seção ---- */ const AppShowcase = () => { const [active, setActive] = React.useState(0); const [paused, setPaused] = React.useState(false); const [narrow, setNarrow] = React.useState(false); const m = AR_MODULES[active]; React.useEffect(() => { const mq = window.matchMedia('(max-width: 860px)'); const on = () => setNarrow(mq.matches); on(); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); // recriar ícones lucide a cada troca de módulo / layout React.useEffect(() => { window.lucide && window.lucide.createIcons(); }); // auto-rotação (pausa ao interagir / hover) React.useEffect(() => { if (paused) return; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) return; const t = setInterval(() => setActive(a => (a + 1) % AR_MODULES.length), 4600); return () => clearInterval(t); }, [paused]); const pick = (i) => { setActive(i); setPaused(true); }; return (
{/* glow de fundo */}
Apps web e mobile com IA, sob medida para a sua operação} sub="Construímos o sistema da sua empresa — web app, tablet e aplicativo para iOS e Android — com inteligência artificial integrada à gestão, atendimento, financeiro, estoque, vendas e RH. Tudo em um só lugar." /> {/* abas de módulo */}
{AR_MODULES.map((mod, i) => { const on = i === active; return ( ); })}
{/* palco dos dispositivos */}
setPaused(true)} style={{ marginTop: 30, position: 'relative' }} > {narrow ? ( /* ---------- mobile: pilha web app → tablet → mobile ---------- */
) : ( /* ---------- desktop: tríptico minimalista, web app protagonista ---------- */
{/* brilho de chão sutil sob os aparelhos */}
{/* tablet (apoio esquerdo, menor, só o bezel encosta atrás) */} {/* web app (protagonista, centrado) */} {/* celular (apoio direito, menor, só a borda encosta à frente) */}
)}
{/* legenda + badges de loja */}
Interfaces ilustrativas — cada módulo é personalizado para a realidade do seu negócio.
); }; window.AppShowcase = AppShowcase;