get-advantage · pattan · May 7, 2026 · May 7, 2026 · May 7, 2026 · May 7, 2026
diff --git a/www/docs/concepts/creative.md b/www/docs/concepts/creative.md
@@ -6,9 +6,13 @@ pageClass: docs
 
 # Creative
 
-The interaction between a creative (the advertisement content itself) and an [Format](formats.md) on publisher sites, is a nuanced process that enables dynamic, efficient, and standardize process.
+The **Creative** is the advertisement content itself (usually an HTML/JS file). For a creative to become "High Impact," it needs to communicate with the website it is being displayed on.
 
-AdVantage utilize a messaging protocol for managing ad interactions in a secure container. AdVantage and the creative communicate by excanging asynchronous signals that maintain a custom messaging protocol. In the most simplistic overview of how it works, the steps are as follows:
+Advantage uses a **Messaging Protocol** to bridge the gap between the ad (inside an iframe) and the website. This allows the ad to safely request more space, handle scroll events, or trigger full-screen effects.
+
+### How Communication Works
+
+The Advantage and the creative communicate by exchanging asynchronous signals. In the most simplistic overview:
 
 1. <code>[pre-AdVantage]</code> an ad is matched and delivered to a webpages placement.
 2. Once in a state to receive information, the creative informs AdVantage that it is ready to receive initialization information.

diff --git a/www/docs/concepts/wrapper.md b/www/docs/concepts/wrapper.md
@@ -6,7 +6,9 @@ pageClass: docs
 
 # Wrapper
 
-The Wrapper is a web component that acts as a container or placeholder for ad placements on a webpage. It's designed to securely and efficiently load the designated [format](formats.md) into the page's content, ensuring that ads are displayed in the intended manner without disrupting the user experience or site layout.
+The **Wrapper** is a custom HTML tag (`<advantage-wrapper>`) that acts as a container for your ad slots. Think of it as a "smart box" for your ads. When a normal ad is served, the box does nothing. But when a high-impact Advantage ad is served, the box tells the website how to change its layout to accommodate the ad.
+
+It's designed to securely and efficiently load the designated [format](formats.md) into the page's content, ensuring that ads are displayed in the intended manner without disrupting the user experience or site layout.
 
 <div class="tip custom-block" style="padding-top: 8px">
   ℹ️ Using the Advantage Wrapper is highly recommended as it makes implementing Advantage high-impact formats on your website quick and easy. But if you already have custom implementations of the formats that you want, you can choose not to use the wrapper.

diff --git a/www/docs/index.md b/www/docs/index.md
@@ -2,136 +2,140 @@
 pageClass: docs
 ---
 
