Refactor how-it-works and pricing sections; update text and layout for clarity. Remove social proof section and related star component. Add demo and FAQ sections for enhanced user guidance. Introduce site configuration files for environment-specific settings.
This commit is contained in:
Jose Selesan
@@ -5,6 +5,9 @@ WORKDIR /app
|
|||||||
COPY package*.json ./
|
COPY package*.json ./
|
||||||
RUN npm ci
|
RUN npm ci
|
||||||
|
|
||||||
|
ARG ELEVENTY_ENV=prod
|
||||||
|
ENV ELEVENTY_ENV=$ELEVENTY_ENV
|
||||||
|
|
||||||
COPY . .
|
COPY . .
|
||||||
RUN npm run build
|
RUN npm run build
|
||||||
|
|
||||||
|
|||||||
45
README.md
45
README.md
@@ -14,10 +14,31 @@ npm install
|
|||||||
|
|
||||||
## Comandos
|
## Comandos
|
||||||
|
|
||||||
| Comando | Descripción |
|
| Comando | Descripción |
|
||||||
| ---------------- | ------------------------------------------------------------------ |
|
| ------------------ | ------------------------------------------------------------------ |
|
||||||
| `npm start` | Servidor de desarrollo con recarga en vivo (`http://localhost:8081`) |
|
| `npm start` | Servidor de desarrollo (entorno `dev`, `http://localhost:8081`) |
|
||||||
| `npm run build` | Genera el sitio estático en la carpeta `dist/` |
|
| `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
|
## Acceso desde otros dispositivos
|
||||||
|
|
||||||
@@ -39,21 +60,25 @@ Ejemplo: `http://192.168.x.x:8081`
|
|||||||
├── package.json # Scripts y dependencias
|
├── package.json # Scripts y dependencias
|
||||||
├── src/
|
├── src/
|
||||||
│ ├── _data/
|
│ ├── _data/
|
||||||
│ │ ├── site.json # Datos globales del sitio (nombre, navegación, footer, año)
|
│ │ ├── site.js # Selector de entorno (ELEVENTY_ENV) + merge de datos del sitio
|
||||||
│ │ └── pricing.json # Precios y monedas por plan (parametrizados)
|
│ │ ├── 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/
|
│ ├── _includes/
|
||||||
│ │ ├── layouts/
|
│ │ ├── layouts/
|
||||||
│ │ │ └── base.njk # Layout principal (head, Tailwind CDN, dark mode, header/footer)
|
│ │ │ └── base.njk # Layout principal (head, Tailwind CDN, dark mode, header/footer)
|
||||||
│ │ └── partials/ # Secciones reutilizables de la landing
|
│ │ └── partials/ # Secciones reutilizables de la landing
|
||||||
│ │ ├── header.njk # Navbar con toggle de tema y CTA
|
│ │ ├── header.njk # Navbar con toggle de tema y CTA
|
||||||
│ │ ├── hero.njk # Portada con mockup de la app
|
│ │ ├── hero.njk # Portada con encabezado y CTAs
|
||||||
|
│ │ ├── demo.njk # Demostración ilustrativa del flujo de trabajo
|
||||||
│ │ ├── features.njk # Características
|
│ │ ├── features.njk # Características
|
||||||
│ │ ├── how-it-works.njk# Cómo funciona
|
│ │ ├── how-it-works.njk# Cómo funciona
|
||||||
│ │ ├── pricing.njk # Planes y precios
|
│ │ ├── pricing.njk # Planes y precios
|
||||||
│ │ ├── social-proof.njk# Métricas y testimonios
|
│ │ ├── faq.njk # Preguntas frecuentes
|
||||||
│ │ ├── star.njk # SVG de estrella (reutilizable)
|
|
||||||
│ │ ├── final-cta.njk # Llamado a la acción final
|
│ │ ├── final-cta.njk # Llamado a la acción final
|
||||||
│ │ └── footer.njk # Pie de página con redes y enlaces
|
│ │ └── footer.njk # Pie de página con enlaces válidos
|
||||||
│ └── index.njk # Página principal (front matter + includes)
|
│ └── index.njk # Página principal (front matter + includes)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,8 @@ services:
|
|||||||
build:
|
build:
|
||||||
context: .
|
context: .
|
||||||
dockerfile: Dockerfile
|
dockerfile: Dockerfile
|
||||||
|
args:
|
||||||
|
ELEVENTY_ENV: ${ELEVENTY_ENV:-prod}
|
||||||
image: gruperly-landing-page:latest
|
image: gruperly-landing-page:latest
|
||||||
container_name: gruperly-landing-page
|
container_name: gruperly-landing-page
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
|
|||||||
@@ -6,7 +6,11 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "eleventy",
|
"build": "eleventy",
|
||||||
"start": "eleventy --serve"
|
"build:qa": "ELEVENTY_ENV=qa eleventy",
|
||||||
|
"build:prod": "ELEVENTY_ENV=prod eleventy",
|
||||||
|
"start": "eleventy --serve",
|
||||||
|
"start:qa": "ELEVENTY_ENV=qa eleventy --serve",
|
||||||
|
"start:prod": "ELEVENTY_ENV=prod eleventy --serve"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"eleventy",
|
"eleventy",
|
||||||
|
|||||||
@@ -6,31 +6,30 @@
|
|||||||
"plans": [
|
"plans": [
|
||||||
{
|
{
|
||||||
"name": "Starter",
|
"name": "Starter",
|
||||||
"tagline": "Para grupos pequeños que están comenzando.",
|
"tagline": "Para quienes recién empiezan con grupos chicos.",
|
||||||
"price": { "ars": 0, "usd": 0 },
|
"price": { "ars": 0, "usd": 0 },
|
||||||
"cta": "Empezar gratis",
|
"cta": "Empezar gratis",
|
||||||
"ctaStyle": "outline",
|
"ctaStyle": "outline",
|
||||||
"features": [
|
"features": [
|
||||||
"Hasta 50 miembros",
|
"Hasta 50 participantes",
|
||||||
"1 evento al mes",
|
"Clases recurrentes con días y horarios",
|
||||||
"Analíticas básicas",
|
"1 evento especial al mes",
|
||||||
"Soporte por correo"
|
"Cobros mensuales o por clase"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Pro",
|
"name": "Pro",
|
||||||
"tagline": "Para comunidades en crecimiento con funciones avanzadas.",
|
"tagline": "Para quienes manejan varios grupos y más participantes.",
|
||||||
"price": { "ars": 30000, "usd": 25 },
|
"price": { "ars": 30000, "usd": 25 },
|
||||||
"cta": "Empezar",
|
"cta": "Empezar",
|
||||||
"ctaStyle": "solid",
|
"ctaStyle": "solid",
|
||||||
"highlight": true,
|
"highlight": true,
|
||||||
"badge": "Más conveniente",
|
"badge": "Para crecer",
|
||||||
"features": [
|
"features": [
|
||||||
"Miembros ilimitados",
|
"Todo lo del plan Starter",
|
||||||
"Eventos ilimitados",
|
"Más grupos y participantes que en Starter",
|
||||||
"Automatizaciones ilimitadas",
|
"Más eventos especiales por mes que en Starter",
|
||||||
"Analíticas avanzadas",
|
"Seguimiento de cobros: al día, pendientes y atrasados"
|
||||||
"Soporte prioritario"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
20
src/_data/site.base.json
Normal file
20
src/_data/site.base.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "Gruperly",
|
||||||
|
"description": "Organizá tus actividades recurrentes, gestioná reservas y asistencia, y creá workshops o encuentros especiales con Gruperly.",
|
||||||
|
"url": "https://gruperly.com",
|
||||||
|
"year": "2026",
|
||||||
|
"nav": [
|
||||||
|
{ "label": "Características", "href": "#caracteristicas" },
|
||||||
|
{ "label": "Cómo funciona", "href": "#como-funciona" },
|
||||||
|
{ "label": "Precios", "href": "#precios" },
|
||||||
|
{ "label": "Preguntas frecuentes", "href": "#faq" }
|
||||||
|
],
|
||||||
|
"footer": {
|
||||||
|
"producto": [
|
||||||
|
{ "label": "Características", "href": "#caracteristicas" },
|
||||||
|
{ "label": "Cómo funciona", "href": "#como-funciona" },
|
||||||
|
{ "label": "Precios", "href": "#precios" },
|
||||||
|
{ "label": "Preguntas frecuentes", "href": "#faq" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/_data/site.dev.json
Normal file
6
src/_data/site.dev.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"app": {
|
||||||
|
"signup": "http://localhost:6173/signup",
|
||||||
|
"login": "http://localhost:6173/login"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/_data/site.js
Normal file
31
src/_data/site.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import fs from "node:fs";
|
||||||
|
import path from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const dir = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
const env = process.env.ELEVENTY_ENV || "dev";
|
||||||
|
|
||||||
|
function readJson(file) {
|
||||||
|
return JSON.parse(fs.readFileSync(path.join(dir, file), "utf8"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function mergeDeep(base, extra) {
|
||||||
|
if (!extra || typeof extra !== "object" || Array.isArray(extra)) {
|
||||||
|
return extra === undefined ? base : extra;
|
||||||
|
}
|
||||||
|
const result = { ...base };
|
||||||
|
for (const key of Object.keys(extra)) {
|
||||||
|
result[key] =
|
||||||
|
base[key] && typeof base[key] === "object" && !Array.isArray(base[key])
|
||||||
|
? mergeDeep(base[key], extra[key])
|
||||||
|
: extra[key];
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
const base = readJson("site.base.json");
|
||||||
|
|
||||||
|
const envFile = `site.${env}.json`;
|
||||||
|
const override = fs.existsSync(path.join(dir, envFile)) ? readJson(envFile) : {};
|
||||||
|
|
||||||
|
export default mergeDeep(base, override);
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "Gruperly",
|
|
||||||
"description": "Gruperly es la plataforma SaaS para la gestión, organización y potenciación de comunidades y grupos.",
|
|
||||||
"url": "https://gruperly.com",
|
|
||||||
"year": "2026",
|
|
||||||
"nav": [
|
|
||||||
{ "label": "Características", "href": "#caracteristicas" },
|
|
||||||
{ "label": "Cómo funciona", "href": "#como-funciona" },
|
|
||||||
{ "label": "Precios", "href": "#precios" }
|
|
||||||
],
|
|
||||||
"footer": {
|
|
||||||
"producto": [
|
|
||||||
{ "label": "Características", "href": "#caracteristicas" },
|
|
||||||
{ "label": "Precios", "href": "#precios" },
|
|
||||||
{ "label": "Integraciones", "href": "#" },
|
|
||||||
{ "label": "Novedades", "href": "#" }
|
|
||||||
],
|
|
||||||
"empresa": [
|
|
||||||
{ "label": "Sobre nosotros", "href": "#" },
|
|
||||||
{ "label": "Blog", "href": "#" },
|
|
||||||
{ "label": "Empleo", "href": "#" },
|
|
||||||
{ "label": "Contacto", "href": "#" }
|
|
||||||
],
|
|
||||||
"legal": [
|
|
||||||
{ "label": "Privacidad", "href": "#" },
|
|
||||||
{ "label": "Términos", "href": "#" },
|
|
||||||
{ "label": "Seguridad", "href": "#" },
|
|
||||||
{ "label": "Cookies", "href": "#" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
6
src/_data/site.prod.json
Normal file
6
src/_data/site.prod.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"app": {
|
||||||
|
"signup": "https://app.gruperly.com/signup",
|
||||||
|
"login": "https://app.gruperly.com/login"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/_data/site.qa.json
Normal file
6
src/_data/site.qa.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"app": {
|
||||||
|
"signup": "https://app.qa.gruperly.com/signup",
|
||||||
|
"login": "https://app.qa.gruperly.com/login"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -75,6 +75,8 @@
|
|||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||||
<style>
|
<style>
|
||||||
[x-cloak] { display: none !important; }
|
[x-cloak] { display: none !important; }
|
||||||
|
html { scroll-padding-top: 6rem; }
|
||||||
|
body { text-rendering: optimizeLegibility; }
|
||||||
input[type="range"] { accent-color: #3b63f5; }
|
input[type="range"] { accent-color: #3b63f5; }
|
||||||
.price-ars { display: none; }
|
.price-ars { display: none; }
|
||||||
html[data-currency="ars"] .price-ars { display: inline; }
|
html[data-currency="ars"] .price-ars { display: inline; }
|
||||||
|
|||||||
155
src/_includes/partials/demo.njk
Normal file
155
src/_includes/partials/demo.njk
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
DEMO SECTION (ilustrativa)
|
||||||
|
============================================================ -->
|
||||||
|
<section id="demo" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
|
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Ver cómo funciona</p>
|
||||||
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Tu día de trabajo, en una sola pantalla</h2>
|
||||||
|
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Agenda, actividades, cupos, participantes y cobros del día sin saltar entre herramientas.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Illustrative dashboard -->
|
||||||
|
<div class="relative mx-auto mt-10 max-w-5xl">
|
||||||
|
<div class="pointer-events-none absolute -inset-x-8 -top-8 -bottom-8 -z-10 rounded-[2rem] bg-gradient-to-b from-brand-500/10 to-transparent blur-2xl" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-slate-900/10 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40">
|
||||||
|
<!-- Browser chrome -->
|
||||||
|
<div class="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-800/60">
|
||||||
|
<span class="h-3 w-3 rounded-full bg-red-400" aria-hidden="true"></span>
|
||||||
|
<span class="h-3 w-3 rounded-full bg-amber-400" aria-hidden="true"></span>
|
||||||
|
<span class="h-3 w-3 rounded-full bg-green-400" aria-hidden="true"></span>
|
||||||
|
<span class="ml-3 hidden items-center gap-2 rounded-md bg-white px-3 py-1 text-xs text-slate-500 ring-1 ring-slate-200 dark:bg-slate-900 dark:text-slate-400 dark:ring-slate-700 sm:flex">
|
||||||
|
<svg class="h-3 w-3 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<rect x="3" y="11" width="18" height="11" rx="2" />
|
||||||
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
||||||
|
</svg>
|
||||||
|
app.gruperly.com
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-4 p-4 sm:p-6 lg:grid-cols-3">
|
||||||
|
<!-- Sidebar (desktop) -->
|
||||||
|
<div class="hidden space-y-1 rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:ring-slate-700 lg:block">
|
||||||
|
<div class="mb-3 flex items-center gap-2">
|
||||||
|
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-brand-600 text-white">
|
||||||
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
||||||
|
</span>
|
||||||
|
<span class="text-sm font-bold">Estudio Vinyasa</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-lg bg-brand-600/10 px-3 py-2 text-xs font-semibold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">
|
||||||
|
<span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span> Hoy
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Actividades</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Participantes</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Cobros</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main content -->
|
||||||
|
<div class="space-y-4 lg:col-span-2">
|
||||||
|
<!-- Today -->
|
||||||
|
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<p class="text-sm font-semibold">Agenda de hoy</p>
|
||||||
|
<span class="rounded-full bg-brand-50 px-2.5 py-0.5 text-[11px] font-semibold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">Martes 16</span>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-3 space-y-2">
|
||||||
|
<li class="flex items-center justify-between gap-3 text-sm">
|
||||||
|
<span class="flex items-center gap-2"><span class="rounded-md bg-brand-50 px-2 py-1 text-xs font-bold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">09:00</span> Vinyasa · Nivel 1</span>
|
||||||
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
|
||||||
|
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
|
||||||
|
Cupo 12/15
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between gap-3 text-sm">
|
||||||
|
<span class="flex items-center gap-2"><span class="rounded-md bg-brand-50 px-2 py-1 text-xs font-bold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">18:00</span> Funcional · Gimnasio Sur</span>
|
||||||
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
|
||||||
|
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
|
||||||
|
Cupo 8/10
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between gap-3 text-sm">
|
||||||
|
<span class="flex items-center gap-2"><span class="rounded-md bg-amber-50 px-2 py-1 text-xs font-bold text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">20:00</span> Workshop: respiración y movilidad</span>
|
||||||
|
<span class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
|
||||||
|
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14L20 6" /><path d="m22 4-10 10-3-3" /></svg>
|
||||||
|
Asistencia 14/16
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Activities -->
|
||||||
|
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
||||||
|
<p class="text-sm font-semibold">Mis actividades</p>
|
||||||
|
<ul class="mt-3 space-y-2 text-sm">
|
||||||
|
<li class="flex items-center justify-between gap-3">
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
|
||||||
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
|
||||||
|
</span>
|
||||||
|
Vinyasa · Lunes, miércoles y viernes · 09:00
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">Actividad recurrente</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between gap-3">
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-500/15 dark:text-amber-400">
|
||||||
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
|
||||||
|
</span>
|
||||||
|
Workshop: respiración y movilidad · Mar 20 · 20:00
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">Evento especial</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Participants -->
|
||||||
|
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<p class="text-sm font-semibold">Participantes de hoy</p>
|
||||||
|
<span class="text-[11px] font-semibold text-slate-500 dark:text-slate-400">15 registrados · 3 por confirmar</span>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-3 space-y-2 text-sm">
|
||||||
|
<li class="flex items-center justify-between gap-3">
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-[11px] font-bold text-white" aria-hidden="true">CL</span>
|
||||||
|
Camila López
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">Al día</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center justify-between gap-3">
|
||||||
|
<span class="flex items-center gap-2">
|
||||||
|
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-600 text-[11px] font-bold text-white" aria-hidden="true">MP</span>
|
||||||
|
Mateo Pérez
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">Pendiente</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Payments summary (real states) -->
|
||||||
|
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
||||||
|
<p class="text-sm font-semibold">Cobros recurrentes de este grupo</p>
|
||||||
|
<div class="mt-3 grid grid-cols-3 gap-2 text-center">
|
||||||
|
<div>
|
||||||
|
<p class="text-xl font-extrabold text-emerald-500">12</p>
|
||||||
|
<p class="text-[11px] font-medium text-slate-500 dark:text-slate-400">Al día</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xl font-extrabold text-amber-500">3</p>
|
||||||
|
<p class="text-[11px] font-medium text-slate-500 dark:text-slate-400">Pendientes</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xl font-extrabold text-rose-500">2</p>
|
||||||
|
<p class="text-[11px] font-medium text-slate-500 dark:text-slate-400">Atrasados</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-4 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Ejemplo ilustrativo de la vista diaria de un profesional. No es una captura real de la aplicación.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
71
src/_includes/partials/faq.njk
Normal file
71
src/_includes/partials/faq.njk
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
FAQ SECTION
|
||||||
|
============================================================ -->
|
||||||
|
<section id="faq" class="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
|
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Preguntas frecuentes</p>
|
||||||
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Resolvé tus dudas</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-10 space-y-4">
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Para quién es Gruperly?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Para profesionales que trabajan con grupos de personas: profesores, personal trainers, instructores y perfiles similares que necesitan organizar grupos, participantes y cobros.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Cómo creo mi primer grupo?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Creás tu cuenta y definís el nombre del grupo, los días y el horario de las clases, el cupo máximo, el precio y el tipo de cobro (mensual o por clase). Después siempre podés editarlo.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Cómo incorporo participantes?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Registrás a cada participante en el grupo donde participa con sus datos de contacto. Gruperly guarda esa información y sus cobros por grupo.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Cómo se cobra a los participantes?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Por grupo definís un precio, un tipo de cobro (mensual o por clase) y un día de vencimiento. Cada cobro queda con un estado claro: al día, pendiente o atrasado.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Qué diferencia hay entre actividades recurrentes y eventos especiales?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Las actividades recurrentes son las clases habituales de un grupo, con días y horarios repetidos. Los eventos especiales son workshops, talleres o encuentros puntuales, separados de las clases recurrentes.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm open:shadow-md dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-base font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950 [&::-webkit-details-marker]:hidden">
|
||||||
|
¿Necesito una cuenta para usar Gruperly?
|
||||||
|
<svg class="h-5 w-5 shrink-0 text-brand-500 transition-transform group-open:rotate-45" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
|
||||||
|
</summary>
|
||||||
|
<p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Sí. Creás una cuenta con tu nombre, email y contraseña, y confirmás tu email desde el enlace de verificación.
|
||||||
|
</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -1,48 +1,48 @@
|
|||||||
<!-- ============================================================
|
<!-- ============================================================
|
||||||
FEATURES SECTION
|
FEATURES SECTION
|
||||||
============================================================ -->
|
============================================================ -->
|
||||||
<section id="caracteristicas" class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
|
<section id="caracteristicas" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
<div class="mx-auto max-w-2xl text-center">
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Características</p>
|
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Características</p>
|
||||||
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Todo lo que tu grupo necesita, en un solo lugar</h2>
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Lo que necesitás para trabajar con tus grupos</h2>
|
||||||
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Herramientas pensadas para que administres tu comunidad con menos esfuerzo y mejores resultados.</p>
|
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Organizá grupos, clases recurrentes y encuentros especiales con tus participantes.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
<div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
<!-- Gestión de miembros -->
|
<!-- Grupos y participantes -->
|
||||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
||||||
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
||||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
||||||
</span>
|
</span>
|
||||||
<h3 class="mt-5 text-lg font-bold">Gestión de miembros</h3>
|
<h3 class="mt-5 text-lg font-bold">Grupos y participantes</h3>
|
||||||
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Perfiles, roles, permisos y segmentación. Lleva el control de quién integra tu comunidad y cómo participa.</p>
|
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Dale nombre y descripción a cada grupo, definí su cupo máximo y registrá a los participantes con sus datos. Todo ordenado por grupo.</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Gestión de Clases y Asistencia -->
|
<!-- Clases y actividades recurrentes -->
|
||||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
||||||
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
||||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /><rect x="8" y="2" width="8" height="4" rx="1" /><path d="M12 11v4" /><path d="M10 13h4" /><path d="M9 17h.01M15 17h.01" /></svg>
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
|
||||||
</span>
|
</span>
|
||||||
<h3 class="mt-5 text-lg font-bold">Gestión de Clases y Asistencia</h3>
|
<h3 class="mt-5 text-lg font-bold">Clases y actividades recurrentes</h3>
|
||||||
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Programa tus sesiones recurrentes o workshops especiales, toma asistencia en segundos y permite que tus alumnos reserven o liberen su lugar sin complicaciones.</p>
|
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Definí los días y horarios habituales de cada grupo: son la base de tus clases recurrentes, con su cupo y su cobro.</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Analíticas -->
|
<!-- Eventos especiales -->
|
||||||
|
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
||||||
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
|
||||||
|
</span>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Eventos especiales</h3>
|
||||||
|
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Creá workshops, talleres o encuentros puntuales, separados de las clases recurrentes de cada grupo.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Seguimiento y automatización -->
|
||||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
||||||
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
||||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg>
|
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg>
|
||||||
</span>
|
</span>
|
||||||
<h3 class="mt-5 text-lg font-bold">Analíticas</h3>
|
<h3 class="mt-5 text-lg font-bold">Seguimiento y automatización</h3>
|
||||||
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Tableros con métricas de crecimiento, retención, participación y demografía para decidir con datos.</p>
|
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Cobró por clase o por mes con día de vencimiento, y seguí el estado de cada pago: al día, pendiente o atrasado. Conectá tu cuenta de cobro desde el inicio.</p>
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Automatización -->
|
|
||||||
<article class="group rounded-2xl border border-slate-200 bg-white p-6 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-500/10 dark:border-slate-800 dark:bg-slate-900">
|
|
||||||
<span class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 text-brand-600 ring-1 ring-brand-100 transition group-hover:scale-110 dark:bg-brand-500/15 dark:text-brand-300 dark:ring-brand-500/20">
|
|
||||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.64 5.64l2.12 2.12M16.24 16.24l2.12 2.12M5.64 18.36l2.12-2.12M16.24 7.76l2.12-2.12" /><circle cx="12" cy="12" r="3" /></svg>
|
|
||||||
</span>
|
|
||||||
<h3 class="mt-5 text-lg font-bold">Automatización</h3>
|
|
||||||
<p class="mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-400">Bienvenidas, mensajes, tareas y flujos automáticos que se activan con reglas que tú defines.</p>
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1,18 +1,18 @@
|
|||||||
<!-- ============================================================
|
<!-- ============================================================
|
||||||
FINAL CTA
|
FINAL CTA
|
||||||
============================================================ -->
|
============================================================ -->
|
||||||
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24">
|
<section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 to-brand-800 px-6 py-16 text-center shadow-2xl shadow-brand-600/30 sm:px-16">
|
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 to-brand-800 px-6 py-14 text-center shadow-2xl shadow-brand-600/30 sm:px-16">
|
||||||
<div class="pointer-events-none absolute inset-0" aria-hidden="true">
|
<div class="pointer-events-none absolute inset-0" aria-hidden="true">
|
||||||
<div class="absolute -left-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div>
|
<div class="absolute -left-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div>
|
||||||
<div class="absolute -bottom-20 -right-20 h-64 w-64 rounded-full bg-brand-300/20 blur-3xl"></div>
|
<div class="absolute -bottom-20 -right-20 h-64 w-64 rounded-full bg-brand-300/20 blur-3xl"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">¿Listo para potenciar tu comunidad?</h2>
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">¿Listo para organizar tus grupos con Gruperly?</h2>
|
||||||
<p class="mx-auto mt-4 max-w-2xl text-lg text-brand-100">Únete a más de 12,000 comunidades que ya crecen con {{ site.name }}. Empieza gratis hoy.</p>
|
<p class="mx-auto mt-4 max-w-2xl text-lg text-brand-100">Creá tu primer grupo con los participantes que ya tenés: clases, cupos y cobros en un solo lugar.</p>
|
||||||
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
<a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3.5 text-base font-semibold text-brand-700 shadow-xl transition hover:bg-brand-50 sm:w-auto">Registrarme gratis</a>
|
<a href="{{ site.app.signup }}" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-white px-7 py-3.5 text-base font-semibold text-brand-700 shadow-xl transition hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-brand-700 sm:w-auto">Crear cuenta gratis</a>
|
||||||
<a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-white/30 px-7 py-3.5 text-base font-semibold text-white transition hover:bg-white/10 sm:w-auto">Contactar ventas</a>
|
<a href="#precios" class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-white/30 px-7 py-3.5 text-base font-semibold text-white transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-brand-700 sm:w-auto">Ver precios</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,58 +1,23 @@
|
|||||||
<footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
|
<footer class="border-t border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
|
||||||
<div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
|
<div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
|
||||||
<div class="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
|
<div class="grid gap-10 md:grid-cols-3">
|
||||||
<!-- Brand -->
|
<!-- Brand -->
|
||||||
<div class="lg:col-span-2">
|
<div class="md:col-span-2">
|
||||||
<a href="/" class="flex items-center gap-2.5" aria-label="{{ site.name }} — inicio">
|
<a href="/" class="flex items-center gap-2.5" aria-label="{{ site.name }} — inicio">
|
||||||
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-lg shadow-brand-500/30">
|
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-lg shadow-brand-500/30">
|
||||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="text-xl font-extrabold tracking-tight">{{ site.name }}</span>
|
<span class="text-xl font-extrabold tracking-tight">{{ site.name }}</span>
|
||||||
</a>
|
</a>
|
||||||
<p class="mt-4 max-w-sm text-sm leading-relaxed text-slate-600 dark:text-slate-400">La plataforma SaaS para gestionar, organizar y potenciar comunidades y grupos de cualquier tamaño.</p>
|
<p class="mt-4 max-w-md text-sm leading-relaxed text-slate-600 dark:text-slate-400">Tus grupos, clases y participantes, en un solo lugar. Organizá actividades recurrentes, eventos especiales y cobros con Gruperly.</p>
|
||||||
<!-- Social -->
|
|
||||||
<div class="mt-6 flex items-center gap-3">
|
|
||||||
<a href="#" aria-label="Twitter / X" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400 dark:hover:border-brand-500/50 dark:hover:text-brand-400">
|
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.59l5.24 6.93 6.07-6.93Zm-1.29 19.5h2.04L6.49 3.24H4.3l13.31 17.41Z" /></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="LinkedIn" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400 dark:hover:border-brand-500/50 dark:hover:text-brand-400">
|
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM7.12 20.45H3.55V9h3.57v11.45ZM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0Z" /></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="GitHub" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400 dark:hover:border-brand-500/50 dark:hover:text-brand-400">
|
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .3a12 12 0 0 0-3.79 23.38c.6.12.83-.26.83-.57v-2c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.07 1.83 2.8 1.3 3.49 1 .1-.78.42-1.31.76-1.61-2.66-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.11-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6.01 0c2.28-1.55 3.29-1.23 3.29-1.23.65 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 12 .3Z" /></svg>
|
|
||||||
</a>
|
|
||||||
<a href="#" aria-label="YouTube" class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 transition hover:border-brand-300 hover:text-brand-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400 dark:hover:border-brand-500/50 dark:hover:text-brand-400">
|
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81ZM9.55 15.57V8.43L15.82 12l-6.27 3.57Z" /></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Product -->
|
<!-- Product links -->
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">Producto</h3>
|
<h3 class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">Producto</h3>
|
||||||
<ul class="mt-4 space-y-3 text-sm">
|
<ul class="mt-4 space-y-3 text-sm">
|
||||||
{% for item in site.footer.producto %}
|
{% for item in site.footer.producto %}
|
||||||
<li><a href="{{ item.href }}" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">{{ item.label }}</a></li>
|
<li><a href="{{ item.href }}" class="text-slate-600 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-400 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-900">{{ item.label }}</a></li>
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Company -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">Empresa</h3>
|
|
||||||
<ul class="mt-4 space-y-3 text-sm">
|
|
||||||
{% for item in site.footer.empresa %}
|
|
||||||
<li><a href="{{ item.href }}" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">{{ item.label }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Legal / Resources -->
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-bold uppercase tracking-wide text-slate-900 dark:text-white">Legal</h3>
|
|
||||||
<ul class="mt-4 space-y-3 text-sm">
|
|
||||||
{% for item in site.footer.legal %}
|
|
||||||
<li><a href="{{ item.href }}" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">{{ item.label }}</a></li>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -60,7 +25,7 @@
|
|||||||
|
|
||||||
<div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-200 pt-8 sm:flex-row dark:border-slate-800">
|
<div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-200 pt-8 sm:flex-row dark:border-slate-800">
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400">© {{ site.year }} {{ site.name }}. Todos los derechos reservados.</p>
|
<p class="text-sm text-slate-500 dark:text-slate-400">© {{ site.year }} {{ site.name }}. Todos los derechos reservados.</p>
|
||||||
<p class="text-sm text-slate-500 dark:text-slate-400">Hecho con <span class="text-brand-500" aria-hidden="true">♥</span> para comunidades</p>
|
<a href="{{ site.app.login }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-400 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-900">Iniciar sesión</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -16,14 +16,14 @@
|
|||||||
<!-- Desktop links -->
|
<!-- Desktop links -->
|
||||||
<div class="hidden items-center gap-8 md:flex">
|
<div class="hidden items-center gap-8 md:flex">
|
||||||
{% for item in site.nav %}
|
{% for item in site.nav %}
|
||||||
<a href="{{ item.href }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400">{{ item.label }}</a>
|
<a href="{{ item.href }}" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-300 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-950">{{ item.label }}</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<!-- Dark mode toggle -->
|
<!-- Dark mode toggle -->
|
||||||
<button id="theme-toggle" type="button" aria-label="Cambiar tema claro/oscuro" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white">
|
<button id="theme-toggle" type="button" aria-label="Cambiar tema claro/oscuro" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white dark:focus-visible:ring-offset-slate-950">
|
||||||
<!-- Sun icon (shown in dark mode to switch to light) -->
|
<!-- Sun icon (shown in dark mode to switch to light) -->
|
||||||
<svg id="icon-sun" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
<svg id="icon-sun" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
<circle cx="12" cy="12" r="4" />
|
<circle cx="12" cy="12" r="4" />
|
||||||
@@ -36,11 +36,11 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<a href="#" class="hidden items-center gap-2 text-sm font-semibold text-slate-700 transition hover:text-brand-600 dark:text-slate-200 dark:hover:text-brand-400 sm:inline-flex">
|
<a href="{{ site.app.login }}" class="hidden items-center gap-2 text-sm font-semibold text-slate-700 transition hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:text-slate-200 dark:hover:text-brand-400 dark:focus-visible:ring-offset-slate-950 sm:inline-flex">
|
||||||
Iniciar sesión
|
Iniciar sesión
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="inline-flex items-center justify-center rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/25 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
|
<a href="{{ site.app.signup }}" class="inline-flex items-center justify-center rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand-600/25 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
|
||||||
Registrarse
|
Crear cuenta
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -4,149 +4,46 @@
|
|||||||
<section class="relative overflow-hidden">
|
<section class="relative overflow-hidden">
|
||||||
<!-- Decorative background -->
|
<!-- Decorative background -->
|
||||||
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
|
<div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
|
||||||
<div class="absolute -top-24 left-1/2 h-[500px] w-[900px] -translate-x-1/2 rounded-full bg-gradient-to-br from-brand-400/20 via-brand-300/10 to-transparent blur-3xl dark:from-brand-500/20 dark:via-brand-400/10"></div>
|
<div class="absolute -top-24 left-1/2 h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-gradient-to-br from-brand-400/20 via-brand-300/10 to-transparent blur-3xl dark:from-brand-500/20 dark:via-brand-400/10"></div>
|
||||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(100,116,139,0.15)_1px,transparent_0)] [background-size:24px_24px] dark:bg-[radial-gradient(circle_at_1px_1px,rgba(148,163,184,0.08)_1px,transparent_0)]"></div>
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(100,116,139,0.15)_1px,transparent_0)] [background-size:24px_24px] dark:bg-[radial-gradient(circle_at_1px_1px,rgba(148,163,184,0.08)_1px,transparent_0)]"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto max-w-7xl px-4 pb-16 pt-14 sm:px-6 sm:pt-20 lg:px-8 lg:pb-24 lg:pt-28">
|
<div class="mx-auto max-w-7xl px-4 pb-12 pt-12 sm:px-6 sm:pt-14 lg:px-8 lg:pb-16">
|
||||||
<div class="mx-auto max-w-3xl text-center">
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
<!-- Badge -->
|
<!-- Audience badge -->
|
||||||
<span class="inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3.5 py-1.5 text-xs font-semibold text-brand-700 dark:border-brand-500/30 dark:bg-brand-500/10 dark:text-brand-300">
|
<span class="inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3.5 py-1.5 text-xs font-semibold text-brand-700 dark:border-brand-500/30 dark:bg-brand-500/10 dark:text-brand-300">
|
||||||
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
<path d="M20 6 9 17l-5-5" />
|
<path d="M20 6 9 17l-5-5" />
|
||||||
</svg>
|
</svg>
|
||||||
La plataforma todo-en-uno para comunidades
|
Para profesores, personal trainers y profesionales que trabajan con grupos
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<h1 class="mt-6 text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
<h1 class="mt-5 text-4xl font-extrabold tracking-tight text-balance sm:text-5xl">
|
||||||
Gestiona, organiza y
|
Tus grupos, clases y participantes,
|
||||||
<span class="bg-gradient-to-r from-brand-500 to-brand-700 bg-clip-text text-transparent dark:from-brand-400 dark:to-brand-500">potencia tu comunidad</span>
|
<span class="bg-gradient-to-r from-brand-500 to-brand-700 bg-clip-text text-transparent dark:from-brand-400 dark:to-brand-500">en un solo lugar.</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<!-- Subtitle -->
|
<!-- Subtitle -->
|
||||||
<p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 dark:text-slate-400">
|
<p class="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
{{ site.name }} unifica la gestión de miembros, la organización de eventos, las analíticas y la automatización en una sola plataforma, para que tu grupo pase de crecer a prosperar.
|
Organizá tus actividades recurrentes, gestioná reservas y asistencia, y creá workshops o encuentros especiales con Gruperly.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- CTA buttons -->
|
<!-- CTA buttons -->
|
||||||
<div class="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
<a href="#precios" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand-600 px-7 py-3.5 text-base font-semibold text-white shadow-xl shadow-brand-600/30 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950 sm:w-auto">
|
<a href="{{ site.app.signup }}" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-brand-600 px-7 py-3.5 text-base font-semibold text-white shadow-xl shadow-brand-600/30 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950 sm:w-auto">
|
||||||
Empezar gratis
|
Crear cuenta gratis
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
{# <a href="#como-funciona" class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-7 py-3.5 text-base font-semibold text-slate-800 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800 dark:focus:ring-offset-slate-950 sm:w-auto">
|
<a href="#demo" class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-7 py-3.5 text-base font-semibold text-slate-800 transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800 dark:focus:ring-offset-slate-950 sm:w-auto">
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
<polygon points="6 3 20 12 6 21 6 3" />
|
<path d="M3 12h4M17 12h4M12 3v4M12 17v4" />
|
||||||
|
<circle cx="12" cy="12" r="4" />
|
||||||
</svg>
|
</svg>
|
||||||
Ver demo
|
Ver cómo funciona
|
||||||
</a> #}
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Social proof minis -->
|
|
||||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-slate-500 dark:text-slate-400">
|
|
||||||
<span class="inline-flex items-center gap-1.5">
|
|
||||||
<span class="text-amber-400" aria-hidden="true">★★★★★</span>
|
|
||||||
4.9/5 en reseñas
|
|
||||||
</span>
|
|
||||||
<span class="inline-flex items-center gap-1.5">
|
|
||||||
<svg class="h-4 w-4 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
||||||
<circle cx="9" cy="7" r="4" />
|
|
||||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
|
||||||
</svg>
|
|
||||||
+12,000 comunidades activas
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mockup / interactive card -->
|
|
||||||
<div class="relative mx-auto mt-14 max-w-5xl">
|
|
||||||
<div class="pointer-events-none absolute -inset-x-8 -top-8 -bottom-8 -z-10 rounded-[2rem] bg-gradient-to-b from-brand-500/10 to-transparent blur-2xl" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-slate-900/10 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40">
|
|
||||||
<!-- Browser chrome -->
|
|
||||||
<div class="flex items-center gap-2 border-b border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-800/60">
|
|
||||||
<span class="h-3 w-3 rounded-full bg-red-400" aria-hidden="true"></span>
|
|
||||||
<span class="h-3 w-3 rounded-full bg-amber-400" aria-hidden="true"></span>
|
|
||||||
<span class="h-3 w-3 rounded-full bg-green-400" aria-hidden="true"></span>
|
|
||||||
<span class="ml-3 hidden items-center gap-2 rounded-md bg-white px-3 py-1 text-xs text-slate-500 ring-1 ring-slate-200 dark:bg-slate-900 dark:text-slate-400 dark:ring-slate-700 sm:flex">
|
|
||||||
<svg class="h-3 w-3 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
||||||
<rect x="3" y="11" width="18" height="11" rx="2" />
|
|
||||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
||||||
</svg>
|
|
||||||
app.gruperly.com
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- App mockup body -->
|
|
||||||
<div class="grid gap-4 p-4 sm:grid-cols-3 sm:gap-5 sm:p-6">
|
|
||||||
<!-- Sidebar (desktop) -->
|
|
||||||
<div class="col-span-1 hidden space-y-1 rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:ring-slate-700 sm:block">
|
|
||||||
<div class="mb-3 flex items-center gap-2">
|
|
||||||
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-brand-600 text-white">
|
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
|
|
||||||
</span>
|
|
||||||
<span class="text-sm font-bold">Mi Comunidad</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 rounded-lg bg-brand-600/10 px-3 py-2 text-xs font-semibold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">
|
|
||||||
<span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span> Panel general
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Miembros</div>
|
|
||||||
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Eventos</div>
|
|
||||||
<div class="flex items-center gap-2 rounded-lg px-3 py-2 text-xs text-slate-500 dark:text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span> Analíticas</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Main content -->
|
|
||||||
<div class="col-span-1 space-y-4 sm:col-span-2">
|
|
||||||
<!-- Stat cards -->
|
|
||||||
<div class="grid grid-cols-2 gap-3 sm:gap-4">
|
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
|
||||||
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Miembros</p>
|
|
||||||
<p class="mt-1 text-2xl font-extrabold">2,847</p>
|
|
||||||
<p class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-emerald-500">↗ 12% este mes</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
|
||||||
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Asistencia eventos</p>
|
|
||||||
<p class="mt-1 text-2xl font-extrabold">92%</p>
|
|
||||||
<p class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-emerald-500">↗ 6% este mes</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Chart placeholder -->
|
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<p class="text-sm font-semibold">Crecimiento de membresía</p>
|
|
||||||
<span class="rounded-full bg-brand-50 px-2.5 py-0.5 text-[11px] font-semibold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300">Últimos 6 meses</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 flex h-24 items-end gap-2" aria-hidden="true">
|
|
||||||
<div class="w-full rounded-t bg-brand-200 dark:bg-brand-900/60" style="height: 35%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-200 dark:bg-brand-900/60" style="height: 50%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-200 dark:bg-brand-900/60" style="height: 42%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-200 dark:bg-brand-900/60" style="height: 65%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-300 dark:bg-brand-800/70" style="height: 58%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-500/80 dark:bg-brand-500/70" style="height: 80%"></div>
|
|
||||||
<div class="w-full rounded-t bg-brand-600" style="height: 100%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Event row -->
|
|
||||||
<div class="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/60">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
|
|
||||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
|
|
||||||
</span>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-semibold">Meetup mensual de la comunidad</p>
|
|
||||||
<p class="text-xs text-slate-500 dark:text-slate-400">Sáb 21 — 18:00 · 312 confirmados</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span class="hidden rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400 sm:inline-flex">Activo</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,45 +2,44 @@
|
|||||||
HOW IT WORKS SECTION
|
HOW IT WORKS SECTION
|
||||||
============================================================ -->
|
============================================================ -->
|
||||||
<section id="como-funciona" class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
|
<section id="como-funciona" class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
|
||||||
<div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
|
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
<div class="mx-auto max-w-2xl text-center">
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Cómo funciona</p>
|
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Cómo funciona</p>
|
||||||
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Empieza en menos de 5 minutos</h2>
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Empezá con tu primer grupo</h2>
|
||||||
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Tres pasos sencillos para migrar tu comunidad y ponerla en piloto automático.</p>
|
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Tres pasos para pasar de cero a tener tus grupos y cobros organizados.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-14 grid gap-10 sm:grid-cols-3 sm:gap-6">
|
<div class="mt-12 grid gap-10 sm:grid-cols-3 sm:gap-6">
|
||||||
<!-- Step 1 (connector on desktop) -->
|
<!-- Step 1 (connector on desktop) -->
|
||||||
<div class="relative text-center">
|
<div class="relative text-center">
|
||||||
<div class="pointer-events-none absolute top-8 hidden h-px w-full bg-gradient-to-r from-brand-300 via-slate-300 to-brand-300 sm:left-1/2 sm:block dark:from-brand-700 dark:via-slate-700 dark:to-brand-700" aria-hidden="true"></div>
|
<div class="pointer-events-none absolute top-8 hidden h-px w-full bg-gradient-to-r from-brand-300 via-slate-300 to-brand-300 sm:left-1/2 sm:block dark:from-brand-700 dark:via-slate-700 dark:to-brand-700" aria-hidden="true"></div>
|
||||||
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">1</div>
|
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">1</div>
|
||||||
<h3 class="mt-5 text-lg font-bold">Crea tu comunidad</h3>
|
<h3 class="mt-5 text-lg font-bold">Creá tu primer grupo</h3>
|
||||||
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Regístrate gratis, dale nombre a tu grupo y personaliza tu espacio en minutos.</p>
|
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Registrate y definí el nombre, los días y el horario de las clases, el cupo máximo, el precio y el tipo de cobro (mensual o por clase).</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 2 (connector on desktop) -->
|
<!-- Step 2 (connector on desktop) -->
|
||||||
<div class="relative text-center">
|
<div class="relative text-center">
|
||||||
<div class="pointer-events-none absolute top-8 hidden h-px w-full bg-gradient-to-r from-brand-300 via-slate-300 to-brand-300 sm:left-1/2 sm:block dark:from-brand-700 dark:via-slate-700 dark:to-brand-700" aria-hidden="true"></div>
|
<div class="pointer-events-none absolute top-8 hidden h-px w-full bg-gradient-to-r from-brand-300 via-slate-300 to-brand-300 sm:left-1/2 sm:block dark:from-brand-700 dark:via-slate-700 dark:to-brand-700" aria-hidden="true"></div>
|
||||||
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">2</div>
|
<div class="relative mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">2</div>
|
||||||
<h3 class="mt-5 text-lg font-bold">Invita a tus miembros</h3>
|
<h3 class="mt-5 text-lg font-bold">Sumá participantes</h3>
|
||||||
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Comparte el enlace, importa contactos o crea códigos de invitación personalizados.</p>
|
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Registrá a cada participante en el grupo donde participa y mantené sus datos y cobros ordenados.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step 3 -->
|
<!-- Step 3 -->
|
||||||
<div class="relative text-center">
|
<div class="relative text-center">
|
||||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">3</div>
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-extrabold text-white shadow-lg shadow-brand-600/30">3</div>
|
||||||
<h3 class="mt-5 text-lg font-bold">Automatiza y crece</h3>
|
<h3 class="mt-5 text-lg font-bold">Organizá tus actividades</h3>
|
||||||
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Configura flujos automáticos, lanza eventos y observa cómo prospera tu comunidad.</p>
|
<p class="mx-auto mt-2 max-w-xs text-sm leading-relaxed text-slate-600 dark:text-slate-400">Con las clases recurrentes definidas, manejá el día a día: cupos, participantes y cobros, y armá los encuentros especiales del mes.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CTA -->
|
<!-- CTA -->
|
||||||
<div class="mt-14 text-center">
|
<div class="mt-12 text-center">
|
||||||
<a href="#" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-7 py-3.5 text-base font-semibold text-white shadow-xl shadow-brand-600/30 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
|
<a href="{{ site.app.signup }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-7 py-3.5 text-base font-semibold text-white shadow-xl shadow-brand-600/30 transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950">
|
||||||
Crear mi comunidad gratis
|
Crear mi cuenta gratis
|
||||||
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
|
||||||
</a>
|
</a>
|
||||||
<p class="mt-3 text-sm text-slate-500 dark:text-slate-400">Sin tarjeta de crédito · Cancela cuando quieras</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
<!-- ============================================================
|
<!-- ============================================================
|
||||||
PRICING SECTION
|
PRICING SECTION
|
||||||
============================================================ -->
|
============================================================ -->
|
||||||
<section id="precios" class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
|
<section id="precios" class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
|
||||||
<div class="mx-auto max-w-2xl text-center">
|
<div class="mx-auto max-w-2xl text-center">
|
||||||
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Precios</p>
|
<p class="text-sm font-bold uppercase tracking-widest text-brand-600 dark:text-brand-400">Precios</p>
|
||||||
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Planes simples para cada etapa</h2>
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Planes simples para cada etapa</h2>
|
||||||
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Comienza gratis y escala cuando tu comunidad lo haga. Sin costos ocultos.</p>
|
<p class="mt-4 text-lg text-slate-600 dark:text-slate-400">Empezá gratis y sumá capacidad cuando lo necesites.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-12 grid gap-6 lg:mx-auto lg:max-w-3xl lg:grid-cols-2 lg:items-stretch">
|
<div class="mt-10 grid gap-6 lg:mx-auto lg:max-w-3xl lg:grid-cols-2 lg:items-stretch">
|
||||||
{% for plan in pricing.plans %}
|
{% for plan in pricing.plans %}
|
||||||
<div class="{% if plan.highlight %}relative flex flex-col rounded-2xl border-2 border-brand-500 bg-white p-8 shadow-2xl shadow-brand-500/20 dark:border-brand-400 dark:bg-slate-900{% else %}flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900{% endif %}">
|
<div class="{% if plan.highlight %}relative flex flex-col rounded-2xl border-2 border-brand-500 bg-white p-8 shadow-2xl shadow-brand-500/20 dark:border-brand-400 dark:bg-slate-900{% else %}flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900{% endif %}">
|
||||||
{% if plan.highlight and plan.badge %}
|
{% if plan.highlight and plan.badge %}
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl {% if plan.ctaStyle == 'solid' %}bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700{% else %}border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800{% endif %}">{{ plan.cta }}</a>
|
<a href="{{ site.app.signup }}" class="mt-6 inline-flex w-full items-center justify-center rounded-xl {% if plan.ctaStyle == 'solid' %}bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700{% else %}border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-800 transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800{% endif %}">{{ plan.cta }}</a>
|
||||||
|
|
||||||
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
{% for feature in plan.features %}
|
{% for feature in plan.features %}
|
||||||
@@ -35,5 +35,7 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">¿Necesitas algo distinto? <a href="#" class="font-semibold text-brand-600 hover:underline dark:text-brand-400">Habla con nosotros</a></p>
|
<p class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Valores mensuales. En Argentina se muestran en pesos (ARS) y en el resto de la región en dólares (USD).
|
||||||
|
</p>
|
||||||
</section>
|
</section>
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
<!-- ============================================================
|
|
||||||
SOCIAL PROOF / METRICS SECTION
|
|
||||||
============================================================ -->
|
|
||||||
<section class="border-y border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/50">
|
|
||||||
<div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24">
|
|
||||||
<!-- Metrics -->
|
|
||||||
<div class="grid grid-cols-2 gap-8 text-center lg:grid-cols-4">
|
|
||||||
<div>
|
|
||||||
<p class="text-4xl font-extrabold tracking-tight text-brand-600 dark:text-brand-400 sm:text-5xl">12k+</p>
|
|
||||||
<p class="mt-2 text-sm font-medium text-slate-600 dark:text-slate-400">Comunidades activas</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-4xl font-extrabold tracking-tight text-brand-600 dark:text-brand-400 sm:text-5xl">1.8M</p>
|
|
||||||
<p class="mt-2 text-sm font-medium text-slate-600 dark:text-slate-400">Miembros gestionados</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-4xl font-extrabold tracking-tight text-brand-600 dark:text-brand-400 sm:text-5xl">350k</p>
|
|
||||||
<p class="mt-2 text-sm font-medium text-slate-600 dark:text-slate-400">Eventos organizados</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-4xl font-extrabold tracking-tight text-brand-600 dark:text-brand-400 sm:text-5xl">98%</p>
|
|
||||||
<p class="mt-2 text-sm font-medium text-slate-600 dark:text-slate-400">Satisfacción de clientes</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Testimonials -->
|
|
||||||
<div class="mt-16 grid gap-6 lg:grid-cols-3">
|
|
||||||
<figure class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
||||||
<div class="flex gap-1 text-amber-400" aria-label="5 de 5 estrellas">
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
</div>
|
|
||||||
<blockquote class="mt-4 text-base leading-relaxed text-slate-700 dark:text-slate-300">
|
|
||||||
"Pasamos de gestionar nuestra comunidad en hojas de cálculo a un flujo totalmente automatizado. El crecimiento fue inmediato."
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="mt-6 flex items-center gap-3">
|
|
||||||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-sm font-bold text-white">MC</span>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-semibold">María Contreras</p>
|
|
||||||
<p class="text-xs text-slate-500 dark:text-slate-400">Fundadora · DevLatam</p>
|
|
||||||
</div>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
||||||
<div class="flex gap-1 text-amber-400" aria-label="5 de 5 estrellas">
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
</div>
|
|
||||||
<blockquote class="mt-4 text-base leading-relaxed text-slate-700 dark:text-slate-300">
|
|
||||||
"Las analíticas nos mostraron exactamente qué eventos funcionan. Hoy nuestra retención de miembros es la más alta del gremio."
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="mt-6 flex items-center gap-3">
|
|
||||||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-600 text-sm font-bold text-white">AL</span>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-semibold">Andrés Luna</p>
|
|
||||||
<p class="text-xs text-slate-500 dark:text-slate-400">Coordinador · UX meetups MX</p>
|
|
||||||
</div>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
||||||
<div class="flex gap-1 text-amber-400" aria-label="5 de 5 estrellas">
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
{% include "partials/star.njk" %}
|
|
||||||
</div>
|
|
||||||
<blockquote class="mt-4 text-base leading-relaxed text-slate-700 dark:text-slate-300">
|
|
||||||
"El soporte dedicado y las integraciones a medida hicieron que migrar 40,000 miembros fuera pan comido."
|
|
||||||
</blockquote>
|
|
||||||
<figcaption class="mt-6 flex items-center gap-3">
|
|
||||||
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-400 to-orange-600 text-sm font-bold text-white">JR</span>
|
|
||||||
<div>
|
|
||||||
<p class="text-sm font-semibold">Julia Ríos</p>
|
|
||||||
<p class="text-xs text-slate-500 dark:text-slate-400">Head of Community · Alianza Global</p>
|
|
||||||
</div>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /></svg>
|
|
||||||
|
Before Width: | Height: | Size: 191 B |
@@ -1,12 +1,13 @@
|
|||||||
---
|
---
|
||||||
title: "Gruperly — Gestiona, organiza y potencia tu comunidad"
|
title: "Gruperly — Tus grupos, clases y participantes, en un solo lugar"
|
||||||
description: "Gruperly es la plataforma SaaS para la gestión, organización y potenciación de comunidades y grupos."
|
description: "Organizá tus actividades recurrentes, gestioná reservas y asistencia, y creá workshops o encuentros especiales con Gruperly."
|
||||||
layout: "base.njk"
|
layout: "base.njk"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include "partials/hero.njk" %}
|
{% include "partials/hero.njk" %}
|
||||||
|
{% include "partials/demo.njk" %}
|
||||||
{% include "partials/features.njk" %}
|
{% include "partials/features.njk" %}
|
||||||
{% include "partials/how-it-works.njk" %}
|
{% include "partials/how-it-works.njk" %}
|
||||||
{% include "partials/pricing.njk" %}
|
{% include "partials/pricing.njk" %}
|
||||||
{# {% include "partials/social-proof.njk" %} #}
|
{% include "partials/faq.njk" %}
|
||||||
{% include "partials/final-cta.njk" %}
|
{% include "partials/final-cta.njk" %}
|
||||||
Reference in New Issue
Block a user