BIENES RAÍCES · Claude Design · HTML

Serenidad Vital — Prompt de diseño web para Claude AI

★★★★★4,6 1.547 descargas

Estudios de bienestar, yoga y meditación Espacios tranquilos para conectar cuerpo y mente.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático en un solo archivo HTML que reproduzca el diseño visual y la estructura de la web original, pero con la marca ficticia "Serenidad Vital". Usa Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks). Mantén la siguiente paleta de colores: #F4F9F5 (fondo claro), #A8D5BA (verde suave), #2C5F2D (verde oscuro), #FFFFFF (blanco), #333333 (texto principal). Tipografía: Inter para títulos y body, peso 400‑600. 

**Header**: barra fija, fondo blanco translúcido, logo SVG placeholder, botón hamburguesa que muestra/oculta el menú vertical en móvil. Menú con enlaces: Inicio, Clases, Eventos, Horario, Sobre nosotros, Tienda, Blog. Botón destacado a "Comprar" con fondo verde oscuro y texto blanco.

**Hero** (home): sección a pantalla completa con video de fondo (use placeholder video URL), overlay de ondas verdes (SVG repetido). Texto central: "Vuelve a casa con tu cuerpo." con <em> en cursiva. Debajo, enlace a noticia destacada con ícono de flecha y etiqueta "Noticias".

**Sección CTA secundaria**: barra horizontal con tarjetas pequeñas que enlazan a todas las páginas internas (Home, About, First Time, Blog, Eventos, Tienda, Contacto, 404, etc.). Cada tarjeta muestra una miniatura de imagen placeholder y el nombre de la página.

**Footer**: fondo gris muy claro, logo pequeño, enlaces a redes (placeholder SVG), texto de copyright "© 2026 Serenidad Vital".

**Páginas internas** (About, Classes, Events, Timetable, Store, Blog, Contact): reutiliza el header y footer. Cada página incluye un contenedor principal con:
- About: imagen hero, título, párrafo descriptivo, grid de tarjetas de equipo (foto + nombre + rol).
- Classes: grid de tarjetas de clase con imagen, título, botón "Más info".
- Events: lista de eventos con miniatura, fecha y botón.
- Timetable: tabla de horarios semanales.
- Store: grid de productos con imagen, nombre, precio ficticio, botón.
- Blog: lista de artículos con imagen, categoría, extracto y paginación.
- Contact: formulario (nombre, email, mensaje) y mapa embed (Google Maps placeholder).

**Interactividad**: 
- Menú hamburguesa abre/cierra con transición de opacidad.
- Botones con efecto hover (transición de fondo a verde claro).
- Animaciones de entrada (fade‑in) para hero y secciones usando CSS @keyframes y clases Tailwind.
- Carousel opcional para testimonios (vanilla JS simple).

**Requisitos técnicos**: 
- Incluir `<script src="https://cdn.tailwindcss.com"></script>` en head.
- Añadir `<meta name="viewport" content="width=device-width, initial-scale=1">`.
- Todas las imágenes usan URLs de placeholder (https://via.placeholder.com/350).
- Estructura semántica con `<header>`, `<nav>`, `<section>`, `<footer>`.
- Código limpio, comentarios que indiquen cada bloque (e.g., <!-- Hero Home -->).
- Asegurar accesibilidad: atributos alt en imágenes, aria‑labels en botones, contraste adecuado.

Entrega el HTML completo listo para abrir en el navegador.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

3.276 caracteres · 51 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, menú hamburguesa y enlaces principales (Clases, Eventos, Horario, Sobre nosotros, Tienda, Blog)
1.2 Hero de vídeo de fondo, filtro de ondas verdes, título principal «Vuelve a casa con tu cuerpo» y enlace a noticia reciente
1.3 CTA secundario con enlaces a páginas internas (Home, About, First Time, Blog, Eventos, Tienda, Contacto, etc.)
1.4 Footer con logo pequeño, enlaces a redes sociales y texto de derechos

ABOUT

2.1 Barra de navegación reutilizada
2.2 Imagen de cabecera con texto introductivo
2.3 Texto descriptivo del estudio y valores
2.4 Equipo de profesionales en tarjetas
2.5 CTA a clases o contacto
2.6 Footer

CLASSES

3.1 Barra de navegación
3.2 Grid de tarjetas de clases con imágenes, título y botón "Más info"
3.3 Filtro por tipo de clase
3.4 Footer

EVENTS

4.1 Barra de navegación
4.2 Lista de eventos con miniatura, fecha y botón "Inscribirse"
4.3 Footer

TIMETABLE

5.1 Barra de navegación
5.2 Tabla semanal con horarios de sesiones
5.3 Footer

STORE

6.1 Barra de navegación
6.2 Grid de productos (ropa, accesorios, pases) con imágenes y botón "Añadir al carrito"
6.3 Footer

BLOG & NEWS

7.1 Barra de navegación
7.2 Lista de artículos con imagen, categoría y extracto
7.3 Paginación
7.4 Footer

CONTACT

8.1 Barra de navegación
8.2 Formulario de contacto (nombre, email, mensaje)
8.3 Mapa incrustado
8.4 Footer

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Serenidad Vital
Sector: Estudios de bienestar, yoga y meditación
Claim: Espacios tranquilos para conectar cuerpo y mente

Bloques de la home

1.1 Barra de navegación fija con logo, menú hamburguesa y enlaces principales
1.2 Hero de vídeo auto‑reproducción con superposición de título y enlace a noticia destacada
1.3 Sección de CTA secundaria (páginas y recursos) visible sólo en modo presentación
1.4 Footer minimalista con enlaces de redes y copyright

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada