Gruperly — Landing Page

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 (entorno dev, http://localhost:8081)
npm run build	Genera el sitio estático en dist/ (entorno dev)
npm run build:qa	Genera el sitio con los links del entorno de pruebas/QA
npm run build:prod	Genera el sitio con los links de producción
npm start:qa	Servidor de desarrollo con entorno de pruebas/QA
npm start:prod	Servidor de desarrollo con entorno de producción

Entornos

Los links hacia la app (registro e inicio de sesión) se configuran por entorno en src/_data/site.<env>.json, seleccionados con la variable ELEVENTY_ENV (dev, qa y prod; dev es el valor por defecto):

ELEVENTY_ENV=qa npm run build   # o npm run build:qa

• src/_data/site.base.json: datos comunes (nombre, navegación, footer).
• src/_data/site.dev.json: http://localhost:6173/signup y /login (app web en modo desarrollo).
• src/_data/site.qa.json: links del entorno de pruebas/QA.
• src/_data/site.prod.json: links de producción.

Pendiente: las URLs de QA (site.qa.json) y producción (site.prod.json) son placeholders. Confirmá los dominios reales antes de publicar.

En el build de Docker, ELEVENTY_ENV se pasa como build arg (por defecto prod); docker-compose lo toma de la variable de entorno ELEVENTY_ENV del host.

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.js           # Selector de entorno (ELEVENTY_ENV) + merge de datos del sitio
│   │   ├── site.base.json    # Datos comunes del sitio (nombre, navegación, footer)
│   │   ├── site.dev.json     # Links de la app por entorno: dev / QA / prod
│   │   ├── site.qa.json
│   │   ├── site.prod.json
│   │   └── 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 encabezado y CTAs
│   │       ├── demo.njk        # Demostración ilustrativa del flujo de trabajo
│   │       ├── features.njk    # Características
│   │       ├── how-it-works.njk# Cómo funciona
│   │       ├── pricing.njk     # Planes y precios
│   │       ├── faq.njk         # Preguntas frecuentes
│   │       ├── final-cta.njk   # Llamado a la acción final
│   │       └── footer.njk      # Pie de página con enlaces válidos
│   └── 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.