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.