Gimnasio

Plantilla con estética deportiva y enérgica (fondo negro, amarillo eléctrico, tipografía condensada en mayúsculas) para gimnasios, estudios de crossfit, box, yoga, academias de artes marciales o entrenadores personales. Incluye horario de clases por día generado con JavaScript, planes de membresía, coaches y una calculadora de IMC como gancho para captar prospectos.

Vista previa

Titán Fitness

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Secciones

Sección	Detalle
Header transparente	Se vuelve sólido al hacer scroll. Botón "Semana gratis" destacado.
Hero	Título gigante con una palabra en contorno (-webkit-text-stroke), botones con corte diagonal (clip-path) y cifras clave.
Franja animada	Cinta amarilla con disciplinas que se desplaza infinitamente (marquee hecho con CSS).
Programas	Tarjetas verticales en blanco y negro que toman color al pasar el mouse.
Horario de clases	Pestañas por día (abre en el día actual), tabla con hora, clase, coach, nivel con color y lugares disponibles o "Lleno".
Membresías	Tres planes; el central resaltado. Beneficios no incluidos tachados.
Coaches	Fotos con especialidad.
Calculadora de IMC	Interacción útil que mantiene al visitante en la página y lleva a la evaluación gratuita.
CTA final	Formulario para la semana de prueba gratis.

Editar el horario de clases

Todo el horario vive en un objeto. Cada clase es un arreglo con: hora, nombre, coach, nivel (basico, intermedio, avanzado), inscritos y cupo máximo:

const CLASES = {
  Lunes: [
    ['06:00', 'HIIT', 'Valeria', 'intermedio', 18, 25],
    ['19:00', 'Box', 'Raúl', 'basico', 12, 20],
  ],
  Martes: [ /* ... */ ],
};

Si el gimnasio abre en domingo, añade 'Domingo' al arreglo DIAS y su lista en CLASES. Para que el cupo sea real, carga los datos desde una API:

const CLASES = await (await fetch('/api/clases?semana=actual')).json();

Puedes reutilizar la lógica de disponibilidad del proyecto Reservas con Node + MySQL para que los miembros reserven su lugar en cada clase.

Personalización visual

:root {
  --primario: #facc15;   /* amarillo eléctrico */
  --rojo: #ef4444;       /* etiqueta "Más popular", "Lleno" */
  --fondo: #0a0a0a;
  --superficie: #161616; /* tarjetas */
}

Otras combinaciones deportivas: verde neón #a3e635, naranja #f97316, rojo #dc2626, cian #22d3ee. Para un estudio de yoga o pilates, cambia a fondo claro, colores suaves (#a78bfa, #f0abfc) y quita el clip-path de los botones.

Tipografía

La plantilla usa Impact (incluida en Windows y macOS) para no depender de fuentes externas. Para un acabado más profesional, carga una fuente condensada de Google Fonts como Bebas Neue u Oswald y cambia las reglas font-family: Impact, ... por 'Bebas Neue', sans-serif.

Trucos CSS de esta plantilla

/* Texto con contorno */
.borde { -webkit-text-stroke: 2px var(--primario); color: transparent; }

/* Botón con esquinas cortadas en diagonal */
.btn { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }

/* Marquee infinito: el contenido se duplica y se desplaza el 50 % */
.franja-track { width: max-content; animation: deslizar 22s linear infinite; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* Imagen en gris que toma color al pasar el mouse */
.programa img { filter: grayscale(1); transition: filter .4s; }
.programa:hover img { filter: grayscale(0); }

Ideas para venderle más al cliente

1. Área de miembros con login (autenticación PHP o JWT en Node) para ver su rutina y reservar clases.
2. Pago de membresías en línea con Stripe o Mercado Pago (suscripciones recurrentes).
3. Registro de progreso: peso, medidas y fotos con gráficas.
4. Retos mensuales con tabla de clasificación para motivar a la comunidad.

Prueba gratis = prospectos

El formulario de "semana gratis" es el corazón comercial del sitio. Conéctalo a una hoja de Google, a un CRM o a tu backend y pide al gimnasio que dé seguimiento en menos de una hora: la velocidad de respuesta decide si el prospecto se inscribe.

La calculadora no es diagnóstico

Deja claro que el IMC es orientativo. No muestres recomendaciones médicas ni dietas específicas sin un profesional de la salud detrás.