90 lines
4.6 KiB
Markdown
90 lines
4.6 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 (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):
|
|
|
|
```bash
|
|
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:
|
|
|
|
```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.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`. |