# 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

```bash
# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev
```

Abre [http://localhost:3000](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

```text
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.tsx` solo 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` + clase `reveal`. 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

```bash
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 pura `computeBudget` que calcula el presupuesto por partidas a partir de medidas mínimas + calidad, escalando con más datos.

---

## 🔗 Repositorio

GitHub: [McGregory99/reformix-hackaton](https://github.com/McGregory99/reformix-hackaton)

---

*Desarrollado para el hackathon interno de Reformix.*