docs: redesign landing page with real screenshots and feature showcase

docs/src/components/CompetitorComparison.astro

@@ -0,0 +1,106 @@
+---
+// FeatureShowcase.astro - Visual showcase of platform capabilities
+// Uses real screenshots from the documentation
+
+interface ShowcaseItem {
+  title: string;
+  description: string;
+  image: string;
+  alt: string;
+  link: string;
+}
+
+const showcaseItems: ShowcaseItem[] = [
+  {
+    title: 'APM Service Maps',
+    description: 'Auto-generated topology maps showing service dependencies, latency, and error rates across your distributed system.',
+    image: '/images/apm/application-map.png',
+    alt: 'APM Application Map showing service dependencies',
+    link: '/docs/apm/',
+  },
+  {
+    title: 'Distributed Trace Detail',
+    description: 'Full span tree with RED metrics, faceted fields, and cross-signal correlation to related logs.',
+    image: '/images/discover-traces/trace-detail-page.png',
+    alt: 'Trace detail page with span tree and RED metrics',
+    link: '/docs/investigate/',
+  },
+  {
+    title: 'Log Investigation',
+    description: 'Search and analyze billions of log events with full-text search and PPL structured queries.',
+    image: '/images/discover-logs/discover-logs-interface.png',
+    alt: 'Log investigation interface with PPL queries',
+    link: '/docs/investigate/',
+  },
+  {
+    title: 'AI Agent Execution Graph',
+    description: 'Visualize agent workflows as DAGs — trace LLM calls, tool execution, and reasoning steps.',
+    image: '/images/agent-traces/agent-graph.png',
+    alt: 'Agent execution graph showing DAG of agent workflow',
+    link: '/docs/ai-observability/',
+  },
+  {
+    title: 'Prometheus Metrics',
+    description: 'PromQL-powered metrics dashboards with custom panels, alerting, and auto-computed RED metrics.',
+    image: '/images/dashboards/prometheus.png',
+    alt: 'Prometheus metrics dashboard',
+    link: '/docs/dashboards/',
+  },
+  {
+    title: 'Cross-Signal Correlation',
+    description: 'Click from a trace span to correlated logs, or from logs to related traces. All signals connected.',
+    image: '/images/datasets/correlations-span-details-logs.png',
+    alt: 'Cross-signal correlation between traces and logs',
+    link: '/docs/investigate/',
+  },
+];
+---
+
+<section id="showcase" class="py-20 px-6 bg-slate-900">
+  <div class="max-w-7xl mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
+        See It in Action
+      </h2>
+      <p class="text-xl text-slate-300 max-w-3xl mx-auto">
+        Real screenshots from the OpenSearch Observability Stack. Every feature shown here is available in the live playground.
+      </p>
+    </div>
+
+    <!-- Screenshot Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {showcaseItems.map((item) => (
+        <a href={item.link} class="group block rounded-xl overflow-hidden border border-slate-700 bg-slate-950 hover:border-cyan-500/50 transition-all duration-300">
+          <div class="overflow-hidden">
+            <img
+              src={item.image}
+              alt={item.alt}
+              class="w-full h-48 object-cover object-top group-hover:scale-105 transition-transform duration-300"
+              loading="lazy"
+            />
+          </div>
+          <div class="p-5">
+            <h3 class="text-lg font-bold text-white mb-2 group-hover:text-cyan-400 transition-colors">
+              {item.title}
+            </h3>
+            <p class="text-sm text-slate-400 leading-relaxed">
+              {item.description}
+            </p>
+          </div>
+        </a>
+      ))}
+    </div>
+
+    <!-- Bottom CTA -->
+    <div class="text-center mt-12">
+      <div class="flex gap-4 justify-center">
+        <a href="https://observability.playground.opensearch.org" target="_blank" rel="noopener noreferrer" class="px-8 py-4 bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-500 hover:to-green-500 text-white font-bold rounded-lg transition-all duration-200 shadow-lg shadow-emerald-500/50">
+          Try Live Playground
+        </a>
+        <a href="/docs/" class="px-8 py-4 bg-slate-800/50 hover:bg-slate-700/50 text-white font-semibold rounded-lg transition-all duration-200 border-2 border-cyan-500/50 hover:border-cyan-400">
+          Explore Docs
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

docs/src/components/CyclingTagline.test.tsx

