65 lines
3.1 KiB
Markdown
65 lines
3.1 KiB
Markdown
# Gruperly — Landing Page
|
|
|
|
Landing page del producto SaaS **Gruperly** (gestión, organización y potenciación de comunidades y grupos), construida con [Eleventy](https://www.11ty.dev/) (11ty) y [Tailwind CSS](https://tailwindcss.com/).
|
|
|
|
## Requisitos
|
|
|
|
- Node.js 18+ (probado con Node 24)
|
|
|
|
## Instalación
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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`. |