Landing page del producto SaaS Gruperly (gestión, organización y potenciación de comunidades y grupos), construida con Eleventy (11ty) y Tailwind CSS.

Requisitos

Node.js 18+ (probado con Node 24)

Instalación

npm install

Comandos

Comando	Descripción
`npm start`	Servidor de desarrollo con recarga en vivo (`http://localhost:8081`)
`npm run build`	Genera el sitio estático en la carpeta `dist/`

Acceso desde otros dispositivos

El servidor de desarrollo escucha en todas las interfaces (host: 0.0.0.0), por lo que otros dispositivos de la misma red local pueden abrir la página usando la IP LAN de tu equipo dentro de la URL. Para conocer tu IP en macOS:

ipconfig getifaddr en0

Ejemplo: http://192.168.x.x:8081

Nota: macOS puede pedir permiso de firewall para Node la primera vez. Acepta las conexiones entrantes.

Estructura del proyecto

.
├── eleventy.config.js          # Configuración de Eleventy (input: src → output: dist) y servidor de dev
├── package.json                # Scripts y dependencias
├── src/
│   ├── _data/
│   │   ├── site.json           # Datos globales del sitio (nombre, navegación, footer, año)
│   │   └── pricing.json        # Precios y monedas por plan (parametrizados)
│   ├── _includes/
│   │   ├── layouts/
│   │   │   └── base.njk        # Layout principal (head, Tailwind CDN, dark mode, header/footer)
│   │   └── partials/           # Secciones reutilizables de la landing
│   │       ├── header.njk      # Navbar con toggle de tema y CTA
│   │       ├── hero.njk        # Portada con mockup de la app
│   │       ├── features.njk    # Características
│   │       ├── how-it-works.njk# Cómo funciona
│   │       ├── pricing.njk     # Planes y precios
│   │       ├── social-proof.njk# Métricas y testimonios
│   │       ├── star.njk        # SVG de estrella (reutilizable)
│   │       ├── final-cta.njk   # Llamado a la acción final
│   │       └── footer.njk      # Pie de página con redes y enlaces
│   └── index.njk               # Página principal (front matter + includes)

Funcionalidades

Tema claro/oscuro: toggle funcional que persiste en localStorage y respeta prefers-color-scheme.
Precios por región: si el usuario navega desde Argentina (detectado por zona horaria) ve precios en pesos (ARS); en el resto de LATAM se muestran en dólares (USD). Los valores y monedas se parametrizan en src/_data/pricing.json: para cambiar un precio solo se edita ese archivo y se corre npm run build.
Responsive: mobile-first, adaptado a móviles, tablets y escritorio.
Templates Nunjucks: header, footer y datos reutilizables vía _data/site.json.