diff --git a/README.md b/README.md index 8a5086e..1069f5e 100644 --- a/README.md +++ b/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**. - -![FlowSync Dashboard Mockup](https://raw.githubusercontent.com/flowsync/assets/main/mockup-preview.png) +> 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 @@ -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) -- **Lenguaje:** TypeScript 5 -- **Estilos:** CSS Modules + Vanilla CSS (Custom Properties) -- **Componentes:** React 19 (Server + Client Components) +| 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) | --- @@ -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 -│ │ ├── layout.tsx # Root layout con importación de Inter font -│ │ └── page.tsx # Composición de página principal +│ │ ├── 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/ # Navegación con scroll spy y menú móvil -│ ├── Hero/ # Sección principal con mockup de UI animado -│ ├── Features/ # Cuadrícula de características -│ ├── Pricing/ # Tabla de precios con toggle mensual/anual -│ ├── ContactForm/ # Formulario de lead con validación local -│ └── Footer/ # Enlaces secundarios y CTA final +│ ├── 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 -El diseño sigue una estética B2B SaaS moderna: -- **Colores:** Blanco/Negro alto contraste con acento azul (`#0066ff`). -- **Tipografía:** Inter (sans-serif) optimizada para legibilidad. -- **Micro-interacciones:** Animaciones CSS nativas para entrada de elementos (`IntersectionObserver`), hovers táctiles en botones y cards. -- **Responsive:** Mobile-first approach asegurando legibilidad en cualquier dispositivo. +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 -- `npm run dev`: Inicia el entorno de desarrollo con Turbopack. -- `npm run build`: Construye la aplicación para producción. -- `npm run start`: Inicia el servidor de producción con la build generada. -- `npm run lint`: Ejecuta ESLint para analizar el código. +```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 +``` --- -*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.*