Hugging Face's logo

Spaces:
Jackrong
/
qwen36-eval
Running

App Files Community
1
qwen36-eval / design_saas_landing.raw.txt
KyleHessling1's picture
KyleHessling1
Upload Qwen3.6-27B-UD-Q5_K_XL evaluation: dashboard, report, 11 HTML demos, 8 agentic transcripts
f696067 verified
Raw
History Blame Contribute Delete
35.9 kB
```html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Prism | AI Observability Platform</title>
 <meta name="description" content="The premier observability platform for ML engineers.">
<!-- Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
 /* --- CSS Variables & Reset --- */
 :root {
 --bg-dark: #030014;
 --bg-card: rgba(255, 255, 255, 0.03);
 --bg-card-hover: rgba(255, 255, 255, 0.06);
 --border-color: rgba(255, 255, 255, 0.08);
 --accent: #6366f1;
 --accent-glow: rgba(99, 102, 241, 0.4);
 --text-main: #ffffff;
 --text-muted: #94a3b8;
 --font-sans: 'Inter', sans-serif;
 --font-mono: 'JetBrains Mono', monospace;
 --gradient-mesh-1: #4f46e5;
 --gradient-mesh-2: #9333ea;
 --gradient-mesh-3: #0ea5e9;
 }
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }
body {
 background-color: var(--bg-dark);
 color: var(--text-main);
 font-family: var(--font-sans);
 line-height: 1.6;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 }
a { text-decoration: none; color: inherit; transition: color 0.2s; }
 ul { list-style: none; }
/* --- Utilities --- */
 .container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
 }
.text-gradient {
 background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
.text-accent { color: var(--accent); }
 .font-mono { font-family: var(--font-mono); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.75rem 1.5rem;
 border-radius: 8px;
 font-weight: 500;
 font-size: 0.95rem;
 cursor: pointer;
 transition: all 0.3s ease;
 border: 1px solid transparent;
 }
.btn-primary {
 background: var(--accent);
 color: white;
 box-shadow: 0 0 20px var(--accent-glow);
 }
.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 0 30px var(--accent-glow);
 background: #5558e6;
 }
.btn-secondary {
 background: transparent;
 border-color: var(--border-color);
 color: var(--text-main);
 }
.btn-secondary:hover {
 background: var(--bg-card-hover);
 border-color: var(--text-muted);
 transform: translateY(-2px);
 }
/* --- Animations --- */
 @keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
@keyframes pulse-glow {
 0%, 100% { opacity: 0.5; }
 50% { opacity: 0.8; }
 }
@keyframes typing {
 from { width: 0 }
 to { width: 100% }
 }
@keyframes blink {
 50% { border-color: transparent }
 }
@keyframes scroll {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
 }
.reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
 }
.reveal.active {
 opacity: 1;
 transform: translateY(0);
 }
/* --- Header --- */
 header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 padding: 1.25rem 0;
 transition: all 0.4s ease;
 }
header.scrolled {
 background: rgba(3, 0, 20, 0.7);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom: 1px solid var(--border-color);
 padding: 1rem 0;
 }
.nav-inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.logo {
 font-weight: 700;
 font-size: 1.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
.logo span { color: var(--accent); }
.nav-links {
 display: flex;
 gap: 2rem;
 }
.nav-links a {
 font-size: 0.9rem;
 color: var(--text-muted);
 font-weight: 500;
 }
.nav-links a:hover { color: var(--text-main); }
/* --- Hero Section --- */
 .hero {
 position: relative;
 min-height: 100vh;
 display: flex;
 align-items: center;
 padding-top: 80px;
 overflow: hidden;
 }
/* Mesh Gradient Background */
 .hero::before {
 content: '';
 position: absolute;
 top: -20%;
 left: -10%;
 width: 60%;
 height: 60%;
 background: radial-gradient(circle, var(--gradient-mesh-1), transparent 60%);
 opacity: 0.4;
 filter: blur(80px);
 animation: float 10s infinite ease-in-out;
 z-index: -1;
 }
.hero::after {
 content: '';
 position: absolute;
 bottom: -10%;
 right: -10%;
 width: 50%;
 height: 50%;
 background: radial-gradient(circle, var(--gradient-mesh-2), transparent 60%);
 opacity: 0.3;
 filter: blur(80px);
 animation: float 12s infinite ease-in-out reverse;
 z-index: -1;
 }
.hero-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 }
.hero-content h1 {
 font-size: 4rem;
 line-height: 1.1;
 margin-bottom: 1.5rem;
 letter-spacing: -0.02em;
 }
.hero-content p {
 font-size: 1.25rem;
 color: var(--text-muted);
 margin-bottom: 2.5rem;
 max-width: 500px;
 }
.hero-buttons {
 display: flex;
 gap: 1rem;
 }
/* Terminal Widget */
 .terminal-window {
 background: rgba(13, 17, 23, 0.9);
 border: 1px solid var(--border-color);
 border-radius: 12px;
 box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
 overflow: hidden;
 font-family: var(--font-mono);
 font-size: 0.85rem;
 transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
 transition: transform 0.5s ease;
 }
.terminal-window:hover {
 transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
 }
.terminal-header {
 background: rgba(255, 255, 255, 0.05);
 padding: 0.75rem 1rem;
 display: flex;
 gap: 0.5rem;
 border-bottom: 1px solid var(--border-color);
 }
.dot { width: 12px; height: 12px; border-radius: 50%; }
 .dot.red { background: #ef4444; }
 .dot.yellow { background: #eab308; }
 .dot.green { background: #22c55e; }
.terminal-body {
 padding: 1.5rem;
 color: #a5b4fc;
 min-height: 300px;
 position: relative;
 }
.cursor {
 display: inline-block;
 width: 8px;
 height: 15px;
 background: var(--accent);
 vertical-align: middle;
 animation: blink 1s step-end infinite;
 }
/* --- Logo Strip --- */
 .logo-strip {
 padding: 4rem 0;
 border-top: 1px solid var(--border-color);
 border-bottom: 1px solid var(--border-color);
 background: rgba(255,255,255,0.01);
 overflow: hidden;
 white-space: nowrap;
 position: relative;
 }
.logo-track {
 display: inline-block;
 animation: scroll 30s linear infinite;
 }
.logo-item {
 display: inline-block;
 margin: 0 3rem;
 color: var(--text-muted);
 font-weight: 600;
 font-size: 1.25rem;
 opacity: 0.6;
 transition: opacity 0.3s;
 }
.logo-item:hover { opacity: 1; color: var(--text-main); }
/* --- Features --- */
 .features { padding: 8rem 0; }
 .section-header { text-align: center; margin-bottom: 5rem; }
 .section-header h2 { font-size: 2.5rem; margin-bottom: 1rem; }
 .section-header p { color: var(--text-muted); max-width: 600px; margin: 0 auto; }
.feature-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
 }
.feature-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 padding: 2.5rem;
 border-radius: 16px;
 transition: all 0.3s ease;
 }
.feature-card:hover {
 background: var(--bg-card-hover);
 transform: translateY(-5px);
 border-color: var(--accent);
 box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);
 }
.icon-box {
 width: 48px;
 height: 48px;
 background: rgba(99, 102, 241, 0.1);
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.5rem;
 color: var(--accent);
 }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
 .feature-card p { color: var(--text-muted); font-size: 0.95rem; }
/* --- How It Works --- */
 .how-it-works {
 padding: 8rem 0;
 background: linear-gradient(to bottom, var(--bg-dark), #0a0a1a, var(--bg-dark));
 }
.split-screen {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 }
.steps-list { display: flex; flex-direction: column; gap: 2rem; }
.step-item {
 display: flex;
 gap: 1.5rem;
 padding: 1.5rem;
 border-radius: 12px;
 transition: background 0.3s;
 cursor: pointer;
 }
.step-item.active { background: var(--bg-card); }
.step-number {
 font-family: var(--font-mono);
 color: var(--accent);
 font-size: 1.5rem;
 font-weight: 700;
 opacity: 0.5;
 }
.step-content h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
 .step-content p { color: var(--text-muted); font-size: 0.9rem; }
.step-visual {
 background: #111;
 border: 1px solid var(--border-color);
 border-radius: 16px;
 height: 400px;
 position: relative;
 overflow: hidden;
 }
.step-visual img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.8;
 }
/* Placeholder CSS graphic for step visual */
 .visual-graphic {
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%, -50%);
 width: 80%; height: 80%;
 background: radial-gradient(circle at center, rgba(99,102,241,0.2), transparent 70%);
 border: 1px dashed var(--border-color);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.visual-core {
 width: 60px; height: 60px;
 background: var(--accent);
 border-radius: 50%;
 box-shadow: 0 0 40px var(--accent);
 animation: pulse-glow 2s infinite;
 }
/* --- Pricing --- */
 .pricing { padding: 8rem 0; }
.pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
 align-items: center;
 }
.price-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: 20px;
 padding: 3rem 2rem;
 text-align: center;
 position: relative;
 }
.price-card.featured {
 background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, rgba(3, 0, 20, 1) 100%);
 border: 1px solid var(--accent);
 transform: scale(1.05);
 z-index: 2;
 }
/* Animated Gradient Border */
 .price-card.featured::before {
 content: '';
 position: absolute;
 inset: -2px;
 border-radius: 22px;
 background: linear-gradient(45deg, #6366f1, #a855f7, #6366f1);
 background-size: 200% 200%;
 animation: gradient-border 3s ease infinite;
 z-index: -1;
 filter: blur(8px);
 opacity: 0.6;
 }
@keyframes gradient-border {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
.price-amount {
 font-size: 3rem;
 font-weight: 700;
 margin: 1.5rem 0;
 color: var(--text-main);
 }
.price-amount span { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.features-list { margin: 2rem 0; text-align: left; }
 .features-list li {
 margin-bottom: 0.75rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 color: var(--text-muted);
 font-size: 0.95rem;
 }
.check-icon { color: var(--accent); }
/* --- Testimonials --- */
 .testimonials { padding: 8rem 0; }
.testimonial-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 2rem;
 }
.testimonial-card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 padding: 2rem;
 border-radius: 16px;
 display: flex;
 gap: 1.5rem;
 align-items: flex-start;
 }
.avatar {
 width: 50px; height: 50px;
 border-radius: 50%;
 background: linear-gradient(135deg, #333, #555);
 flex-shrink: 0;
 }
.quote-text {
 font-style: italic;
 color: var(--text-muted);
 margin-bottom: 1rem;
 font-size: 1.05rem;
 }
.user-info h5 { font-weight: 600; color: var(--text-main); }
 .user-info span { font-size: 0.85rem; color: var(--accent); }
/* --- Footer --- */
 footer {
 border-top: 1px solid var(--border-color);
 padding: 5rem 0 2rem;
 background: #02000a;
 }
.footer-grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1fr;
 gap: 4rem;
 margin-bottom: 4rem;
 }
.footer-col h4 { margin-bottom: 1.5rem; color: var(--text-main); }
 .footer-col ul li { margin-bottom: 0.75rem; }
 .footer-col a { color: var(--text-muted); font-size: 0.9rem; }
 .footer-col a:hover { color: var(--accent); }
.footer-bottom {
 border-top: 1px solid var(--border-color);
 padding-top: 2rem;
 display: flex;
 justify-content: space-between;
 color: var(--text-muted);
 font-size: 0.85rem;
 }
/* --- Responsive --- */
 @media (max-width: 968px) {
 .hero-grid, .split-screen, .feature-grid, .pricing-grid, .testimonial-grid, .footer-grid {
 grid-template-columns: 1fr;
 }
.hero-content h1 { font-size: 3rem; }
 .hero-grid { gap: 3rem; text-align: center; }
 .hero-buttons { justify-content: center; }
 .terminal-window { transform: none; }
 .nav-links { display: none; } /* Simplified for single file demo */
 .price-card.featured { transform: scale(1); }
 .split-screen { display: flex; flex-direction: column-reverse; }
 }
 </style>
</head>
<body>
<!-- Navigation -->
 <header id="navbar">
 <div class="container nav-inner">
 <a href="#" class="logo">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 17L12 22L22 17" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 12L12 17L22 12" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 <span>Prism</span>
 </a>
 <nav class="nav-links">
 <a href="#features">Features</a>
 <a href="#how-it-works">How it Works</a>
 <a href="#pricing">Pricing</a>
 <a href="#testimonials">Customers</a>
 </nav>
 <a href="#" class="btn btn-primary">Get Started</a>
 </div>
 </header>
<!-- Hero Section -->
 <section class="hero">
 <div class="container hero-grid">
 <div class="hero-content reveal">
 <h1 class="text-gradient">Total Observability<br>for Modern AI.</h1>
 <p>Debug, monitor, and optimize your Large Language Models with the most advanced tracing platform built for ML engineers.</p>
 <div class="hero-buttons">
 <a href="#" class="btn btn-primary">Start Free Trial</a>
 <a href="#" class="btn btn-secondary">View Documentation</a>
 </div>
 </div>
<div class="hero-visual reveal">
 <div class="terminal-window">
 <div class="terminal-header">
 <div class="dot red"></div>
 <div class="dot yellow"></div>
 <div class="dot green"></div>
 </div>
 <div class="terminal-body" id="terminal-content">
 <!-- JS will inject code here -->
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Logo Strip -->
 <div class="logo-strip">
 <div class="logo-track">
 <!-- Doubled for infinite scroll effect -->
 <span class="logo-item">ACME AI</span>
 <span class="logo-item">NEURAL SYS</span>
 <span class="logo-item">DATAFLOW</span>
 <span class="logo-item">CLOUDSCALE</span>
 <span class="logo-item">VORTEX LABS</span>
 <span class="logo-item">QUANTUM</span>
 <span class="logo-item">ACME AI</span>
 <span class="logo-item">NEURAL SYS</span>
 <span class="logo-item">DATAFLOW</span>
 <span class="logo-item">CLOUDSCALE</span>
 <span class="logo-item">VORTEX LABS</span>
 <span class="logo-item">QUANTUM</span>
 </div>
 </div>
<!-- Features Section -->
 <section id="features" class="features">
 <div class="container">
 <div class="section-header reveal">
 <h2>Engineered for Speed</h2>
 <p>Everything you need to manage your LLM lifecycle without compromising on performance.</p>
 </div>
<div class="feature-grid">
 <!-- Feature 1 -->
 <div class="feature-card reveal">
 <div class="icon-box">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9"/></svg>
 </div>
 <h3>Global Tracing</h3>
 <p>Visualize the entire request flow from user input to model output with distributed tracing capabilities.</p>
 </div>
<!-- Feature 2 -->
 <div class="feature-card reveal">
 <div class="icon-box">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
 </div>
 <h3>Latency Monitoring</h3>
 <p>Real-time dashboards tracking TTFT (Time to First Token) and total generation time across clusters.</p>
 </div>
<!-- Feature 3 -->
 <div class="feature-card reveal">
 <div class="icon-box">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
 </div>
 <h3>Cost Analysis</h3>
 <p>Track token usage and API costs per feature, user, or endpoint. Set budgets and alerts instantly.</p>
 </div>
 </div>
 </div>
 </section>
<!-- How It Works -->
 <section id="how-it-works" class="how-it-works">
 <div class="container">
 <div class="split-screen">
 <div class="steps-container reveal">
 <div class="steps-list">
 <div class="step-item active" onclick="updateStep(1)">
 <div class="step-number">01</div>
 <div class="step-content">
 <h4>One Line Integration</h4>
 <p>Import the Prism SDK into your Python or Node.js application. No complex config files required.</p>
 </div>
 </div>
 <div class="step-item" onclick="updateStep(2)">
 <div class="step-number">02</div>
 <div class="step-content">
 <h4>Automatic Instrumentation</h4>
 <p>Prism automatically wraps your LLM calls, capturing prompts, outputs, and latency metrics.</p>
 </div>
 </div>
 <div class="step-item" onclick="updateStep(3)">
 <div class="step-number">03</div>
 <div class="step-content">
 <h4>Deep Dive & Optimize</h4>
 <p>Use our visual debugger to inspect specific traces, replay prompts, and identify hallucinations.</p>
 </div>
 </div>
 </div>
 </div>
<div class="step-visual reveal">
 <!-- Abstract representation of code/traces -->
 <div class="visual-graphic">
 <div class="visual-core"></div>
 <div style="position:absolute; top:20%; left:20%; width:10px; height:10px; background:var(--text-muted); border-radius:50%;"></div>
 <div style="position:absolute; bottom:20%; right:20%; width:15px; height:15px; background:var(--text-muted); border-radius:50%;"></div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Pricing -->
 <section id="pricing" class="pricing">
 <div class="container">
 <div class="section-header reveal">
 <h2>Simple, Transparent Pricing</h2>
 <p>Start for free, scale as you grow.</p>
 </div>
<div class="pricing-grid">
 <!-- Starter -->
 <div class="price-card reveal">
 <h3>Starter</h3>
 <div class="price-amount">$0<span>/mo</span></div>
 <p style="color:var(--text-muted)">Perfect for hobbyists.</p>
 <ul class="features-list">
 <li><span class="check-icon">✓</span> 1,000 Traces/mo</li>
 <li><span class="check-icon">✓</span> 7-day retention</li>
 <li><span class="check-icon">✓</span> Community support</li>
 </ul>
 <a href="#" class="btn btn-secondary" style="width:100%">Start Free</a>
 </div>
<!-- Pro (Featured) -->
 <div class="price-card featured reveal">
 <div style="position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:600;">RECOMMENDED</div>
 <h3>Pro</h3>
 <div class="price-amount">$49<span>/mo</span></div>
 <p style="color:var(--text-muted)">For growing teams.</p>
 <ul class="features-list">
 <li><span class="check-icon">✓</span> 50,000 Traces/mo</li>
 <li><span class="check-icon">✓</span> 30-day retention</li>
 <li><span class="check-icon">✓</span> Cost Analytics</li>
 <li><span class="check-icon">✓</span> Priority Email</li>
 </ul>
 <a href="#" class="btn btn-primary" style="width:100%">Get Started</a>
 </div>
<!-- Enterprise -->
 <div class="price-card reveal">
 <h3>Enterprise</h3>
 <div class="price-amount">Custom</div>
 <p style="color:var(--text-muted)">For large scale orgs.</p>
 <ul class="features-list">
 <li><span class="check-icon">✓</span> Unlimited Traces</li>
 <li><span class="check-icon">✓</span> 1-year retention</li>
 <li><span class="check-icon">✓</span> SSO & Audit Logs</li>
 <li><span class="check-icon">✓</span> Dedicated Success Mgr</li>
 </ul>
 <a href="#" class="btn btn-secondary" style="width:100%">Contact Sales</a>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials -->
 <section id="testimonials" class="testimonials">
 <div class="container">
 <div class="section-header reveal">
 <h2>Loved by ML Engineers</h2>
 </div>
 <div class="testimonial-grid">
 <div class="testimonial-card reveal">
 <div class="avatar"></div>
 <div>
 <p class="quote-text">"Prism completely changed how we debug our RAG pipelines. We found a context window leak in minutes."</p>
 <div class="user-info">
 <h5>Sarah Jenkins</h5>
 <span>ML Lead @ TechFlow</span>
 </div>
 </div>
 </div>
 <div class="testimonial-card reveal">
 <div class="avatar"></div>
 <div>
 <p class="quote-text">"The cost analytics alone paid for the subscription in the first week. Highly recommended."</p>
 <div class="user-info">
 <h5>Marcus Chen</h5>
 <span>CTO @ AI Solutions</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer>
 <div class="container">
 <div class="footer-grid">
 <div class="footer-col">
 <a href="#" class="logo" style="margin-bottom:1rem; display:inline-block;">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#6366f1" stroke-width="2"/>
 <path d="M2 17L12 22L22 17" stroke="#6366f1" stroke-width="2"/>
 <path d="M2 12L12 17L22 12" stroke="#6366f1" stroke-width="2"/>
 </svg>
 <span>Prism</span>
 </a>
 <p style="color:var(--text-muted); font-size:0.9rem; max-width:300px;">
 The standard for AI observability. Build better models with better data.
 </p>
 </div>
 <div class="footer-col">
 <h4>Product</h4>
 <ul>
 <li><a href="#">Features</a></li>
 <li><a href="#">Integrations</a></li>
 <li><a href="#">Pricing</a></li>
 <li><a href="#">Changelog</a></li>
 </ul>
 </div>
 <div class="footer-col">
 <h4>Resources</h4>
 <ul>
 <li><a href="#">Documentation</a></li>
 <li><a href="#">API Reference</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Blog</a></li>
 </ul>
 </div>
 <div class="footer-col">
 <h4>Company</h4>
 <ul>
 <li><a href="#">About</a></li>
 <li><a href="#">Careers</a></li>
 <li><a href="#">Legal</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 </div>
 <div class="footer-bottom">
 <span>© 2023 Prism Observability Inc.</span>
 <div style="display:flex; gap:1rem;">
 <a href="#">Twitter</a>
 <a href="#">GitHub</a>
 <a href="#">Discord</a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // --- 1. Nav Blur Effect ---
 const nav = document.getElementById('navbar');
 window.addEventListener('scroll', () => {
 if (window.scrollY > 50) {
 nav.classList.add('scrolled');
 } else {
 nav.classList.remove('scrolled');
 }
 });
// --- 2. Scroll Reveal Animation ---
 const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 entry.target.classList.add('active');
 }
 });
 }, { threshold: 0.1 });
revealElements.forEach(el => revealObserver.observe(el));
// --- 3. Terminal Typing Effect ---
 const terminalBody = document.getElementById('terminal-content');
 const lines = [
 { text: "import prism from '@prism/sdk';", color: '#c084fc' },
 { text: "const client = prism.init({ key: 'pk_live_...' });", color: '#94a3b8' },
 { text: "", color: '' },
 { text: "// Tracing LLM generation...", color: '#64748b', type: 'comment' },
 { text: "const response = await client.chat.completions.create({", color: '#e2e8f0' },
 { text: "&nbsp;&nbsp;model: 'gpt-4-turbo',", color: '#e2e8f0' },
 { text: "&nbsp;&nbsp;messaging: [{role: 'user', content: 'Hello'}]", color: '#e2e8f0' },
 { text: "});", color: '#e2e8f0' },
 { text: "", color: '' },
 { text: "[Prism] Trace ID: 8f92-a1b2-c3d4 captured.", color: '#22c55e' },
 { text: "[Prism] Tokens: 124 | Cost: $0.004 | Latency: 120ms", color: '#22c55e' }
 ];
let lineIndex = 0;
 let charIndex = 0;
 let currentLineDiv = null;
function typeLine() {
 if (lineIndex >= lines.length) return;
const lineData = lines[lineIndex];
if (!currentLineDiv) {
 currentLineDiv = document.createElement('div');
 currentLineDiv.style.marginBottom = '4px';
 currentLineDiv.style.color = lineData.color;
 if (lineData.type === 'comment') currentLineDiv.style.opacity = '0.7';
 terminalBody.appendChild(currentLineDiv);
 }
if (charIndex < lineData.text.length) {
 currentLineDiv.textContent += lineData.text.charAt(charIndex);
 charIndex++;
 setTimeout(typeLine, lineData.text.charAt(charIndex-1) === ' ' ? 30 : 50);
 } else {
 lineIndex++;
 charIndex = 0;
 currentLineDiv = null;
 setTimeout(typeLine, 200); // Pause between lines
 }
 }
// Start typing after a small delay
 setTimeout(typeLine, 1000);
// --- 4. How It Works Interaction ---
 const steps = document.querySelectorAll('.step-item');
 const core = document.querySelector('.visual-core');
 const graphic = document.querySelector('.visual-graphic');
function updateStep(stepIndex) {
 // Update active class on list
 steps.forEach((s, i) => {
 if (i + 1 === stepIndex) s.classList.add('active');
 else s.classList.remove('active');
 });
// Visual feedback in graphic area
 if(stepIndex === 1) {
 core.style.transform = "scale(1)";
 core.style.boxShadow = "0 0 40px var(--accent)";
 } else if (stepIndex === 2) {
 core.style.transform = "scale(1.2)";
 core.style.background = "#a855f7";
 } else {
 core.style.transform = "scale(0.8)";
 core.style.background = "#22c55e";
 core.style.boxShadow = "0 0 60px #22c55e";
 }
 }
 </script>
</body>
</html>
```