BIENES RAÍCES · Claude Design · HTML

Aliviar Hogar — Prompt de diseño web para Claude AI

★★★★★4,7 4.413 descargas

Red de cuidado domiciliario para personas mayores y apoyo a familias cuidadoras Acompañamos a los mayores en casa, junto a quienes los quieren.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una landing page completa en un único archivo HTML autocontenido para una marca ficticia llamada 'Aliviar Hogar', una red española de cuidado domiciliario para personas mayores que acompaña también a las familias cuidadoras. Dominio aliviarhogar.com, contacto hola@aliviarhogar.com, año 2025. Claim: 'Acompañamos a los mayores en casa, junto a quienes los quieren'. Tono cálido, humano, respetuoso, en español de España, sin jerga marketinera y sin precios concretos.

STACK Y REQUISITOS TÉCNICOS
- Un solo archivo HTML.
- Tailwind CSS vía CDN (script de play CDN).
- JavaScript vanilla en un bloque <script> al final del body.
- Tipografías de Google Fonts: 'Fraunces' (serif, para titulares h1-h3) y 'Inter' (sans, para cuerpo y UI). Configurarlas en tailwind.config dentro de un <script> previo al CDN.
- Imágenes: usar https://images.unsplash.com con parámetros (mayores sonriendo en casa, manos entrelazadas, cuidadoras, escenas hogareñas luminosas).
- Iconos SVG inline simples (corazón, escudo, reloj, casa, hojas) o Lucide vía CDN.
- Responsive mobile-first, breakpoints md y lg.
- Animaciones suaves: fade-up al hacer scroll usando IntersectionObserver, y cambio de imagen al pasar el ratón sobre los tabs de servicios.
- Accesible: contraste correcto, aria-labels en botones, foco visible.

PALETA (usar como colores personalizados en tailwind.config)
- Crema fondo: #F4EEE4
- Crema claro: #FBF7F0
- Naranja terroso (acento principal): #D8643A
- Naranja suave: #E89A6E
- Verde profundo (secciones oscuras): #243B2C
- Verde oliva: #4F6B4A
- Texto oscuro: #1F1A14
- Gris cálido: #8B7F6F

TIPOGRAFÍA
- Titulares: Fraunces, peso 400-500, ligero italic en palabras de marca, tamaños generosos (clamp).
- Cuerpo: Inter 400/500, line-height holgado.
- Microtexto y etiquetas: Inter en mayúsculas tracking amplio para 'small-label'.

HEADER (sticky, fondo crema con leve blur al hacer scroll)
- Contenedor centrado, altura cómoda.
- Logotipo a la izquierda: marca de palabra 'Aliviar Hogar' con un pequeño icono circular naranja.
- Menú central con enlaces ancla: 'Nuestra red', 'Equipo', 'Comunidad', 'Servicios'.
- A la derecha: botón sólido naranja terroso con texto 'Reservar plan'.
- En móvil: menú hamburguesa que despliega panel.

SECCIONES DE LA HOME (en este orden)

1) HERO
- Fondo crema #F4EEE4.
- Contenido centrado, padding vertical amplio.
- H1 en dos líneas en Fraunces grande: primera línea 'Quieres más cuidado para quienes más quieres,', segunda línea 'súmate a Aliviar Hogar' con 'Aliviar Hogar' en color naranja terroso e italic.
- Subtítulo en Inter, gris cálido: 'La primera red de apoyo para familias cuidadoras, impulsada por profesionales del cuidado de mayores.'
- Sin botón en esta sección, solo respiración visual.

2) MANIFIESTO
- Fondo crema claro.
- Logotipo circular grande centrado (SVG con corazón estilizado) de unos 320px.
- Debajo, una frase en Fraunces centrada en tres líneas máximas: 'Cuidamos a los tuyos como cuidaríamos de los nuestros, con calma, dignidad y confianza.'

3) PUNTO DE DOLOR
- Fondo crema #F4EEE4.
- Titular grande centrado en Fraunces: 'Organizar el cuidado de un mayor en casa agota, confunde y desgasta el bolsillo.'
- Sin más elementos. Mucho aire.

