71 lines
2.3 KiB
Markdown
71 lines
2.3 KiB
Markdown
# FlowSync Landing Page
|
|
|
|
> Repositorio principal de la landing page pública de FlowSync. Construida con **Next.js 16 + TypeScript + CSS Modules**.
|
|
|
|
|
|
|
|
## 🚀 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
|
|
|
|
- **Framework:** Next.js 16.2.6 (App Router)
|
|
- **Lenguaje:** TypeScript 5
|
|
- **Estilos:** CSS Modules + Vanilla CSS (Custom Properties)
|
|
- **Componentes:** React 19 (Server + Client Components)
|
|
|
|
---
|
|
|
|
## 📁 Arquitectura del proyecto
|
|
|
|
```text
|
|
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
|
|
│ │
|
|
│ └── 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
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 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.
|
|
|
|
---
|
|
|
|
## 📝 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.
|
|
|
|
---
|
|
|
|
*Desarrollado internamente por el equipo de ingeniería de FlowSync.*
|