From dbef9ef670418e5567116e816a66e60aba0230fe Mon Sep 17 00:00:00 2001 From: Carlos Narro Date: Thu, 11 Jun 2026 17:42:09 +0200 Subject: [PATCH] =?UTF-8?q?A=C3=B1ade=20stepper=20de=20progreso=20y=20bloq?= =?UTF-8?q?ue=20"Qu=C3=A9=20pasa=20despu=C3=A9s"=20al=20chooser=20de=20can?= =?UTF-8?q?al?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit El chooser (solicitud/[id]) ahora muestra un stepper de 3 pasos (Tus datos ✓, Tu reforma actual, Render + presupuesto pendiente) y, debajo de las tarjetas de canal, una sección "Elijas lo que elijas, esto es lo que pasa después" con los 3 pasos del flujo (nos cuentas tu reforma, render + presupuesto en minutos, visita gratuita para el presupuesto final). Las tarjetas de canal pasan a grid de 3 columnas en desktop, con iconos SV --- copy/COPY-GUIDE.md | 19 ++ mvp/b2c/src/app/globals.css | 14 ++ mvp/b2c/src/app/solicitud/[id]/page.tsx | 289 ++++++++++++++++++++---- 3 files changed, 284 insertions(+), 38 deletions(-) diff --git a/copy/COPY-GUIDE.md b/copy/COPY-GUIDE.md index 91d9769..4a2925e 100644 --- a/copy/COPY-GUIDE.md +++ b/copy/COPY-GUIDE.md @@ -327,9 +327,15 @@ Somos los únicos en España que combinamos **captura instantánea del lead + ll - **Título del paso:** ¿Cómo prefieres contarnos tu reforma, [Nombre]? - **Subtitle:** Tú eliges. Por cualquiera de las tres nos das lo que necesitamos para preparar tu render y tu presupuesto. +- **Stepper de progreso (encima del título):** + - Paso 1 (completado): *Tus datos* + - Paso 2 (actual): *Tu reforma* + - Paso 3 (pendiente): *Render + presupuesto* + - **Tarjeta Llamada — título:** Que te llamemos **Descripción:** Un asistente te llama y te hace unas preguntas rápidas. Lo más cómodo: no escribes nada. **CTA:** Quiero que me llamen + **Badge:** La más rápida - **Tarjeta WhatsApp — título:** Por WhatsApp **Descripción:** Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras. **CTA:** Seguir por WhatsApp @@ -337,6 +343,19 @@ Somos los únicos en España que combinamos **captura instantánea del lead + ll **Descripción:** Tú lo cuentas zona por zona y subes las fotos. Recibes el presupuesto al instante. **CTA:** Rellenar el formulario +#### Bloque "Qué pasa después" (debajo de las tarjetas del chooser) + +> Recuerda al lead lo que va a recibir elija el canal que elija: personalización, render con +> imágenes en minutos, y visita gratuita posterior para el presupuesto definitivo. + +- **Título:** Elijas lo que elijas, esto es lo que pasa después +- **Paso 1 — título:** Nos cuentas tu reforma a tu manera + **Body:** Fotos, medidas, gustos. Cuanto más nos cuentes, más se parecerá el resultado a lo que tienes en la cabeza. +- **Paso 2 — título:** Render + presupuesto en minutos + **Body:** Ves tu espacio ya reformado en imágenes, con un presupuesto orientativo desglosado partida a partida. +- **Paso 3 — título:** Visita gratuita para el presupuesto final + **Body:** Si te convence, acuerdas una visita con [Reformista]: ve la obra, la mide con detalle y te confirma el precio definitivo. Sin compromiso. + ### Paso 2 (canal llamada) - **Título del paso:** Te llamamos cuando quieras diff --git a/mvp/b2c/src/app/globals.css b/mvp/b2c/src/app/globals.css index 02cdd60..fda30e1 100644 --- a/mvp/b2c/src/app/globals.css +++ b/mvp/b2c/src/app/globals.css @@ -58,6 +58,20 @@ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; + + /* Animations (usar con motion-safe: para respetar prefers-reduced-motion) */ + --animate-fade-up: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; + + @keyframes fade-up { + from { + opacity: 0; + transform: translateY(14px); + } + to { + opacity: 1; + transform: none; + } + } } @layer base { diff --git a/mvp/b2c/src/app/solicitud/[id]/page.tsx b/mvp/b2c/src/app/solicitud/[id]/page.tsx index 2fd5062..9e50c4d 100644 --- a/mvp/b2c/src/app/solicitud/[id]/page.tsx +++ b/mvp/b2c/src/app/solicitud/[id]/page.tsx @@ -1,82 +1,295 @@ import Link from 'next/link'; import { notFound } from 'next/navigation'; import { getPublicLead } from '@/lib/funnel/public-queries'; +import { resolveTheme, themeStyle } from '@/lib/funnel/themes'; import TenantBrand from '@/components/funnel/TenantBrand'; export const dynamic = 'force-dynamic'; +const BRAND = 'var(--brand, #0a0a0a)'; +const BRAND_CONTRAST = 'var(--brand-contrast, #ffffff)'; + +function IconLlamada() { + return ( + + ); +} + +function IconWhatsapp() { + return ( + + ); +} + +function IconFormulario() { + return ( + + ); +} + const CANALES = [ { slug: 'llamada', - icon: '📞', + icon: , titulo: 'Que te llamemos', descripcion: 'Un asistente te llama y te hace unas preguntas rápidas. Lo más cómodo: no escribes nada.', cta: 'Quiero que me llamen', + badge: 'La más rápida', }, { slug: 'whatsapp', - icon: '💬', + icon: , titulo: 'Por WhatsApp', - descripcion: - 'Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras.', + descripcion: 'Seguimos por chat a tu ritmo. Puedes mandar fotos y notas cuando quieras.', cta: 'Seguir por WhatsApp', + badge: null, }, { slug: 'formulario', - icon: '📝', + icon: , titulo: 'Rellenar un formulario', descripcion: 'Tú lo cuentas zona por zona y subes las fotos. Recibes el presupuesto al instante.', cta: 'Rellenar el formulario', + badge: null, }, ] as const; +const PASOS_DESPUES = [ + { + titulo: 'Nos cuentas tu reforma a tu manera', + body: 'Fotos, medidas, gustos. Cuanto más nos cuentes, más se parecerá el resultado a lo que tienes en la cabeza.', + }, + { + titulo: 'Render + presupuesto en minutos', + body: 'Ves tu espacio ya reformado en imágenes, con un presupuesto orientativo desglosado partida a partida.', + }, + // El tercer paso interpola el nombre del reformista; se monta en el componente. +] as const; + +function Stepper() { + const conectores = 'h-px flex-1 min-w-4'; + return ( +
    +
  1. + + + + Tus datos +
    2. +
  2. + + 2 + + Tu reforma +
    3. +
  3. + + 3 + + + Render + presupuesto + +
    4. +
+ ); +} + export default async function ChooserPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; const data = await getPublicLead(id); if (!data) notFound(); const { lead, tenant } = data; + const theme = resolveTheme(tenant?.themePreset, tenant?.themeColor); + const nombrePila = lead.nombre.split(' ')[0]; + const nombreReformista = tenant?.nombreEmpresa ?? 'el reformista'; + + const pasosDespues = [ + ...PASOS_DESPUES, + { + titulo: 'Visita gratuita para el presupuesto final', + body: `Si te convence, acuerdas una visita con ${nombreReformista}: ve la obra, la mide con detalle y te confirma el precio definitivo. Sin compromiso.`, + }, + ]; return ( - <> +
{tenant && } -
-
- - Elige cómo seguir - -

- ¿Cómo prefieres contarnos tu reforma, {lead.nombre.split(' ')[0]}? -

-

- Tú eliges. Por cualquiera de las tres nos das lo que necesitamos para preparar tu render - y tu presupuesto. -

-
-
- {CANALES.map((c) => ( - - -
- {c.titulo} - {c.descripcion} - - {c.cta} → +
+ {/* Halo sutil con el color de marca del reformista */} +
- +
); }