SAAS / STARTUP · Claude Design · HTML

Vellora Pay — Prompt de diseño web para Claude AI

★★★★★4,7 4.339 descargas

Plataforma de pagos digitales para negocios y particulares Cobros y pagos sin fricción, con control de principio a fin.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera una web completa de una sola página (single-file HTML) para una marca ficticia llamada **Vellora Pay**, una plataforma SaaS de pagos digitales para negocios y particulares. Claim: 'Cobros y pagos sin fricción, con control de principio a fin'. Dominio vellorapay.com, email hola@vellorapay.com, año 2025. Todo el copy debe estar en español de España, original, claro y sin jerga marketinera, sin precios concretos.

## Stack técnico
- Un único archivo HTML autocontenido.
- Tailwind CSS vía CDN (script de play CDN).
- JavaScript vanilla en un <script> al final del body para: menú overlay, acordeón FAQ, carrusel de testimonios, toggle de precios mensual/anual y contadores animados al hacer scroll.
- Iconos en SVG inline (line icons de 1.5px, estilo Phosphor/Lucide).
- Imágenes: usar placeholders de https://images.unsplash.com/ con queries coherentes (oficinas modernas, dispositivos, retratos) y mockups simulados con divs estilizados (no imágenes externas para los dashboards).

## Paleta
- Fondo base: #F6F5F1 (off-white cálido)
- Superficie oscura: #0E0E10
- Texto principal: #111113
- Texto secundario: #5B5B63
- Acento principal: #4F46E5 (índigo eléctrico) usado con moderación en botones y detalles
- Acento secundario: #C7F26B (lima suave) solo para badges/realces puntuales
- Bordes y separadores: #E6E4DC

## Tipografía
- Titulares: 'Instrument Serif' o 'Fraunces' para algún detalle editorial puntual (eyebrow del hero), y para el resto 'Inter' o 'Geist' sans serif.
- Tamaños: hero h1 entre 72-96px desktop, secciones h2 56-64px, body 16-18px, line-height holgado (1.5-1.7).
- Tracking ligeramente negativo en titulares.

## Estructura de la página (Home)

**1.1 Header sticky**: barra superior con padding generoso. Logo de Vellora Pay a la izquierda (texto + pequeño glifo circular). A la derecha, un único botón cuadrado con icono de rejilla 3x3 de puntos. Al pulsar, se despliega un overlay a pantalla completa con dos columnas: izquierda con 5 enlaces verticales grandes (Producto, Nosotros, Precios, Blog, Contacto), cada uno con icono lineal a la izquierda y flecha diagonal a la derecha; columna derecha con una imagen editorial. Fondo del overlay #0E0E10, texto claro.

**1.2 Hero**: a pantalla completa. Eyebrow pequeño en serif itálico 'una infraestructura, todos tus cobros'. Titular en dos líneas: 'Mueve dinero / con la calma de quien controla'. Subtítulo de 2 líneas explicando que conecta cobros, pagos y conciliación en una sola interfaz. Dos CTAs: principal sólido índigo 'Empezar gratis' y secundario fantasma con borde 'Hablar con ventas'. Debajo, mockup de panel de control flotando (card blanca con sombra suave, mostrando una tabla de transacciones inventadas y un mini gráfico de líneas SVG).

**1.3 Banda de partners**: texto pequeño centrado 'Equipos financieros que ya operan con nosotros' y debajo 6 logos ficticios en gris claro (puedes generarlos como nombres en sans serif: Nordlay, Caput, Mireia&Co, Trazo, Vela Studio, Hemisferio).

**1.4 Grid de features 2x2**: título de sección 'Todo lo que esperas de una pasarela, sin lo que sobra'. Cuatro tarjetas con icono lineal, título corto y 2 líneas de descripción: Cobros recurrentes, Conciliación automática, Antifraude adaptativo, API y webhooks.

**1.5 Cómo funciona**: tres pasos horizontales (01, 02, 03) con línea de puntos conectándolos. Pasos: 'Conecta tu cuenta', 'Configura tus reglas', 'Empieza a cobrar'. Cada paso con título y 2 líneas.

**1.6 Producto destacado alternado**: dos bloques. Primero texto a la izquierda ('Conciliación que se explica sola') y card visual a la derecha con un diagrama simulado. Segundo bloque invertido ('Pagos masivos sin hojas de cálculo').

**1.7 KPIs**: fondo oscuro #0E0E10, texto claro. Cuatro cifras grandes con etiqueta debajo: '98,7% tasa de aprobación', '24/7 soporte humano', '+40 métodos de pago', '<1,2s tiempo medio de respuesta'. Animar los números al entrar en viewport.

**1.8 Testimonios**: carrusel horizontal con flechas. Cada slide: cita larga en serif, avatar circular, nombre, cargo y empresa ficticia. Mínimo 3 testimonios.

**1.9 Planes**: tres tarjetas (Inicio, Crecimiento, Escala). Plan central destacado con borde índigo y badge 'Recomendado'. Lista de 6-8 features con check, sin precios numéricos (usar 'Consultar' o 'A medida'). CTA por plan.

