NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Instituto Faro** (dominio institutofaro.com) usando **HTML estático**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. El proyecto debe replicar el diseño visual y estructural del sitio analizado, respetando estos requisitos:
---
### General
- Utiliza la paleta de colores: #0A0A0A (fondo principal), #FFFFFF (texto), #1A73E8 (enlaces y botones primarios), #F5F5F5 (fondos secundarios), #E0E0E0 (bordes y divisores).
- Tipografía: **Inter** (Google Fonts) para encabezados y cuerpo, peso 400/500/600 según jerarquía.
- Diseño responsive móvil‑first, con breakpoint md (768px) para layout de escritorio.
- Todas las clases deben ser de Tailwind (ej. `flex`, `grid`, `gap-6`).
- No usar frameworks externos ni dependencias de Webf
5.146 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.146 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Cabecera fija con logo, menú principal, dropdown de páginas, botones de registro y carrito.
- 1.2 Hero principal con título destacado, subtítulo y botones de registro/descarga.
- 1.3 Bloque de características en cards con iconos y texto descriptivo.
- 1.4 Sección de testimonios con citas y foto de usuarios.
- 1.5 Blog destacado con tarjetas de artículos recientes.
- 1.6 Footer con información de empresa, enlaces útiles y redes sociales.
ABOUT US
- 2.1 Cabecera reutilizada.
- 2.2 Hero interno con título y párrafo introductorio.
- 2.3 Historia de la empresa en timeline.
- 2.4 Equipo con tarjetas de perfil.
- 2.5 Valores y misión.
- 2.6 Footer reutilizado.
FEATURES
- 3.1 Cabecera reutilizada.
- 3.2 Hero de características con encabezado.
- 3.3 Grid de características detalladas con iconos y descripciones.
- 3.4 Comparativa de planes.
- 3.5 FAQ accordion.
- 3.6 Footer reutilizado.
BLOG
- 4.1 Cabecera reutilizada.
- 4.2 Lista de artículos en formato tarjeta con imagen, título, excerpt y botón leer más.
- 4.3 Sidebar con categorías y posts recientes.
- 4.4 Footer reutilizado.
CONTACT
- 5.1 Cabecera reutilizada.
- 5.2 Formulario de contacto con campos nombre, email, asunto y mensaje.
- 5.3 Mapa incrustado.
- 5.4 Información de contacto y redes.
- 5.5 Footer reutilizado.
PROMPTS RELACIONADOS · EDUCACIÓN
