Configuracion de readme

README.md

@@ -1,8 +1,6 @@
-# FlowSync Landing Page
+# Reformix — Landing Page
 
-> Repositorio principal de la landing page pública de FlowSync. Construida con **Next.js 16 + TypeScript + CSS Modules**.
+> 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**.
-
-![FlowSync Dashboard Mockup](https://raw.githubusercontent.com/flowsync/assets/main/mockup-preview.png)
 
 ## 🚀 Inicio rápido
 
@@ -20,10 +18,13 @@ Abre [http://localhost:3000](http://localhost:3000) en tu navegador para ver el
 
 ## 🛠 Stack tecnológico
 
-- **Framework:** Next.js 16.2.6 (App Router)
+| Capa | Tecnología |
-- **Lenguaje:** TypeScript 5
+|---|---|
-- **Estilos:** CSS Modules + Vanilla CSS (Custom Properties)
+| Framework | Next.js (App Router) |
-- **Componentes:** React 19 (Server + Client Components)
+| Lenguaje | TypeScript 5 |
+| Estilos | Tailwind CSS v4 (`@import "tailwindcss"` + `@theme`) |
+| Componentes | React 19 (Server + Client Components) |
+| Fuente | Inter (Google Fonts, variable) |
 
 ---
 
@@ -33,38 +34,67 @@ Abre [http://localhost:3000](http://localhost:3000) en tu navegador para ver el
 landing-page/
 ├── src/
 │   ├── app/
-│   │   ├── globals.css          # Design system tokens & utility classes
+│   │   ├── globals.css          # Design system: @theme tokens + @layer utilities
-│   │   ├── layout.tsx           # Root layout con importación de Inter font
+│   │   ├── layout.tsx           # Root layout con fuente Inter y meta tags
-│   │   └── page.tsx             # Composición de página principal
+│   │   └── page.tsx             # Composición de página — solo imports de componentes
 │   │
 │   └── components/
-│       ├── Navbar/              # Navegación con scroll spy y menú móvil
+│       ├── Navbar/              # Barra de navegación (actualmente comentada)
-│       ├── Hero/                # Sección principal con mockup de UI animado
+│       ├── Hero/                # Sección principal: headline + LeadForm interno
-│       ├── Features/            # Cuadrícula de características
+│       ├── ReformaSlider/       # Comparador antes/después interactivo (drag)
-│       ├── Pricing/             # Tabla de precios con toggle mensual/anual
+│       ├── Features/            # Sección "Cómo funciona" — 3 pasos numerados
-│       ├── ContactForm/         # Formulario de lead con validación local
+│       ├── Pricing/             # Tabla de servicios: Presupuesto · Reforma · Integral
-│       └── Footer/              # Enlaces secundarios y CTA final
+│       ├── 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
 
-El diseño sigue una estética B2B SaaS moderna:
+Definido en `globals.css` mediante el bloque `@theme` de Tailwind v4:
-- **Colores:** Blanco/Negro alto contraste con acento azul (`#0066ff`).
+
-- **Tipografía:** Inter (sans-serif) optimizada para legibilidad.
+- **Colores:** Escala negro/blanco de alto contraste. Sin acentos de color innecesarios.
-- **Micro-interacciones:** Animaciones CSS nativas para entrada de elementos (`IntersectionObserver`), hovers táctiles en botones y cards.
+- **Tipografía:** Inter variable — pesos 400 a 900, tracking ajustado para headlines impactantes.
-- **Responsive:** Mobile-first approach asegurando legibilidad en cualquier dispositivo.
+- **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
 
-- `npm run dev`: Inicia el entorno de desarrollo con Turbopack.
+```bash
-- `npm run build`: Construye la aplicación para producción.
+npm run dev      # Desarrollo con Turbopack (hot reload)
-- `npm run start`: Inicia el servidor de producción con la build generada.
+npm run build    # Build de producción optimizado
-- `npm run lint`: Ejecuta ESLint para analizar el código.
+npm run start    # Servidor de producción con la build generada
+npm run lint     # ESLint — análisis estático del código
+```
 
 ---
 
-*Desarrollado internamente por el equipo de ingeniería de FlowSync.*
+## 🔗 Repositorio
+
+GitHub: [McGregory99/reformix-hackaton](https://github.com/McGregory99/reformix-hackaton)
+
+---
+
+*Desarrollado para el hackathon interno de Reformix.*