NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Campus Mica" (campusmica.com) usando HTML estático, TailwindCSS vía CDN y JavaScript vanilla en un solo archivo. Reproduce el diseño visual y la estructura de la plantilla Webflow analizada, sin copiar texto literal.
**Alcance**: Página HOME y páginas secundarias (About, Services, Projects, Shop, Blog, Contact) con los bloques enumerados en la tabla. Implementar header fijo con logo SVG, menú horizontal, dropdown "Pages", botón de carrito que abre modal, y versión móvil con botón hamburguesa. Footer con cuatro columnas de enlaces, redes sociales y datos de contacto.
**Paleta de colores** (extraída del original):
- #0A0A0A (negro profundo para texto principal)
- #FFFFFF (blanco puro para fondos)
- #F5F5F5 (gris claro para secciones de fo
5.082 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.082 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 Header con logo, menú principal y botón de carrito
- 1.2 Hero con título destacado, subtítulo y botón principal
- 1.3 Bloque "Sobre mí" con texto descriptivo y foto
- 1.4 Sección de Servicios en tarjetas con iconos
- 1.5 Galería de Proyectos tipo grid
- 1.6 Testimonios en carrusel
- 1.7 Llamada a la acción final con formulario de contacto
- 1.8 Footer con enlaces, redes sociales y datos de contacto
ABOUT
- 2.1 Header (reutilizado)
- 2.2 Hero secundario con foto y texto institucional
- 2.3 Historia y valores en columnas
- 2.4 Equipo en tarjetas
- 2.5 CTA para contactar
- 2.6 Footer
SERVICES
- 3.1 Header
- 3.2 Listado de servicios en tarjetas con iconos y breve descripción
- 3.3 Proceso de trabajo en pasos numerados
- 3.4 CTA para solicitar presupuesto
- 3.5 Footer
PROJECTS
- 4.1 Header
- 4.2 Filtro de categorías
- 4.3 Grid de proyectos con hover overlay
- 4.4 Modal de detalle del proyecto
- 4.5 Footer
SHOP
- 5.1 Header
- 5.2 Banner promocional
- 5.3 Grid de productos con tarjetas (imagen, nombre, precio, botón "Añadir")
- 5.4 Carrito modal (reutilizado)
- 5.5 Footer
BLOG
- 6.1 Header
- 6.2 Lista de artículos con imagen, título, extracto y fecha
- 6.3 Paginación
- 6.4 Footer
CONTACT
- 7.1 Header
- 7.2 Formulario de contacto (nombre, email, mensaje, botón envío)
- 7.3 Información de contacto y mapa embebido
- 7.4 Footer
PROMPTS RELACIONADOS · EDUCATION
