{"id":606,"date":"2024-09-14T18:42:34","date_gmt":"2024-09-14T18:42:34","guid":{"rendered":"https:\/\/stratsapp.dev\/?page_id=606"},"modified":"2026-09-30T11:56:00","modified_gmt":"2026-09-30T11:56:00","slug":"contacto","status":"publish","type":"page","link":"https:\/\/stratsapp.dev\/en\/contacto\/","title":{"rendered":"Contacto"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n  <title>Formulario Proyecto<\/title>\n\n  <style>\n    *{\n      margin:0;\n      padding:0;\n      box-sizing:border-box;\n      font-family: Arial, Helvetica, sans-serif;\n    }\n\n    body{\n      height:100vh;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      padding-right:80px;\n      background:\n        radial-gradient(circle at top left, #2f1f80 0%, #16103d 45%, #0d0a27 100%);\n      overflow:hidden;\n    }\n\n    .background-glow{\n      position:absolute;\n      width:700px;\n      height:700px;\n      border-radius:50%;\n      background:rgba(128, 90, 255, 0.15);\n      filter: blur(120px);\n      left:-200px;\n      bottom:-200px;\n    }\n\n    .card{\n      position:relative;\n      width:520px;\n      padding:42px;\n      border-radius:28px;\n      background:rgba(255,255,255,0.06);\n      backdrop-filter: blur(16px);\n      border:1px solid rgba(255,255,255,0.08);\n      box-shadow:0 15px 40px rgba(0,0,0,0.35);\n      color:white;\n    }\n\n    .card h1{\n      font-size:44px;\n      line-height:1.1;\n      margin-bottom:10px;\n      font-weight:800;\n    }\n\n    .card p{\n      color:#c6c3e6;\n      margin-bottom:35px;\n      font-size:15px;\n    }\n\n    .field{\n      margin-bottom:22px;\n    }\n\n    label{\n      display:block;\n      margin-bottom:10px;\n      font-size:13px;\n      font-weight:700;\n      color:#e6e2ff;\n      letter-spacing:0.5px;\n      text-transform:uppercase;\n    }\n\n    input,\n    select,\n    textarea{\n      width:100%;\n      background:rgba(255,255,255,0.07);\n      border:2px solid rgba(255,255,255,0.08);\n      color:white;\n      padding:16px 18px;\n      border-radius:14px;\n      outline:none;\n      transition:0.3s ease;\n      font-size:15px;\n    }\n\n    input::placeholder,\n    textarea::placeholder{\n      color:#aaa6d3;\n    }\n\n    input:focus,\n    select:focus,\n    textarea:focus{\n      border-color:#8b5cf6;\n      box-shadow:0 0 0 4px rgba(139,92,246,0.2);\n    }\n\n    select{\n      appearance:none;\n      cursor:pointer;\n    }\n\n    textarea{\n      min-height:130px;\n      resize:none;\n    }\n\n    .btn{\n      width:100%;\n      padding:18px;\n      border:none;\n      border-radius:14px;\n      background:linear-gradient(90deg,#7c3aed,#d946ef);\n      color:white;\n      font-size:18px;\n      font-weight:800;\n      cursor:pointer;\n      transition:0.3s ease;\n      margin-top:10px;\n      box-shadow:0 10px 25px rgba(168,85,247,0.35);\n    }\n\n    .btn:hover{\n      transform:translateY(-2px);\n      opacity:0.95;\n    }\n\n    .btn-secondary{\n      margin-top:16px;\n      width:100%;\n      padding:14px;\n      background:transparent;\n      border:1px dashed rgba(255,255,255,0.25);\n      border-radius:14px;\n      color:#bdb7e7;\n      cursor:pointer;\n      transition:0.3s ease;\n    }\n\n    .btn-secondary:hover{\n      border-color:#8b5cf6;\n      color:white;\n    }\n\n    .message{\n      margin-top:18px;\n      text-align:center;\n      font-size:14px;\n      color:#d8d4ff;\n    }\n\n    @media(max-width:768px){\n      body{\n        justify-content:center;\n        padding:20px;\n      }\n\n      .card{\n        width:100%;\n        padding:28px;\n      }\n\n      .card h1{\n        font-size:34px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <div class=\"background-glow\"><\/div>\n\n  <div class=\"card\">\n    <h1>Hablemos de tu proyecto<\/h1>\n    <p>Cu\u00e9ntanos qu\u00e9 necesitas y te contactaremos pronto<\/p>\n\n    <form id=\"leadForm\" action=\"\">\n\n      <div class=\"field\">\n        <label>Nombre<\/label>\n        <input id=\"nombre\" type=\"text\" placeholder=\"Felipe Rodriuez Rivera\" required>\n      <\/div>\n\n      <div class=\"field\">\n        <label>Empresa<\/label>\n        <input id=\"empresa\" type=\"text\" placeholder=\"Nombre de tu empresa\">\n      <\/div>\n\n      <div class=\"field\">\n        <label>Email<\/label>\n        <input id=\"email\" type=\"email\" placeholder=\"tu@email.com\" required>\n      <\/div>\n\n      <div class=\"field\">\n        <label>Servicio de inter\u00e9s<\/label>\n        <select id=\"servicio\">\n          <option>Selecciona un servicio<\/option>\n          <option>Desarrollo Web<\/option>\n          <option>Automatizaci\u00f3n IA<\/option>\n          <option>Chatbots<\/option>\n          <option>Aplicaciones M\u00f3viles<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"field\">\n        <label>Descripci\u00f3n del proyecto<\/label>\n        <textarea id=\"descripcion\" placeholder=\"Cu\u00e9ntanos sobre tu proyecto, objetivos y cualquier detalle relevante...\"><\/textarea>\n      <\/div>\n\n      <button class=\"btn\" type=\"submit\">\n        ENVIAR SOLICITUD\n      <\/button>\n\n      <button class=\"btn-secondary\" type=\"button\" onclick=\"llenarPrueba()\">\n        Llenar con datos de prueba\n      <\/button>\n\n      <div class=\"message\" id=\"mensaje\"><\/div>\n\n    <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n  <\/div>\n\n  <script>\n    const form = document.getElementById(\"leadForm\");\n    const mensaje = document.getElementById(\"mensaje\");\n\n    form.addEventListener(\"submit\", async function(e) {\n      e.preventDefault();\n\n      const data = {\n        nombre: document.getElementById(\"nombre\").value,\n        empresa: document.getElementById(\"empresa\").value,\n        email: document.getElementById(\"email\").value,\n        servicio: document.getElementById(\"servicio\").value,\n        descripcion: document.getElementById(\"descripcion\").value\n      };\n\n      mensaje.innerHTML = \"Enviando solicitud...\";\n\n      try {\n        const response = await fetch(\"https:\/\/bruising-never-sanctuary.ngrok-free.dev\/webhook\/formulario-lead\", {\n          method: \"POST\",\n          headers: {\n            \"Content-Type\": \"application\/json\"\n          },\n          body: JSON.stringify(data)\n        });\n\n        if(response.ok){\n          mensaje.innerHTML = \"\u2705 Solicitud enviada correctamente\";\n          form.reset();\n        } else {\n          mensaje.innerHTML = \"\u274c Error al enviar la solicitud\";\n        }\n\n      } catch(error){\n        console.error(error);\n        mensaje.innerHTML = \"\u26a0\ufe0f No se pudo conectar con el webhook\";\n      }\n    });\n\n    function llenarPrueba(){\n      document.getElementById(\"nombre\").value = \"Felipe Rodriguez Rivera\";\n      document.getElementById(\"empresa\").value = \"StratsApp\";\n      document.getElementById(\"email\").value = \"felipe@empresa.com\";\n      document.getElementById(\"servicio\").value = \"Automatizaci\u00f3n IA\";\n      document.getElementById(\"descripcion\").value = \"Necesito automatizar procesos y captaci\u00f3n de leads.\";\n    }\n  <\/script>\n\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Formulario Proyecto Hablemos de tu proyecto Cu\u00e9ntanos qu\u00e9 necesitas y te contactaremos pronto Nombre Empresa Email Servicio de inter\u00e9s Selecciona un servicioDesarrollo WebAutomatizaci\u00f3n IAChatbotsAplicaciones M\u00f3viles Descripci\u00f3n del proyecto ENVIAR SOLICITUD Llenar con datos de prueba<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-606","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/pages\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":39,"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/pages\/606\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/pages\/606\/revisions\/1530"}],"wp:attachment":[{"href":"https:\/\/stratsapp.dev\/en\/wp-json\/wp\/v2\/media?parent=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}