new file: aethex-dev-docs.zip

client/App.tsx

@@ -56,6 +56,11 @@ import GameJoltIntegration from "./pages/docs/integrations/GameJolt";
 import ItchIoIntegration from "./pages/docs/integrations/ItchIo";
 import DocsCurriculum from "./pages/docs/DocsCurriculum";
 import DocsCurriculumEthos from "./pages/docs/DocsCurriculumEthos";
+import DocsLangOverview from "./pages/docs/lang/DocsLangOverview";
+import DocsLangQuickstart from "./pages/docs/lang/DocsLangQuickstart";
+import DocsLangSyntax from "./pages/docs/lang/DocsLangSyntax";
+import DocsLangCli from "./pages/docs/lang/DocsLangCli";
+import DocsLangExamples from "./pages/docs/lang/DocsLangExamples";
 import EthosGuild from "./pages/community/EthosGuild";
 import TrackLibrary from "./pages/ethos/TrackLibrary";
 import ArtistProfile from "./pages/ethos/ArtistProfile";
@@ -179,6 +184,7 @@ import MarketplaceItemDetail from "./pages/dev-platform/MarketplaceItemDetail";
 import CodeExamples from "./pages/dev-platform/CodeExamples";
 import ExampleDetail from "./pages/dev-platform/ExampleDetail";
 import DeveloperPlatform from "./pages/dev-platform/DeveloperPlatform";
+import AethexLang from "./pages/dev-platform/AethexLang";
 
 const queryClient = new QueryClient();
 