4) SERVICIOS (dos columnas)
- Fondo blanco roto.
- Columna izquierda: titular 'Acompañamos su autonomía con un cuidado pensado a medida.' y tres tabs verticales apilados. Cada tab tiene título h6, descripción y una línea inferior animada al activarse.
  - Tab 1: 'Atención personalizada a domicilio' / 'Apoyo diario en higiene, vestido, comidas y recordatorios de medicación, ajustado al ritmo y gustos de cada persona.'
  - Tab 2: 'Seguimiento de salud y bienestar' / 'Control de constantes, revisiones de bienestar y coordinación con su médico de cabecera para anticipar cualquier cambio.'
  - Tab 3: 'Compañía y vida social' / 'Visitas amables, conversación, paseos y actividades para cuidar el ánimo y mantener la mente activa.'
- Columna derecha: imagen principal y dos imágenes superpuestas en posición absoluta que cambian de opacidad según el tab activo (hover/click).

5) BLOQUE DE REALIDAD (dos columnas)
- Fondo verde profundo #243B2C, texto en crema y blanco.
- Columna izquierda con titular grande en Fraunces: 'No imaginabas vivir esta situación,'.
- Columna derecha con titular: 'pero hoy es tu día a día.'
- Padding generoso, separador sutil.

6) INTRO DE LA SOLUCIÓN
- Fondo crema claro.
- Centrado: 'Por eso hemos creado' y debajo en gran tamaño naranja terroso italic: 'Aliviar Hogar.'

7) DESCRIPCIÓN DE LA PROPUESTA
- Fondo crema.
- Titular centrado en Fraunces: 'Vivir en casa con seguridad y dignidad, también en la vejez.'
- Párrafo amplio centrado en Inter: 'Reunimos cuidadoras de confianza, herramientas de apoyo y planes hechos a medida para que cada persona mayor mantenga su autonomía sin renunciar a su hogar ni a su forma de vivir.'

8) EQUIPO FUNDADOR
- Fondo verde profundo.
- Columna izquierda: titular 'La primera red doméstica diseñada para acompañar la autonomía de los mayores.'
- Columna derecha: párrafo de apoyo en blanco que amplía la idea con tono cálido.

9) ESTADÍSTICAS (grid 3x1 con tarjeta central destacada)
- Fondo crema.
- A la izquierda dos tarjetas apiladas: '97%' / 'familias satisfechas' y '180+' / 'cuidadoras formadas'.
- En el centro una tarjeta vertical grande con fondo verde profundo y texto crema: 'Más de 30.000€' / 'de ahorro medio anual estimado por familia'.
- A la derecha dos tarjetas apiladas: '24/7' / 'acompañamiento telefónico' y 'En 48 h' / 'plan personalizado en marcha'.
- Cada tarjeta clara con icono SVG arriba (corazón, escudo, reloj, calendario).

10) MISIÓN CENTRAL
- Fondo verde oliva o verde profundo.
- Columna izquierda: logotipo circular naranja grande.
- Columna derecha: titular en Fraunces blanco 'Construye el cuidado adecuado desde el principio.', dos párrafos en Inter blanco sobre acompañamiento y comunidad, y un botón outline crema con texto 'Conoce la comunidad'.

11) COMUNIDAD
- Fondo crema.
- Cabecera a dos columnas: titular 'Conoce a algunas de las personas que nos acompañan' y párrafo descriptivo + botón outline 'Sobre nosotras'.
- Grid de 3 tarjetas verticales con imagen Unsplash arriba, nombre ficticio y rol debajo:
  - 'Sra. Carmen Aguilar' / 'Usuaria desde 2023'
  - 'Javier Soriano' / 'Hijo cuidador'
  - 'Lucía Bermejo' / 'Especialista en mayores'
- Hover suave que eleva la tarjeta.

12) SOLUCIONES POR ETAPA
- Fondo crema claro.
- Titular: 'Soluciones para cada etapa del cuidado.'
- Grid de 4 tarjetas con icono, título y breve texto: 'Primeros pasos', 'Cuidado continuado', 'Situaciones complejas', 'Acompañamiento al final'. Cada una con un párrafo corto.

13) FOOTER
- Fondo verde profundo, texto crema.
- Cuatro columnas en desktop: marca con claim, enlaces de navegación, recursos (Comunidad, Blog, Guías), y contacto (hola@aliviarhogar.com, teléfono ficticio, dirección genérica en Madrid).
- Línea inferior con '© 2025 Aliviar Hogar' y enlaces a Aviso legal y Privacidad.