**1.10 FAQ**: acordeón con 6 preguntas habituales sobre seguridad, integraciones, soporte, exportación de datos, países disponibles y onboarding.

**1.11 Blog**: grid de 3 tarjetas con imagen, categoría en badge lima, titular y fecha. Títulos inventados sobre conciliación, PCI DSS y open banking.

**1.12 CTA final**: banda ancha con fondo #0E0E10, titular grande 'Empieza hoy, ajusta mañana' y botón índigo.

**1.13 Footer**: cuatro columnas (Producto, Empresa, Recursos, Legal) más columna con logo y claim. Barra inferior con © 2025 Vellora Pay, selector de idioma (ES/EN/PT) y 4 iconos sociales.

## Requisitos técnicos
- Mobile-first y responsive completo (breakpoints sm/md/lg/xl).
- Animaciones sutiles con transition y transform; aparecer al hacer scroll con IntersectionObserver.
- Accesibilidad: roles ARIA en menú overlay, acordeón y carrusel; foco visible.
- Sin librerías externas más allá de Tailwind CDN.
- Código limpio, comentado por secciones.
- No incluir lorem ipsum: todo el texto debe ser real y coherente con la marca.

---

## 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>
```

5.706 caracteres · 75 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header sticky con menú overlay
1.2 Hero con titular, doble CTA y mockup
1.3 Banda de logos de partners
1.4 Grid 2x2 de features con iconos
1.5 Cómo funciona en 3 pasos
1.6 Bloque producto destacado alternado
1.7 Sección de 4 KPIs
1.8 Carrusel de testimonios
1.9 Tabla de 3 planes
1.10 FAQ en acordeón
1.11 Grid de 3 entradas de blog
1.12 CTA final ancho completo
1.13 Footer multi-columna

PRODUCTOS

2.1 Header
2.2 Hero de producto con breadcrumb y titular
2.3 Tabs de categorías de producto (Cobros, Pagos, Suscripciones, API)
2.4 Detalle por tab con texto + visual
2.5 Grid de integraciones (logos en tarjetas)
2.6 Bloque de seguridad con 3 sellos/certificaciones
2.7 CTA intermedio
2.8 Footer

SOBRE NOSOTROS

3.1 Header
3.2 Hero con misión y foto editorial
3.3 Bloque manifiesto con 3 valores
3.4 Timeline de hitos de la empresa
3.5 Grid del equipo con foto, nombre y rol
3.6 Sección de inversores / partners
3.7 CTA careers
3.8 Footer

PRECIOS

4.1 Header
4.2 Hero corto con toggle mensual/anual
4.3 Tabla de 3 planes con CTA
4.4 Tabla comparativa detallada de funcionalidades
4.5 FAQ específico de precios
4.6 CTA final
4.7 Footer

BLOG

5.1 Header
5.2 Hero blog con post destacado
5.3 Filtro por categorías
5.4 Grid de 9 artículos paginado
5.5 Bloque newsletter inline
5.6 Footer

CONTACTO

6.1 Header
6.2 Hero contacto con dos columnas: formulario y datos
6.3 Tarjetas con canales (ventas, soporte, prensa)
6.4 Mapa o imagen de oficinas
6.5 CTA final
6.6 Footer

PROMPTS RELACIONADOS · SAAS / STARTUP

Otros prompts de la misma categoría

Ficha de marca

Nombre: Vellora Pay
Sector: Plataforma de pagos digitales para negocios y particulares
Claim: Cobros y pagos sin fricción, con control de principio a fin

Bloques de la home

1.1 Header sticky con logo a la izquierda y un único botón-icono tipo rejilla (9 puntos) que despliega un menú overlay con enlaces verticales acompañados de iconos y una imagen lateral
1.2 Hero a pantalla completa con eyebrow pequeño, titular grande en dos líneas, subtítulo descriptivo, doble CTA (principal sólido + secundario fantasma) y mockup flotante de panel de control
1.3 Banda de logos de clientes/partners en escala de grises con título corto encima
1.4 Bloque de features en grid 2x2 con iconos lineales, título y microcopy en cada celda
1.5 Sección 'cómo funciona' en tres pasos numerados horizontales con línea conectora
1.6 Bloque producto destacado con texto a un lado y card visual de transacción al otro, alternando lados
1.7 Sección de métricas/contadores (4 KPIs grandes con número y etiqueta)
1.8 Carrusel de testimonios con avatar circular, cita, nombre y cargo
1.9 Tabla comparativa de planes (3 columnas) con lista de features y CTA por plan
1.10 Bloque FAQ tipo acordeón con 6 preguntas
1.11 Sección de últimas entradas del blog en grid de 3 tarjetas (imagen, categoría, título, fecha)
1.12 CTA final a ancho completo con fondo oscuro, titular y botón
1.13 Footer multi-columna con logo, claim, columnas de enlaces (Producto, Empresa, Recursos, Legal), selector de idioma y barra inferior con copyright y redes

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