NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **Tech Perla** (dominio techperla.com) que reproduzca el diseño visual y la estructura de la web analizada. Utiliza **HTML5**, **Tailwind CSS (CDN)** y **JavaScript vanilla** en un único archivo. El proyecto debe incluir las siguientes páginas y bloques:
---
### 1. Configuración global
- Enlace al CDN de Tailwind (`https://cdn.tailwindcss.com`).
- Fuente principal: **Inter**, importada desde Google Fonts.
- Paleta oscura:
- Fondo principal: `#0A0A0A`
- Fondo secundario/card: `#141414`
- Texto claro: `#F5F5F5`
- Accent primario: `#0D6EFD`
- Accent secundario: `#6C757D`
- Variables CSS personalizadas para colores y tipografía.
- Animaciones de aparición (`opacity` + `translateY`) usando clases `transition`, `duration-500` y `eas
6.459 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
6.459 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 CTA
- 1.2 Hero con fondo oscuro, título, subtítulo, botón de emergencia y barra de iconos sociales
- 1.3 Bloque "Sobre nosotros" con imagen a la izquierda, título, párrafos y logotipos de clientes
- 1.4 Bloque de servicios destacados con título, descripción y tarjetas (imagen, título, breve descripción, enlace "Learn More")
- 1.5 Footer con enlaces de sitio, enlaces legales y formularios de suscripción
ABOUT
- 1.1 Header reutilizado
- 1.2 Hero interno con título y subtítulo
- 1.3 Texto ampliado sobre la empresa y valores
- 1.4 Equipo o timeline (si existiese)
SERVICE
- 1.1 Header reutilizado
- 1.2 Listado de servicios con tarjetas similares a la home
- 1.3 CTA final para solicitar soporte
BLOG
- 1.1 Header reutilizado
- 1.2 Lista de artículos con imagen, título, extracto y enlace
- 1.3 Paginación
CONTACT
- 1.1 Header reutilizado
- 1.2 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 1.3 Información de contacto y mapa embed
PROMPTS RELACIONADOS · TECNOLOGÍA