NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crear una web completa para la marca ficticia Store Polar (storepolar.com) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La página principal debe reproducir el siguiente layout sin copiar texto ni imágenes originales:
- Paleta de colores: fondo #FFFFFF, texto principal #212121, acentos #E0A4A4 (rosa suave) y #3A3A3A (gris oscuro). Utilizar Tailwind extendiendo la configuración con colores personalizados.
- Tipografía: "Inter" para cuerpos y "Playfair Display" para encabezados, importadas vía Google Fonts.
- Header: barra fija, logo placeholder (SVG simple), menú horizontal con enlaces Home, About, Shop, Contact y botón de carrito con icono SVG y contador.
- Hero: sección full‑width con imagen de fondo de stock (url placeholder), overlay semi‑transparente, tí
4.027 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.027 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, navegación principal y botón de carrito modal
- 1.2 Hero principal con fondo de imagen, título grande y llamado a acción
- 1.3 Bloque de colecciones destacadas en cuadrícula de tres columnas
- 1.4 Sección de ventajas con íconos y texto descriptivo en fila
- 1.5 Testimonios en carrusel horizontal
- 1.6 Área de suscripción al boletín con campo de email
- 1.7 Footer con enlaces institucionales, políticas y redes sociales
ABOUT
- 1.1 Cabecera reutilizada
- 1.2 Hero interno con título y texto descriptivo
- 1.3 Historia de la marca en dos columnas (imagen + texto)
- 1.4 Equipo en tarjetas con foto y breve biografía
- 1.5 Valores en bloques con íconos
- 1.6 Footer reutilizado
SHOP
- 1.1 Cabecera reutilizada
- 1.2 Filtros lateral (categorías, precios, marcas)
- 1.3 Lista de productos en cuadrícula responsive
- 1.4 Paginación inferior
- 1.5 Footer reutilizado
PRODUCT
- 1.1 Cabecera reutilizada
- 1.2 Galería de imágenes del producto con zoom
- 1.3 Detalle del producto: título, precio, descripción corta, selector de variantes
- 1.4 Botón añadir al carrito y botón comprar ahora
- 1.5 Sección de productos relacionados en carrusel
- 1.6 Footer reutilizado
CART
- 1.1 Cabecera reutilizada
- 1.2 Modal de carrito con lista de artículos, cantidades editables y precios
- 1.3 Subtotal y botones de continuar compra o cerrar
- 1.4 Footer minimalista
CONTACT
- 1.1 Cabecera reutilizada
- 1.2 Formulario de contacto con campos nombre, email, mensaje
- 1.3 Mapa incrustado y datos de contacto
- 1.4 Footer reutilizado
PROMPTS RELACIONADOS · E-COMMERCE
