improve website SEO

Author: buzinas

apps/website/docs/_components/Video.tsx

@@ -0,0 +1,16 @@
+type VideoProps = {
+  demoPoster: string
+  demoVideo: string
+}
+
+export function Video({ demoPoster, demoVideo }: VideoProps) {
+  return (
+    <div className="w-full max-w-200 mt-12 rounded-xl overflow-hidden border border-border bg-surface">
+      <div className="aspect-1380/1080 flex items-center justify-center text-text-3 text-sm">
+        <video autoPlay muted loop poster={demoPoster}>
+          <source src={demoVideo} type="video/mp4" />
+        </video>
+      </div>
+    </div>
+  )
+}

apps/website/docs/extending/plugin-api.mdx

@@ -1,3 +1,7 @@
+---
+description: Build custom React Trace plugins — the TracePlugin interface, available hooks, shared state, scaffolding CLI, and production stub conventions.
+---
+
 # Creating Plugins
 
 Extend React Trace by building your own plugins. A plugin is a `TracePlugin` object with a `name` and optional React components for the widget's `toolbar`, `actionPanel`, and `settings` slots.

apps/website/docs/extending/ui-components.mdx

@@ -1,3 +1,7 @@
+---
+description: UI component library for React Trace plugins — buttons, tooltips, popovers, dropdowns, icons, and layout primitives that match the widget's look and feel.
+---
+
 # UI Components
 
 `@react-trace/ui-components` provides UI primitives for building plugins that match the widget's look and feel.

apps/website/docs/guide/configuration.mdx

@@ -1,3 +1,7 @@
+---
+description: Configure React Trace props — toolbar position, editor presets, editing controls, and plugin options for both @react-trace/kit and @react-trace/core.
+---
+
 # Configuration
 
 ## `@react-trace/kit` props

apps/website/docs/guide/index.mdx

@@ -1,3 +1,7 @@
+---
+description: Learn how React Trace works — hover to inspect components, view props and source locations, and run plugin actions like code preview and editor integration.
+---
+
 import { Hotkey } from '../_components/Hotkey'
 
 # Introduction

apps/website/docs/guide/installation.mdx

@@ -1,3 +1,7 @@
+---
+description: Install React Trace with @react-trace/kit for a batteries-included setup, or use @react-trace/core with individual plugins for full control.
+---
+
 # Installation
 
 ## Recommended: `@react-trace/kit`

apps/website/docs/guide/production-stubs.mdx

@@ -1,3 +1,7 @@
+---
+description: How React Trace achieves zero production cost — conditional exports resolve to no-op stubs in production builds, adding no runtime overhead.
+---
+
 # Production Stubs
 
 React Trace is a development-only tool. Every package ships **conditional exports** that resolve to zero-cost no-op stubs in production builds.

apps/website/docs/index.mdx

@@ -1,3 +1,5 @@
 ---
 pageType: home
+title: React Trace
+description: A development-time React inspector that helps you identify rendered components, resolve their source locations, and run source-aware actions.
 ---

apps/website/docs/plugins/comments.mdx

@@ -1,23 +1,16 @@
+---
+description: Comments plugin for React Trace — add inline review comments anchored to components, then copy them to the clipboard or send directly to OpenCode.
+---
+
+import { Video } from '../_components/Video'
 import commentsDemo from '../../theme/videos/comments-demo.mp4'
+import commentsDemoPoster from '../../theme/videos/comments-demo.webp'
 
 # Comments Plugin
 
 `@react-trace/plugin-comments` adds lightweight review comments to the Trace widget. Collect comments anchored to specific components, then copy them to the clipboard or send them directly to OpenCode.
 
-<video
-  autoPlay
-  muted
-  loop
-  style={{
-    width: '100%',
-    borderRadius: '0.75rem',
-    border: '1px solid var(--rp-c-divider)',
-    marginTop: '1.5rem',
-    marginBottom: '1.5rem',
-  }}
->
-  <source src={commentsDemo} type="video/mp4" />
-</video>
+<Video demoPoster={commentsDemoPoster} demoVideo={commentsDemo} />
 
 ## Installation
 

apps/website/docs/plugins/copy-to-clipboard.mdx

@@ -1,23 +1,16 @@
+---
+description: Copy to Clipboard plugin for React Trace — copy the selected component's source location as a project-relative path:lineNumber reference.
+---
+
+import { Video } from '../_components/Video'
 import copyToClipboardDemo from '../../theme/videos/copy-to-clipboard-demo.mp4'
+import copyToClipboardDemoPoster from '../../theme/videos/copy-to-clipboard-demo.webp'
 
 # Copy to Clipboard Plugin
 
 `@react-trace/plugin-copy-to-clipboard` adds a **Copy path** action to the Trace action panel for copying the file:line of the seleced component.
 
-<video
-  autoPlay
-  muted
-  loop
-  style={{
-    width: '100%',
-    borderRadius: '0.75rem',
-    border: '1px solid var(--rp-c-divider)',
-    marginTop: '1.5rem',
-    marginBottom: '1.5rem',
-  }}
->
-  <source src={copyToClipboardDemo} type="video/mp4" />
-</video>
+<Video demoPoster={copyToClipboardDemoPoster} demoVideo={copyToClipboardDemo} />
 
 ## Installation