Initial commit: landing page Gruperly con Eleventy
This commit is contained in:
Jose Selesan
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Dependencias
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Salida de build de Eleventy
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
|
||||||
|
# Sistema operativo
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Editor / IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
|
||||||
|
# Entorno
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
63
README.md
Normal file
63
README.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# Gruperly — Landing Page
|
||||||
|
|
||||||
|
Landing page del producto SaaS **Gruperly** (gestión, organización y potenciación de comunidades y grupos), construida con [Eleventy](https://www.11ty.dev/) (11ty) y [Tailwind CSS](https://tailwindcss.com/).
|
||||||
|
|
||||||
|
## Requisitos
|
||||||
|
|
||||||
|
- Node.js 18+ (probado con Node 24)
|
||||||
|
|
||||||
|
## Instalación
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Comandos
|
||||||
|
|
||||||
|
| Comando | Descripción |
|
||||||
|
| ---------------- | ------------------------------------------------------------------ |
|
||||||
|
| `npm start` | Servidor de desarrollo con recarga en vivo (`http://localhost:8081`) |
|
||||||
|
| `npm run build` | Genera el sitio estático en la carpeta `dist/` |
|
||||||
|
|
||||||
|
## Acceso desde otros dispositivos
|
||||||
|
|
||||||
|
El servidor de desarrollo escucha en todas las interfaces (`host: 0.0.0.0`), por lo que otros dispositivos de la misma red local pueden abrir la página usando la IP LAN de tu equipo dentro de la URL. Para conocer tu IP en macOS:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ipconfig getifaddr en0
|
||||||
|
```
|
||||||
|
|
||||||
|
Ejemplo: `http://192.168.x.x:8081`
|
||||||
|
|
||||||
|
> Nota: macOS puede pedir permiso de firewall para Node la primera vez. Acepta las conexiones entrantes.
|
||||||
|
|
||||||
|
## Estructura del proyecto
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├── eleventy.config.js # Configuración de Eleventy (input: src → output: dist) y servidor de dev
|
||||||
|
├── package.json # Scripts y dependencias
|
||||||
|
├── src/
|
||||||
|
│ ├── _data/
|
||||||
|
│ │ └── site.json # Datos globales del sitio (nombre, navegación, footer, año)
|
||||||
|
│ ├── _includes/
|
||||||
|
│ │ ├── layouts/
|
||||||
|
│ │ │ └── base.njk # Layout principal (head, Tailwind CDN, dark mode, header/footer)
|
||||||
|
│ │ └── partials/ # Secciones reutilizables de la landing
|
||||||
|
│ │ ├── header.njk # Navbar con toggle de tema y CTA
|
||||||
|
│ │ ├── hero.njk # Portada con mockup de la app
|
||||||
|
│ │ ├── features.njk # Características
|
||||||
|
│ │ ├── how-it-works.njk# Cómo funciona
|
||||||
|
│ │ ├── pricing.njk # Planes y precios
|
||||||
|
│ │ ├── social-proof.njk# Métricas y testimonios
|
||||||
|
│ │ ├── star.njk # SVG de estrella (reutilizable)
|
||||||
|
│ │ ├── final-cta.njk # Llamado a la acción final
|
||||||
|
│ │ └── footer.njk # Pie de página con redes y enlaces
|
||||||
|
│ └── index.njk # Página principal (front matter + includes)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Funcionalidades
|
||||||
|
|
||||||
|
- **Tema claro/oscuro**: toggle funcional que persiste en `localStorage` y respeta `prefers-color-scheme`.
|
||||||
|
- **Responsive**: mobile-first, adaptado a móviles, tablets y escritorio.
|
||||||
|
- **Templates Nunjucks**: header, footer y datos reutilizables vía `_data/site.json`.
|
||||||
17
eleventy.config.js
Normal file
17
eleventy.config.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
export default function (eleventyConfig) {
|
||||||
|
// Permite que el servidor de desarrollo acepte conexiones desde otros
|
||||||
|
// dispositivos de la red local (por ejemplo: http://192.168.x.x:8081).
|
||||||
|
eleventyConfig.setServerOptions({
|
||||||
|
host: "0.0.0.0",
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
dir: {
|
||||||
|
input: "src",
|
||||||
|
output: "dist",
|
||||||
|
includes: "_includes",
|
||||||
|
layouts: "_includes/layouts",
|
||||||
|
data: "_data",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
629
index.html
Normal file
629
index.html
Normal file
@@ -0,0 +1,629 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Gruperly — Gestiona, organiza y potencia tu comunidad</title>
|
||||||
|
<meta name="description" content="Gruperly es la plataforma SaaS para la gestión, organización y potenciación de comunidades y grupos." />
|
||||||
|
<script>
|
||||||
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#eef4ff',
|
||||||
|
100: '#dbe6fe',
|
||||||
|
200: '#bfd3fe',
|
||||||
|
300: '#93b4fd',
|
||||||
|
400: '#608afa',
|
||||||
|
500: '#3b63f5',
|
||||||
|
600: '#2544ea',
|
||||||
|
700: '#1d33d8',
|
||||||
|
800: '#1e2cb0',
|
||||||
|
900: '#1e2b8b',
|
||||||
|
950: '#171d54',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
[x-cloak] { display: none !important; }
|
||||||
|
input[type="range"] { accent-color: #3b63f5; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-sans antialiased bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-300">
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
HEADER / NAVBAR
|
||||||
|
============================================================ -->
|
||||||
|
<header class="sticky top-0 z-50 border-b border-slate-200/70 bg-white/80 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-950/80">
|
||||||
|
<nav class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8" aria-label="Navegación principal">
|
||||||
|
<!-- Logo -->
|
||||||
|
<a href="#" class="flex items-center gap-2.5" aria-label="Gruperly — 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">
|
||||||
|
<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 class="text-xl font-extrabold tracking-tight">Gruperly</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Desktop links -->
|
||||||
|
<div class="hidden items-center gap-8 md:flex">
|
||||||
|
<a href="#caracteristicas" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400">Características</a>
|
||||||
|
<a href="#como-funciona" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400">Cómo funciona</a>
|
||||||
|
<a href="#precios" class="text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-400">Precios</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- 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">
|
||||||
|
<!-- 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">
|
||||||
|
<circle cx="12" cy="12" r="4" />
|
||||||
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
||||||
|
</svg>
|
||||||
|
<!-- Moon icon (shown in light mode to switch to dark) -->
|
||||||
|
<svg id="icon-moon" 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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
Iniciar sesión
|
||||||
|
</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">
|
||||||
|
Registrarse
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
HERO SECTION
|
||||||
|
============================================================ -->
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<!-- Decorative background -->
|
||||||
|
<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 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 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-3xl text-center">
|
||||||
|
<!-- 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">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
La plataforma todo-en-uno para comunidades
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<h1 class="mt-6 text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
||||||
|
Gestiona, organiza y
|
||||||
|
<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>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Subtitle -->
|
||||||
|
<p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 dark:text-slate-400">
|
||||||
|
Gruperly 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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- CTA buttons -->
|
||||||
|
<div class="mt-9 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">
|
||||||
|
Empezar 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>
|
||||||
|
</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">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
Ver demo
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">Todo lo que tu grupo necesita, en un solo lugar</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<!-- Gestión de miembros -->
|
||||||
|
<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="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>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Gestión de miembros</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>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Gestión de Clases y Asistencia -->
|
||||||
|
<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="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>
|
||||||
|
</span>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Gestión de Clases y Asistencia</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>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Analíticas -->
|
||||||
|
<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="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg>
|
||||||
|
</span>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Analíticas</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<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-2xl text-center">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-14 grid gap-10 sm:grid-cols-3 sm:gap-6">
|
||||||
|
<!-- Step 1 -->
|
||||||
|
<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">1</div>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Crea tu comunidad</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2 (connector on desktop) -->
|
||||||
|
<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="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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3 -->
|
||||||
|
<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>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Automatiza y crece</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="mt-14 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">
|
||||||
|
Crear mi comunidad 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>
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-6 lg:grid-cols-3 lg:items-stretch">
|
||||||
|
<!-- Starter / Gratis -->
|
||||||
|
<div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<h3 class="text-lg font-bold">Starter</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para grupos pequeños que están comenzando.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$0</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl 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">Empezar gratis</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Hasta 200 miembros</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>3 eventos al mes</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Analíticas básicas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Soporte por correo</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pro / Destacado -->
|
||||||
|
<div class="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">
|
||||||
|
<span class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-brand-500 to-brand-700 px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-white shadow-lg shadow-brand-600/30">Popular</span>
|
||||||
|
<h3 class="text-lg font-bold">Pro</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para comunidades en crecimiento con funciones avanzadas.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$29</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">Empezar prueba gratis</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Hasta 5,000 miembros</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Eventos ilimitados</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Automatizaciones ilimitadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Analíticas avanzadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Soporte prioritario</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise / Comunidad -->
|
||||||
|
<div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<h3 class="text-lg font-bold">Enterprise</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para grandes organizaciones con soporte dedicado.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$99</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl 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">Contactar ventas</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Miembros ilimitados</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Integraciones personalizadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>SSO y control de accesos</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Gerente de cuenta dedicado</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>SLA y soporte 24/7</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
FINAL CTA
|
||||||
|
============================================================ -->
|
||||||
|
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24">
|
||||||
|
<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="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 -bottom-20 -right-20 h-64 w-64 rounded-full bg-brand-300/20 blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">Listo para potenciar tu comunidad?</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 Gruperly. Empieza gratis hoy.</p>
|
||||||
|
<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="#" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
FOOTER
|
||||||
|
============================================================ -->
|
||||||
|
<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="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<a href="#" class="flex items-center gap-2.5" aria-label="Gruperly — 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">
|
||||||
|
<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 class="text-xl font-extrabold tracking-tight">Gruperly</span>
|
||||||
|
</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>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- Product -->
|
||||||
|
<div>
|
||||||
|
<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">
|
||||||
|
<li><a href="#caracteristicas" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Características</a></li>
|
||||||
|
<li><a href="#precios" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Precios</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Integraciones</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Novedades</a></li>
|
||||||
|
</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">
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Sobre nosotros</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Blog</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Empleo</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Contacto</a></li>
|
||||||
|
</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">
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Privacidad</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Términos</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Seguridad</a></li>
|
||||||
|
<li><a href="#" class="text-slate-600 transition hover:text-brand-600 dark:text-slate-400 dark:hover:text-brand-400">Cookies</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">© 2026 Gruperly. 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- ============================================================
|
||||||
|
THEME TOGGLE SCRIPT
|
||||||
|
============================================================ -->
|
||||||
|
<script>
|
||||||
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
|
const iconSun = document.getElementById('icon-sun');
|
||||||
|
const iconMoon = document.getElementById('icon-moon');
|
||||||
|
|
||||||
|
function syncIcons() {
|
||||||
|
const isDark = document.documentElement.classList.contains('dark');
|
||||||
|
iconSun.classList.toggle('hidden', !isDark);
|
||||||
|
iconMoon.classList.toggle('hidden', isDark);
|
||||||
|
}
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||||
|
syncIcons();
|
||||||
|
});
|
||||||
|
|
||||||
|
syncIcons();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1690
package-lock.json
generated
Normal file
1690
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "gruperly-landing-page",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Landing page de Gruperly construida con Eleventy.",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "eleventy",
|
||||||
|
"start": "eleventy --serve"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"eleventy",
|
||||||
|
"11ty",
|
||||||
|
"tailwindcss",
|
||||||
|
"landing-page"
|
||||||
|
],
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"@11ty/eleventy": "^3.1.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/_data/site.json
Normal file
31
src/_data/site.json
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"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": "#" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
79
src/_includes/layouts/base.njk
Normal file
79
src/_includes/layouts/base.njk
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{{ title or site.name }}</title>
|
||||||
|
<meta name="description" content="{{ description or site.description }}" />
|
||||||
|
<script>
|
||||||
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#eef4ff',
|
||||||
|
100: '#dbe6fe',
|
||||||
|
200: '#bfd3fe',
|
||||||
|
300: '#93b4fd',
|
||||||
|
400: '#608afa',
|
||||||
|
500: '#3b63f5',
|
||||||
|
600: '#2544ea',
|
||||||
|
700: '#1d33d8',
|
||||||
|
800: '#1e2cb0',
|
||||||
|
900: '#1e2b8b',
|
||||||
|
950: '#171d54',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
[x-cloak] { display: none !important; }
|
||||||
|
input[type="range"] { accent-color: #3b63f5; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-sans antialiased bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-300">
|
||||||
|
|
||||||
|
{% include "partials/header.njk" %}
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{{ content | safe }}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include "partials/footer.njk" %}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const themeToggle = document.getElementById('theme-toggle');
|
||||||
|
const iconSun = document.getElementById('icon-sun');
|
||||||
|
const iconMoon = document.getElementById('icon-moon');
|
||||||
|
|
||||||
|
function syncIcons() {
|
||||||
|
const isDark = document.documentElement.classList.contains('dark');
|
||||||
|
iconSun.classList.toggle('hidden', !isDark);
|
||||||
|
iconMoon.classList.toggle('hidden', isDark);
|
||||||
|
}
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const isDark = document.documentElement.classList.toggle('dark');
|
||||||
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||||
|
syncIcons();
|
||||||
|
});
|
||||||
|
|
||||||
|
syncIcons();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
src/_includes/partials/features.njk
Normal file
48
src/_includes/partials/features.njk
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
FEATURES SECTION
|
||||||
|
============================================================ -->
|
||||||
|
<section id="caracteristicas" 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-2xl text-center">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<!-- Gestión de miembros -->
|
||||||
|
<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="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>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Gestión de miembros</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>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Gestión de Clases y Asistencia -->
|
||||||
|
<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="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>
|
||||||
|
</span>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Gestión de Clases y Asistencia</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>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Analíticas -->
|
||||||
|
<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="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></svg>
|
||||||
|
</span>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Analíticas</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
19
src/_includes/partials/final-cta.njk
Normal file
19
src/_includes/partials/final-cta.njk
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
FINAL CTA
|
||||||
|
============================================================ -->
|
||||||
|
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24">
|
||||||
|
<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="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 -bottom-20 -right-20 h-64 w-64 rounded-full bg-brand-300/20 blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">¿Listo para potenciar tu comunidad?</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>
|
||||||
|
<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="#" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
66
src/_includes/partials/footer.njk
Normal file
66
src/_includes/partials/footer.njk
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<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="grid gap-10 md:grid-cols-2 lg:grid-cols-5">
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="lg:col-span-2">
|
||||||
|
<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">
|
||||||
|
<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 class="text-xl font-extrabold tracking-tight">{{ site.name }}</span>
|
||||||
|
</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>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- Product -->
|
||||||
|
<div>
|
||||||
|
<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">
|
||||||
|
{% 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>
|
||||||
|
{% 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 %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">Hecho con <span class="text-brand-500" aria-hidden="true">♥</span> para comunidades</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
47
src/_includes/partials/header.njk
Normal file
47
src/_includes/partials/header.njk
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<header class="sticky top-0 z-50 border-b border-slate-200/70 bg-white/80 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-950/80">
|
||||||
|
<nav class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8" aria-label="Navegación principal">
|
||||||
|
<!-- Logo -->
|
||||||
|
<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">
|
||||||
|
<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 class="text-xl font-extrabold tracking-tight">{{ site.name }}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Desktop links -->
|
||||||
|
<div class="hidden items-center gap-8 md:flex">
|
||||||
|
{% 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>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- 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">
|
||||||
|
<!-- 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">
|
||||||
|
<circle cx="12" cy="12" r="4" />
|
||||||
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
||||||
|
</svg>
|
||||||
|
<!-- Moon icon (shown in light mode to switch to dark) -->
|
||||||
|
<svg id="icon-moon" 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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
Iniciar sesión
|
||||||
|
</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">
|
||||||
|
Registrarse
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
153
src/_includes/partials/hero.njk
Normal file
153
src/_includes/partials/hero.njk
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
HERO SECTION
|
||||||
|
============================================================ -->
|
||||||
|
<section class="relative overflow-hidden">
|
||||||
|
<!-- Decorative background -->
|
||||||
|
<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 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 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-3xl text-center">
|
||||||
|
<!-- 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">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
La plataforma todo-en-uno para comunidades
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<h1 class="mt-6 text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
||||||
|
Gestiona, organiza y
|
||||||
|
<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>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Subtitle -->
|
||||||
|
<p class="mx-auto mt-6 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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- CTA buttons -->
|
||||||
|
<div class="mt-9 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">
|
||||||
|
Empezar 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>
|
||||||
|
</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">
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
Ver demo
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
45
src/_includes/partials/how-it-works.njk
Normal file
45
src/_includes/partials/how-it-works.njk
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
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">
|
||||||
|
<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-2xl text-center">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-14 grid gap-10 sm:grid-cols-3 sm:gap-6">
|
||||||
|
<!-- Step 1 -->
|
||||||
|
<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">1</div>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Crea tu comunidad</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2 (connector on desktop) -->
|
||||||
|
<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="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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 3 -->
|
||||||
|
<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>
|
||||||
|
<h3 class="mt-5 text-lg font-bold">Automatiza y crece</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="mt-14 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">
|
||||||
|
Crear mi comunidad 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>
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
68
src/_includes/partials/pricing.njk
Normal file
68
src/_includes/partials/pricing.njk
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
PRICING SECTION
|
||||||
|
============================================================ -->
|
||||||
|
<section id="precios" 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-2xl text-center">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-6 lg:mx-auto lg:max-w-3xl lg:grid-cols-2 lg:items-stretch">
|
||||||
|
<!-- Starter / Gratis -->
|
||||||
|
<div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<h3 class="text-lg font-bold">Starter</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para grupos pequeños que están comenzando.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$0</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl 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">Empezar gratis</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Hasta 200 miembros</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>3 eventos al mes</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Analíticas básicas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Soporte por correo</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pro / Destacado -->
|
||||||
|
<div class="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">
|
||||||
|
{# <span class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-brand-500 to-brand-700 px-4 py-1.5 text-xs font-bold uppercase tracking-wide text-white shadow-lg shadow-brand-600/30">Popular</span> #}
|
||||||
|
<h3 class="text-lg font-bold">Pro</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para comunidades en crecimiento con funciones avanzadas.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$29</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">Empezar prueba gratis</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Hasta 5,000 miembros</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Eventos ilimitados</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Automatizaciones ilimitadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Analíticas avanzadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Soporte prioritario</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise / Comunidad -->
|
||||||
|
{# <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-8 dark:border-slate-800 dark:bg-slate-900">
|
||||||
|
<h3 class="text-lg font-bold">Enterprise</h3>
|
||||||
|
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Para grandes organizaciones con soporte dedicado.</p>
|
||||||
|
<div class="mt-6 flex items-baseline gap-1">
|
||||||
|
<span class="text-4xl font-extrabold tracking-tight">$99</span>
|
||||||
|
<span class="text-sm font-medium text-slate-500 dark:text-slate-400">/mes</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-xl 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">Contactar ventas</a>
|
||||||
|
<ul class="mt-8 space-y-3 text-sm text-slate-700 dark:text-slate-300">
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Miembros ilimitados</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Integraciones personalizadas</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>SSO y control de accesos</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>Gerente de cuenta dedicado</li>
|
||||||
|
<li class="flex items-start gap-3"><svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" 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>SLA y soporte 24/7</li>
|
||||||
|
</ul>
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
89
src/_includes/partials/social-proof.njk
Normal file
89
src/_includes/partials/social-proof.njk
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<!-- ============================================================
|
||||||
|
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
src/_includes/partials/star.njk
Normal file
1
src/_includes/partials/star.njk
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 191 B |
12
src/index.njk
Normal file
12
src/index.njk
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
---
|
||||||
|
title: "Gruperly — Gestiona, organiza y potencia tu comunidad"
|
||||||
|
description: "Gruperly es la plataforma SaaS para la gestión, organización y potenciación de comunidades y grupos."
|
||||||
|
layout: "base.njk"
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include "partials/hero.njk" %}
|
||||||
|
{% include "partials/features.njk" %}
|
||||||
|
{% include "partials/how-it-works.njk" %}
|
||||||
|
{% include "partials/pricing.njk" %}
|
||||||
|
{# {% include "partials/social-proof.njk" %} #}
|
||||||
|
{% include "partials/final-cta.njk" %}
|
||||||
Reference in New Issue
Block a user