@@ -13,8 +13,8 @@ describe('CyclingTagline', () => {
 
   it('should render the first tagline initially', () => {
     render(<CyclingTagline />);
-    expect(screen.getByText('Services')).toBeInTheDocument();
-    expect(screen.getByText(/APM traces, service maps/)).toBeInTheDocument();
+    expect(screen.getByText('Traces')).toBeInTheDocument();
+    expect(screen.getByText(/Distributed tracing with auto-generated service maps/)).toBeInTheDocument();
   });
 
   it('should have cycling functionality with timers', () => {

docs/src/components/CyclingTagline.tsx

@@ -1,22 +1,24 @@
 import { useState, useEffect } from 'react';
 
 const taglines = [
-  // Services (cyan)
-  { label: 'Services', text: 'APM traces, service maps, and distributed tracing across your stack', color: 'text-cyan-400' },
-  { label: 'Services', text: 'See every request, every dependency, every bottleneck', color: 'text-cyan-400' },
-  { label: 'Services', text: 'From microservices to monoliths—full visibility', color: 'text-cyan-400' },
-  // Metrics (emerald)
-  { label: 'Metrics', text: 'Prometheus metrics, PromQL queries, and custom dashboards', color: 'text-emerald-400' },
-  { label: 'Metrics', text: 'RED metrics computed automatically from trace data', color: 'text-emerald-400' },
-  { label: 'Metrics', text: 'Real-time dashboards for the signals that matter', color: 'text-emerald-400' },
+  // Traces (cyan)
+  { label: 'Traces', text: 'Distributed tracing with auto-generated service maps and RED metrics', color: 'text-cyan-400' },
+  { label: 'Traces', text: 'OpenTelemetry-native. No proprietary agent required', color: 'text-cyan-400' },
   // Logs (amber)
-  { label: 'Logs', text: 'Correlate logs with traces—debug in minutes, not days', color: 'text-amber-400' },
-  { label: 'Logs', text: 'Full-text search with PPL structured queries', color: 'text-amber-400' },
-  { label: 'Logs', text: 'From ingestion to insight, all in one place', color: 'text-amber-400' },
-  // AI (orange)
-  { label: 'AI Agents', text: 'Agent tracing with GenAI semantic conventions and MCP support', color: 'text-orange-400' },
-  { label: 'AI Agents', text: 'Your agents aren\'t black boxes anymore', color: 'text-orange-400' },
-  { label: 'AI Agents', text: 'Trace graphs, token usage, and tool calls for every agent run', color: 'text-orange-400' },
+  { label: 'Logs', text: 'Full-text search + PPL structured queries across billions of log events', color: 'text-amber-400' },
+  { label: 'Logs', text: 'Correlate logs with traces in one click. No context switching', color: 'text-amber-400' },
+  // AI Agents (orange)
+  { label: 'AI Agents', text: 'Trace LLM calls, tool use, and agent workflows end-to-end', color: 'text-orange-400' },
+  { label: 'AI Agents', text: 'GenAI semantic conventions, MCP support, token cost tracking', color: 'text-orange-400' },
+  // PPL (violet)
+  { label: 'PPL', text: 'ML-powered log clustering in one command. No regex, no ML expertise', color: 'text-violet-400' },
+  { label: 'PPL', text: 'Anomaly detection built into queries — no external ML service needed', color: 'text-violet-400' },
+  // Metrics (emerald)
+  { label: 'Metrics', text: 'Prometheus-compatible with PromQL. RED metrics computed automatically', color: 'text-emerald-400' },
+  { label: 'Metrics', text: 'Custom dashboards with real-time panels and alerting', color: 'text-emerald-400' },
+  // Open Source (green)
+  { label: 'Open', text: 'Apache 2.0. No feature gates. No lock-in', color: 'text-green-400' },
+  { label: 'Open', text: 'Self-host anywhere. Your data stays yours', color: 'text-green-400' },
 ];
 
 export function CyclingTagline() {
@@ -39,13 +41,13 @@ export function CyclingTagline() {
 
   return (
     <div className="h-8 flex items-center relative">
-      <span className={`${current.color} text-sm font-semibold uppercase tracking-wide`}>
+      <span className={`${current.color} text-sm font-semibold uppercase tracking-wide whitespace-nowrap w-[100px]`}>
         {current.label}
       </span>
-      <div className="absolute left-[85px] top-0 h-full flex items-center overflow-hidden w-[400px]">
+      <div className="absolute left-[100px] top-0 h-full flex items-center overflow-hidden" style={{ width: 'calc(100vw - 200px)', maxWidth: '500px' }}>
         <span
-          className={`text-slate-400 whitespace-nowrap transition-all duration-500 ease-in-out ${
-            isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-2'
+          className={`text-slate-400 text-sm whitespace-nowrap transition-opacity duration-500 ease-in-out ${
+            isVisible ? 'opacity-100' : 'opacity-0'
           }`}
         >
           {current.text}

docs/src/components/Features.astro

@@ -8,7 +8,7 @@ interface Feature {
   title: string;
   description: string;
   bullets: string[];
-  visualType: 'code' | 'mockup' | 'grid';
+  visualType: 'code' | 'mockup' | 'grid' | 'image';
   visualContent: any;
   imagePosition: 'left' | 'right';
 }
@@ -19,97 +19,116 @@ const iconPaths = {
   'file-text': 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
   'check-circle': 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
   'zap': 'M13 10V3L4 14h7v7l9-11h-7z',
+  search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
+  brain: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
 };
 
 const features: Feature[] = [
   {
     id: 'apm-tracing',
     icon: 'activity',
     title: 'APM & Distributed Tracing',
-    description: 'End-to-end visibility across services with service maps, latency breakdowns, and error tracking. OpenTelemetry-native.',
+    description: 'End-to-end visibility across services with auto-generated service maps, latency breakdowns, and error tracking. OpenTelemetry-native with zero proprietary agents.',
     bullets: [
       'Service maps and dependency visualization',
-      'Distributed trace correlation across services',
-      'Latency percentiles, error rates, and throughput',
+      'P50/P95/P99 latency, error rates, and throughput',
+      'OTel-native — works with any language or framework',
     ],
-    visualType: 'code',
-    visualContent: {
-      language: 'yaml',
-      code: `# otel-collector-config.yaml
-receivers:
-  otlp:
-    protocols:
-      grpc:
-        endpoint: 0.0.0.0:4317
-
-exporters:
-  opensearch:
-    http:
-      endpoint: https://opensearch:9200
-    dataset: traces
-
-service:
-  pipelines:
-    traces:
-      receivers: [otlp]
-      exporters: [opensearch]`,
-    },
+    visualType: 'image',
+    visualContent: { src: '/images/apm/application-map.png', alt: 'APM Service Map' },
     imagePosition: 'right',
   },
   {
     id: 'metrics-dashboards',
     icon: 'zap',
     title: 'Metrics & Dashboards',
-    description: 'Prometheus-compatible metrics with PromQL support. Custom dashboards and RED metrics computed automatically from trace data.',
+    description: 'Prometheus-compatible metrics with PromQL support. Custom dashboards and RED metrics computed automatically from trace data. All signals in one platform.',
     bullets: [
       'Prometheus remote-write and native PromQL support',
-      'RED metrics (Rate, Errors, Duration) from Data Prepper',
-      'Custom dashboards with real-time panels and charts',
+      'RED metrics (Rate, Errors, Duration) auto-computed from traces',
+      'Custom dashboards with real-time panels and alerting',
     ],
-    visualType: 'grid',
-    visualContent: {
-      items: [
-        { title: 'Request Rate', progress: 99 },
-        { title: 'P99 Latency', progress: 95 },
-        { title: 'Error Rate', progress: 82 },
-        { title: 'Throughput', progress: 97 },
-        { title: 'Saturation', progress: 88 },
-        { title: 'Availability', progress: 94 },
-        { title: 'P50 Latency', progress: 91 },
-        { title: 'Success Rate', progress: 96 },
-      ],
-    },
+    visualType: 'image',
+    visualContent: { src: '/images/dashboards/prometheus.png', alt: 'Prometheus Metrics Dashboard' },
     imagePosition: 'left',
   },
   {
     id: 'logs',
     icon: 'file-text',
-    title: 'Log Analytics & Correlation',
-    description: 'Ingest, search, and correlate logs with traces. Full-text search with PPL and OpenTelemetry-native log collection.',
+    title: 'Log Analytics with PPL',
+    description: 'Full-text search meets a pipe-based query language. PPL lets you filter, transform, aggregate, and correlate logs with traces — all in one query. 50+ commands and 200+ built-in functions.',
     bullets: [
-      'Log-to-trace correlation in one click',
-      'Full-text search with PPL structured field queries',
-      'OTel-native log ingestion via OTLP',
+      'Complete query language — joins, subqueries, stats, and more',
+      'ML-powered log pattern clustering with zero regex',
+      'Log-to-trace correlation via traceId in one click',
     ],
-    visualType: 'mockup',
-    visualContent: {
-      type: 'prompt-card',
-    },
+    visualType: 'image',
+    visualContent: { src: '/images/discover-logs/discover-logs-interface.png', alt: 'Log Analytics Interface' },
     imagePosition: 'right',
   },
   {
     id: 'ai-observability',
     icon: 'check-circle',
     title: 'AI Agent & LLM Observability',
-    description: 'Trace AI agent workflows with OpenTelemetry GenAI semantic conventions. Visualize execution graphs, monitor token usage, and debug agent behavior.',
+    description: 'Trace AI agent workflows end-to-end. Visualize execution graphs, monitor token usage, track tool calls, and debug agent behavior with OpenTelemetry GenAI semantic conventions.',
     bullets: [
       'Agent tracing with tool-call and reasoning step visualization',
-      'GenAI semantic conventions for standard, interoperable traces',
-      'MCP support and Python/JavaScript SDKs',
+      'Token usage, cost tracking, and failure rate analysis',
+      'Python/JS SDKs + MCP support — works with any AI framework',
     ],
-    visualType: 'mockup',
+    visualType: 'image',
+    visualContent: { src: '/images/agent-traces/agent-graph.png', alt: 'Agent Execution Graph' },
+    imagePosition: 'left',
+  },
+  {
+    id: 'ppl-query',
+    icon: 'search',
+    title: 'PPL Query Language',
+    description: 'A pipe-based query language built for observability. Filter, transform, aggregate, join across indices, and run ML algorithms — all in a single query pipeline.',
+    bullets: [
+      'Cross-signal correlation: join logs with traces on traceId',
+      'Automatic error pattern clustering — no regex required',
+      'Anomaly detection and k-means clustering built into queries',
+    ],
+    visualType: 'code',
     visualContent: {
-      type: 'alert-card',
+      language: 'ppl',
+      code: `source = logs-otel-v1*
+| where severityText = 'ERROR'
+| patterns body method=brain mode=aggregation
+    by \`resource.attributes.service.name\`
+| sort - pattern_count
+| head 20
+
+# Zero regex. ML-powered clustering.
+# Try it in the Live Playground →`,
+    },
+    imagePosition: 'right',
+  },
+  {
+    id: 'built-in-ml',
+    icon: 'brain',
+    title: 'Built-in Machine Learning',
+    description: 'Anomaly detection and clustering run directly in your query pipeline — no separate ML service, no model management, no data science team required.',
+    bullets: [
+      'Random Cut Forest anomaly detection per service',
+      'K-means clustering for automatic service health tiers',
+      'Trendline and rolling window analytics built in',
+    ],
+    visualType: 'code',
+    visualContent: {
+      language: 'ppl',
+      code: `source = otel-v1-apm-span-*
+| stats avg(durationInNanos) as avg_latency
+    by span(startTime, 5m) as window,
+       serviceName
+| ml action='train' algorithm='rcf'
+    time_field='window'
+    category_field='serviceName'
+| where anomaly_grade > 0
+| sort - anomaly_grade
+
+# Built-in ML. No external service.`,
     },
     imagePosition: 'left',
   },
@@ -125,7 +144,7 @@ service:
           Full-Stack Observability, One Platform
         </h2>
         <p class="text-lg text-slate-400 max-w-3xl mx-auto">
-          From service health to AI agent performance — traces, logs, metrics, dashboards, and more
+          From service health to AI agent performance — traces, logs, metrics, dashboards, built-in ML, and a powerful query language
         </p>
       </div>
 
@@ -211,6 +230,17 @@ service:
                   </div>
                 )}
 
+                {feature.visualType === 'image' && (
+                  <div class="rounded-xl overflow-hidden border border-slate-700 bg-slate-950">
+                    <img
+                      src={feature.visualContent.src}
+                      alt={feature.visualContent.alt}
+                      class="w-full h-auto"
+                      loading="lazy"
+                    />
+                  </div>
+                )}
+
                 {feature.visualType === 'mockup' && feature.visualContent.type === 'prompt-card' && (
                   <div class="prompt-mockup rounded-xl border border-slate-700 bg-slate-900 p-6 space-y-4">
                     <!-- Log explorer header -->