Landing profesional para clases de running

Tipo de aplicación

Receta / súper prompt

Receta

# Objetivo
Construí una landing page profesional, moderna, responsive y lista para publicar para una persona que ofrece clases particulares de running. La persona que use esta receta no necesita conocimientos de programación: debe poder copiar y pegar este prompt en un modelo capaz de generar código y obtener el proyecto completo.

# Instrucciones para el modelo
Actuá como diseñador UX/UI senior y desarrollador frontend. Generá una landing page completa para un entrenador/a que ofrece clases particulares de running.

Antes de generar el código, si el usuario no proporcionó datos propios, usá placeholders claramente identificables y fáciles de reemplazar. No inventes certificaciones, testimonios, precios, resultados deportivos ni datos de contacto reales.

## Datos editables
- Nombre del entrenador: [TU NOMBRE]
- Ciudad/zona: [TU ZONA]
- WhatsApp o contacto: [TU CONTACTO]
- Instagram: [TU INSTAGRAM]
- Precio o modalidad: [TU PRECIO/MODALIDAD]
- Foto principal: [TU FOTO]
- Experiencia/certificaciones: [TU EXPERIENCIA REAL]

## Diseño
Elegí una estética deportiva premium y enérgica, evitando apariencia de plantilla genérica. Fondo predominantemente claro con secciones oscuras de alto contraste, tipografía sans serif moderna, acentos naranja/coral y negro grafito, mucho espacio en blanco, fotografías grandes de running urbano y detalles gráficos inspirados en ritmo, distancia y movimiento. Debe transmitir acompañamiento personal, progreso y confianza.

## Estructura obligatoria
1. Header simple con nombre/marca, navegación por anclas y CTA “Reservar una clase”.
2. Hero potente con titular orientado al beneficio, subtítulo, CTA principal y CTA secundario. Incluir espacio para fotografía real del entrenador o entrenamiento.
3. Sección “Entrená con un plan hecho para vos” con 3 beneficios concretos.
4. Sección de servicios: iniciación al running, mejora de ritmo/resistencia y preparación para objetivos/carreras. No afirmar resultados garantizados.
5. Sección “Cómo funciona” en 3 pasos: contacto/evaluación inicial, plan, seguimiento.
6. Sección sobre el entrenador con espacio para biografía, experiencia y certificaciones reales.
7. Sección de testimonios preparada para que el propietario agregue testimonios reales. Si no hay testimonios, mostrar placeholders explícitos que NO parezcan opiniones reales.
8. Preguntas frecuentes: nivel necesario, lugar de entrenamiento, frecuencia, qué llevar y cómo reservar.
9. CTA final destacado para contactar/reservar.
10. Footer con contacto, navegación y el texto exacto: “Creado por Daraforce · Publicado en Argente.blog”.

## Requisitos técnicos
- Entregá un proyecto completo y ejecutable, no fragmentos.
- Preferí React + Vite + CSS moderno o Tailwind CSS si el entorno lo soporta. Si el usuario pide máxima portabilidad, generá HTML, CSS y JavaScript sin dependencias.
- Mobile-first y responsive en móvil, tablet y escritorio.
- Accesibilidad: HTML semántico, contraste suficiente, navegación por teclado, foco visible, labels, alt text y prefers-reduced-motion.
- Buen SEO básico: title, meta description, Open Graph y estructura correcta de headings.
- Rendimiento: evitar dependencias innecesarias, lazy loading de imágenes no críticas y dimensiones de imagen definidas.
- No usar claves API, secretos ni servicios pagos obligatorios.
- El CTA de contacto debe funcionar mediante enlace configurable (por ejemplo WhatsApp, email o formulario sin backend). No inventar destinos reales.
- Evitar sliders y animaciones excesivas. Usar microinteracciones discretas.

## Entrega
1. Mostrá primero una lista corta de los campos que el usuario debe reemplazar.
2. Entregá todos los archivos necesarios con su ruta y contenido completo.
3. Incluí instrucciones extremadamente simples para ejecutar localmente y publicar.
4. Indicá dónde reemplazar textos, imágenes y datos de contacto.
5. Verificá que no haya enlaces rotos, imports inexistentes, placeholders presentados como datos reales ni errores evidentes.
6. Terminá con un checklist de publicación para una persona no técnica.

No describas solamente la landing: construí el código completo.

Resultado esperado

Una landing page profesional de clases particulares de running, responsive y accesible, con código completo, campos fáciles de personalizar e instrucciones de publicación para una persona sin conocimientos técnicos.

Estado inicial

El usuario solo necesita copiar la receta en un modelo de generación de código y reemplazar sus datos personales, fotografías, contacto, experiencia y precios cuando corresponda.

Stack

• React
• Vite
• CSS
• HTML
• JavaScript

Acerca del recurso