docs(website): add widget GIFs and demo to docs

website/src/content/docs/features/widget.mdx

@@ -74,6 +74,7 @@ import { AeoVueWidget } from 'aeo.js/vue';
 widget: {
   enabled: true,
   position: 'bottom-right', // 'bottom-left' | 'top-right' | 'top-left'
+  size: 'default',          // 'small' | 'icon-only'
   humanLabel: 'Human',
   aiLabel: 'AI',
   showBadge: true,
@@ -86,6 +87,14 @@ widget: {
 }
 ```
 
+## Size variants
+
+| Default | Small | Icon |
+|---------|-------|------|
+| ![Default widget](/widget-default.gif) | ![Small widget](/widget-small.gif) | ![Icon widget](/widget-icon.gif) |
+| `size: 'default'` | `size: 'small'` | `size: 'icon-only'` |
+| Full labels with icons | Compact — ~30% smaller | Just icons, no labels |
+
 <Aside type="tip">
 Set `widget.enabled: false` to disable the widget entirely while still generating AEO files.
 </Aside>

website/src/content/docs/getting-started/introduction.mdx

@@ -3,6 +3,8 @@ title: Introduction
 description: What is aeo.js and why you need Answer Engine Optimization.
 ---
 
+![aeo.js in action](/example.gif)
+
 ## What is Answer Engine Optimization?
 
 Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like **ChatGPT**, **Claude**, **Perplexity**, and **SearchGPT**.