Drommo
Línea de bucle — DevTool SaaS
Página web

Línea de bucle — DevTool SaaS

Prompt

Cree un aterrizaje en modo oscuro para "Loopline", una herramienta de desarrollo SaaS para observabilidad y depuración con IA para aplicaciones en producción. HTML puro + CSS, fuente JetBrains Mono para títulos/código e Inter para el cuerpo. **Paleta:** - Fondo: `#0a0a0a` (negro puro) - Tarjetas: `#111111` con borde `#1f1f1f` - Primario: terminal verde `#00ff88` - Secundaria: `#3b82f6` (azul) - Texto: `#ededed` / silenciado `#737373` **Secciones:** 1. Barra de navegación con el logotipo `</> Loopline` y enlaces: Documentos, Precios, Registro de cambios, GitHub (con el icono ⭐ las estrellas cuentan "12,4k"). 2. Héroe: píldora `$ npm install loopline`, H1 "Depurar producción. **A la velocidad del pensamiento.**", subtítulo, CTA "Empezar gratis →" y "Leer los documentos". A la derecha, una maqueta de terminal: barra superior con puntos, mensaje `>rastreo de línea de bucle`, líneas de registro de colores (INFO verde, ADVERTENCIA amarillo, ERROR rojo) con marcas de tiempo, cursor CSS parpadeante. 3. Barra de confianza: "Con la confianza de los ingenieros de" + Vercel, Stripe, Linear, Supabase, Cloudflare. 4. Sección de valores: "Deja de adivinar. Empieza a rastrear". con CTA "Ver demostración en vivo →". 5. Características de Grid 4: ⚡ Seguimientos en tiempo real · 🔍 Causa raíz de IA · 🔐 Compatible con SOC2 · 🪝 SDK de una línea. Cada tarjeta incluye un mini fragmento de código con sintaxis coloreada. 6. "Cómo funciona" en 5 pasos: Instalar SDK → Capturar eventos → Análisis de IA → Obtener información → Enviar correcciones. 7. Grid de integraciones: Node.js, Python, Go, Rust, Next.js, Django, FastAPI, Ruby, Java, Elixir, Deno, Bun. 8. Pie de página con enlaces a Documentos, Estado, GitHub, Twitter/X, Discord. Detalle: use `font-feature-settings: "ss01", "cv11"` en JetBrains Mono y bordes sutiles `1px solid #1f1f1f` en todo. Pase el cursor sobre las tarjetas: brilla en verde `box-shadow: 0 0 30px rgba(0,255,136,0.15)`. Devuelve `index.html` + `styles.css`.

Tipo
Página web
Tecnología
HTML, CSS
  • landing page
  • DevTool
  • Loopline
  • observability
  • terminal
Crear en Drommo

«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.

Ideas parecidas

Trabajo: HTML + CSSPágina web
Lustre — Tienda 3D de JoyeríaPágina web