NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Marketing Jota** (agencia digital) usando **HTML estático**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. Reproduce fielmente la estructura y estilo descritos:
- **Paleta de colores**: #0A0A0A (negro profundo), #FFFFFF (blanco), #F5A623 (ámbar vibrante), #E5E5E5 (gris claro), #1A73E8 (azul enlace).
- **Tipografía**: Fuente principal "Inter" (sans‑serif) para títulos y cuerpo, peso 400‑700, tamaños responsive (h1 4xl, h2 3xl, h3 2xl, p base). Utiliza la variante "Inter" de Google Fonts.
### Header
- barra sticky con fondo blanco y sombra ligera.
- logo a la izquierda (placeholder SVG).
- menú horizontal centrado con enlaces: Home, About, Services, Projects, Blog, Pages (dropdown con items ficticios).
- botón CTA "So
5.178 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
5.178 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 con logo, menú, botón CTA y carrito
- 1.2 Hero con título, descripción y botón principal
- 1.3 Bloque de servicios (3 columnas) con icono, título y descripción breve
- 1.4 Galería de proyectos (grid 3‑col) con imágenes y overlay
- 1.5 Testimonios (slider de 2‑3 citas)
- 1.6 Blog reciente (tarjetas 2 columnas)
- 1.7 Footer con información de contacto, enlaces rápidos, redes sociales y formulario de newsletter
ABOUT
- 2.1 Cabecera reutilizada
- 2.2 Bloque 'Sobre mí' con foto, párrafo y valores
- 2.3 Hitos / timeline
- 2.4 Equipo (cards)
- 2.5 CTA contacto
SERVICES
- 3.1 Cabecera reutilizada
- 3.2 Lista de servicios en tarjetas con ícono y detalle
- 3.3 Proceso de trabajo paso a paso
- 3.4 Preguntas frecuentes (accordion)
- 3.5 CTA presupuesto
PROJECTS
- 4.1 Cabecera reutilizada
- 4.2 Filtro de categorías
- 4.3 Grid de proyectos (4 columnas) con hover overlay
- 4.4 Modal detalle proyecto
- 4.5 CTA ver más
BLOG
- 5.1 Cabecera reutilizada
- 5.2 Lista de artículos (tarjetas con imagen, título, extracto, meta)
- 5.3 Paginación
- 5.4 Sidebar con categorías y newsletter
CONTACT
- 6.1 Cabecera reutilizada
- 6.2 Formulario de contacto (nombre, email, mensaje, botón)
- 6.3 Mapa incrustado
- 6.4 Información de oficina y redes
CART (modal)
- 7.1 Lista de productos en carrito con miniatura, opciones, cantidad y precio
- 7.2 Subtotal y botones de checkout / continuar comprando
PROMPTS RELACIONADOS · AGENCIA DIGITAL
