101 lines
3.6 KiB
Markdown
101 lines
3.6 KiB
Markdown
# 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
|
||
```
|
||
|
||
---
|
||
|
||
## 🔗 Repositorio
|
||
|
||
GitHub: [McGregory99/reformix-hackaton](https://github.com/McGregory99/reformix-hackaton)
|
||
|
||
---
|
||
|
||
*Desarrollado para el hackathon interno de Reformix.*
|