@@ -663,6 +669,12 @@ const App = () => (
                             path="integrations/itchio"
                             element={<ItchIoIntegration />}
                           />
+                          {/* AeThex Language Docs */}
+                          <Route path="lang" element={<DocsLangOverview />} />
+                          <Route path="lang/quickstart" element={<DocsLangQuickstart />} />
+                          <Route path="lang/syntax" element={<DocsLangSyntax />} />
+                          <Route path="lang/cli" element={<DocsLangCli />} />
+                          <Route path="lang/examples" element={<DocsLangExamples />} />
                         </Route>
                         <Route path="/tutorials" element={<Tutorials />} />
                         <Route path="/community/*" element={<Community />} />
@@ -891,6 +903,7 @@ const App = () => (
                         <Route path="/dev-platform/marketplace/:id" element={<MarketplaceItemDetail />} />
                         <Route path="/dev-platform/examples" element={<CodeExamples />} />
                         <Route path="/dev-platform/examples/:id" element={<ExampleDetail />} />
+                        <Route path="/lang" element={<AethexLang />} />
 
                         {/* Explicit 404 route for static hosting fallbacks */}
                         <Route path="/404" element={<FourOhFourPage />} />

client/components/docs/DocsLayout.tsx

@@ -81,6 +81,12 @@ const docNavigation: DocNavItem[] = [
     icon: <BookOpen className="h-5 w-5" />,
     description: "Learning paths",
   },
+  {
+    title: "AeThex Language",
+    path: "/docs/lang",
+    icon: <Code2 className="h-5 w-5" />,
+    description: "AeThex programming language",
+  },
 ];
 
 interface DocsLayoutProps {

client/pages/dev-platform/AethexLang.tsx

@@ -0,0 +1,436 @@
+import Layout from "@/components/Layout";
+import SEO from "@/components/SEO";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Link } from "react-router-dom";
+import {
+  Package,
+  Shield,
+  Users,
+  Zap,
+  Copy,
+  CheckCircle2,
+  ArrowRight,
+  ExternalLink,
+  Github,
+  Terminal,
+  Code,
+  Lock,
+  Globe,
+  FileText,
+} from "lucide-react";
+import { useState } from "react";
+
+const PACKAGE_VERSION = "1.0.0";
+
+const features = [
+  {
+    icon: Users,
+    title: "Passport",
+    description: "Universal identity across platforms - authenticate users seamlessly on Roblox, web, and more",
+    color: "text-blue-500",
+    bgColor: "bg-blue-500/10",
+  },
+  {
+    icon: Zap,
+    title: "DataSync",
+    description: "Cross-platform data synchronization for real-time state management",
+    color: "text-yellow-500",
+    bgColor: "bg-yellow-500/10",
+  },
+  {
+    icon: Shield,
+    title: "SafeInput",
+    description: "PII detection and scrubbing - critical for CODEX and child safety compliance",
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+  {
+    icon: Lock,
+    title: "Compliance",
+    description: "Built-in COPPA/FERPA compliance checks with audit trail logging",
+    color: "text-purple-500",
+    bgColor: "bg-purple-500/10",
+  },
+];
+
+const platforms = [
+  { name: "Roblox", supported: true },
+  { name: "UEFN", supported: true },
+  { name: "Unity", supported: true },
+  { name: "Web", supported: true },
+  { name: "Node.js", supported: true },
+];
+
+const codeExamples = {
+  passport: `const { Passport } = require('@aethex.os/core');
+
+const passport = new Passport('user123', 'PlayerOne');
+await passport.verify();
+await passport.syncAcross(['roblox', 'web']);`,
+  safeinput: `const { SafeInput } = require('@aethex.os/core');
+
+// Detect PII
+const detected = SafeInput.detectPII('Call me at 555-1234');
+// Returns: ['phone']
+
+// Scrub PII
+const clean = SafeInput.scrub('My email is user@example.com');
+// Returns: 'My email is [EMAIL_REDACTED]'
+
+// Validate input
+const result = SafeInput.validate('PlayerName123');
+if (result.valid) {
+  console.log('Safe to use');
+}`,
+  compliance: `const { Compliance } = require('@aethex.os/core');
+
+// Age gate
+if (Compliance.isCOPPACompliant(userAge)) {
+  // User is 13+
+}
+
+// Check data collection permission
+if (Compliance.canCollectData(user)) {
+  // Safe to collect
+}
+
+// Log compliance check for audit
+Compliance.logCheck(userId, 'leaderboard_submission', true);`,
+  datasync: `const { DataSync } = require('@aethex.os/core');
+
+// Sync data across platforms
+await DataSync.sync({
+  inventory: playerInventory,
+  progress: gameProgress
+}, ['roblox', 'web']);
+
+// Pull data from specific platform
+const data = await DataSync.pull(userId, 'roblox');`,
+};
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={handleCopy}
+      className="absolute top-2 right-2 h-8 w-8 p-0"
+    >
+      {copied ? (
+        <CheckCircle2 className="h-4 w-4 text-green-500" />
+      ) : (
+        <Copy className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
+
+function CodeBlock({ code, language = "javascript" }: { code: string; language?: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+export default function AethexLang() {
+  return (
+    <Layout>
+      <SEO
+        pageTitle="@aethex.os/core | AeThex Language Standard Library"
+        description="Cross-platform utilities for authentication, data sync, and compliance. Build safer metaverse experiences with built-in COPPA support."
+      />
+      <div className="space-y-16">
+        {/* Hero Section */}
+        <section className="text-center max-w-4xl mx-auto space-y-6">
+          <div className="flex items-center justify-center gap-3 mb-4">
+            <Badge className="text-sm px-4 py-1 bg-purple-500/20 text-purple-400 border-purple-500/30">
+              v{PACKAGE_VERSION}
+            </Badge>
+            <Badge variant="outline" className="text-sm px-4 py-1">
+              MIT License
+            </Badge>
+          </div>
+          <h1 className="text-5xl font-bold tracking-tight">
+            <span className="text-primary">@aethex.os/core</span>
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            AeThex Language Standard Library — Cross-platform utilities for authentication, 
+            data sync, and compliance across the metaverse.
+          </p>
+          
+          {/* Install Command */}
+          <div className="relative max-w-md mx-auto">
+            <div className="flex items-center gap-3 bg-slate-900 border border-slate-700 rounded-lg px-4 py-3">
+              <Terminal className="h-5 w-5 text-slate-500" />
+              <code className="text-sm font-mono text-slate-300 flex-1 text-left">
+                npm install @aethex.os/core
+              </code>
+              <CopyButton text="npm install @aethex.os/core" />
+            </div>
+          </div>
+
+          <div className="flex gap-4 justify-center pt-4">
+            <a 
+              href="https://www.npmjs.com/package/@aethex.os/core" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button size="lg">
+                <Package className="w-4 h-4 mr-2" />
+                View on npm
+                <ExternalLink className="w-4 h-4 ml-2" />
+              </Button>
+            </a>
+            <a 
+              href="https://github.com/AeThex-Corporation/AeThexOS" 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <Button size="lg" variant="outline">
+                <Github className="w-4 h-4 mr-2" />
+                GitHub
+              </Button>
+            </a>
+          </div>
+        </section>
+
+        {/* Platform Support */}
+        <section className="text-center">
+          <p className="text-sm text-muted-foreground mb-4">Works everywhere you build</p>
+          <div className="flex flex-wrap justify-center gap-3">
+            {platforms.map((platform) => (
+              <Badge
+                key={platform.name}
+                variant="outline"
+                className="px-4 py-2 text-sm"
+              >
+                <Globe className="w-3 h-3 mr-2" />
+                {platform.name}
+              </Badge>
+            ))}
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section>
+          <h2 className="text-3xl font-bold text-center mb-4">Core Modules</h2>
+          <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
+            Everything you need to build safe, compliant, cross-platform experiences
+          </p>
+          <div className="grid md:grid-cols-2 gap-6">
+            {features.map((feature) => (
+              <Card key={feature.title} className="p-6 hover:border-primary/50 transition-all">
+                <div className={`w-12 h-12 rounded-lg ${feature.bgColor} flex items-center justify-center mb-4`}>
+                  <feature.icon className={`w-6 h-6 ${feature.color}`} />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+                <p className="text-muted-foreground">{feature.description}</p>
+              </Card>
+            ))}
+          </div>
+        </section>
+
+        {/* Code Examples */}
+        <section>
+          <h2 className="text-3xl font-bold text-center mb-4">Quick Examples</h2>
+          <p className="text-center text-muted-foreground mb-8 max-w-2xl mx-auto">
+            Get started in minutes with these production-ready code snippets
+          </p>
+          
+          <Tabs defaultValue="passport" className="max-w-4xl mx-auto">
+            <TabsList className="grid w-full grid-cols-4">
+              <TabsTrigger value="passport">Passport</TabsTrigger>
+              <TabsTrigger value="safeinput">SafeInput</TabsTrigger>
+              <TabsTrigger value="compliance">Compliance</TabsTrigger>
+              <TabsTrigger value="datasync">DataSync</TabsTrigger>
+            </TabsList>
+            <TabsContent value="passport" className="mt-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Users className="w-5 h-5 text-blue-500" />
+                    Passport - Universal Identity
+                  </CardTitle>
+                  <CardDescription>
+                    Authenticate users once, verify them everywhere
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CodeBlock code={codeExamples.passport} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+            <TabsContent value="safeinput" className="mt-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Shield className="w-5 h-5 text-green-500" />
+                    SafeInput - PII Detection
+                  </CardTitle>
+                  <CardDescription>
+                    Detect and scrub personally identifiable information automatically
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CodeBlock code={codeExamples.safeinput} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+            <TabsContent value="compliance" className="mt-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Lock className="w-5 h-5 text-purple-500" />
+                    Compliance - COPPA/FERPA
+                  </CardTitle>
+                  <CardDescription>
+                    Built-in compliance checks with audit trail logging
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CodeBlock code={codeExamples.compliance} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+            <TabsContent value="datasync" className="mt-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Zap className="w-5 h-5 text-yellow-500" />
+                    DataSync - Cross-Platform State
+                  </CardTitle>
+                  <CardDescription>
+                    Synchronize data across all supported platforms
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CodeBlock code={codeExamples.datasync} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </section>
+
+        {/* API Reference */}
+        <section>
+          <Card className="bg-gradient-to-br from-slate-800/50 to-purple-900/20 border-purple-500/20">
+            <CardContent className="p-8">
+              <div className="grid md:grid-cols-2 gap-8">
+                <div>
+                  <h3 className="text-2xl font-bold mb-4">API Reference</h3>
+                  <div className="space-y-4 text-sm">
+                    <div>
+                      <h4 className="font-semibold text-purple-400 mb-2">Passport</h4>
+                      <ul className="space-y-1 text-muted-foreground">
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">new Passport(userId, username)</code> - Create passport</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">verify()</code> - Verify identity</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">syncAcross(platforms)</code> - Sync across platforms</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">toJSON()</code> - Export as JSON</li>
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-green-400 mb-2">SafeInput</h4>
+                      <ul className="space-y-1 text-muted-foreground">
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">SafeInput.detectPII(input)</code> - Detect PII types</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">SafeInput.scrub(input)</code> - Scrub PII from string</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">SafeInput.validate(input)</code> - Validate input safety</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <div className="space-y-4 text-sm">
+                    <div>
+                      <h4 className="font-semibold text-yellow-400 mb-2">DataSync</h4>
+                      <ul className="space-y-1 text-muted-foreground">
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">DataSync.sync(data, platforms)</code> - Sync data</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">DataSync.pull(userId, platform)</code> - Pull data</li>
+                      </ul>
+                    </div>
+                    <div>
+                      <h4 className="font-semibold text-purple-400 mb-2">Compliance</h4>
+                      <ul className="space-y-1 text-muted-foreground">
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">Compliance.isCOPPACompliant(age)</code> - Check if 13+</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">Compliance.requiresParentConsent(age)</code> - Check if &lt;13</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">Compliance.canCollectData(user)</code> - Check permission</li>
+                        <li><code className="text-xs bg-slate-800 px-1 rounded">Compliance.logCheck(userId, type, result)</code> - Audit log</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </section>
+
+        {/* Keywords/Use Cases */}
+        <section className="text-center">
+          <p className="text-sm text-muted-foreground mb-4">Built for</p>
+          <div className="flex flex-wrap justify-center gap-2">
+            {["metaverse", "cross-platform", "roblox", "uefn", "unity", "coppa", "compliance", "pii-detection"].map((keyword) => (
+              <Badge key={keyword} variant="secondary" className="px-3 py-1">
+                {keyword}
+              </Badge>
+            ))}
+          </div>
+        </section>
+
+        {/* CTA */}
+        <section className="text-center space-y-6 py-8">
+          <h2 className="text-3xl font-bold">Ready to Build?</h2>
+          <p className="text-muted-foreground max-w-xl mx-auto">
+            Start building safer, compliant cross-platform experiences today.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link to="/docs/lang/quickstart">
+              <Button size="lg">
+                Quick Start Guide
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </Link>
+            <Link to="/docs/lang">
+              <Button size="lg" variant="outline">
+                <FileText className="w-4 h-4 mr-2" />
+                Full Documentation
+              </Button>
+            </Link>
+          </div>
+        </section>
+
+        {/* Footer Info */}
+        <section className="text-center text-sm text-muted-foreground border-t border-border/50 pt-8">
+          <p>
+            Maintained by{" "}
+            <a href="https://aethex.dev" className="text-primary hover:underline">
+              AeThex Foundation
+            </a>
+            {" · "}
+            <a 
+              href="https://github.com/AeThex-Corporation/AeThexOS/issues" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              Report Issues
+            </a>
+          </p>
+        </section>
+      </div>
+    </Layout>
+  );
+}

client/pages/docs/lang/DocsLangCli.tsx

@@ -0,0 +1,379 @@
+import { Link } from "react-router-dom";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Terminal,
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  Package,
+} from "lucide-react";
+import { useState } from "react";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded bg-slate-700 hover:bg-slate-600 transition-colors"
+    >
+      {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-slate-400" />}
+    </button>
+  );
+}
+
+function CodeBlock({ code, language = "bash" }: { code: string; language?: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+const installCode = `npm install -g @aethex.os/cli`;
+
+const compileBasicCode = `aethex compile myfile.aethex`;
+
+const compileTargetCode = `# JavaScript (default)
+aethex compile myfile.aethex --target javascript
+
+# Roblox/Lua
+aethex compile myfile.aethex --target roblox
+
+# UEFN/Verse (coming soon)
+aethex compile myfile.aethex --target uefn
+
+# Unity/C# (coming soon)
+aethex compile myfile.aethex --target unity`;
+
+const outputCode = `aethex compile myfile.aethex -o output.js
+aethex compile myfile.aethex -t roblox -o game.lua`;
+
+const watchCode = `aethex compile myfile.aethex --watch`;
+
+const newProjectCode = `# Basic project
+aethex new my-project
+
+# With template
+aethex new my-game --template passport`;
+
+const initCode = `aethex init`;
+
+const helloAethexCode = `reality HelloWorld {
+    platforms: all
+}
+
+journey Greet(name) {
+    platform: all
+    notify "Hello, " + name + "!"
+}`;
+
+const commands = [
+  {
+    name: "compile",
+    syntax: "aethex compile <file>",
+    description: "Compile an AeThex file to the target platform",
+    options: [
+      { flag: "-t, --target <platform>", description: "Target platform (javascript, roblox, uefn, unity)" },
+      { flag: "-o, --output <file>", description: "Output file path" },
+      { flag: "-w, --watch", description: "Watch for changes and recompile" },
+    ],
+  },
+  {
+    name: "new",
+    syntax: "aethex new <name>",
+    description: "Create a new AeThex project",
+    options: [
+      { flag: "--template <type>", description: "Project template (basic, passport, game)" },
+    ],
+  },
+  {
+    name: "init",
+    syntax: "aethex init",
+    description: "Initialize AeThex in the current directory",
+    options: [],
+  },
+  {
+    name: "--help",
+    syntax: "aethex --help",
+    description: "Show help information",
+    options: [],
+  },
+  {
+    name: "--version",
+    syntax: "aethex --version",
+    description: "Show CLI version",
+    options: [],
+  },
+];
+
+const targets = [
+  { name: "javascript", language: "JavaScript", platform: "Web, Node.js", status: "ready" },
+  { name: "roblox", language: "Lua", platform: "Roblox", status: "ready" },
+  { name: "uefn", language: "Verse", platform: "Fortnite", status: "coming" },
+  { name: "unity", language: "C#", platform: "Unity, VRChat", status: "coming" },
+];
+
+export default function DocsLangCli() {
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <section>
+        <Badge className="mb-4 bg-green-500/20 text-green-400 border-green-500/30">
+          @aethex.os/cli
+        </Badge>
+        <h1 className="text-4xl font-bold mb-4">CLI Reference</h1>
+        <p className="text-xl text-muted-foreground">
+          AeThex Language Command Line Interface - Compile <code className="bg-slate-800 px-2 py-0.5 rounded">.aethex</code> files 
+          to JavaScript, Lua, Verse, and C#.
+        </p>
+      </section>
+
+      {/* Installation */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Installation</h2>
+        <CodeBlock code={installCode} />
+        <p className="mt-4 text-sm text-muted-foreground">
+          <a
+            href="https://www.npmjs.com/package/@aethex.os/cli"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline inline-flex items-center gap-1"
+          >
+            View on npm <ExternalLink className="w-3 h-3" />
+          </a>
+        </p>
+      </section>
+
+      {/* Usage */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Usage</h2>
+        
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Terminal className="w-5 h-5" />
+                Compile a file
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={compileBasicCode} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Compile to specific target</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={compileTargetCode} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Save to file</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={outputCode} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Watch mode</CardTitle>
+              <CardDescription>Auto-recompile on file changes</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={watchCode} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Create new project</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={newProjectCode} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Initialize in existing directory</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={initCode} />
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Example</h2>
+        <p className="text-muted-foreground mb-4">
+          Create <code className="bg-slate-800 px-2 py-0.5 rounded">hello.aethex</code>:
+        </p>
+        <CodeBlock code={helloAethexCode} language="aethex" />
+        <p className="text-muted-foreground mt-6 mb-4">Compile and run:</p>
+        <CodeBlock code={`aethex compile hello.aethex -o hello.js
+node hello.js`} />
+      </section>
+
+      {/* Commands Reference */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Commands</h2>
+        <div className="space-y-4">
+          {commands.map((cmd) => (
+            <Card key={cmd.name}>
+              <CardHeader className="pb-2">
+                <CardTitle className="font-mono text-lg">{cmd.syntax}</CardTitle>
+                <CardDescription>{cmd.description}</CardDescription>
+              </CardHeader>
+              {cmd.options.length > 0 && (
+                <CardContent>
+                  <div className="space-y-2">
+                    {cmd.options.map((opt) => (
+                      <div key={opt.flag} className="flex gap-4 text-sm">
+                        <code className="bg-slate-800 px-2 py-0.5 rounded whitespace-nowrap">{opt.flag}</code>
+                        <span className="text-muted-foreground">{opt.description}</span>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Options */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Global Options</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b border-slate-700">
+                <th className="text-left py-3 px-4 font-medium">Option</th>
+                <th className="text-left py-3 px-4 font-medium">Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded">-t, --target &lt;platform&gt;</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Target platform (javascript, roblox, uefn, unity)</td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded">-o, --output &lt;file&gt;</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Output file path</td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded">-w, --watch</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Watch for changes</td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded">--template &lt;type&gt;</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Project template (basic, passport, game)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Targets */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Targets</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b border-slate-700">
+                <th className="text-left py-3 px-4 font-medium">Target</th>
+                <th className="text-left py-3 px-4 font-medium">Language</th>
+                <th className="text-left py-3 px-4 font-medium">Platform</th>
+                <th className="text-left py-3 px-4 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {targets.map((target) => (
+                <tr key={target.name} className="border-b border-slate-800">
+                  <td className="py-3 px-4">
+                    <code className="bg-slate-800 px-2 py-0.5 rounded">{target.name}</code>
+                  </td>
+                  <td className="py-3 px-4">{target.language}</td>
+                  <td className="py-3 px-4 text-muted-foreground">{target.platform}</td>
+                  <td className="py-3 px-4">
+                    {target.status === "ready" ? (
+                      <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
+                        <CheckCircle2 className="w-3 h-3 mr-1" /> Ready
+                      </Badge>
+                    ) : (
+                      <Badge variant="outline" className="text-slate-400">Coming Soon</Badge>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Learn More */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Learn More</h2>
+        <div className="grid md:grid-cols-3 gap-4">
+          <Link to="/docs/lang">
+            <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+              <CardContent className="pt-6">
+                <Package className="w-6 h-6 mb-2 text-primary" />
+                <h3 className="font-semibold">Language Guide</h3>
+                <p className="text-sm text-muted-foreground">Full documentation</p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/docs/lang/examples">
+            <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+              <CardContent className="pt-6">
+                <Terminal className="w-6 h-6 mb-2 text-green-500" />
+                <h3 className="font-semibold">Examples</h3>
+                <p className="text-sm text-muted-foreground">Code samples</p>
+              </CardContent>
+            </Card>
+          </Link>
+          <a
+            href="https://www.npmjs.com/package/@aethex.os/core"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+              <CardContent className="pt-6">
+                <Package className="w-6 h-6 mb-2 text-purple-500" />
+                <h3 className="font-semibold">@aethex.os/core</h3>
+                <p className="text-sm text-muted-foreground">Standard Library</p>
+              </CardContent>
+            </Card>
+          </a>
+        </div>
+      </section>
+
+      {/* Navigation */}
+      <section className="flex justify-between pt-8 border-t border-border/50">
+        <Link to="/docs/lang/syntax" className="text-sm text-muted-foreground hover:text-foreground">
+          ← Language Syntax
+        </Link>
+        <Link to="/docs/lang/examples" className="text-sm text-muted-foreground hover:text-foreground">
+          Examples →
+        </Link>
+      </section>
+    </div>
+  );
+}

client/pages/docs/lang/DocsLangExamples.tsx

@@ -0,0 +1,414 @@
+import { Link } from "react-router-dom";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  CheckCircle2,
+  Copy,
+  Shield,
+  Users,
+  Award,
+  Zap,
+  Lock,
+} from "lucide-react";
+import { useState } from "react";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded bg-slate-700 hover:bg-slate-600 transition-colors"
+    >
+      {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-slate-400" />}
+    </button>
+  );
+}
+
+function CodeBlock({ code }: { code: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+const helloWorldCode = `# AeThex Hello World Example
+
+reality HelloWorld {
+    platforms: all
+}
+
+journey Greet(name) {
+    platform: all
+    notify "Hello, " + name + " from AeThex!"
+}`;
+
+const crossPlatformAuthCode = `import { Passport, DataSync } from "@aethex.os/core"
+
+reality UniversalAuth {
+    platforms: [roblox, uefn, web]
+}
+
+journey Login(username, password) {
+    platform: all
+    
+    let passport = new Passport(username)
+    
+    when passport.verify() {
+        sync passport across [roblox, uefn, web]
+        
+        # Pull existing data from any platform
+        let playerData = DataSync.pull(passport.userId, "roblox")
+        
+        notify "Logged in across all platforms!"
+        reveal passport
+    }
+}`;
+
+const secureLeaderboardCode = `# The Foundry Certification Exam
+# Task: Build a COPPA-compliant, PII-safe leaderboard
+#
+# Requirements:
+# 1. Must accept player scores
+# 2. Must detect and block PII (phone numbers, emails, etc.)
+# 3. Must work on Roblox (Lua)
+# 4. Must display safely without exposing sensitive data
+
+import { SafeInput, Compliance } from "@aethex.os/core"
+
+reality SecureLeaderboard {
+    platforms: [roblox]
+    type: "compliance-exam"
+}
+
+# CRITICAL: This is the exam
+# If PII gets through to the leaderboard, you FAIL
+
+journey SubmitScore(player, playerName, score) {
+    platform: roblox
+    
+    # STEP 1: Validate player age (COPPA compliance)
+    when !Compliance.isCOPPACompliant(player.age) {
+        notify "Players under 13 cannot submit scores publicly"
+        return
+    }
+    
+    # STEP 2: Validate player name for PII
+    let nameValidation = SafeInput.validate(playerName)
+    
+    when !nameValidation.valid {
+        notify "Invalid name: " + nameValidation.message
+        notify "Blocked PII types: " + nameValidation.blocked
+        
+        # Log security incident
+        Compliance.logCheck(player.userId, "leaderboard_name_check", false)
+        
+        return
+    }
+    
+    # STEP 3: Validate score value for PII
+    let scoreValidation = SafeInput.validate(score.toString())
+    
+    when !scoreValidation.valid {
+        notify "Invalid score: contains sensitive data"
+        
+        # Log security incident
+        Compliance.logCheck(player.userId, "leaderboard_score_check", false)
+        
+        return
+    }
+    
+    # STEP 4: All validations passed - safe to submit
+    Compliance.logCheck(player.userId, "leaderboard_submission", true)
+    notify "Score submitted successfully!"
+    
+    reveal {
+        player: nameValidation.clean,
+        score: scoreValidation.clean
+    }
+}
+
+# Test function: Attempts to inject PII
+journey TestPIIDetection() {
+    platform: roblox
+    
+    notify "=== FOUNDRY EXAM TEST SUITE ==="
+    
+    # Test 1: Phone number in name
+    let test1 = SafeInput.validate("John 555-1234")
+    when test1.valid {
+        notify "❌ FAIL: Phone number not detected"
+    } otherwise {
+        notify "✅ PASS: Phone number blocked"
+    }
+    
+    # Test 2: Email in name
+    let test2 = SafeInput.validate("player@email.com")
+    when test2.valid {
+        notify "❌ FAIL: Email not detected"
+    } otherwise {
+        notify "✅ PASS: Email blocked"
+    }
+    
+    # Test 3: Clean name
+    let test3 = SafeInput.validate("PlayerOne")
+    when test3.valid {
+        notify "✅ PASS: Clean name accepted"
+    } otherwise {
+        notify "❌ FAIL: Clean name rejected"
+    }
+    
+    # Test 4: SSN in score
+    let test4 = SafeInput.validate("123-45-6789")
+    when test4.valid {
+        notify "❌ FAIL: SSN not detected"
+    } otherwise {
+        notify "✅ PASS: SSN blocked"
+    }
+}`;
+
+const coppaRegistrationCode = `import { Compliance, Passport } from "@aethex.os/core"
+
+journey RegisterUser(username, age) {
+    platform: all
+    
+    when Compliance.isCOPPACompliant(age) {
+        # User is 13+, can proceed
+        let passport = new Passport(username)
+        passport.verify()
+        notify "Account created!"
+    } otherwise {
+        # Under 13, require parent consent
+        notify "Parent permission required"
+        # Send email to parent (implementation omitted)
+    }
+}`;
+
+const dataSyncCode = `import { Passport, DataSync } from "@aethex.os/core"
+
+reality CrossPlatformProgress {
+    platforms: [roblox, uefn, web]
+}
+
+journey SaveProgress(player, progress) {
+    platform: all
+    
+    # Sync progress data across all platforms
+    DataSync.sync({
+        level: progress.level,
+        experience: progress.xp,
+        inventory: progress.items
+    }, [roblox, uefn, web])
+    
+    notify "Progress saved!"
+}
+
+journey LoadProgress(player) {
+    platform: all
+    
+    # Pull latest progress from any platform
+    let data = DataSync.pull(player.userId, "web")
+    
+    reveal data
+}`;
+
+const examples = [
+  {
+    id: "hello-world",
+    title: "Hello World",
+    description: "Your first AeThex program",
+    icon: Zap,
+    color: "text-yellow-500",
+    code: helloWorldCode,
+    difficulty: "Beginner",
+  },
+  {
+    id: "cross-platform-auth",
+    title: "Cross-Platform Authentication",
+    description: "Login once, authenticated everywhere",
+    icon: Users,
+    color: "text-blue-500",
+    code: crossPlatformAuthCode,
+    difficulty: "Intermediate",
+  },
+  {
+    id: "secure-leaderboard",
+    title: "Secure Leaderboard (Foundry Exam)",
+    description: "COPPA-compliant, PII-safe leaderboard - the certification exam",
+    icon: Award,
+    color: "text-purple-500",
+    code: secureLeaderboardCode,
+    difficulty: "Advanced",
+  },
+  {
+    id: "coppa-registration",
+    title: "COPPA-Compliant Registration",
+    description: "User registration with age verification",
+    icon: Lock,
+    color: "text-green-500",
+    code: coppaRegistrationCode,
+    difficulty: "Intermediate",
+  },
+  {
+    id: "data-sync",
+    title: "Cross-Platform Data Sync",
+    description: "Sync player progress across all platforms",
+    icon: Shield,
+    color: "text-cyan-500",
+    code: dataSyncCode,
+    difficulty: "Intermediate",
+  },
+];
+
+const difficultyColors: Record<string, string> = {
+  Beginner: "bg-green-500/20 text-green-400 border-green-500/30",
+  Intermediate: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
+  Advanced: "bg-red-500/20 text-red-400 border-red-500/30",
+};
+
+export default function DocsLangExamples() {
+  const [activeExample, setActiveExample] = useState("hello-world");
+  const currentExample = examples.find((e) => e.id === activeExample) || examples[0];
+
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <section>
+        <Badge className="mb-4 bg-purple-500/20 text-purple-400 border-purple-500/30">
+          Code Examples
+        </Badge>
+        <h1 className="text-4xl font-bold mb-4">Examples</h1>
+        <p className="text-xl text-muted-foreground">
+          Real-world code examples and patterns for AeThex development.
+        </p>
+      </section>
+
+      {/* Examples Grid for Quick Navigation */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Browse Examples</h2>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {examples.map((example) => (
+            <button
+              key={example.id}
+              onClick={() => setActiveExample(example.id)}
+              className={`text-left w-full ${
+                activeExample === example.id ? "ring-2 ring-primary" : ""
+              }`}
+            >
+              <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <example.icon className={`w-6 h-6 ${example.color}`} />
+                    <Badge className={difficultyColors[example.difficulty]}>
+                      {example.difficulty}
+                    </Badge>
+                  </div>
+                  <CardTitle className="text-lg mt-2">{example.title}</CardTitle>
+                  <CardDescription>{example.description}</CardDescription>
+                </CardHeader>
+              </Card>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      {/* Active Example Display */}
+      <section>
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <currentExample.icon className={`w-6 h-6 ${currentExample.color}`} />
+                <CardTitle>{currentExample.title}</CardTitle>
+              </div>
+              <Badge className={difficultyColors[currentExample.difficulty]}>
+                {currentExample.difficulty}
+              </Badge>
+            </div>
+            <CardDescription>{currentExample.description}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CodeBlock code={currentExample.code} />
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* All Examples (Tabbed) */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">All Examples</h2>
+        <Tabs defaultValue="hello-world" className="w-full">
+          <TabsList className="flex flex-wrap h-auto gap-2">
+            {examples.map((example) => (
+              <TabsTrigger key={example.id} value={example.id} className="text-xs">
+                {example.title.split(" ")[0]}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {examples.map((example) => (
+            <TabsContent key={example.id} value={example.id} className="mt-6">
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <example.icon className={`w-5 h-5 ${example.color}`} />
+                    <CardTitle className="text-lg">{example.title}</CardTitle>
+                    <Badge className={difficultyColors[example.difficulty]}>
+                      {example.difficulty}
+                    </Badge>
+                  </div>
+                  <CardDescription>{example.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CodeBlock code={example.code} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </section>
+
+      {/* The Foundry Note */}
+      <section>
+        <Card className="bg-gradient-to-br from-slate-800/50 to-purple-900/20 border-purple-500/20">
+          <CardContent className="p-8">
+            <div className="flex items-start gap-4">
+              <Award className="w-8 h-8 text-purple-400 shrink-0" />
+              <div>
+                <h3 className="text-xl font-bold mb-2">The Foundry Certification</h3>
+                <p className="text-muted-foreground mb-4">
+                  The <strong>Secure Leaderboard</strong> example above is the actual Foundry certification exam. 
+                  If you can implement a COPPA-compliant, PII-safe leaderboard that passes all validation tests, 
+                  you're ready for professional metaverse development.
+                </p>
+                <Link 
+                  to="/foundation" 
+                  className="text-primary hover:underline text-sm"
+                >
+                  Learn more about The Foundry →
+                </Link>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* Navigation */}
+      <section className="flex justify-between pt-8 border-t border-border/50">
+        <Link to="/docs/lang/cli" className="text-sm text-muted-foreground hover:text-foreground">
+          ← CLI Reference
+        </Link>
+        <Link to="/docs/lang" className="text-sm text-muted-foreground hover:text-foreground">
+          Back to Overview →
+        </Link>
+      </section>
+    </div>
+  );
+}

client/pages/docs/lang/DocsLangOverview.tsx

@@ -0,0 +1,380 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Package,
+  Terminal,
+  BookOpen,
+  Code,
+  Zap,
+  Shield,
+  Users,
+  ExternalLink,
+  ArrowRight,
+  CheckCircle2,
+  FileText,
+  Github,
+  Globe,
+  Lock,
+  Copy,
+} from "lucide-react";
+import { useState } from "react";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded bg-slate-700 hover:bg-slate-600 transition-colors"
+    >
+      {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-slate-400" />}
+    </button>
+  );
+}
+
+function CodeBlock({ code, language = "aethex" }: { code: string; language?: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+const docSections = [
+  {
+    title: "Quick Start",
+    description: "Get up and running in 5 minutes",
+    icon: Zap,
+    href: "/docs/lang/quickstart",
+    color: "text-yellow-500",
+    bgColor: "bg-yellow-500/10",
+  },
+  {
+    title: "Language Syntax",
+    description: "Learn realities, journeys, and cross-platform sync",
+    icon: Code,
+    href: "/docs/lang/syntax",
+    color: "text-blue-500",
+    bgColor: "bg-blue-500/10",
+  },
+  {
+    title: "CLI Reference",
+    description: "Command line compiler and tools",
+    icon: Terminal,
+    href: "/docs/lang/cli",
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+  {
+    title: "Examples",
+    description: "Real-world code examples and patterns",
+    icon: FileText,
+    href: "/docs/lang/examples",
+    color: "text-purple-500",
+    bgColor: "bg-purple-500/10",
+  },
+];
+
+const features = [
+  {
+    icon: Globe,
+    title: "Cross-Platform Native",
+    description: "Deploy to Roblox, UEFN, Unity, VRChat, Spatial, and Web",
+  },
+  {
+    icon: Users,
+    title: "Universal Passport",
+    description: "Single identity system across all metaverse platforms",
+  },
+  {
+    icon: Shield,
+    title: "Compliance-First",
+    description: "Built-in COPPA/FERPA/PII protection",
+  },
+  {
+    icon: Package,
+    title: "Standard Library",
+    description: "Battle-tested utilities for auth, data sync, and safety",
+  },
+];
+
+const platforms = [
+  { name: "JavaScript", status: "ready" },
+  { name: "Roblox (Lua)", status: "ready" },
+  { name: "UEFN (Verse)", status: "coming" },
+  { name: "Unity (C#)", status: "coming" },
+];
+
+const helloWorldCode = `reality HelloWorld {
+    platforms: all
+}
+
+journey Greet(name) {
+    platform: all
+    notify "Hello, " + name + "!"
+}`;
+
+const crossPlatformCode = `import { Passport } from "@aethex.os/core"
+
+reality MyGame {
+    platforms: [roblox, uefn, web]
+}
+
+journey AuthenticatePlayer(username) {
+    platform: all
+    
+    let passport = new Passport(username)
+    
+    when passport.verify() {
+        sync passport across [roblox, uefn, web]
+        notify "Welcome, " + username + "!"
+    }
+}`;
+
+export default function DocsLangOverview() {
+  return (
+    <div className="space-y-12">
+      {/* Hero Section */}
+      <section className="text-center space-y-6">
+        <div className="flex items-center justify-center gap-3 mb-4">
+          <Badge className="text-sm px-4 py-1 bg-purple-500/20 text-purple-400 border-purple-500/30">
+            v1.0.0
+          </Badge>
+          <Badge variant="outline" className="text-sm px-4 py-1">
+            MIT License
+          </Badge>
+        </div>
+        <h1 className="text-4xl font-bold">AeThex Language</h1>
+        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+          <strong>Write once. Build everywhere. Comply by default.</strong>
+        </p>
+        <p className="text-muted-foreground max-w-3xl mx-auto">
+          AeThex is a programming language for cross-platform metaverse development. 
+          Write your game logic, authentication, and compliance rules once, then compile 
+          to JavaScript, Lua (Roblox), Verse (UEFN), and C# (Unity).
+        </p>
+
+        {/* Install Command */}
+        <div className="relative max-w-md mx-auto">
+          <div className="flex items-center gap-3 bg-slate-900 border border-slate-700 rounded-lg px-4 py-3">
+            <Terminal className="h-5 w-5 text-slate-500" />
+            <code className="text-sm font-mono text-slate-300 flex-1 text-left">
+              npm install -g @aethex.os/cli
+            </code>
+            <CopyButton text="npm install -g @aethex.os/cli" />
+          </div>
+        </div>
+
+        <div className="flex gap-4 justify-center pt-4">
+          <Link to="/docs/lang/quickstart">
+            <Button size="lg">
+              Get Started
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+          </Link>
+          <a
+            href="https://github.com/AeThex-Corporation/AeThexOS"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button size="lg" variant="outline">
+              <Github className="w-4 h-4 mr-2" />
+              GitHub
+            </Button>
+          </a>
+        </div>
+      </section>
+
+      {/* Platform Support */}
+      <section className="text-center">
+        <p className="text-sm text-muted-foreground mb-4">Compilation Targets</p>
+        <div className="flex flex-wrap justify-center gap-3">
+          {platforms.map((platform) => (
+            <Badge
+              key={platform.name}
+              variant={platform.status === "ready" ? "default" : "outline"}
+              className={`px-4 py-2 text-sm ${
+                platform.status === "ready" 
+                  ? "bg-green-500/20 text-green-400 border-green-500/30" 
+                  : "text-slate-400"
+              }`}
+            >
+              {platform.status === "ready" && <CheckCircle2 className="w-3 h-3 mr-2" />}
+              {platform.name}
+              {platform.status === "coming" && " (Coming Soon)"}
+            </Badge>
+          ))}
+        </div>
+      </section>
+
+      {/* Documentation Sections */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Documentation</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          {docSections.map((section) => (
+            <Link key={section.title} to={section.href}>
+              <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+                <CardHeader className="flex flex-row items-start gap-4">
+                  <div className={`p-2 rounded-lg ${section.bgColor}`}>
+                    <section.icon className={`w-5 h-5 ${section.color}`} />
+                  </div>
+                  <div>
+                    <CardTitle className="text-lg">{section.title}</CardTitle>
+                    <CardDescription>{section.description}</CardDescription>
+                  </div>
+                </CardHeader>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Hello World Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Hello World</h2>
+        <p className="text-muted-foreground mb-6">
+          Create <code className="bg-slate-800 px-2 py-0.5 rounded text-sm">hello.aethex</code>:
+        </p>
+        <CodeBlock code={helloWorldCode} />
+        <div className="mt-4 flex gap-2">
+          <code className="bg-slate-800 px-3 py-2 rounded text-sm font-mono">
+            aethex compile hello.aethex
+          </code>
+          <code className="bg-slate-800 px-3 py-2 rounded text-sm font-mono">
+            node hello.js
+          </code>
+        </div>
+      </section>
+
+      {/* Cross-Platform Example */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Cross-Platform Authentication</h2>
+        <p className="text-muted-foreground mb-6">
+          One codebase, deployed everywhere:
+        </p>
+        <CodeBlock code={crossPlatformCode} />
+      </section>
+
+      {/* Features */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Why AeThex?</h2>
+        <div className="grid md:grid-cols-2 gap-6">
+          {features.map((feature) => (
+            <div key={feature.title} className="flex gap-4">
+              <div className="p-2 h-fit rounded-lg bg-primary/10">
+                <feature.icon className="w-5 h-5 text-primary" />
+              </div>
+              <div>
+                <h3 className="font-semibold mb-1">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* npm Packages */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">npm Packages</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Terminal className="w-5 h-5 text-green-500" />
+                @aethex.os/cli
+              </CardTitle>
+              <CardDescription>Command line compiler</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <a
+                href="https://www.npmjs.com/package/@aethex.os/cli"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary hover:underline flex items-center gap-1"
+              >
+                View on npm <ExternalLink className="w-3 h-3" />
+              </a>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Package className="w-5 h-5 text-purple-500" />
+                @aethex.os/core
+              </CardTitle>
+              <CardDescription>Standard library</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <a
+                href="https://www.npmjs.com/package/@aethex.os/core"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary hover:underline flex items-center gap-1"
+              >
+                View on npm <ExternalLink className="w-3 h-3" />
+              </a>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* The Foundry */}
+      <section>
+        <Card className="bg-gradient-to-br from-slate-800/50 to-purple-900/20 border-purple-500/20">
+          <CardContent className="p-8 text-center">
+            <BookOpen className="w-12 h-12 mx-auto mb-4 text-purple-400" />
+            <h2 className="text-2xl font-bold mb-2">The Foundry Certification</h2>
+            <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
+              AeThex is the official language taught at The AeThex Foundry certification program.
+              Learn to build compliant, cross-platform metaverse experiences.
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Link to="/foundation">
+                <Button>
+                  Learn More
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* Quick Links */}
+      <section className="text-center text-sm text-muted-foreground border-t border-border/50 pt-8">
+        <p className="flex items-center justify-center gap-4 flex-wrap">
+          <a
+            href="https://github.com/AeThex-Corporation/AeThexOS"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-foreground flex items-center gap-1"
+          >
+            <Github className="w-4 h-4" /> GitHub
+          </a>
+          <span>•</span>
+          <a
+            href="https://github.com/AeThex-Corporation/AeThexOS/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-foreground"
+          >
+            Report Issues
+          </a>
+          <span>•</span>
+          <Link to="/community" className="hover:text-foreground">
+            Community
+          </Link>
+        </p>
+      </section>
+    </div>
+  );
+}

client/pages/docs/lang/DocsLangQuickstart.tsx

@@ -0,0 +1,354 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Terminal,
+  CheckCircle2,
+  Copy,
+  ArrowRight,
+  FileText,
+  Folder,
+  ExternalLink,
+} from "lucide-react";
+import { useState } from "react";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded bg-slate-700 hover:bg-slate-600 transition-colors"
+    >
+      {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-slate-400" />}
+    </button>
+  );
+}
+
+function CodeBlock({ code, language = "bash" }: { code: string; language?: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+function StepCard({ number, title, children }: { number: number; title: string; children: React.ReactNode }) {
+  return (
+    <Card className="relative overflow-hidden">
+      <div className="absolute top-4 left-4 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+        <span className="text-sm font-bold text-primary">{number}</span>
+      </div>
+      <CardHeader className="pl-16">
+        <CardTitle className="text-lg">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="pl-16">
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+const installCode = `# Install the CLI globally
+npm install -g @aethex.os/cli
+
+# Verify installation
+aethex --version`;
+
+const newProjectCode = `aethex new my-first-game
+cd my-first-game
+npm install`;
+
+const mainAethexCode = `reality MyFirstGame {
+    platforms: [roblox, web]
+}
+
+journey WelcomePlayer(username) {
+    platform: all
+    notify "Welcome, " + username + "!"
+}`;
+
+const compileCode = `# Compile to JavaScript
+npm run build
+
+# Run it
+node build/main.js
+
+# Or compile to Roblox
+npm run build:roblox`;
+
+const authExampleCode = `import { Passport } from "@aethex.os/core"
+
+journey Login(username) {
+    let passport = new Passport(username)
+    
+    when passport.verify() {
+        sync passport across [roblox, web]
+        notify "Logged in everywhere!"
+    }
+}`;
+
+const piiExampleCode = `import { SafeInput } from "@aethex.os/core"
+
+journey SubmitScore(player, score) {
+    let validation = SafeInput.validate(score)
+    
+    when validation.valid {
+        # Safe to submit
+        notify "Score: " + score
+    } otherwise {
+        # PII detected!
+        notify "Error: " + validation.message
+    }
+}`;
+
+const projectStructure = `my-project/
+├── aethex.config.json    # Config file
+├── package.json           # npm dependencies
+├── src/
+│   ├── main.aethex       # Your code
+│   ├── auth.aethex
+│   └── game.aethex
+└── build/
+    ├── main.js           # Compiled JavaScript
+    └── main.lua          # Compiled Lua`;
+
+const stdlibCode = `# Import from @aethex.os/core
+import { Passport, DataSync, SafeInput, Compliance } from "@aethex.os/core"
+
+# Import from @aethex.os/roblox (platform-specific)
+import { RemoteEvent, Leaderboard } from "@aethex.os/roblox"`;
+
+const commonPatterns = {
+  auth: `journey Login(user) {
+    when user.verify() {
+        sync user.passport across [roblox, web]
+    }
+}`,
+  datasync: `journey SaveProgress(player) {
+    sync player.stats across [roblox, uefn, web]
+}`,
+  pii: `let result = SafeInput.validate(userInput)
+when result.valid {
+    # Safe to use
+}`,
+  coppa: `when Compliance.isCOPPACompliant(user.age) {
+    # User is 13+
+}`,
+};
+
+export default function DocsLangQuickstart() {
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <section>
+        <Badge className="mb-4 bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
+          5 Minute Guide
+        </Badge>
+        <h1 className="text-4xl font-bold mb-4">Quick Start</h1>
+        <p className="text-xl text-muted-foreground">
+          Get up and running with AeThex in 5 minutes.
+        </p>
+      </section>
+
+      {/* Installation */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Installation</h2>
+        <CodeBlock code={installCode} />
+      </section>
+
+      {/* Steps */}
+      <section className="space-y-6">
+        <h2 className="text-2xl font-bold">Your First AeThex Program</h2>
+        
+        <StepCard number={1} title="Create a new project">
+          <CodeBlock code={newProjectCode} />
+        </StepCard>
+
+        <StepCard number={2} title="Edit src/main.aethex">
+          <CodeBlock code={mainAethexCode} language="aethex" />
+        </StepCard>
+
+        <StepCard number={3} title="Compile and run">
+          <CodeBlock code={compileCode} />
+        </StepCard>
+      </section>
+
+      {/* Example Projects */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Example Projects</h2>
+        
+        <div className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Cross-Platform Authentication</CardTitle>
+              <CardDescription>Authenticate users across multiple platforms with one codebase</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={authExampleCode} language="aethex" />
+              <div className="mt-4 text-sm text-muted-foreground">
+                Compile and run:
+                <code className="ml-2 bg-slate-800 px-2 py-1 rounded">aethex compile auth.aethex && node auth.js</code>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <CardTitle>PII-Safe Leaderboard</CardTitle>
+                <Badge variant="outline" className="text-xs">Foundry Exam</Badge>
+              </div>
+              <CardDescription>
+                This is the Foundry certification exam - if you can build this correctly, 
+                you're ready to work in metaverse development.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={piiExampleCode} language="aethex" />
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Compilation Targets */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Compilation Targets</h2>
+        <CodeBlock code={`# JavaScript (default)
+aethex compile game.aethex
+
+# Roblox (Lua)
+aethex compile game.aethex --target roblox --output game.lua
+
+# UEFN (Verse) - Coming soon
+aethex compile game.aethex --target uefn --output game.verse
+
+# Unity (C#) - Coming soon
+aethex compile game.aethex --target unity --output game.cs`} />
+      </section>
+
+      {/* Watch Mode */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Watch Mode</h2>
+        <p className="text-muted-foreground mb-4">Auto-recompile on file save:</p>
+        <CodeBlock code="aethex compile game.aethex --watch" />
+      </section>
+
+      {/* Project Structure */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Project Structure</h2>
+        <CodeBlock code={projectStructure} />
+      </section>
+
+      {/* Standard Library */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Standard Library</h2>
+        <CodeBlock code={stdlibCode} language="aethex" />
+      </section>
+
+      {/* Common Patterns */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Common Patterns</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Authentication</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={commonPatterns.auth} language="aethex" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Data Sync</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={commonPatterns.datasync} language="aethex" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">PII Protection</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={commonPatterns.pii} language="aethex" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">COPPA Compliance</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={commonPatterns.coppa} language="aethex" />
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Next Steps */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Next Steps</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <Link to="/docs/lang/syntax">
+            <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FileText className="w-5 h-5 text-blue-500" />
+                  Language Syntax
+                </CardTitle>
+                <CardDescription>Learn realities, journeys, and more</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+          <Link to="/docs/lang/examples">
+            <Card className="h-full hover:border-primary/50 transition-all cursor-pointer">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Folder className="w-5 h-5 text-purple-500" />
+                  Examples
+                </CardTitle>
+                <CardDescription>View more code examples</CardDescription>
+              </CardHeader>
+            </Card>
+          </Link>
+        </div>
+      </section>
+
+      {/* Getting Help */}
+      <section className="text-center text-sm text-muted-foreground border-t border-border/50 pt-8">
+        <h3 className="font-semibold text-foreground mb-4">Getting Help</h3>
+        <p className="flex items-center justify-center gap-4 flex-wrap">
+          <a
+            href="https://github.com/AeThex-Corporation/AeThexOS/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-foreground flex items-center gap-1"
+          >
+            GitHub Issues <ExternalLink className="w-3 h-3" />
+          </a>
+          <span>•</span>
+          <a
+            href="https://discord.gg/aethex"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-foreground"
+          >
+            Discord
+          </a>
+          <span>•</span>
+          <Link to="/support" className="hover:text-foreground">
+            Support
+          </Link>
+        </p>
+      </section>
+    </div>
+  );
+}

client/pages/docs/lang/DocsLangSyntax.tsx

@@ -0,0 +1,365 @@
+import { Link } from "react-router-dom";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  CheckCircle2,
+  Copy,
+  Code,
+  Layers,
+  Zap,
+  Globe,
+  GitBranch,
+} from "lucide-react";
+import { useState } from "react";
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded bg-slate-700 hover:bg-slate-600 transition-colors"
+    >
+      {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4 text-slate-400" />}
+    </button>
+  );
+}
+
+function CodeBlock({ code, language = "aethex" }: { code: string; language?: string }) {
+  return (
+    <div className="relative">
+      <CopyButton text={code} />
+      <pre className="bg-slate-900 border border-slate-700 rounded-lg p-4 overflow-x-auto">
+        <code className="text-sm text-slate-300 font-mono whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+
+const realitiesCode = `reality GameName {
+    platforms: [roblox, uefn, web]
+    type: "multiplayer"
+}`;
+
+const journeysCode = `journey ProcessScore(player, score) {
+    platform: all
+    
+    # Automatically scrubs PII before processing
+    when score > 1000 {
+        notify "High score achieved!"
+    }
+}`;
+
+const syncCode = `import { Passport } from "@aethex.os/core"
+
+journey SaveProgress(player) {
+    platform: all
+
+    let passport = player.passport
+    sync passport across [roblox, uefn, web]
+}`;
+
+const conditionalCode = `when player.age < 13 {
+    # COPPA compliance automatic
+    notify "Parent permission required"
+} otherwise {
+    # Full features unlocked
+    reveal player.stats
+}`;
+
+const platformSpecificCode = `journey DisplayLeaderboard() {
+    platform: roblox {
+        # Roblox-specific code
+        reveal leaderboardGUI
+    }
+    
+    platform: web {
+        # Web-specific code
+        reveal leaderboardHTML
+    }
+}`;
+
+const coreLibraryCode = `import { Passport, DataSync, SafeInput, Compliance } from "@aethex.os/core"
+
+# Passport - Universal identity
+let passport = new Passport(userId, username)
+passport.verify()
+passport.syncAcross([roblox, web])
+
+# DataSync - Cross-platform data
+DataSync.sync(playerData, [roblox, uefn])
+
+# SafeInput - PII protection
+let result = SafeInput.validate(userInput)
+when result.valid {
+    # Input is safe
+}
+
+# Compliance - COPPA/FERPA checks
+when Compliance.isCOPPACompliant(user.age) {
+    # Can collect data
+}`;
+
+const robloxLibraryCode = `import { RemoteEvent, Leaderboard } from "@aethex.os/roblox"
+
+# Roblox-specific features
+let event = RemoteEvent.new("PlayerJoined")
+event.FireAllClients(player)
+
+let stats = Leaderboard.new("Points", 0)
+Leaderboard.updateScore(player, "Points", 100)`;
+
+const configCode = `{
+  "targets": ["javascript", "roblox", "uefn"],
+  "srcDir": "src",
+  "outDir": "build",
+  "stdlib": true,
+  "compliance": {
+    "coppa": true,
+    "ferpa": true,
+    "piiDetection": true
+  }
+}`;
+
+const projectStructureCode = `my-game/
+├── aethex.config.json   # Compilation settings
+├── package.json          # npm dependencies
+├── src/
+│   ├── main.aethex      # Entry point
+│   ├── auth.aethex      # Authentication logic
+│   └── game.aethex      # Game logic
+└── build/
+    ├── main.js          # JavaScript output
+    └── main.lua         # Roblox output`;
+
+const syntaxSections = [
+  {
+    id: "realities",
+    title: "Realities (Namespaces)",
+    icon: Layers,
+    description: "Define your game or application namespace",
+    code: realitiesCode,
+  },
+  {
+    id: "journeys",
+    title: "Journeys (Functions)",
+    icon: Zap,
+    description: "Create functions that run across platforms",
+    code: journeysCode,
+  },
+  {
+    id: "sync",
+    title: "Cross-Platform Sync",
+    icon: Globe,
+    description: "Synchronize data across all platforms with one line",
+    code: syncCode,
+  },
+  {
+    id: "conditionals",
+    title: "Conditional Logic",
+    icon: GitBranch,
+    description: "Use when/otherwise for conditions with built-in compliance",
+    code: conditionalCode,
+  },
+  {
+    id: "platform",
+    title: "Platform-Specific Code",
+    icon: Code,
+    description: "Write code that only runs on specific platforms",
+    code: platformSpecificCode,
+  },
+];
+
+export default function DocsLangSyntax() {
+  return (
+    <div className="space-y-12">
+      {/* Header */}
+      <section>
+        <Badge className="mb-4 bg-blue-500/20 text-blue-400 border-blue-500/30">
+          Language Reference
+        </Badge>
+        <h1 className="text-4xl font-bold mb-4">Language Syntax</h1>
+        <p className="text-xl text-muted-foreground">
+          Learn the AeThex syntax, from realities and journeys to cross-platform sync.
+        </p>
+      </section>
+
+      {/* Syntax Sections */}
+      <section className="space-y-8">
+        {syntaxSections.map((section) => (
+          <Card key={section.id} id={section.id}>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <section.icon className="w-5 h-5 text-primary" />
+                {section.title}
+              </CardTitle>
+              <CardDescription>{section.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <CodeBlock code={section.code} />
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+
+      {/* Standard Library */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Standard Library</h2>
+        
+        <Tabs defaultValue="core" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="core">@aethex.os/core</TabsTrigger>
+            <TabsTrigger value="roblox">@aethex.os/roblox</TabsTrigger>
+          </TabsList>
+          <TabsContent value="core" className="mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Core Library</CardTitle>
+                <CardDescription>
+                  Universal utilities for authentication, data sync, and compliance
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CodeBlock code={coreLibraryCode} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="roblox" className="mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Roblox Library</CardTitle>
+                <CardDescription>
+                  Roblox-specific features and integrations
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CodeBlock code={robloxLibraryCode} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </section>
+
+      {/* Configuration */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Configuration</h2>
+        <p className="text-muted-foreground mb-6">
+          Configure your project with <code className="bg-slate-800 px-2 py-0.5 rounded text-sm">aethex.config.json</code>:
+        </p>
+        <CodeBlock code={configCode} language="json" />
+      </section>
+
+      {/* Project Structure */}
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Project Structure</h2>
+        <CodeBlock code={projectStructureCode} />
+      </section>
+
+      {/* Compilation Targets Table */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Compilation Targets</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b border-slate-700">
+                <th className="text-left py-3 px-4 font-medium">Target</th>
+                <th className="text-left py-3 px-4 font-medium">Extension</th>
+                <th className="text-left py-3 px-4 font-medium">Use Case</th>
+                <th className="text-left py-3 px-4 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4">JavaScript</td>
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded text-sm">.js</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Web applications, Node.js backends</td>
+                <td className="py-3 px-4"><Badge className="bg-green-500/20 text-green-400 border-green-500/30">Ready</Badge></td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4">Roblox (Lua)</td>
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded text-sm">.lua</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Roblox games</td>
+                <td className="py-3 px-4"><Badge className="bg-green-500/20 text-green-400 border-green-500/30">Ready</Badge></td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4">UEFN (Verse)</td>
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded text-sm">.verse</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Fortnite Creative</td>
+                <td className="py-3 px-4"><Badge variant="outline" className="text-slate-400">Coming Soon</Badge></td>
+              </tr>
+              <tr className="border-b border-slate-800">
+                <td className="py-3 px-4">Unity (C#)</td>
+                <td className="py-3 px-4"><code className="bg-slate-800 px-2 py-0.5 rounded text-sm">.cs</code></td>
+                <td className="py-3 px-4 text-muted-foreground">Unity games, VRChat</td>
+                <td className="py-3 px-4"><Badge variant="outline" className="text-slate-400">Coming Soon</Badge></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Keywords Reference */}
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Keywords Reference</h2>
+        <div className="grid md:grid-cols-2 gap-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Declarations</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">reality</code> - Define a namespace</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">journey</code> - Define a function</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">let</code> - Declare a variable</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">import</code> - Import from libraries</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Control Flow</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">when</code> - Conditional (if)</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">otherwise</code> - Else clause</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">return</code> - Return from journey</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Cross-Platform</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">sync ... across</code> - Sync data</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">platform:</code> - Target platforms</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">platforms:</code> - Reality platforms</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium">Actions</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">notify</code> - Output message</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">reveal</code> - Return/expose data</div>
+              <div><code className="bg-slate-800 px-2 py-0.5 rounded">new</code> - Create instance</div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Navigation */}
+      <section className="flex justify-between pt-8 border-t border-border/50">
+        <Link to="/docs/lang/quickstart" className="text-sm text-muted-foreground hover:text-foreground">
+          ← Quick Start
+        </Link>
+        <Link to="/docs/lang/cli" className="text-sm text-muted-foreground hover:text-foreground">
+          CLI Reference →
+        </Link>
+      </section>
+    </div>
+  );
+}