Configuracion de readme
This commit is contained in:
unknown
84
README.md
84
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**.
|
||||
|
||||
## 🚀 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.*
|
||||
|
||||
Reference in New Issue
Block a user