{"id":3163,"date":"2026-03-08T08:57:03","date_gmt":"2026-03-08T12:57:03","guid":{"rendered":"https:\/\/webmarketpro.net\/?page_id=3163"},"modified":"2026-03-08T10:47:08","modified_gmt":"2026-03-08T14:47:08","slug":"apps","status":"publish","type":"page","link":"https:\/\/webmarketpro.net\/pt\/aplicativos\/","title":{"rendered":"aplicativos"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3163\" class=\"elementor elementor-3163\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-4a4ecf7 e-flex e-con-boxed e-con e-parent\" data-id=\"4a4ecf7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/vimeo.com\\\/1171500284?fl=tl&amp;fe=ec&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-video-embed\" role=\"presentation\"><\/div>\n\t\t\t\t\t\t<\/div>\t\t<div class=\"elementor-element elementor-element-f713ba7 elementor-widget elementor-widget-html\" data-id=\"f713ba7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=Orbitron:wght@500;700&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        :root { --accent-blue: #0061ff; }\r\n        body { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; background: transparent; color: white; }\r\n\r\n        \/* FONDOS S\u00d3LIDOS PARA M\u00c1XIMA LECTURA *\/\r\n        .app-container { min-height: 100vh; }\r\n        \r\n        .solid-card-pro { \r\n            background: #020617; \/* Slate 950 S\u00f3lido *\/\r\n            border: 1px solid rgba(0, 97, 255, 0.4);\r\n            box-shadow: 0 10px 40px rgba(0,0,0,0.8);\r\n        }\r\n\r\n        .inner-detail-box {\r\n            background: #0f172a; \/* Slate 900 *\/\r\n            border: 1px solid rgba(255,255,255,0.1);\r\n            padding: 12px;\r\n            border-radius: 1rem;\r\n        }\r\n        \r\n        .btn-active:active { transform: scale(0.95); transition: 0.1s; }\r\n        .font-tech { font-family: 'Orbitron', sans-serif; }\r\n        \r\n        \/* Animaci\u00f3n de apertura *\/\r\n        .drawer-hosting { \r\n            animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        @keyframes slideIn {\r\n            from { transform: translateY(20px); opacity: 0; }\r\n            to { transform: translateY(0); opacity: 1; }\r\n        }\r\n\r\n        .detail-pane { \r\n            max-height: 0; overflow: hidden; transition: all 0.4s ease; \r\n        }\r\n        .detail-pane.active { max-height: 800px; padding-top: 1.5rem; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div id=\"root\"><\/div>\r\n\r\n    <script type=\"text\/babel\">\r\n        const { useState, useEffect } = React;\r\n\r\n        const translations = {\r\n            es: {\r\n                hosting: \"Hosting\",\r\n                domains: \"Dominios\",\r\n                view: \"VER PLANES\",\r\n                search: \"BUSCAR\",\r\n                select_sys: \"ELEGIR SISTEMA\",\r\n                close: \"Cerrar\",\r\n                buy: \"Comprar Ahora\",\r\n                ram: \"Memoria RAM\",\r\n                disk: \"Disco NVMe\",\r\n                visits: \"Visitas Mes\",\r\n                emails: \"Correos Pro\",\r\n                lang_tag: \"ES\"\r\n            },\r\n            en: {\r\n                hosting: \"Web Hosting\",\r\n                domains: \"Domains\",\r\n                view: \"VIEW PLANS\",\r\n                search: \"SEARCH\",\r\n                select_sys: \"SELECT SYSTEM\",\r\n                close: \"Close\",\r\n                buy: \"Order Now\",\r\n                ram: \"RAM Memory\",\r\n                disk: \"NVMe Disk\",\r\n                visits: \"Monthly Visits\",\r\n                emails: \"Business Emails\",\r\n                lang_tag: \"EN\"\r\n            }\r\n        };\r\n\r\n        const App = () => {\r\n            const [view, setView] = useState('home');\r\n            const [selectedPlan, setSelectedPlan] = useState(null);\r\n            const [lang, setLang] = useState('es');\r\n\r\n            const t = translations[lang];\r\n\r\n            const plans = [\r\n                { id: 2, name: 'Initial 500MB', price: '1.99', ram: '1GB LVE', disk: '500MB', visits: '5k', emails: '2 Cuentas' },\r\n                { id: 38, name: 'Initial 1GB', price: '2.99', ram: '1GB LVE', disk: '1GB', visits: '5k', emails: '5 Cuentas' },\r\n                { id: 39, name: 'Initial 1.5GB', price: '3.99', ram: '1GB LVE', disk: '1.5GB', visits: '10k', emails: '10 Cuentas' },\r\n                { id: 56, name: 'Premium High Speed', price: '4.99', ram: '2GB LVE', disk: '5GB', visits: '25k', emails: '25 Cuentas' },\r\n                { id: 57, name: 'Business Pro', price: '7.99', ram: '2GB LVE', disk: '10GB', visits: '50k', emails: '50 Cuentas' },\r\n                { id: 58, name: 'Supreme Power', price: '29.99', ram: '4GB LVE', disk: '50GB', visits: '100k', emails: '100 Cuentas' }\r\n            ];\r\n\r\n            const navigate = (url) => { window.location.href = url; };\r\n\r\n            useEffect(() => { \r\n                if (window.lucide) lucide.createIcons(); \r\n            }, [view, selectedPlan, lang]);\r\n\r\n            return (\r\n                <div className=\"app-container w-full p-4 flex flex-col max-w-md mx-auto\">\r\n                    \r\n                    {\/* CABECERA REFINADA *\/}\r\n                    <div className=\"flex justify-between items-center mb-8 pt-4\">\r\n                        <img decoding=\"async\" src=\"https:\/\/webmarketpro.net\/wp-content\/uploads\/2024\/10\/2.png\" className=\"h-6\" alt=\"Logo\" \/>\r\n                        <div className=\"flex gap-2\">\r\n                            {\/* BOT\u00d3N DE IDIOMA MEJORADO *\/}\r\n                            <button onClick={() => setLang(lang === 'es' ? 'en' : 'es')} \r\n                                    className=\"bg-blue-600 border border-white\/30 px-3 py-1 rounded-lg text-[10px] font-black font-tech flex items-center gap-1 active:scale-90 transition-all\">\r\n                                <i data-lucide=\"languages\" className=\"w-3 h-3\"><\/i> {t.lang_tag}\r\n                            <\/button>\r\n                            <div className=\"w-8 h-8 rounded-lg solid-card-pro flex items-center justify-center\">\r\n                                <i data-lucide=\"user\" className=\"w-4 h-4 text-blue-400\"><\/i>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    {\/* MENU PRINCIPAL: Se oculta cuando abres Hosting para evitar saturar la pantalla *\/}\r\n                    {view === 'home' && (\r\n                        <div className=\"grid grid-cols-2 gap-4\">\r\n                            <div onClick={() => setView('hosting')} \r\n                                 className=\"p-6 rounded-[2rem] solid-card-pro btn-active h-44 flex flex-col justify-between border-t-4 border-t-blue-500\">\r\n                                <div className=\"bg-blue-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-lg\">\r\n                                    <i data-lucide=\"server\" className=\"text-white w-5 h-5\"><\/i>\r\n                                <\/div>\r\n                                <div>\r\n                                    <h3 className=\"font-tech text-[10px] font-bold text-blue-400 tracking-widest\">{t.hosting}<\/h3>\r\n                                    <p className=\"text-[11px] text-white font-black mt-1\">{t.view}<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <div onClick={() => navigate('https:\/\/webmarketpro.net\/domain\/')} \r\n                                 className=\"p-6 rounded-[2rem] solid-card-pro btn-active h-44 flex flex-col justify-between border-t-4 border-t-slate-500\">\r\n                                <div className=\"bg-slate-700 w-10 h-10 rounded-xl flex items-center justify-center shadow-lg\">\r\n                                    <i data-lucide=\"globe\" className=\"text-cyan-400 w-5 h-5\"><\/i>\r\n                                <\/div>\r\n                                <div>\r\n                                    <h3 className=\"font-tech text-[10px] font-bold text-slate-300 tracking-widest\">{t.domains}<\/h3>\r\n                                    <p className=\"text-[11px] text-white font-black mt-1\">{t.search}<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    )}\r\n\r\n                    {\/* VENTANA DE PLANES (Solo visible si view === 'hosting') *\/}\r\n                    {view === 'hosting' && (\r\n                        <div className=\"drawer-hosting space-y-4 pb-20\">\r\n                            <div className=\"flex justify-between items-center mb-6 px-2\">\r\n                                <h2 className=\"font-tech text-sm font-black text-white italic tracking-tighter\">{t.select_sys}<\/h2>\r\n                                <button onClick={() => {setView('home'); setSelectedPlan(null);}} \r\n                                        className=\"bg-red-600\/20 text-red-500 border border-red-500\/50 px-4 py-1 rounded-full text-[10px] font-bold uppercase active:scale-95 transition-all\">\r\n                                    X {t.close}\r\n                                <\/button>\r\n                            <\/div>\r\n\r\n                            {plans.map((plan) => (\r\n                                <div key={plan.id} \r\n                                     className={`p-6 rounded-[2rem] transition-all duration-300 ${selectedPlan === plan.id ? 'bg-blue-600 border-white shadow-[0_0_30px_#0061ff]' : 'solid-card-pro'}`}\r\n                                     onClick={() => setSelectedPlan(selectedPlan === plan.id ? null : plan.id)}>\r\n                                    \r\n                                    <div className=\"flex justify-between items-center\">\r\n                                        <div className=\"flex items-center gap-3\">\r\n                                            <div className=\"p-2 bg-white\/10 rounded-lg\">\r\n                                                <i data-lucide=\"cpu\" className=\"w-4 h-4 text-white\"><\/i>\r\n                                            <\/div>\r\n                                            <h4 className=\"font-bold text-sm\">{plan.name}<\/h4>\r\n                                        <\/div>\r\n                                        <span className=\"font-tech text-sm font-bold tracking-tighter\">${plan.price}<\/span>\r\n                                    <\/div>\r\n\r\n                                    {\/* FICHA T\u00c9CNICA: Texto Blanco y fondo s\u00f3lido para legibilidad *\/}\r\n                                    <div className={`detail-pane ${selectedPlan === plan.id ? 'active' : ''}`}>\r\n                                        <div className=\"grid grid-cols-2 gap-3 mb-6\">\r\n                                            <div className=\"inner-detail-box text-[9px] font-black uppercase tracking-tight\">\r\n                                                <span className=\"text-white block mb-1 opacity-50\">{t.ram}<\/span> \r\n                                                <span className=\"text-white\">{plan.ram}<\/span>\r\n                                            <\/div>\r\n                                            <div className=\"inner-detail-box text-[9px] font-black uppercase tracking-tight\">\r\n                                                <span className=\"text-white block mb-1 opacity-50\">{t.disk}<\/span> \r\n                                                <span className=\"text-white\">{plan.disk}<\/span>\r\n                                            <\/div>\r\n                                            <div className=\"inner-detail-box text-[9px] font-black uppercase tracking-tight\">\r\n                                                <span className=\"text-white block mb-1 opacity-50\">{t.visits}<\/span> \r\n                                                <span className=\"text-white\">{plan.visits}<\/span>\r\n                                            <\/div>\r\n                                            <div className=\"inner-detail-box text-[9px] font-black uppercase tracking-tight\">\r\n                                                <span className=\"text-white block mb-1 opacity-50\">{t.emails}<\/span> \r\n                                                <span className=\"text-white\">{plan.emails}<\/span>\r\n                                            <\/div>\r\n                                        <\/div>\r\n                                        <button \r\n                                            onClick={(e) => { e.stopPropagation(); navigate(`https:\/\/webmarketpro.net\/Clientes\/cart.php?a=add&pid=${plan.id}`); }}\r\n                                            className=\"w-full py-4 rounded-2xl bg-white text-blue-600 font-black text-xs uppercase tracking-widest active:scale-95 shadow-2xl transition-all\">\r\n                                            {t.buy}\r\n                                        <\/button>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            ))}\r\n                        <\/div>\r\n                    )}\r\n\r\n                    <div className=\"mt-auto py-8 border-t border-white\/5 flex justify-center opacity-20\">\r\n                        <span className=\"text-[8px] font-bold font-tech uppercase tracking-[0.4em]\">Webmarketpro OS v2.6.1<\/span>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            );\r\n        };\r\n\r\n        const root = ReactDOM.createRoot(document.getElementById('root'));\r\n        root.render(<App \/>);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3163","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/pages\/3163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/comments?post=3163"}],"version-history":[{"count":35,"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/pages\/3163\/revisions"}],"predecessor-version":[{"id":3201,"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/pages\/3163\/revisions\/3201"}],"wp:attachment":[{"href":"https:\/\/webmarketpro.net\/pt\/wp-json\/wp\/v2\/media?parent=3163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}