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 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)
│ ├── _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
localStoragey respetaprefers-color-scheme. - Responsive: mobile-first, adaptado a móviles, tablets y escritorio.
- Templates Nunjucks: header, footer y datos reutilizables vía
_data/site.json.