SAAS / STARTUP · Claude Design · HTML

Nexura Payments — Prompt de diseño web para Claude AI

★★★★★4,7 3.743 descargas

Plataforma fintech de gestión y transferencia de fondos Facilitamos movimientos de capital seguros y sencillos.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia **Nexura Payments** (plataforma SaaS fintech) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Mantén la estructura y estilo visual del diseño analizado: 
- **Paleta de colores**: #0A0F24 (azul oscuro), #1E293B (gris azul), #3B82F6 (azul primario), #F3F4F6 (gris claro), #FFFFFF (blanco). 
- **Tipografía**: Inter (cargar desde Google Fonts) para todo el cuerpo, encabezados en **Montserrat** bold. 
- **Header**: barra fija, logo a la izquierda, tres menús desplegables (Soluciones, Plataforma, Empresa) con icono flecha, enlaces a Recursos y Centro de ayuda, icono de carrito con badge. Usa `flex`, `items-center`, `space-x-6`. Implementa dropdowns con JavaScript simple (toggle `hidden`). 
- **Hero**: sección ocupando 100vh, fondo degradado azul oscuro → azul primario, título grande (text-5xl md:text-6xl, color blanco), subtítulo gris claro, dos botones primary (bg-blue-500) y secondary (border-white). 
- **Bloque 3**: grid de 3 columnas (md:grid-cols-3) con tarjetas de característica, icono en círculo azul claro, título y descripción centrados. 
- **Bloque 4**: sección de soluciones con 2 columnas, imagen placeholder a la derecha, lista de tarjetas verticales con icono y breve texto. 
- **Bloque 5**: carrusel de testimonios (mínimo 3), usar `overflow-x-auto` y `snap-x snap-mandatory`. Cada slide: avatar circular, nombre, comentario, rating estrellas. 
- **Bloque 6**: CTA centrado con fondo gris claro, título, párrafo y botón primary. 
- **Footer**: fondo #0A0F24, 4 columnas de enlaces, iconos de redes sociales (SVG), texto de copyright pequeño. 
- **Interactividad**: dropdowns, carrusel scroll, botón de carrito que abre modal simple con lista de productos (estructura estática). Todos los componentes deben ser accesibles (roles, aria‑labels). 
- **Responsividad**: utiliza clases responsivas de Tailwind para adaptar a móvil (colapsar navbar en menú hamburguesa, grid a una columna, etc.). 
- **Requisitos técnicos**: incluir `<script src="https://cdn.tailwindcss.com"></script>` y `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700&display=swap" rel="stylesheet">`. Todo el CSS debe generarse con clases Tailwind, sin archivos externos. El JavaScript debe estar al final del body y manejar los toggle de menú, carrito y scroll del carrusel. Entrega el código listo para copiar‑pegar en un archivo `index.html`.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.808 caracteres · 30 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, dropdowns y acceso al carrito
2.1 Hero principal con título, subtítulo y botones CTA
3.1 Cuadrícula de características destacadas con iconos y descripciones
4.1 Sección de soluciones específicas (transferencias, control de gasto, multi‑moneda)
5.1 Testimonios de clientes en formato carrusel
6.1 Llamada a la acción para probar la plataforma
7.1 Footer con enlaces a empresa, recursos, contacto y redes sociales

SOLUCIONES

1.1 Encabezado de página con título y breadcrumb
2.1 Lista de tarjetas descriptivas de cada solución (icono, nombre, breve texto)
3.1 CTA secundario y enlaces a documentación

RECURSOS

1.1 Header interno con navegación de blog
2.1 Grid de artículos destacados con imagen, título y excerpt
3.1 Paginación simple

CONTACTO

1.1 Formulario de contacto con campos nombre, email, mensaje y botón enviar
2.1 Información de soporte y enlaces a ayuda

FOOTER

1.1 Columnas de enlaces (Empresa, Producto, Legal, Redes sociales)
2.1 Copyright y política de privacidad

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Nexura Payments
Sector: Plataforma fintech de gestión y transferencia de fondos
Claim: Facilitamos movimientos de capital seguros y sencillos

Bloques de la home

1.1 Barra de navegación fija con logo, dropdowns y acceso al carrito
2.1 Hero principal con título, subtítulo y botones CTA
3.1 Cuadrícula de características destacadas con iconos y descripciones
4.1 Sección de soluciones específicas (transferencias, control de gasto, multi‑moneda)
5.1 Testimonios de clientes en formato carrusel
6.1 Llamada a la acción para probar la plataforma
7.1 Footer con enlaces a empresa, recursos, contacto y redes sociales

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada

Nexura Payments — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

SOLUCIONES

RECURSOS

CONTACTO

FOOTER

Otros prompts de la misma categoría

JurisNova

Kinetix Flow

KitePulse

Lumen Docs