/* triaz-sections-2.jsx — Servicio, Casos, Proceso, Pilares, FinalCTA, Footer */ /* ============================================================ */ /* SERVICIO — two column */ /* ============================================================ */ function Servicio() { return (
El servicio

Sabes que la IA puede cambiar tu forma de trabajar.
Lo que falta es por dónde empezar.

La mayoría de empresas no tienen tiempo, equipo técnico ni claridad para aplicar IA a procesos reales. Triaz resuelve ese hueco: un consultor que entiende tu operación, se reúne contigo cada mes y convierte tareas manuales en flujos apoyados por agentes de IA.

    {[ ["users", "Un consultor asignado a tu cuenta"], ["calendar-check", "Reunión recurrente · prioridades contigo"], ["trending-up", "Resultados medibles"]]. map(([icon, text]) =>
  • {text}
    • )}
); } function ReviewCard() { return (
Sesión mensual · lun 09:30 · oficina Pavimentos
MV
Marc Vidal — Consultor Triaz
Revisando 3 procesos · facturas, certificaciones, partes de obra
"Este mes empezamos por facturas recibidas: es donde se pierden más horas. Te lo dejamos funcionando en dos semanas."
{[ ["check", "Revisión de procesos del mes anterior", "#4F7A4A"], ["target", "Priorización: comparativo de proveedores", "var(--copper)"], ["circle-dashed", "Nuevo agente: certificación + facturación", "var(--steel)"]]. map(([icon, txt, c], i) =>
{txt}
)}
); } function PullQuote() { return (
"

No contratas una herramienta más. Incorporas una capacidad nueva dentro de tu empresa.

); } /* ============================================================ */ /* CASOS — 9 use case cards */ /* ============================================================ */ function Casos() { const items = [ { icon: "briefcase", title: "Estudios y gestión comercial", body: "Preparar ofertas, comparar históricos y reaprovechar partidas. Llegas a la propuesta con menos olvidos.", entra: "pliegos, fichas técnicas e históricos", sale: "borrador de oferta listo para revisar" }, { icon: "wallet", title: "Presupuestos", body: "Borradores iniciales a partir del estudio, revisión de partidas y reconciliación con el contrato firmado.", entra: "estudio aprobado + contrato", sale: "presupuesto reconciliado contra contrato" }, { icon: "truck", title: "Comparativo de proveedores", body: "Pedir, recibir y ordenar ofertas. La IA pone precios, plazos y condiciones lado a lado.", entra: "ofertas en PDF, email o WhatsApp", sale: "tabla comparada con recomendación" }, { icon: "calendar-clock", title: "Planificación", body: "Mantener el cronograma vivo: hitos, dependencias y reproyecciones cuando algo se mueve.", entra: "hitos, dependencias y partes diarios", sale: "cronograma actualizado + avisos" }, { icon: "clipboard-list", title: "Partes de trabajo", body: "Pedir horas e incidencias, estructurar respuestas y actualizar todo sin perseguir por WhatsApp.", entra: "WhatsApp, audios o formulario", sale: "parte cerrado y estructurado" }, { icon: "receipt", title: "Facturas recibidas", body: "Leer facturas del email, extraer los datos y vincularlas con proveedor y concepto.", entra: "emails con facturas adjuntas", sale: "factura vinculada y lista para validar" }, { icon: "shield-check", title: "Certificación y facturación", body: "Componer certificaciones a cliente, cruzarlas con el contrato y dejar la factura lista para emitir.", entra: "avance + partes + contrato", sale: "certificación + factura para revisar" }, { icon: "trending-up", title: "Control económico", body: "Cruzar presupuesto, costes reales, horas y facturas para detectar desviaciones antes de que sea tarde.", entra: "presupuesto, costes, horas y facturas", sale: "alertas accionables tempranas" }, { icon: "credit-card", title: "Cobros y pagos", body: "Seguir vencimientos, conciliar movimientos del banco y avisar de lo que está por cobrar o pagar.", entra: "extractos, facturas y vencimientos", sale: "estado de tesorería al día" }, { icon: "user-round", title: "Recursos humanos", body: "Recoger ausencias, vacaciones y altas, y mantener los datos del equipo ordenados y accesibles.", entra: "solicitudes, partes y documentos", sale: "calendario y fichas actualizados" }, { icon: "file-text", title: "Administración", body: "Redactar, clasificar y responder documentación repetitiva: contratos, escritos y formularios.", entra: "plantillas y correos entrantes", sale: "documento redactado para revisar" }, { icon: "folder", title: "Documentación", body: "Ordenar, buscar y vincular contratos, certificados, informes y archivos de toda la empresa.", entra: "contratos, certificados, informes", sale: "documento encontrado en segundos" }]; return (
Casos de uso

Aplicamos IA donde tú decidas.

Los agentes leen información de tu correo y tus documentos, ejecutan acciones, razonan y replanifican, y devuelven resultados de negocio listos para usar.

{items.map((it) =>

{it.title}

{it.body}

)}
Estos son solo ejemplos. Creamos un agente a medida para{" "} cada proceso o flujo de trabajo que tu empresa necesite.
); } function FlowRow({ label, value, highlight }) { return (
{label} {value}
); } /* ============================================================ */ /* PROCESO — 4 steps, dark section */ /* ============================================================ */ function Proceso() { const steps = [ { n: "01", icon: "search", title: "Diagnóstico", body: "Detectamos dónde se pierde tiempo: recursos humanos, control económico, stock, compras, presupuestación, planificación, facturación…" }, { n: "02", icon: "target", title: "Análisis", body: "Priorizamos los procesos donde la digitalización en la plataforma o los agentes de IA pueden generar un impacto rápido y medible." }, { n: "03", icon: "sparkles", title: "Configuración de agentes", body: "Conectamos datos, flujos y agentes de IA sobre la plataforma para automatizar análisis, seguimiento, validaciones y reporting." }, { n: "04", icon: "refresh-cw", title: "Acompañamiento continuo", body: "Un consultor experto revisa contigo resultados, ajusta agentes y propone nuevas automatizaciones cada mes." }]; return (
Cómo funciona

En marcha en quince días,
no en meses.

{steps.map((s, i) =>
Paso {s.n}

{s.title}

{s.body}

)}
); } /* ============================================================ */ /* PILARES — 3 cards with blueprint sketches */ /* ============================================================ */ function Pilares() { const pilares = [ { n: "01", code: "CONSULTOR", sketch: , title: "Un consultor que conoce negocios como el tuyo", body: "Alguien de Triaz con experiencia en tu sector te acompaña cada mes: prioriza qué automatizar, revisa contigo los resultados y va incorporando IA en nuevas áreas." }, { n: "02", code: "AGENTES", sketch: , title: "Agentes de IA aplicados a procesos reales", body: "No hablamos de IA en abstracto. Agentes que leen facturas, recogen partes, comparan ofertas, preparan certificaciones, vigilan el control económico y mantienen la documentación al día." }, { n: "03", code: "PLATAFORMA", sketch: , title: "Una sola plataforma", body: "Datos, procesos, agentes, automatizaciones, documentos, conversaciones, permisos y trazabilidad viven en un mismo lugar. No necesitas contratar un ERP ni software de terceros." }]; return (
Tres ejes · un resultado

Tres pilares. Una sola relación.

Un consultor que entiende tu negocio, agentes de IA sobre tus procesos reales y una sola plataforma donde vive todo.

{pilares.map((p) =>
{p.sketch}
{p.n} {p.code}

{p.title}

{p.body}

)}
); } /* ============================================================ */ /* Pillar brand-plates — full-bleed Ink panels built from the */ /* TRIAZ echelon-plane motif. Art, not diagrams. */ /* ============================================================ */ const PLATE_GROUND = "#E8E3D9"; const PLATE_INK = "#0B0B0C"; const PLATE_INK2 = "#3A3A3F"; const PLATE_LINE = "rgba(11,11,12,0.40)"; const PLATE_LINE2 = "rgba(11,11,12,0.22)"; const PLATE_BONE = "#F2EEE7"; const PLATE_COP = "#B8884A"; const PLATE_COP2 = "#C9985A"; const PLATE_ISO_D = "M25.9023 95L45.4023 105.5L26.0537 118.823L6.90234 108.5L25.9023 95ZM60.4023 72.5L116.402 104.5L98.4023 117L41.4023 85.5L60.4023 72.5ZM53.9385 64.5L0.402344 100.5L0 76.1514L53.9385 40.7871V64.5ZM100.402 61.5L120.402 74V96L100.402 84.7969V61.5ZM63.4023 0L84.4023 12V75.2812L63.4023 63V0ZM53.4053 22.7656L33.4053 35.5V35.499L33.4043 35.5V35.498L33.4023 35.5V13L53.4023 0V0.000976562L53.4053 0V22.7656Z"; /* leaning parallelogram (echoes the isotype shear) */ function planePoints(x, y, w, h, s) { return `${x + s},${y} ${x + s + w},${y} ${x + w},${y + h} ${x},${y + h}`; } /* 4-point AI sparkle */ function sparkle(cx, cy, outer, inner) { const pts = []; for (let i = 0; i < 8; i++) { const ang = (Math.PI / 4) * i - Math.PI / 2; const r = i % 2 === 0 ? outer : inner; pts.push(`${(cx + r * Math.cos(ang)).toFixed(1)},${(cy + r * Math.sin(ang)).toFixed(1)}`); } return pts.join(" "); } /* arrowhead triangle: tip at (tx,ty), pointing along unit dir (dx,dy) */ function arrowTri(tx, ty, dx, dy, len = 9, half = 5) { const bx = tx - dx * len, by = ty - dy * len; const px = -dy, py = dx; return `${tx.toFixed(1)},${ty.toFixed(1)} ${(bx + px * half).toFixed(1)},${(by + py * half).toFixed(1)} ${(bx - px * half).toFixed(1)},${(by - py * half).toFixed(1)}`; } /* shared canvas: icon-only SVG, fit with margins (ground/glow live on the panel) */ function PlateBase({ children }) { return ( ); } /* ① EXPERTO A TU LADO — two peers; the Triaz expert (copper) beside you (ink) */ function ConsultorSketch() { const ex = 121, you = 185, hy = 60, hr = 17, base = 130; return ( {/* shared ground */} {/* YOU — ink line figure */} {/* EXPERT — solid copper figure, forward */} ); } /* ② AGENTE IA AUTOMATIZANDO UN PROCESO — AI core inside an automation cycle */ function AgenteSketch() { const cx = 150, cy = 84, R = 44; return ( {/* automation double-arrow cycle */} {/* AI processor core */} {[-12, 0, 12].map((d, i) => )} {[-12, 0, 12].map((d, i) => )} {[-7, 7].map((d, i) => )} {[-7, 7].map((d, i) => )} ); } /* ③ PLATAFORMA — every stream of the business converging into one place */ function PlataformaSketch() { const sources = [ { x: 50, y: 40 }, { x: 44, y: 84 }, { x: 54, y: 128 }, { x: 250, y: 42 }, { x: 256, y: 86 }, { x: 246, y: 130 }]; const cx = 150, cy = 84; return ( {/* converging streams + inward arrowheads */} {sources.map((s, i) => { const dx = cx - s.x, dy = cy - s.y; const len = Math.sqrt(dx * dx + dy * dy); const ux = dx / len, uy = dy / len; const ex = s.x + ux * (len - 40), ey = s.y + uy * (len - 40); return ( ); })} {/* the single platform — copper hub holding the isotype */} ); } /* ============================================================ */ /* CTA FINAL — form */ /* ============================================================ */ function FinalCTA() { return (
¿Hablamos?

Cuéntanos sobre tu empresa. Son 2 minutos. Sin compromiso.

); } function ValueCard() { return (

Diagnóstico inicial.
Lo que te llevas:

    {[ "Mapa de procesos priorizados por impacto", "Estimación de ahorro mensual realista", "Plan de implantación en 2 semanas", "Quién te acompaña por nuestra parte"]. map((t) =>
  • {t}
    • )}
); } /* HubSpot Forms — submission endpoint (public, CORS-enabled) */ const HUBSPOT_PORTAL_ID = "143803870"; const HUBSPOT_FORM_GUID = "a1b69c32-837f-4067-a87f-72dafec77eba"; const HUBSPOT_ENDPOINT = `https://api.hsforms.com/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_GUID}`; function ContactForm() { const sizes = [ { label: "< 5", value: "1-4" }, { label: "5-11", value: "5-11" }, { label: "11-50", value: "11-50" }, { label: "51-200", value: "51-200" }, { label: "> 200", value: "201-500" }]; const [size, setSize] = React.useState(null); const [form, setForm] = React.useState({ firstname: "", lastname: "", company: "", jobtitle: "", email: "", dial: "ES +34", phone: "" }); const [status, setStatus] = React.useState("idle"); // idle | submitting | success | error const [errorMsg, setErrorMsg] = React.useState(""); const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value })); async function handleSubmit(e) { e.preventDefault(); if (status === "submitting") return; setStatus("submitting"); setErrorMsg(""); const dialCode = (form.dial.match(/\+\d+/) || [""])[0]; const fullPhone = [dialCode, form.phone.trim()].filter(Boolean).join(" "); const fields = [ { name: "firstname", value: form.firstname.trim() }, { name: "lastname", value: form.lastname.trim() }, { name: "company", value: form.company.trim() }, { name: "jobtitle", value: form.jobtitle.trim() }, { name: "email", value: form.email.trim() }, { name: "phone", value: fullPhone }, { name: "numemployees", value: size || "" } ].filter((f) => f.value !== ""); const payload = { fields, context: { pageUri: typeof window !== "undefined" ? window.location.href : "", pageName: "Triaz — Landing" } }; try { const res = await fetch(HUBSPOT_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); if (res.ok) { setStatus("success"); } else { let detail = ""; try { const j = await res.json(); detail = (j.errors && j.errors[0] && (j.errors[0].message || j.errors[0].errorType)) || j.message || ""; } catch (_) {} setStatus("error"); setErrorMsg(detail || "No se pudo enviar. Inténtalo de nuevo en unos minutos."); } } catch (err) { setStatus("error"); setErrorMsg("No hay conexión con el servidor. Revisa tu red e inténtalo de nuevo."); } } if (status === "success") { return (

¡Gracias{form.firstname ? `, ${form.firstname}` : ""}!

Hemos recibido tu consulta. Un partner de Triaz se pondrá en contacto contigo muy pronto.

); } const submitting = status === "submitting"; return (
Número de empleados
{sizes.map((s) => )}
{status === "error" &&
{errorMsg}
}
Tus datos solo se usan para responderte. Sin spam, sin venta a terceros.
); } function Field({ label, type = "text", placeholder, value, onChange, required }) { return (
{label}
); } function PhoneField({ dial, phone, onDial, onPhone }) { return (
Teléfono
); } function FieldLabel({ children }) { return ( ); } /* ============================================================ */ /* FOOTER */ /* ============================================================ */ function Footer() { return ( ); } Object.assign(window, { Servicio, Pilares, Proceso, Casos, FinalCTA, Footer });