DETALLES FINALES
- Aplicar fade-up con IntersectionObserver a todos los bloques principales.
- Tabs de servicios: al pasar el ratón sobre cada tab, cambiar la imagen visible en la columna derecha mediante clases de opacidad.
- Cuidar el ritmo vertical: secciones con py-24 md:py-32.
- Contenedor máximo 1200px centrado.
- Asegurar que el resultado se vea acabado, equilibrado y emotivo, transmitiendo cercanía y confianza.

---

## 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>
```

7.778 caracteres · 136 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar fijo con logotipo, enlaces ancla y botón Reservar plan
1.2 Hero con doble titular y subtítulo
1.3 Manifiesto con logotipo circular central y frase en serif
1.4 Punto de dolor: titular centrado sobre fondo crema
1.5 Servicios con tabs verticales + imagen lateral cambiante
1.6 Reality check a dos columnas sobre fondo oscuro
1.7 Intro de solución con palabra de marca destacada
1.8 Descripción ampliada de la propuesta
1.9 Bloque equipo fundador sobre fondo verde
1.10 Grid de estadísticas (4 + 1 central destacada)
1.11 Misión con logotipo lateral y CTA secundario
1.12 Comunidad: cabecera + grid 3 miembros
1.13 Soluciones por etapa de cuidado
1.14 Footer

SERVICIOS

2.1 Navbar
2.2 Cabecera de página con titular y breve introducción
2.3 Listado detallado de servicios con icono, título y descripción
2.4 Bloque de proceso de contratación en 4 pasos
2.5 CTA final para reservar valoración
2.6 Footer

SOBRE NOSOTROS

3.1 Navbar
3.2 Cabecera con titular y manifiesto
3.3 Bloque historia de la marca con imagen y texto a dos columnas
3.4 Valores en grid de 3 tarjetas con icono
3.5 Equipo en grid de tarjetas con foto y rol
3.6 Cita destacada centrada
3.7 Footer

COMUNIDAD

4.1 Navbar
4.2 Cabecera con titular y descripción de la comunidad
4.3 Grid de testimonios de miembros con foto
4.4 Bloque de recursos y guías descargables
4.5 Formulario de alta sencillo
4.6 Footer

RESERVAR PLAN

5.1 Navbar
5.2 Cabecera con titular claro de la acción
5.3 Tres tarjetas de planes con características y CTA (sin precios concretos)
5.4 Formulario de contacto a dos columnas
5.5 FAQ con acordeón
5.6 Footer

CONTACTO

6.1 Navbar
6.2 Cabecera con titular y datos de contacto
6.3 Formulario amplio con campos y mensaje
6.4 Bloque con email, horario y zonas de cobertura
6.5 Footer

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Aliviar Hogar
Sector: Red de cuidado domiciliario para personas mayores y apoyo a familias cuidadoras
Claim: Acompañamos a los mayores en casa, junto a quienes los quieren

Bloques de la home

1.1 Barra de navegación fija con logotipo, enlaces ancla y botón de reserva
1.2 Hero con doble titular grande, palabra de marca destacada y subtítulo descriptivo
1.3 Sección manifiesto con logotipo circular central y frase en serif
1.4 Bloque de punto de dolor con titular centrado sobre fondo claro
1.5 Sección de servicios en dos columnas: tabs verticales con descripción + imagen lateral que cambia al pasar el ratón
1.6 Sección 'reality check' a dos columnas con titulares contrapuestos sobre fondo oscuro
1.7 Intro de la solución con titular en dos líneas y palabra de marca en color acento
1.8 Bloque de descripción ampliada de la propuesta de valor centrado
1.9 Sección de equipo fundador con titular grande y párrafo de apoyo sobre fondo verde
1.10 Grid de estadísticas con 4 tarjetas laterales y una tarjeta central destacada en oscuro
1.11 Misión central con logotipo lateral, titulares blancos y botón secundario
1.12 Sección de comunidad con cabecera + grid de 3 tarjetas de miembros con foto y rol
1.13 Bloque de características/soluciones por etapa de cuidado
1.14 Footer con marca, enlaces ancla, contacto y aviso legal

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