@bluefly/openstandardagents 0.2.4 → 0.2.5-RC

package/website/app/page.tsx

@@ -1,44 +1,44 @@
 import Link from 'next/link';
+import type { Metadata } from 'next';
 import { Logo } from '@/components/Logo';
 
+export const metadata: Metadata = {
+  title: 'Open Standard Agents - Industry Standard for Agent Orchestration',
+  description: 'The vendor-neutral specification for multi-agent systems. Write once, deploy anywhere. Zero vendor lock-in.',
+};
+
 export default function HomePage() {
   return (
     <div className="flex flex-col">
       {/* Hero Section */}
-      <section className="bg-gradient-hero text-white py-24 px-4">
+      <section className="bg-gradient-to-br from-secondary via-primary to-accent text-white py-24 px-4">
         <div className="container mx-auto max-w-7xl text-center">
-          <div className="mb-8 flex flex-col items-center">
-            <img
-              src="/assets/brand/ossa-logo.svg"
-              alt="OSSA Logo"
-              className="h-24 w-24 mb-6 animate-pulse"
-            />
-            <span className="inline-block px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
+          <div className="mb-6 flex flex-col items-center">
+            <span className="inline-block px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium mb-4">
               The OpenAPI for AI Agents
             </span>
           </div>
           <h1 className="text-6xl md:text-7xl font-bold mb-6 leading-tight">
-            Open Standard for{' '}
-            <span className="bg-gradient-to-r from-yellow-300 via-orange-300 to-pink-300 bg-clip-text text-transparent animate-pulse">
-              Scalable Agents
-            </span>
+            Open Standard for <span className="bg-gradient-to-r from-yellow-300 via-orange-300 to-pink-300 bg-clip-text text-transparent animate-pulse">Scalable Agents</span>
           </h1>
           <p className="text-3xl md:text-4xl mb-6 font-light">
             The Interoperability Layer Your Agents Are Missing
           </p>
-          <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-4xl mx-auto">
+          <p className="text-xl md:text-2xl mb-4 text-gray-200 max-w-4xl mx-auto">
             A vendor-neutral, open specification for defining, deploying, and managing AI agents.
+          </p>
+          <p className="text-lg mb-8 text-white max-w-4xl mx-auto">
             Just as OpenAPI standardizes REST APIs, Open Standard Agents standardizes agent interoperability
             across frameworks, runtimes, and organizations.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
-            <a href="#get-started" className="btn-primary text-lg px-8 py-4 border-2 border-transparent hover:border-white transition-all">
+            <Link href="#get-started" className="btn-primary text-lg px-8 py-4 border-2 border-transparent hover:border-white transition-all">
               Get Started
-            </a>
+            </Link>
             <Link href="https://github.com/blueflyio/openstandardagents" className="btn-outline border-white text-white hover:bg-white hover:text-primary text-lg px-8 py-4" target="_blank" rel="noopener noreferrer">
               View on GitHub
             </Link>
-            <Link href="/schema" className="btn-outline border-white text-white hover:bg-white hover:text-primary text-lg px-8 py-4">
+            <Link href="/schema/" className="btn-outline border-white text-white hover:bg-white hover:text-primary text-lg px-8 py-4">
               View Schema
             </Link>
           </div>
@@ -80,7 +80,7 @@ export default function HomePage() {
           <div className="prose prose-lg max-w-none">
             <p className="text-xl text-gray-700 mb-6 leading-relaxed">
               In the world of AI agents, <strong className="text-gray-900">everyone calls an agent something different</strong>.
-              LangChain has "chains," CrewAI has "crews," OpenAI has "assistants," Anthropic has Claude with "tools."
+              LangChain has &quot;chains,&quot; CrewAI has &quot;crews,&quot; OpenAI has &quot;assistants,&quot; Anthropic has Claude with &quot;tools.&quot;
               Every framework invents its own terminology, its own configuration format, its own orchestration model.
             </p>
             <p className="text-xl text-gray-700 mb-6 leading-relaxed">
@@ -91,7 +91,7 @@ export default function HomePage() {
             </p>
             <p className="text-xl text-gray-700 mb-6 leading-relaxed">
               Imagine if every API framework required its own documentation format—that was the world before OpenAPI.
-              Every API provider wrote docs differently, integration was chaos, and tooling couldn't be shared.
+              Every API provider wrote docs differently, integration was chaos, and tooling couldn&apos;t be shared.
               <strong className="text-gray-900"> OpenAPI solved this by creating one standard that every API could follow</strong>.
             </p>
             <div className="bg-white rounded-xl p-8 shadow-lg border-2 border-blue-200">
@@ -119,33 +119,30 @@ export default function HomePage() {
               runtimes, and organizations.
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-3 gap-8 mb-12">
             <div className="card-hover p-8">
-              
               <h3 className="text-2xl font-semibold mb-4 text-primary">Specification Standard</h3>
               <p className="text-gray-700 mb-4">
-                OSA is <strong>NOT a framework</strong> - it's a specification that defines the contract
+                OSSA is <strong>NOT a framework</strong> - it&apos;s a specification that defines the contract
                 for agent definition, deployment, and management.
               </p>
               <p className="text-gray-700">
-                Just like OpenAPI doesn't implement APIs, OSA doesn't implement agents.
+                Just like OpenAPI doesn&apos;t implement APIs, OSSA doesn&apos;t implement agents.
                 It provides the standard that implementations follow.
               </p>
             </div>
             <div className="card-hover p-8">
-              
               <h3 className="text-2xl font-semibold mb-4 text-primary">Framework-Agnostic</h3>
               <p className="text-gray-700 mb-4">
                 Works seamlessly with any LLM framework or SDK - LangChain, Anthropic, OpenAI,
                 CrewAI, Langflow, AutoGen, and more.
               </p>
               <p className="text-gray-700">
-                Deploy to Kubernetes, Docker, serverless, or on-premise. OSA is infrastructure-agnostic.
+                Deploy to Kubernetes, Docker, serverless, or on-premise. OSSA is infrastructure-agnostic.
               </p>
             </div>
             <div className="card-hover p-8">
-              
               <h3 className="text-2xl font-semibold mb-4 text-primary">Vendor-Neutral</h3>
               <p className="text-gray-700 mb-4">
                 No vendor lock-in. Write once, deploy anywhere. Move agents between teams,
@@ -158,64 +155,127 @@ export default function HomePage() {
           </div>
 
           {/* OpenAPI Comparison */}
-          <div className="bg-gray-50 rounded-xl p-8 md:p-12 mt-16">
-            <h3 className="text-3xl font-bold text-center mb-8">The OpenAPI for Agents</h3>
-            <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
-              <div>
-                <h4 className="text-xl font-semibold mb-4 text-primary">OpenAPI for REST APIs</h4>
+          <div className="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 rounded-2xl p-8 md:p-12 mt-16 border-2 border-blue-100 shadow-xl">
+            <div className="text-center mb-12">
+              <h3 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-secondary to-primary bg-clip-text text-transparent">
+                The OpenAPI for Agents
+              </h3>
+              <div className="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto rounded-full"></div>
+            </div>
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
+              <div className="bg-white rounded-lg p-6 border-2 border-blue-100 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h4 className="text-xl font-bold mb-5 text-primary pb-3 border-b-2 border-blue-100">OpenAPI for REST APIs</h4>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Standardizes REST API contracts</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Enables API interoperability</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Vendor-neutral specification</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">JSON Schema validation</span>
+                  </li>
+                </ul>
+              </div>
+              <div className="bg-white rounded-lg p-6 border-2 border-blue-100 shadow-md hover:shadow-xl hover:border-secondary transition-all duration-300">
+                <h4 className="text-xl font-bold mb-5 text-secondary pb-3 border-b-2 border-cyan-100">OSSA for AI Agents</h4>
                 <ul className="space-y-3 text-gray-700">
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Standardizes REST API contracts</span>
+                    <span className="font-medium">Standardizes AI agent contracts</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Enables API interoperability</span>
+                    <span className="font-medium">Enables agent interoperability</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Vendor-neutral specification</span>
+                    <span className="font-medium">Vendor-neutral specification</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>JSON Schema validation</span>
+                    <span className="font-medium">JSON Schema validation</span>
                   </li>
                 </ul>
               </div>
-              <div>
-                <h4 className="text-xl font-semibold mb-4 text-primary">OSA for AI Agents</h4>
+              <div className="bg-white rounded-lg p-6 border-2 border-blue-100 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h4 className="text-xl font-bold mb-5 text-primary pb-3 border-b-2 border-blue-100">OpenAPI Integration</h4>
                 <ul className="space-y-3 text-gray-700">
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Standardizes AI agent contracts</span>
+                    <span className="font-medium">Seamless OpenAPI compatibility</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Enables agent interoperability</span>
+                    <span className="font-medium">Import existing OpenAPI specs</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>Vendor-neutral specification</span>
+                    <span className="font-medium">Export agents as OpenAPI</span>
                   </li>
-                  <li className="flex items-start gap-2">
-                    <svg className="w-5 h-5 text-success mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                       <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                     </svg>
-                    <span>JSON Schema validation</span>
+                    <span className="font-medium">Unified API and agent standards</span>
+                  </li>
+                </ul>
+              </div>
+              <div className="bg-white rounded-lg p-6 border-2 border-blue-100 shadow-md hover:shadow-xl hover:border-secondary transition-all duration-300">
+                <h4 className="text-xl font-bold mb-5 text-secondary pb-3 border-b-2 border-cyan-100">API-to-Agent Bridge</h4>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Connect REST APIs to agents</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Use OpenAPI as agent tools</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Automatic API discovery</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <svg className="w-5 h-5 text-secondary mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    </svg>
+                    <span className="font-medium">Bidirectional integration</span>
                   </li>
                 </ul>
               </div>
@@ -233,7 +293,7 @@ export default function HomePage() {
               Install the CLI, create your first agent, and start building with Open Standard Agents.
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto mb-12">
             <div className="card p-8">
               <h3 className="text-2xl font-semibold mb-4 text-primary">1. Install CLI</h3>
@@ -270,9 +330,9 @@ osa export --to langchain`}</code>
               </div>
             </div>
           </div>
-          
+
           <div className="text-center">
-            <Link href="/docs/getting-started/5-minute-overview" className="btn-primary text-lg px-8 py-4">
+            <Link href="/docs/getting-started/5-minute-overview/" className="btn-primary text-lg px-8 py-4">
               Read Full Getting Started Guide
             </Link>
           </div>
@@ -290,19 +350,29 @@ osa export --to langchain`}</code>
             </p>
           </div>
 
-          {/* Logos Grid */}
-          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-items-center mb-12">
+          {/* Logos Grid - Row 1 */}
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-items-center mb-8">
             <Logo domain="openai.com" name="OpenAI" />
             <Logo domain="anthropic.com" name="Anthropic" />
-            <Logo domain="google.com" name="Google" />
+            <Logo domain="deepmind.google" name="Gemini" />
             <Logo domain="microsoft.com" name="Microsoft" />
             <Logo domain="langchain.com" name="LangChain" />
             <Logo domain="huggingface.co" name="Hugging Face" />
-            <Logo domain="kagent.dev" name="Kagent" />
+          </div>
+
+          {/* Logos Grid - Row 2 */}
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 items-center justify-items-center mb-12">
+            <Logo domain="kagent.dev" name="kAgent" />
+            <Logo domain="crewai.com" name="CrewAI" />
+            <Logo domain="langflow.com" name="Langflow" />
+            <Logo domain="llamaindex.ai" name="LlamaIndex" />
+            <Logo domain="langchain.com" name="LangGraph" />
+            <Logo domain="modelcontextprotocol.io" name="MCP" />
+            <Logo domain="drupal.org" name="Drupal" />
+            <Logo domain="librechat.com" name="LibreChat" />
             <Logo domain="docker.com" name="Docker" />
             <Logo domain="kubernetes.io" name="Kubernetes" />
             <Logo domain="aws.amazon.com" name="AWS" />
-            <Logo domain="cursor.sh" name="Cursor" />
             <Logo domain="github.com" name="GitHub" />
           </div>
 
@@ -310,7 +380,7 @@ osa export --to langchain`}</code>
             <p className="text-lg text-gray-600 mb-6">
               And many more frameworks, platforms, and tools...
             </p>
-            <Link href="/docs/ecosystem/framework-support" className="btn-primary">
+            <Link href="/docs/ecosystem/framework-support/" className="btn-primary">
               View All Integrations
             </Link>
           </div>
@@ -327,7 +397,7 @@ osa export --to langchain`}</code>
               frameworks, teams, and infrastructures.
             </p>
           </div>
-          
+
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
             <div className="card-hover p-6 text-center">
               <h3 className="text-xl font-semibold mb-3">Framework-Agnostic</h3>
@@ -336,47 +406,43 @@ osa export --to langchain`}</code>
                 No vendor lock-in.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
-              
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Portable</h3>
               <p className="text-gray-700">
                 Move agents between teams, organizations, and infrastructures without rewriting code.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Validatable</h3>
               <p className="text-gray-700">
                 JSON Schema validation ensures correctness before deployment. Catch errors early.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Well-Documented</h3>
               <p className="text-gray-700">
                 Comprehensive documentation, examples, and tooling. Built for developers, by developers.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
-              
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Open Source</h3>
               <p className="text-gray-700">
                 Apache 2.0 licensed. Community-driven. Transparent development process.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
-              
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Fast Integration</h3>
               <p className="text-gray-700">
                 Export to any framework format. Import existing agents. Seamless migration paths.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
-              
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Secure by Design</h3>
               <p className="text-gray-700">
                 Built-in security patterns, authentication, and compliance features.
               </p>
             </div>
-            <div className="card-hover p-6 text-center">
+            <div className="bg-white border border-gray-200 rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
               <h3 className="text-xl font-semibold mb-3">Observable</h3>
               <p className="text-gray-700">
                 Built-in observability, logging, and monitoring. Track agent performance and behavior.
@@ -394,7 +460,7 @@ osa export --to langchain`}</code>
             Join the community and start building with Open Standard Agents today.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link href="/examples" className="btn-secondary bg-white text-primary hover:bg-gray-100">
+            <Link href="/examples/" className="btn-secondary">
               View Examples
             </Link>
             <Link href="https://github.com/blueflyio/openstandardagents/issues" className="btn-outline border-white text-white hover:bg-white hover:text-primary" target="_blank" rel="noopener noreferrer">
@@ -406,4 +472,3 @@ osa export --to langchain`}</code>
     </div>
   );
 }
-

package/website/app/playground/page.tsx

@@ -2,29 +2,15 @@
 
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
+import { STABLE_VERSION, STABLE_VERSION_TAG } from '@/lib/version';
 
 const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
   ssr: false,
 });
 
-const exampleManifest = `apiVersion: ossa/v0.2.3
-kind: Agent
-
-metadata:
-  name: my-first-agent
-  version: 1.0.0
-  description: My first Open Standard Agents manifest
-
-spec:
-  role: You are a helpful assistant
-  llm:
-    provider: openai
-    model: gpt-4
-  tools: []
-`;
-
-const templates = {
-  simple: `apiVersion: ossa/v0.2.3
+// Dynamic templates using current stable version
+const getTemplates = (version: string) => ({
+  simple: `apiVersion: ossa/v${version}
 kind: Agent
 
 metadata:
@@ -39,7 +25,7 @@ spec:
     model: gpt-4
   tools: []`,
 
-  withTools: `apiVersion: ossa/v0.2.3
+  withTools: `apiVersion: ossa/v${version}
 kind: Agent
 
 metadata:
@@ -58,7 +44,7 @@ spec:
       endpoint: https://api.search.com/search
       method: GET`,
 
-  autonomous: `apiVersion: ossa/v0.2.3
+  autonomous: `apiVersion: ossa/v${version}
 kind: Agent
 
 metadata:
@@ -83,7 +69,7 @@ spec:
     human_in_loop:
       notification_channels: [slack]`,
 
-  fullStack: `apiVersion: ossa/v0.2.3
+  fullStack: `apiVersion: ossa/v${version}
 kind: Agent
 
 metadata:
@@ -139,10 +125,11 @@ spec:
 
 extensions:
   kagent:
-    mesh_discovery: true`
-};
+    mesh_discovery: true`,
+});
 
 export default function PlaygroundPage() {
+  const [templates] = useState(getTemplates(STABLE_VERSION));
   const [code, setCode] = useState(templates.simple);
   const [validationResult, setValidationResult] = useState<{
     valid: boolean;
@@ -155,8 +142,8 @@ export default function PlaygroundPage() {
     setIsValidating(true);
     try {
       // For static export, we'll use a client-side validation approach
-      // Load schema and validate in browser
-      const schemaResponse = await fetch('/schemas/ossa-0.2.3.schema.json');
+      // Load schema and validate in browser - use dynamic version
+      const schemaResponse = await fetch(`/schemas/ossa-${STABLE_VERSION}.schema.json`);
       if (!schemaResponse.ok) {
         throw new Error('Failed to load schema');
       }
@@ -230,7 +217,7 @@ export default function PlaygroundPage() {
   return (
     <>
       {/* Hero Section */}
-      <div className="bg-gradient-to-br from-primary via-accent to-secondary text-white py-16 px-4">
+      <div className="bg-gradient-to-br from-secondary via-primary to-accent text-white py-16 px-4">
         <div className="container mx-auto max-w-6xl text-center">
           <div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full mb-6">
             <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -256,21 +243,21 @@ export default function PlaygroundPage() {
             <button
               onClick={handleValidate}
               disabled={isValidating}
-              className="bg-gradient-to-r from-primary to-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all disabled:opacity-50"
+              className="bg-gradient-to-r from-secondary via-primary to-accent text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all disabled:opacity-50"
             >
-              {isValidating ? '⏳ Validating...' : '✓ Validate Manifest'}
+              {isValidating ? 'Validating...' : 'Validate Manifest'}
             </button>
             <button
               onClick={downloadManifest}
               className="bg-white border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-all"
             >
-              ⬇️ Download YAML
+              Download YAML
             </button>
             <button
               onClick={copyToClipboard}
               className="bg-white border-2 border-secondary text-secondary px-6 py-3 rounded-lg font-medium hover:bg-secondary hover:text-white transition-all"
             >
-              📋 Copy to Clipboard
+              Copy to Clipboard
             </button>
           </div>
           <div className="flex gap-2 items-center">
@@ -283,7 +270,7 @@ export default function PlaygroundPage() {
 
       {/* Template Selector */}
       <div className="mb-6">
-        <h2 className="text-2xl font-bold mb-4 text-gray-900">📚 Quick Start Templates</h2>
+        <h2 className="text-2xl font-bold mb-4 text-gray-900">Quick Start Templates</h2>
         <div className="grid md:grid-cols-4 gap-4">
           <button
             onClick={() => loadTemplate('simple')}
@@ -293,7 +280,6 @@ export default function PlaygroundPage() {
                 : 'border-gray-300 hover:border-primary/50 hover:shadow-md'
             }`}
           >
-            <div className="text-2xl mb-2">🚀</div>
             <div className="font-bold mb-1">Simple Agent</div>
             <div className="text-sm text-gray-600">Basic manifest structure</div>
           </button>
@@ -306,7 +292,6 @@ export default function PlaygroundPage() {
                 : 'border-gray-300 hover:border-primary/50 hover:shadow-md'
             }`}
           >
-            <div className="text-2xl mb-2">🔧</div>
             <div className="font-bold mb-1">With Tools</div>
             <div className="text-sm text-gray-600">HTTP API integration</div>
           </button>
@@ -319,7 +304,6 @@ export default function PlaygroundPage() {
                 : 'border-gray-300 hover:border-primary/50 hover:shadow-md'
             }`}
           >
-            <div className="text-2xl mb-2">🎯</div>
             <div className="font-bold mb-1">Autonomous</div>
             <div className="text-sm text-gray-600">With autonomy controls</div>
           </button>
@@ -332,7 +316,6 @@ export default function PlaygroundPage() {
                 : 'border-gray-300 hover:border-primary/50 hover:shadow-md'
             }`}
           >
-            <div className="text-2xl mb-2">⚡</div>
             <div className="font-bold mb-1">Full Stack</div>
             <div className="text-sm text-gray-600">Complete production setup</div>
           </button>
@@ -342,7 +325,7 @@ export default function PlaygroundPage() {
       <div className="grid lg:grid-cols-2 gap-6 mb-6">
         <div className="card border-2 border-gray-300">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-2xl font-semibold">📝 Editor</h2>
+            <h2 className="text-2xl font-semibold">Editor</h2>
             <span className="text-sm bg-gray-100 px-3 py-1 rounded-full">YAML Format</span>
           </div>
           <div className="border-2 border-gray-300 rounded-lg overflow-hidden shadow-md" style={{ height: '600px' }}>
@@ -369,7 +352,7 @@ export default function PlaygroundPage() {
 
           {validationResult === null ? (
             <div className="text-center py-16 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-dashed border-gray-300">
-              <div className="text-6xl mb-4">🔍</div>
+              <div className="text-6xl mb-4 text-gray-400">✓</div>
               <p className="text-gray-600 text-lg mb-2">Ready to validate</p>
               <p className="text-gray-500 text-sm">Click "Validate Manifest" above to check your OSSA manifest</p>
             </div>
@@ -396,7 +379,7 @@ export default function PlaygroundPage() {
                     Manifest is Valid! ✓
                   </div>
                   <p className="text-base text-green-800">
-                    Conforms to OSSA v0.2.3 specification
+                    Conforms to OSSA {STABLE_VERSION_TAG} specification
                   </p>
                 </div>
               </div>
@@ -476,23 +459,20 @@ export default function PlaygroundPage() {
 
           {/* Help Section */}
           <div className="mt-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-5 border border-blue-200">
-            <h3 className="font-bold text-blue-900 mb-3 flex items-center">
-              <span className="text-xl mr-2">💡</span>
-              Need Help?
-            </h3>
+            <h3 className="font-bold text-blue-900 mb-3">Need Help?</h3>
             <div className="space-y-2 text-sm">
               <div className="bg-white rounded-lg p-3 border border-blue-100">
-                <strong className="text-blue-900">📖 View Schema Reference</strong>
+                <strong className="text-blue-900">View Schema Reference</strong>
                 <p className="text-gray-700 mt-1">Complete documentation of all fields</p>
                 <a href="/schema" className="text-blue-600 hover:underline mt-1 inline-block">Visit Schema Page →</a>
               </div>
               <div className="bg-white rounded-lg p-3 border border-blue-100">
-                <strong className="text-blue-900">📚 Browse Examples</strong>
+                <strong className="text-blue-900">Browse Examples</strong>
                 <p className="text-gray-700 mt-1">58+ real-world agent manifests</p>
                 <a href="/examples" className="text-blue-600 hover:underline mt-1 inline-block">View Examples →</a>
               </div>
               <div className="bg-white rounded-lg p-3 border border-blue-100">
-                <strong className="text-blue-900">📖 Read Documentation</strong>
+                <strong className="text-blue-900">Read Documentation</strong>
                 <p className="text-gray-700 mt-1">Complete guides and tutorials</p>
                 <a href="/docs" className="text-blue-600 hover:underline mt-1 inline-block">Read Docs →</a>
               </div>