dcplatforms · dcplatforms · Feb 27, 2026 · Feb 27, 2026
diff --git a/ocp-docs/next-env.d.ts b/ocp-docs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/ocp-docs/next.config.mjs b/ocp-docs/next.config.mjs
@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+export default nextConfig;
diff --git a/ocp-docs/package.json b/ocp-docs/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "ocp-docs",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.10",
+    "lucide-react": "^0.395.0",
+    "next": "14.2.3",
+    "next-mdx-remote": "^4.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.11",
+    "tailwind-merge": "^2.3.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/ocp-docs/src/app/docs/[slug]/page.tsx b/ocp-docs/src/app/docs/[slug]/page.tsx
@@ -0,0 +1,43 @@
+import { getAllDocSlugs, getDocBySlug } from "@/lib/docs";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { notFound } from "next/navigation";
+import GlassPanel from "@/components/GlassPanel";
+
+export async function generateStaticParams() {
+  const slugs = await getAllDocSlugs();
+  return slugs.map((slug) => ({
+    slug: slug,
+  }));
+}
+
+export default async function DocPage({ params }: { params: { slug: string } }) {
+  const source = await getDocBySlug(params.slug);
+
+  if (!source) {
+    notFound();
+  }
+
+  return (
+    <div className="container mx-auto px-6 py-12">
+      <div className="flex flex-col lg:flex-row gap-12">
+        <aside className="w-full lg:w-64 shrink-0 hidden lg:block">
+          <div className="sticky top-32 space-y-8">
+             <div>
+               <h4 className="font-montserrat font-bold text-xs uppercase tracking-widest text-white/40 mb-4">Getting Started</h4>
+               <ul className="space-y-3 text-sm">
+                  <li><a href="/docs/home" className="text-white/60 hover:text-white transition-colors">Introduction</a></li>
+                  <li><a href="/docs/getting-started" className="text-white/60 hover:text-white transition-colors">Quick Start</a></li>
+               </ul>
+             </div>
+          </div>
+        </aside>
+
+        <article className="flex-1 min-w-0">
+          <GlassPanel className="min-h-[800px] prose prose-invert max-w-none">
+            <MDXRemote source={source} />
+          </GlassPanel>
+        </article>
+      </div>
+    </div>
+  );
+}
diff --git a/ocp-docs/src/app/layout.tsx b/ocp-docs/src/app/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Inter, Montserrat } from "next/font/google";
+import "../styles/globals.css";
+import ThemeRegistry from "@/components/ThemeRegistry";
+import GridBackground from "@/components/GridBackground";
+import Header from "@/components/Header";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-montserrat" });
+
+export const metadata: Metadata = {
+  title: "Open Commerce Protocol | Documentation",
+  description: "The open source standard for agentic commerce and universal commerce protocol transactions.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.variable} ${montserrat.variable} font-sans antialiased`}>
+        <ThemeRegistry>
+          <GridBackground />
+          <Header />
+          <main className="pt-24 min-height-screen">
+            {children}
+          </main>
+        </ThemeRegistry>
+      </body>
+    </html>
+  );
+}
diff --git a/ocp-docs/src/app/page.tsx b/ocp-docs/src/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/docs/home");
+}
diff --git a/ocp-docs/src/components/GlassPanel.tsx b/ocp-docs/src/components/GlassPanel.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export default function GlassPanel({ children, className = '' }: { children: React.ReactNode, className?: string }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className={`relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-8 backdrop-blur-2xl shadow-2xl ${className}`}
+    >
+      <div className="absolute inset-0 pointer-events-none bg-gradient-to-br from-white/10 to-transparent opacity-50" />
+      <div className="relative z-10">
+        {children}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/ocp-docs/src/components/GridBackground.tsx b/ocp-docs/src/components/GridBackground.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+
+export default function GridBackground() {
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  const springX = useSpring(mouseX, { stiffness: 50, damping: 20 });
+  const springY = useSpring(mouseY, { stiffness: 50, damping: 20 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      mouseX.set(e.clientX);
+      mouseY.set(e.clientY);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, [mouseX, mouseY]);
+
+  return (
+    <div className="fixed inset-0 -z-10 overflow-hidden bg-[#040711]">
+      <div
+        className="absolute inset-0 opacity-20"
+        style={{
+          backgroundImage: `radial-gradient(circle at 2px 2px, #3b82f6 1px, transparent 0)`,
+          backgroundSize: '40px 40px',
+        }}
+      />
+      <motion.div
+        className="pointer-events-none absolute h-[600px] w-[600px] rounded-full bg-primary/10 blur-[120px]"
+        style={{
+          x: springX,
+          y: springY,
+          translateX: '-50%',
+          translateY: '-50%',
+        }}
+      />
+    </div>
+  );
+}
diff --git a/ocp-docs/src/components/Header.tsx b/ocp-docs/src/components/Header.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { Search, Github, Menu, ChevronDown } from 'lucide-react';
+
+export default function Header() {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const { scrollY } = useScroll();
+
+  const headerBg = useTransform(
+    scrollY,
+    [0, 50],
+    ['rgba(4, 7, 17, 0)', 'rgba(4, 7, 17, 0.8)']
+  );
+
+  const headerBlur = useTransform(
+    scrollY,
+    [0, 50],
+    ['blur(0px)', 'blur(12px)']
+  );
+
+  useEffect(() => {
+    const updateScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', updateScroll);
+    return () => window.removeEventListener('scroll', updateScroll);
+  }, []);
+
+  return (
+    <motion.header
+      style={{ backgroundColor: headerBg, backdropFilter: headerBlur }}
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        isScrolled ? 'py-4 border-b border-white/10' : 'py-6'
+      }`}
+    >
+      <div className="container mx-auto px-6 flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2 group">
+          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center group-hover:rotate-12 transition-transform">
+             <span className="text-white font-bold text-xl">O</span>
+          </div>
+          <span className="font-montserrat font-bold text-xl tracking-tight hidden sm:block">
+            OCP <span className="text-primary">Docs</span>
+          </span>
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-8">
+          <NavLink href="/docs/home">Docs</NavLink>
+          <NavLink href="/docs/api/wallet">API Reference</NavLink>
+          <NavLink href="/docs/ecosystem">Ecosystem</NavLink>
+          <a
+            href="https://github.com/dcplatforms/Open-Commerce-Protocol"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white/70 hover:text-white transition-colors flex items-center gap-2"
+          >
+            <Github size={20} />
+            <span>GitHub</span>
+          </a>
+        </nav>
+
+        <div className="flex items-center gap-4">
+          <div className="relative hidden lg:block">
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40">
+              <Search size={16} />
+            </div>
+            <input
+              type="text"
+              placeholder="Search docs..."
+              className="bg-white/5 border border-white/10 rounded-full py-2 pl-10 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 w-64 transition-all"
+            />
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-mono text-white/30 border border-white/20 rounded px-1.5 py-0.5">
+              ⌘K
+            </div>
+          </div>
+
+          <button className="flex items-center gap-1 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg px-3 py-1.5 text-sm transition-colors">
+            v1.0
+            <ChevronDown size={14} />
+          </button>
+        </div>
+      </div>
+    </motion.header>
+  );
+}
+
+function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <Link
+      href={href}
+      className="text-sm font-medium text-white/70 hover:text-white transition-colors relative group"
+    >
+      {children}
+      <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all group-hover:w-full" />
+    </Link>
+  );
+}
diff --git a/ocp-docs/src/components/MDXComponents.tsx b/ocp-docs/src/components/MDXComponents.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+
+export const mdxComponents = {
+  h1: (props: any) => <h1 className="text-4xl font-montserrat font-bold mt-12 mb-6" {...props} />,
+  h2: (props: any) => <h2 className="text-2xl font-montserrat font-semibold mt-10 mb-4 pb-2 border-b border-white/10" {...props} />,
+  p: (props: any) => <p className="text-white/70 leading-relaxed mb-6" {...props} />,
+  a: (props: any) => <a className="text-primary hover:underline transition-all" {...props} />,
+};
diff --git a/ocp-docs/src/components/RemoteMdx.tsx b/ocp-docs/src/components/RemoteMdx.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { MDXRemote, MDXRemoteProps } from "next-mdx-remote";
+import { mdxComponents } from "./MDXComponents";
+
+export default function RemoteMdx({ source }: { source: any }) {
+  return <MDXRemote {...source} components={mdxComponents} />;
+}
diff --git a/ocp-docs/src/components/ThemeRegistry.tsx b/ocp-docs/src/components/ThemeRegistry.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import darkTheme from '@/theme/dark';
+
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      {children}
+    </ThemeProvider>
+  );
+}