+<style>
+.path-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  margin: 2.5rem 0;
+}
+@media (min-width: 768px) {
+  .path-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.path-card {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.75rem;
+  transition: border-color 0.2s;
+  background: var(--vp-c-bg-soft);
+}
+.dark .path-card {
+  border-color: #3f3f46;
+}
+.path-card:hover {
+  border-color: #6b04fd;
+}
+.icon-box {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  color: white;
+  background-color: #6b04fd;
+  transition: background-color 0.2s;
+  text-decoration: none !important;
+}
+.btn-primary:hover {
+  background-color: #5b03d6;
+}
+</style>
+
 <p class="text-sm text-slate-500"><code>Docs > Get started</code></p>
 
-# Get Started with Advantage
+# Welcome to Advantage
 
 <div class="tip custom-block" style="padding-top: 8px">
-  ℹ️ Advantage is still in <code>BETA</code>. Big changes might happen in the near future
+  ℹ️ Advantage is still in <code>BETA</code>. Big changes might happen in the near future.
 </div>
 
-Welcome to the Advantage documentation! Advantage revolutionizes high-impact display advertising by providing a unified, secure, and standardized platform for both publishers and advertisers. Whether you're looking to implement high-impact formats on your website or create engaging advertisements, this documentation will guide you through every step.
-
-## Quick Start
-
-### For Publishers & Website Owners
-
-Ready to implement high-impact advertising formats on your site? Start with our comprehensive publisher guide.
-
-👉 **[Publisher Tutorial](./tutorial/publisher)** - Learn how to integrate Advantage on your website
-
-### For Creatives & Advertisers
-
-Want to create compelling Advantage-compatible advertisements? Our creative tutorial has you covered.
-
-👉 **[Creative Tutorial](./tutorial/creative)** - Build high-impact ads that work seamlessly across platforms
-
-## What You'll Learn
-
-### 🎯 **Core Concepts**
-
-Understand the fundamental building blocks of Advantage:
-
--   **[Formats](./concepts/formats.md)** - High-impact ad formats like Topscroll, Midscroll, and Welcome Page
--   **[Wrapper](./concepts/wrapper.md)** - The secure container that manages ad display
--   **[Messaging Protocol](./concepts/creative.md)** - How ads communicate with websites
--   **[UI Layer](./concepts/ui-layer.md)** - Customization and theming options
--   **[Integrations](./concepts/integration.md)** - How formats connect with your website
+Advantage is a unified, secure, and standardized platform for high-impact display advertising.
+**Choose the path that best fits your role to get started.**
+
+<div class="path-grid">
+
+  <!-- Publisher AdOps Path -->
+  <div class="path-card">
+    <div class="icon-box" style="background-color: #f3e8ff;">
+      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" style="width: 1.5rem; height: 1.5rem; color: #9333ea;" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
+    </div>
+    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 0;">Publisher (AdOps)</h3>
+    <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; flex-grow: 1;">
+      The fastest way to get Advantage running on your site. No complex build tools required.
+    </p>
+    <a href="./tutorial/publisher#quick-start-cdn" class="btn-primary" style="background-color: #9333ea;">
+      Quick Start Guide
+    </a>
+  </div>
+
+  <!-- Publisher Developer Path -->
+  <div class="path-card">
+    <div class="icon-box" style="background-color: #dbeafe;">
+      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" style="width: 1.5rem; height: 1.5rem; color: #2563eb;" xmlns="http://www.w3.org/2000/svg"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+    </div>
+    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 0;">Publisher (Dev)</h3>
+    <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; flex-grow: 1;">
+      Full control and customization. Integrate via NPM and leverage our comprehensive API.
+    </p>
+    <a href="./tutorial/publisher#advanced-implementation-npm" class="btn-primary" style="background-color: #2563eb;">
+      Developer Guide
+    </a>
+  </div>
+
+  <!-- Creative Path -->
+  <div class="path-card">
+    <div class="icon-box" style="background-color: #dcfce7;">
+      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" style="width: 1.5rem; height: 1.5rem; color: #16a34a;" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+    </div>
+    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 0;">Creatives</h3>
+    <p style="font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; flex-grow: 1;">
+      Build ads that work everywhere. Learn how to use our messaging protocol for high-impact ads.
+    </p>
+    <a href="./tutorial/creative" class="btn-primary" style="background-color: #16a34a;">
+      Creative Guide
+    </a>
+  </div>
 
-### 🛠 **Available Formats**
-
-Explore the high-impact formats available in Advantage:
-
--   **[Topscroll](./formats/topscroll.md)** - Premium branding format that appears at the top
--   **[Midscroll](./formats/midscroll.md)** - Engaging mid-content format with parallax effects
--   **[Welcome Page](./formats/welcome_page.md)** - Full-screen welcome experience
--   **[Double Midscroll](./formats/double_midscroll.md)** - Extended midscroll format
-
-### 💡 **Developer Tools**
-
-Enhance your development workflow:
-
--   **[MCP Server](./ai-tools.md)** - AI-powered development assistance with live documentation access
--   **[Examples](./examples/hello-world.md)** - Ready-to-use code samples and implementations
-
-## Key Features
-
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
-
-<div class="p-6 border border-gray-200 rounded-lg">
-  <h3 class="text-lg font-semibold mb-3">📐 Unified Standards</h3>
-  <p>Consistent implementation across all platforms and buying channels, simplifying the advertising ecosystem.</p>
 </div>
 
-<div class="p-6 border border-gray-200 rounded-lg">
-  <h3 class="text-lg font-semibold mb-3">🔒 Secure By Default</h3>
-  <p>Built-in security measures protect both publishers and users while maintaining ad effectiveness.</p>
-</div>
-
-<div class="p-6 border border-gray-200 rounded-lg">
-  <h3 class="text-lg font-semibold mb-3">🛠 Flexible Customization</h3>
-  <p>Adapt formats to match your brand and user experience while maintaining performance standards.</p>
-</div>
-
-<div class="p-6 border border-gray-200 rounded-lg">
-  <h3 class="text-lg font-semibold mb-3">⚡️ Efficiency & Effectiveness</h3>
-  <p>Optimized performance ensures fast loading times and maximum user engagement.</p>
-</div>
+## Explore More
 
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+  <a href="./concepts/formats" class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 transition-colors">
+    <strong>🎯 Core Concepts</strong><br>
+    <span class="text-sm text-gray-500">Learn about Formats, Wrappers, and the Messaging Protocol.</span>
+  </a>
+  <a href="./formats/topscroll" class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 transition-colors">
+    <strong>🛠 Available Formats</strong><br>
+    <span class="text-sm text-gray-500">Specs for Topscroll, Midscroll, Welcome Page and more.</span>
+  </a>
+  <a href="./examples/hello-world" class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 transition-colors">
+    <strong>💡 Developer Tools</strong><br>
+    <span class="text-sm text-gray-500">MCP Server and ready-to-use code examples.</span>
+  </a>
+  <a href="../api/" class="p-4 border border-gray-100 rounded-lg hover:bg-gray-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50 transition-colors">
+    <strong>🔧 API Reference</strong><br>
+    <span class="text-sm text-gray-500">Complete TypeScript API documentation.</span>
+  </a>
 </div>
 
-## Common Use Cases
-
-### Publishers
-
--   **News & Media Sites** - Implement non-intrusive high-impact formats that maintain reading flow
--   **E-commerce Platforms** - Showcase promotional content without disrupting the shopping experience
--   **Content Publishers** - Monetize content with engaging, brand-safe advertising formats
-
-### Advertisers & Agencies
-
--   **Brand Awareness Campaigns** - Create memorable experiences with Topscroll and Welcome Page formats
--   **Product Launches** - Use high-impact formats to generate buzz and drive engagement
--   **Programmatic Buying** - Standardized implementation across multiple publisher sites
-
-## Getting Help
-
-### 📚 Documentation Structure
-
--   **Tutorials** - Step-by-step guides for implementation
--   **Concepts** - In-depth explanations of core functionality
--   **Formats** - Detailed specifications for each ad format
--   **Examples** - Working code samples and implementations
--   **API Reference** - Complete technical documentation
-
-### 🤝 Community & Support
+## Community & Support
 
 -   **[GitHub Issues](https://github.com/get-advantage/advantage/issues)** - Report bugs and request features
 -   **[Slack Community](https://join.slack.com/t/get-advantage/shared_invite/zt-2gy6c4z4m-4~pIuwRfe8eqPM5H7iV9MQ)** - Connect with other developers and get help
 -   **[Contributing Guide](../about/contributions.md)** - Learn how to contribute to the project
-
-### 🔧 Development Resources
-
--   **[API Documentation](../api/)** - Complete TypeScript API reference
--   **[GitHub Repository](https://github.com/get-advantage/advantage)** - Source code and examples
--   **[Changelog](./changelog.md)** - Track updates and new features
-
-## Next Steps
-
-<div class="flex flex-col sm:flex-row gap-4 my-8">
-  <a href="./tutorial/publisher" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
-    Start as Publisher
-    <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-    </svg>
-  </a>
-
-  <a href="./tutorial/creative" class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors">
-    Start as Creative
-    <svg class="ml-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-    </svg>
-  </a>
-</div>
-
-Ready to transform your advertising experience? Choose your path above and start building with Advantage today!