SALUD Y MEDICINA · Claude Design · HTML

Sonrisalud — Prompt de diseño web para Claude AI

★★★★★4,7 2.952 descargas

Clínica dental de alta calidad Cuidamos tu sonrisa cada día.

↓ 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 de una clínica dental ficticia llamada **Sonrisalud** usando **HTML**, **Tailwind CSS CDN** y **JavaScript vanilla** en un solo archivo. La web debe reproducir el diseño estructural y visual del template analizado, pero con todo el contenido original en español de España.

**Alcance**
- Página principal (HOME) con los bloques enumerados en la clave "secciones".
- Páginas adicionales: About, Services, Contact, cada una con la estructura mostrada en la tabla.
- Navegación sticky con logo a la izquierda y mega‑menú que despliega sub‑páginas (Pages, Services, Conditions, Treatments, Cases, Equipment, Blog, Gallery, Contact, Locations). Cada sub‑item muestra una mini‑imagen y descripción al pasar el ratón.
- Hero: fondo de imagen‑de‑stock ligera, título grande, subtítulo y botón primario “Reserva tu cita”.
- Sección de servicios: cuadrícula de 4 columnas, iconos circulares, título y texto corto.
- Condiciones: tarjetas con imagen de fondo, título y párrafo breve; estilo hover eleva la tarjeta.
- Testimonios: carrusel automático con controles de navegación (prev/next) y paginación dots.
- Galería de casos: filtro por categoría (Todos, Estética, Ortodoncia, Implantes) y rejilla de imágenes con overlay al hacer hover.
- CTA reserva: barra llena de ancho con fondo de color principal y botón contrastante.
- Footer: columnas con Información de contacto, Enlaces rápidos, Horario y redes sociales (íconos SVG). Fondo oscuro, texto claro.

**Paleta de colores**
- #0D3B66 (azul marino profundo) 
- #1A936F (verde azulado) 
- #FFBC42 (ámbar) 
- #FAF0CA (crema claro) 
- #F4F4F9 (gris muy claro para fondos)

**Tipografía**
- Fuente principal: `Montserrat` (peso 400, 600, 700) – importada desde Google Fonts.
- Fuente secundaria para textos largos: `Open Sans` (peso 400).

**Componentes interactivos**
- Mega‑menú con animación de deslizamiento y fade‑in (CSS transitions).
- Carrusel de testimonios usando `setInterval` y controles de click.
- Filtro de galería con clases `active` que muestran/ocultan items mediante `display: none`.
- Botón de reserva abre un modal sencillo con formulario (nombre, email, teléfono, fecha) y validación mínima.

**Requisitos técnicos**
- Todo el markup debe ser semántico (header, nav, main, section, article, footer).
- Utiliza clases de Tailwind para spacing, colores, tipografía y flex/grid.
- Añade atributos `aria-` para accesibilidad en menús y botones.
- El archivo HTML debe incluir los enlaces a Tailwind CDN y a Google Fonts en el `<head>`.
- No usar imágenes externas pesadas; emplear URLs de placeholder (`https://picsum.photos/seed/.../800/600`) donde corresponda.
- El script debe estar al final del body y encapsularse en IIFE para evitar contaminación global.

Genera el código completo listo para copiar y pegar.

---

## 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.143 caracteres · 57 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con logo, menú mega‑desplegable y botón de contacto
1.2 Hero con fondo de imagen y llamada a la acción
1.3 Bloque de servicios destacados con iconos y breve descripción
1.4 Sección de condiciones (tarjetas con imagen, título y texto corto)
1.5 Testimonios en carrusel
1.6 Galería de casos con filtro por categoría
1.7 Llamada a la acción de reserva de cita
1.8 Footer con información de contacto, enlaces rápidos y redes sociales

ABOUT

2.1 Header (heredado)
2.2 Hero de presentación del equipo
2.3 Misión, visión y valores en tres columnas
2.4 Imagen del centro y descripción
2.5 Footer (heredado)

SERVICES

3.1 Header (heredado)
3.2 Lista de servicios con iconos y breve texto
3.3 Bloque de beneficios y certificaciones
3.4 CTA para solicitar información
3.5 Footer (heredado)

CONTACT

4.1 Header (heredado)
4.2 Formulario de contacto con campos básicos
44 Mapa incrustado
4.3 Datos de contacto y horario
4.4 Footer (heredado)

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Sonrisalud
Sector: Clínica dental de alta calidad
Claim: Cuidamos tu sonrisa cada día

Bloques de la home

1.1 Header con logo, menú mega‑desplegable y botón de contacto
1.2 Hero con fondo de imagen y llamada a la acción
1.3 Bloque de servicios destacados con iconos y breve descripción
1.4 Sección de condiciones (tarjetas con imagen, título y texto corto)
1.5 Testimonios en carrusel
1.6 Galería de casos con filtro por categoría
1.7 Llamada a la acción de reserva de cita
1.8 Footer con información de contacto, enlaces rápidos y redes sociales

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

Sonrisalud — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT

SERVICES

CONTACT

Otros prompts de la misma categoría

Lirio Sereno

Lumara Salud

Lumara Studio

Lumare Skin Studio