# FlowSync 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)

## 🚀 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.*