NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para **Formación Topacio**, un estudio ficticio de diseño y herramientas digitales para creativos. Utiliza **HTML5**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo.
**Alcance**: replicar la UI del sitio original pero con la nueva identidad, sin copiar textos ni imágenes reales. Genera contenido original en español (España). Incluye las siguientes páginas: Home, Contacto, Artículos, FAQ y Proyectos. Cada página debe contener los bloques descritos en la tabla.
**Stack**:
```html
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```
Usa **Alpine.js** solo para interacciones simples (menú móvil, acordeón FAQ,
4.744 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.744 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 Barra de navegación fija con logo circular, nombre del creador y menú ancla (Proyectos, Expertise, Artículos, FAQ, Contacto)
- 1.2 Hero: badge con ícono, título h1, texto de apoyo y animación de entrada
- 1.3 Sección de tarjetas (grid 3‑col) con icono, sub‑heading y párrafo descriptivo
- 1.4 Bloque de contratación: badge, h2, párrafo y dos botones (Contacto, Más información)
- 1.5 Galería de proyectos: cuadrícula 2‑col para móvil, 3‑col para escritorio, cada tarjeta con imagen, overlay y categoría
- 1.6 Footer: enlaces rápidos, redes sociales y datos de contacto breve
CONTACTO
- 2.1 Formulario simple (nombre, email, mensaje) con botón enviar y texto de agradecimiento
- 2.2 Información de contacto: email, teléfono y dirección ficticia
- 2.3 Mapa estático incrustado (placeholder)
ARTÍCULOS
- 3.1 Listado de artículos en formato tarjeta con imagen, título y extracto
- 3.2 Paginación simple al fondo
FAQ
- 4.1 Preguntas frecuentes en acordeón (título clicable, contenido colapsable)
PROYECTOS
- 5.1 Galería filtrable por categorías (Todos, 3D, Branding, UI)
- 5.2 Cada proyecto abre una página interna con galería de imágenes y descripción larga
PROMPTS RELACIONADOS · EDUCATION
