feat: catálogo como centro del embudo y captura de baja fricción
Reestructuración pedida por el cliente tras revisar la primera versión. Conversión: - Formulario de 14 campos a 4: nombre, correo, teléfono y mensaje. La clasificación de riesgo ya no se pregunta, se deduce del contexto de la página y viaja oculta. Menos fricción, misma riqueza para el análisis. - El inicio deja de bifurcar y empuja al catálogo: 36 llamados desembocan ahí, y las rutas por industria y escenario pasan a ser la forma de entrar al catálogo ya filtrado, en lugar de competir como destino. - Catálogo rehecho como tienda: barra lateral con filtros, búsqueda que acepta expresiones regulares, títulos que abren la ficha, un solo botón primario por tarjeta y el comparador detrás de un desplegable. - Ficha de producto orientada al cierre: bloque en lenguaje llano sobre si el equipo corresponde al caso, y "Cotizar este equipo" con el formulario precargado. Se retiraron los enlaces que sacaban del embudo a leer normas. - Todos los llamados se unifican en "Recibir cotización". - Widget de WhatsApp: nombre, teléfono, correo y mensaje libre. El texto que escribe la persona es el que viaja a la conversación. Doble audiencia: - 13 escenarios con la iconografía original de FSPM traducen un lugar reconocible a clases de fuego y productos, para quien no domina la terminología. La capa técnica se conserva para búsqueda. - Héroe con fotografía en todas las landings. Correcciones: - El contenedor moría al arrancar porque el CLI de Prisma no podía escribir sus motores; el chown ahora incluye /app/prisma-cli. - Iconos repetidos entre escenarios. El set original no tiene icono de cocina, así que ese escenario usa un marcador tipográfico explícito. - FIREMIKS no aparecía en ningún escenario. - Los ids de campo del formulario colisionaban con dos instancias por página. - Se documentó el despliegue, que faltaba por completo. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Uriel Jareth
co-authored by
Claude Opus 5
Claude Opus 5
parent
3c6bdcfc06
commit
0e0331c1fc
+122
-65
@@ -1,6 +1,9 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { FormularioContacto } from "@/components/formulario/FormularioContacto";
|
||||
import { RielClases } from "@/components/marca/RielClases";
|
||||
import { Migas } from "@/components/site/contenido/Migas";
|
||||
import { FOTOS, HeroeLanding } from "@/components/site/HeroeLanding";
|
||||
import { Revelar } from "@/components/site/Revelar";
|
||||
import { getCategoria } from "@/data/catalogo";
|
||||
import type { ClaseFuego } from "@/data/clases-fuego";
|
||||
@@ -13,12 +16,16 @@ import { getIndustria } from "@/data/industrias";
|
||||
*
|
||||
* REGLA DURA: son escenarios construidos con fines de demostración. No
|
||||
* corresponden a clientes reales, no llevan nombres de empresa y no presentan
|
||||
* cifras como si fueran mediciones. El aviso va arriba, no en una nota al pie.
|
||||
* cifras como si fueran mediciones. El rótulo va en el héroe y se repite arriba
|
||||
* del contenido, nunca en una nota al pie.
|
||||
*
|
||||
* Cada caso abre con un resumen en una frase, para quien no va a leer los seis
|
||||
* pasos, y después desarrolla el detalle técnico para quien sí.
|
||||
*/
|
||||
|
||||
const TITULO = "Casos de aplicación";
|
||||
const TITULO = "Casos de aplicación: cómo se resuelve un escenario real";
|
||||
const DESCRIPCION =
|
||||
"Cuatro escenarios ilustrativos de protección contra incendios con la estructura problema, riesgo, solución, prueba, resultado y documentación. Construidos con fines de demostración.";
|
||||
"Cuatro escenarios ilustrativos de protección contra incendios —planta química, bodega, gasolinera y cocina de hotel— con la estructura problema, riesgo, solución, prueba, resultado y documentación. Construidos con fines de demostración.";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: TITULO,
|
||||
@@ -31,11 +38,15 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
const MENSAJE_INICIAL = "Mi escenario se parece al de ";
|
||||
|
||||
type Caso = {
|
||||
id: string;
|
||||
industriaSlug: string;
|
||||
titulo: string;
|
||||
escenario: string;
|
||||
/** El caso en una frase, para quien no va a leer los seis pasos. */
|
||||
resumen: string;
|
||||
clases: ClaseFuego[];
|
||||
categorias: string[];
|
||||
problema: string;
|
||||
@@ -51,7 +62,10 @@ const CASOS: Caso[] = [
|
||||
id: "trasvase",
|
||||
industriaSlug: "industria-energia",
|
||||
titulo: "Patio de trasvase de solventes en una planta química",
|
||||
escenario: "Escenario ilustrativo · Planta química, patio de trasvase con contención secundaria",
|
||||
escenario:
|
||||
"Escenario ilustrativo · Planta química, patio de trasvase con contención secundaria",
|
||||
resumen:
|
||||
"El equipo estaba a cien metros de donde puede arder. Se cronometró el recorrido y se movió el equipo, no se compró más.",
|
||||
clases: ["A", "B", "C"],
|
||||
categorias: ["agentes-extinguidores", "productos-moviles"],
|
||||
problema:
|
||||
@@ -83,6 +97,8 @@ const CASOS: Caso[] = [
|
||||
industriaSlug: "logistica-bodegas",
|
||||
titulo: "Nave de almacenamiento con carga combustible y montacargas eléctricos",
|
||||
escenario: "Escenario ilustrativo · Centro logístico, nave única con racks de gran altura",
|
||||
resumen:
|
||||
"Había extintores suficientes en el conteo, pero no los correctos en los pasillos correctos.",
|
||||
clases: ["A", "B", "C"],
|
||||
categorias: ["extintores-portatiles", "rociadores"],
|
||||
problema:
|
||||
@@ -114,6 +130,8 @@ const CASOS: Caso[] = [
|
||||
industriaSlug: "gasolineras-flotas",
|
||||
titulo: "Estación de servicio con público en isla y autotanques en patio",
|
||||
escenario: "Escenario ilustrativo · Estación de servicio urbana con seis posiciones de carga",
|
||||
resumen:
|
||||
"Quien responde primero es el despachador. Se entrenó a los tres turnos y se dejó constancia de quién puede operar el equipo.",
|
||||
clases: ["A", "B", "C"],
|
||||
categorias: ["productos-moviles", "extintores-portatiles"],
|
||||
problema:
|
||||
@@ -145,6 +163,8 @@ const CASOS: Caso[] = [
|
||||
industriaSlug: "cocinas-hoteles",
|
||||
titulo: "Cocina de hotel con freidoras bajo una sola campana",
|
||||
escenario: "Escenario ilustrativo · Hotel de servicio completo, cocina central y comedor",
|
||||
resumen:
|
||||
"Lo que estaba colgado en la pared no sirve para aceite hirviendo. Se cambió por equipo apto para clase K y se entrenó al turno de cierre.",
|
||||
clases: ["A", "B", "K"],
|
||||
categorias: ["rociadores", "extintores-portatiles"],
|
||||
problema:
|
||||
@@ -176,32 +196,38 @@ const CASOS: Caso[] = [
|
||||
export default function PaginaCasos() {
|
||||
return (
|
||||
<>
|
||||
{/* ---------- encabezado con el aviso destacado arriba ---------- */}
|
||||
<section className="grid-bg bg-ink pt-12 pb-14 sm:pt-16 sm:pb-20">
|
||||
<div className="shell">
|
||||
<nav aria-label="Ruta de navegación" className="mb-8">
|
||||
<ol className="flex flex-wrap items-center gap-2 font-mono text-[0.625rem] uppercase tracking-[0.14em] text-faint">
|
||||
<li>
|
||||
<Link href="/" className="hover:text-bright">
|
||||
Inicio
|
||||
</Link>
|
||||
</li>
|
||||
<li aria-hidden="true">/</li>
|
||||
<li className="text-bright">Casos de aplicación</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<HeroeLanding
|
||||
antes={<Migas actual="Casos de aplicación" />}
|
||||
eyebrow="Escenarios ilustrativos"
|
||||
titulo="Cuatro escenarios y cómo se resuelve cada uno"
|
||||
entrada="Planta química, bodega, gasolinera y cocina de hotel. Cada caso sigue seis pasos: problema, riesgo, solución, prueba, resultado y documentación."
|
||||
foto={FOTOS.planta}
|
||||
enfoque="50% 62%"
|
||||
altura="alto"
|
||||
prioridad
|
||||
>
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
|
||||
<Link href="#plantear" className="btn btn-signal w-full sm:w-auto">
|
||||
Plantear mi escenario
|
||||
</Link>
|
||||
<p className="max-w-md font-mono text-[0.625rem] uppercase leading-relaxed tracking-[0.1em] text-ember">
|
||||
Construidos para demostración · No corresponden a clientes reales
|
||||
</p>
|
||||
</div>
|
||||
</HeroeLanding>
|
||||
|
||||
{/* el aviso va antes del contenido, no al final */}
|
||||
<div
|
||||
role="note"
|
||||
aria-label="Naturaleza de estos casos"
|
||||
className="mb-10 rounded-[6px] border border-rule bg-ink-2 p-0 sm:mb-12"
|
||||
>
|
||||
{/* ---------- el rótulo, arriba del contenido ---------- */}
|
||||
<section className="border-t border-rule bg-ink-2 py-10 sm:py-12" aria-labelledby="rotulo">
|
||||
<div className="shell">
|
||||
<div className="rounded-[6px] border border-rule bg-ink p-0">
|
||||
<div className="hazard h-1.5 w-full rounded-t-[6px]" aria-hidden="true" />
|
||||
<div className="p-5 sm:p-6">
|
||||
<p className="font-mono text-[0.6875rem] font-medium uppercase tracking-[0.16em] text-ember">
|
||||
Escenarios ilustrativos
|
||||
</p>
|
||||
<h2
|
||||
id="rotulo"
|
||||
className="font-mono text-[0.6875rem] font-medium uppercase tracking-[0.16em] text-ember"
|
||||
>
|
||||
Qué son y qué no son estos casos
|
||||
</h2>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted">
|
||||
Los cuatro casos de esta página están{" "}
|
||||
<span className="text-bright">
|
||||
@@ -211,21 +237,13 @@ export default function PaginaCasos() {
|
||||
cualitativa: ninguna cifra de esta página debe leerse como una medición. Están
|
||||
escritos para mostrar cómo se estructura un caso, no para acreditar uno.
|
||||
</p>
|
||||
<p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted">
|
||||
Aun así, la estructura es la real. Cuando la prueba se hace antes de la compra, la
|
||||
documentación deja de ser un trámite y se vuelve la constancia de algo que sí
|
||||
ocurrió.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl anim-rise">
|
||||
<p className="eyebrow mb-5">Casos de aplicación</p>
|
||||
<h1 className="font-display text-[2rem] font-black uppercase leading-[1.03] tracking-tight sm:text-[2.75rem] lg:text-5xl">
|
||||
Seis pasos que convierten una compra en un expediente
|
||||
</h1>
|
||||
<p className="mt-6 text-base leading-relaxed text-muted sm:text-lg">
|
||||
Problema, riesgo, solución, prueba, resultado y documentación. Es la estructura que
|
||||
recomienda el estudio de marca y también el orden en el que conviene trabajar: cuando
|
||||
la prueba se hace antes de la compra, la documentación deja de ser un trámite y se
|
||||
vuelve la constancia de algo que sí ocurrió.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -267,6 +285,15 @@ export default function PaginaCasos() {
|
||||
{caso.titulo}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className={[
|
||||
"mt-4 text-base leading-relaxed",
|
||||
claro ? "text-deep" : "text-bright",
|
||||
].join(" ")}
|
||||
>
|
||||
{caso.resumen}
|
||||
</p>
|
||||
|
||||
<p
|
||||
className={[
|
||||
"mt-4 font-mono text-[0.6875rem] uppercase leading-relaxed tracking-[0.1em]",
|
||||
@@ -351,6 +378,15 @@ export default function PaginaCasos() {
|
||||
<Paso claro={claro} n="06" titulo="Documentación">
|
||||
<Lista claro={claro} elementos={caso.documentacion} />
|
||||
</Paso>
|
||||
|
||||
<div>
|
||||
<Link
|
||||
href="#plantear"
|
||||
className={["btn btn-sm", claro ? "btn-deep" : "btn-signal"].join(" ")}
|
||||
>
|
||||
Mi caso se parece a este
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -358,30 +394,52 @@ export default function PaginaCasos() {
|
||||
);
|
||||
})}
|
||||
|
||||
{/* ---------- cierre ---------- */}
|
||||
<section className="border-t border-rule bg-ink-2 py-14 sm:py-20">
|
||||
{/* ---------- conversión ---------- */}
|
||||
<section
|
||||
id="plantear"
|
||||
className="grid-bg-lite border-t border-rule bg-paper py-14 sm:py-20"
|
||||
aria-labelledby="plantear-titulo"
|
||||
>
|
||||
<div className="shell">
|
||||
<div className="max-w-3xl">
|
||||
<Revelar>
|
||||
<p className="eyebrow mb-4">Sobre los casos reales</p>
|
||||
<h2 className="font-display text-2xl font-extrabold sm:text-3xl">
|
||||
<div className="grid gap-10 lg:grid-cols-[1fr_1.05fr] lg:items-start lg:gap-16">
|
||||
<div>
|
||||
<Revelar>
|
||||
<p className="eyebrow mb-4">Siguiente paso</p>
|
||||
<h2
|
||||
id="plantear-titulo"
|
||||
className="font-display text-2xl font-extrabold text-deep sm:text-3xl"
|
||||
>
|
||||
Cuéntanos tu escenario y lo estructuramos igual
|
||||
</h2>
|
||||
<p className="mt-4 text-sm leading-relaxed text-deep-muted sm:text-base">
|
||||
Los seis pasos no son un formato de presentación: son el orden en el que conviene
|
||||
trabajar. Empieza describiendo el lugar y nosotros hacemos las preguntas que
|
||||
faltan.
|
||||
</p>
|
||||
</Revelar>
|
||||
|
||||
<hr className="hair-lite my-8" />
|
||||
|
||||
<h3 className="font-display text-lg font-extrabold text-deep">
|
||||
Por qué todavía no publicamos casos con nombre
|
||||
</h2>
|
||||
</Revelar>
|
||||
<p className="mt-4 text-sm leading-relaxed text-muted sm:text-base">
|
||||
Un caso de estudio requiere autorización del cliente sobre qué se puede contar, qué
|
||||
periodo cubre y qué cifras se pueden publicar. Mientras eso no exista por escrito,
|
||||
preferimos escenarios rotulados como estos antes que atribuir un resultado a una marca
|
||||
que no lo ha confirmado.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<Link href="/contacto" className="btn btn-signal">
|
||||
Plantear tu escenario
|
||||
</Link>
|
||||
<Link href="/evidencia" className="btn btn-ghost">
|
||||
Ver el centro de evidencia
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mt-3 text-sm leading-relaxed text-deep-muted">
|
||||
Un caso de estudio requiere autorización del cliente sobre qué se puede contar, qué
|
||||
periodo cubre y qué cifras se pueden publicar. Mientras eso no exista por escrito,
|
||||
preferimos escenarios rotulados como estos antes que atribuir un resultado a una
|
||||
marca que no lo ha confirmado.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormularioContacto
|
||||
id="formulario-casos"
|
||||
canal="catalogo"
|
||||
variante="claro"
|
||||
titulo="Plantear mi escenario"
|
||||
descripcion="Completa la frase del mensaje con el caso que más se parezca al tuyo, o descríbelo con tus palabras. Respondemos con el escenario estructurado."
|
||||
mensajeInicial={MENSAJE_INICIAL}
|
||||
textoBoton="Enviar mi escenario"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -390,10 +448,9 @@ export default function PaginaCasos() {
|
||||
}
|
||||
|
||||
function parrafo(claro: boolean): string {
|
||||
return [
|
||||
"text-sm leading-relaxed sm:text-base",
|
||||
claro ? "text-deep-muted" : "text-muted",
|
||||
].join(" ");
|
||||
return ["text-sm leading-relaxed sm:text-base", claro ? "text-deep-muted" : "text-muted"].join(
|
||||
" ",
|
||||
);
|
||||
}
|
||||
|
||||
function Paso({
|
||||
|
||||
Reference in New Issue
Block a user