af4d1fa001
- Prompt del agente de voz (Retell, en caliente + docs/retell-setup.md): recuerda al cliente que envíe fotos del espacio por WhatsApp o por el enlace del email, para que el render sea de su reforma. - pedirLlamada: envía automáticamente el email con el enlace al formulario al solicitar la llamada (antes solo con un botón manual), para que la frase del agente "te enviamos un email" sea cierta. Best-effort. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Reformix — Landing Page
Landing page pública de Reformix, la plataforma que conecta a propietarios con reformistas de confianza. Presupuesto en 5 minutos, render por WhatsApp. Construida con Next.js + TypeScript + Tailwind CSS v4.
🚀 Inicio rápido
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
Abre http://localhost:3000 en tu navegador para ver el resultado.
🛠 Stack tecnológico
| Capa | Tecnología |
|---|---|
| Framework | Next.js (App Router) |
| Lenguaje | TypeScript 5 |
| Estilos | Tailwind CSS v4 (@import "tailwindcss" + @theme) |
| Componentes | React 19 (Server + Client Components) |
| Fuente | Inter (Google Fonts, variable) |
📁 Arquitectura del proyecto
landing-page/
├── src/
│ ├── app/
│ │ ├── globals.css # Design system: @theme tokens + @layer utilities
│ │ ├── layout.tsx # Root layout con fuente Inter y meta tags
│ │ └── page.tsx # Composición de página — solo imports de componentes
│ │
│ └── components/
│ ├── Navbar/ # Barra de navegación (actualmente comentada)
│ ├── Hero/ # Sección principal: headline + LeadForm interno
│ ├── ReformaSlider/ # Comparador antes/después interactivo (drag)
│ ├── Features/ # Sección "Cómo funciona" — 3 pasos numerados
│ ├── Pricing/ # Tabla de servicios: Presupuesto · Reforma · Integral
│ ├── ContactForm/ # Formulario de contacto con validación y testimonial
│ └── Footer/ # Links, redes sociales y copyright
Convención de componentes
- Cada componente vive en su propia carpeta
ComponentName/ComponentName.tsx. - Los sub-componentes de uso exclusivo (ej.
LeadForm) se definen en el mismo archivo del padre, no como archivos separados. page.tsxsolo importa componentes de primer nivel — sin JSX estructural inline.
🎨 Design System
Definido en globals.css mediante el bloque @theme de Tailwind v4:
- Colores: Escala negro/blanco de alto contraste. Sin acentos de color innecesarios.
- Tipografía: Inter variable — pesos 400 a 900, tracking ajustado para headlines impactantes.
- Animaciones: Entrada por scroll con
IntersectionObserver+ clasereveal. Micro-interacciones en hovers de cards y botones. - Responsive: Mobile-first. Grid de 1 columna en móvil, 2–3 en desktop.
🧩 Secciones de la landing
| Sección | Descripción |
|---|---|
| Hero | Headline + formulario de captación de lead (nombre, email, empresa, teléfono) |
| ReformaSlider | Comparador antes/después con drag handle — 3 espacios: Cocina, Baño, Salón |
| Features | Explicación del proceso en 3 pasos: llama → foto → presupuesto |
| Pricing | 3 niveles de servicio con toggle mensual/anual y features detalladas |
| ContactForm | Formulario completo con datos de contacto y testimonial de cliente real |
| Footer | Links de navegación, redes sociales, estado operativo y copyright |
📝 Scripts disponibles
npm run dev # Desarrollo con Turbopack (hot reload)
npm run build # Build de producción optimizado
npm run start # Servidor de producción con la build generada
npm run lint # ESLint — análisis estático del código
💶 Panel y motor de presupuesto
/panel— listado de leads y detalle (/panel/[id]) con presupuesto desglosado y botón Recalcular./panel/precios— tabla de precios editable (config general + catálogo por categoría) e importación de catálogo vía CSV.- Motor (
src/budget/) — función puracomputeBudgetque calcula el presupuesto por partidas a partir de medidas mínimas + calidad, escalando con más datos.
🔗 Repositorio
GitHub: McGregory99/reformix-hackaton
Desarrollado para el hackathon interno de Reformix.