@contractspec/bundle.marketing 1.12.0 → 1.13.0

package/dist/node/components/marketing/ProductClientPage.js

@@ -0,0 +1,558 @@
+import { createRequire } from "node:module";
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/marketing/ProductClientPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import {
+  analyticsEventNames,
+  captureAnalyticsEvent
+} from "@contractspec/bundle.library/libs/posthog/client";
+import {
+  CheckCircle,
+  ChevronRight,
+  Database,
+  FileCode,
+  GitBranch,
+  Layers,
+  RefreshCw,
+  Shield,
+  Unlock,
+  Zap
+} from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var ProductClientPage = () => /* @__PURE__ */ jsxDEV("main", {
+  className: "",
+  children: [
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding hero-gradient relative",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-6 text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-5xl leading-tight font-bold md:text-6xl",
+            children: "Compiler for AI-coded systems"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground mx-auto max-w-2xl text-lg",
+            children: "Define contracts once. Generate consistent code across API, DB, UI, and events. Regenerate safely anytime. No lock-in."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row",
+            children: [
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/install",
+                onClick: () => captureAnalyticsEvent(analyticsEventNames.CTA_INSTALL_CLICK, {
+                  surface: "product-hero"
+                }),
+                className: "btn-primary inline-flex items-center gap-2",
+                children: [
+                  "Install OSS Core ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 16
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/pricing",
+                className: "btn-ghost",
+                children: "View pricing"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding border-border border-b",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-8",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Layers, {
+                    size: 16,
+                    className: "text-blue-400"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-sm font-medium text-blue-300",
+                    children: "Multi-Surface Consistency"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-3xl font-bold md:text-4xl",
+                children: "One contract, all surfaces in sync"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-lg",
+                children: "Stop chasing drift between your API, database, UI, and events. One spec generates all outputs, guaranteed to stay consistent."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-6 md:grid-cols-2",
+            children: [
+              {
+                title: "REST & GraphQL API",
+                description: "Type-safe endpoints with validation. Standard Express, Hono, Elysia, or Apollo handlers.",
+                icon: Zap
+              },
+              {
+                title: "Database Schema",
+                description: "Prisma migrations and types generated from the same spec. Always in sync with your API.",
+                icon: Database
+              },
+              {
+                title: "UI Components",
+                description: "React forms and views derived from specs. Validation and types flow through automatically.",
+                icon: FileCode
+              },
+              {
+                title: "MCP Tools & Events",
+                description: "AI agent tool definitions and event schemas. Same contract, different surfaces.",
+                icon: GitBranch
+              }
+            ].map((item, i) => /* @__PURE__ */ jsxDEV("div", {
+              className: "card-subtle space-y-4 p-6",
+              children: [
+                /* @__PURE__ */ jsxDEV(item.icon, {
+                  className: "text-blue-400",
+                  size: 24
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("h3", {
+                  className: "text-lg font-bold",
+                  children: item.title
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-sm",
+                  children: item.description
+                }, undefined, false, undefined, this)
+              ]
+            }, i, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding border-border bg-muted/20 border-b",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-8",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "inline-flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV(RefreshCw, {
+                    size: 16,
+                    className: "text-emerald-400"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-sm font-medium text-emerald-300",
+                    children: "Safe Regeneration"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-3xl font-bold md:text-4xl",
+                children: "Regenerate anytime without fear"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-lg",
+                children: "Contracts enforce invariants. Breaking changes are caught at compile time, not production. Regenerate with confidence."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-6 md:grid-cols-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle space-y-4 p-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "font-bold",
+                    children: "Spec-First Safety"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "AI agents read specs, not implementations. Generated code that violates contracts gets flagged automatically."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("ul", {
+                    className: "text-muted-foreground space-y-2 text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "Type-safe from spec to runtime"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "Invariants enforced at compile time"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "Breaking changes detected early"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle space-y-4 p-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "font-bold",
+                    children: "Version Control Built-in"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Every spec change is tracked. Roll back to any previous version. Migrations are explicit and reversible."
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("ul", {
+                    className: "text-muted-foreground space-y-2 text-sm",
+                    children: [
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "Git-native spec history"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "Explicit migration paths"
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV("li", {
+                        className: "flex gap-3",
+                        children: [
+                          /* @__PURE__ */ jsxDEV(CheckCircle, {
+                            size: 16,
+                            className: "mt-0.5 flex-shrink-0 text-emerald-400"
+                          }, undefined, false, undefined, this),
+                          "One-click rollback"
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding border-border border-b",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-8",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "inline-flex items-center gap-2 rounded-full border border-violet-500/20 bg-violet-500/10 px-3 py-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Shield, {
+                    size: 16,
+                    className: "text-violet-400"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-sm font-medium text-violet-300",
+                    children: "Contract Enforcement"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-3xl font-bold md:text-4xl",
+                children: "AI governance that actually works"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-lg",
+                children: "Constrain what AI agents can change. Enforce contracts they must respect. No more hallucinated refactors breaking your system."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "card-subtle space-y-6 p-6",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "space-y-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "font-bold",
+                    children: "How contract enforcement works"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: "Contracts define what the system should do. AI-generated code that violates these contracts is automatically flagged and rejected before it can cause damage."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "grid gap-4 md:grid-cols-3",
+                children: [
+                  {
+                    title: "Define",
+                    description: "Write specs in TypeScript. Define inputs, outputs, and invariants."
+                  },
+                  {
+                    title: "Generate",
+                    description: "ContractSpec generates code across all surfaces from your specs."
+                  },
+                  {
+                    title: "Enforce",
+                    description: "Any code that violates specs is flagged. AI agents can't break contracts."
+                  }
+                ].map((step, i) => /* @__PURE__ */ jsxDEV("div", {
+                  className: "space-y-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("div", {
+                      className: "flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/20",
+                      children: /* @__PURE__ */ jsxDEV("div", {
+                        className: "text-sm font-bold text-violet-400",
+                        children: i + 1
+                      }, undefined, false, undefined, this)
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("h4", {
+                      className: "text-sm font-bold",
+                      children: step.title
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("p", {
+                      className: "text-muted-foreground text-xs",
+                      children: step.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, i, true, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding border-border border-b bg-gradient-to-br from-violet-500/10 via-indigo-500/5 to-blue-500/5",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-8",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "inline-flex items-center gap-2 rounded-full border border-pink-500/20 bg-pink-500/10 px-3 py-1",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Unlock, {
+                    size: 16,
+                    className: "text-pink-400"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-sm font-medium text-pink-300",
+                    children: "No Lock-in"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-3xl font-bold md:text-4xl",
+                children: "You own everything. Eject anytime."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-lg",
+                children: "ContractSpec is a compiler, not a prison. The generated code is yours: standard TypeScript, standard SQL, standard GraphQL."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-6 md:grid-cols-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle space-y-4 p-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-lg font-bold",
+                    children: "Standard Tech Output"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("ul", {
+                    className: "text-muted-foreground space-y-3 text-sm",
+                    children: [
+                      "TypeScript you can read and modify",
+                      "Prisma migrations you can run manually",
+                      "GraphQL schemas you can serve anywhere",
+                      "React components with no magic",
+                      "REST handlers that work with any framework"
+                    ].map((item, i) => /* @__PURE__ */ jsxDEV("li", {
+                      className: "flex gap-3",
+                      children: [
+                        /* @__PURE__ */ jsxDEV(CheckCircle, {
+                          size: 16,
+                          className: "mt-0.5 flex-shrink-0 text-pink-400"
+                        }, undefined, false, undefined, this),
+                        item
+                      ]
+                    }, i, true, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "card-subtle space-y-4 p-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-lg font-bold",
+                    children: "No Proprietary Dependencies"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("ul", {
+                    className: "text-muted-foreground space-y-3 text-sm",
+                    children: [
+                      "No runtime library required",
+                      "No vendor-specific abstractions",
+                      "Works with your existing CI/CD",
+                      "Eject anytime, keep everything",
+                      "Open spec format"
+                    ].map((item, i) => /* @__PURE__ */ jsxDEV("li", {
+                      className: "flex gap-3",
+                      children: [
+                        /* @__PURE__ */ jsxDEV(CheckCircle, {
+                          size: 16,
+                          className: "mt-0.5 flex-shrink-0 text-pink-400"
+                        }, undefined, false, undefined, this),
+                        item
+                      ]
+                    }, i, true, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "pt-4 text-center",
+            children: /* @__PURE__ */ jsxDEV("p", {
+              className: "text-muted-foreground mb-4 text-sm",
+              children: [
+                "Like TypeScript compiles to JavaScript, ContractSpec compiles to standard code.",
+                /* @__PURE__ */ jsxDEV("br", {}, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("span", {
+                  className: "font-medium text-violet-400",
+                  children: "We're the compiler, not the prison."
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding border-border border-b",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-8",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-center text-3xl font-bold md:text-4xl",
+            children: "Start small. Expand gradually."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground mx-auto max-w-2xl text-center text-lg",
+            children: "You don't rewrite your app. You stabilize one module at a time. Start with one endpoint, prove value, then expand."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "grid gap-6 md:grid-cols-3",
+            children: [
+              {
+                title: "Day 1",
+                description: "Pick one API endpoint. Write a spec. See what gets generated."
+              },
+              {
+                title: "Week 1",
+                description: "Add a few more specs. Compare generated code to existing code."
+              },
+              {
+                title: "Month 1",
+                description: "Migrate a full module. Enjoy multi-surface consistency."
+              }
+            ].map((item, i) => /* @__PURE__ */ jsxDEV("div", {
+              className: "card-subtle space-y-4 p-6 text-center",
+              children: [
+                /* @__PURE__ */ jsxDEV("div", {
+                  className: "text-2xl font-bold text-violet-400",
+                  children: item.title
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("p", {
+                  className: "text-muted-foreground text-sm",
+                  children: item.description
+                }, undefined, false, undefined, this)
+              ]
+            }, i, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV("section", {
+      className: "section-padding hero-gradient",
+      children: /* @__PURE__ */ jsxDEV("div", {
+        className: "mx-auto max-w-4xl space-y-6 text-center",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-3xl font-bold md:text-4xl",
+            children: "Ready to stabilize your AI-generated code?"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Start with one module. No big-bang migration. No lock-in."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row",
+            children: [
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/install",
+                className: "btn-primary inline-flex items-center gap-2",
+                children: [
+                  "Install OSS Core ",
+                  /* @__PURE__ */ jsxDEV(ChevronRight, {
+                    size: 16
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/contact#waitlist",
+                className: "btn-ghost",
+                children: "Join Studio Waitlist"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+export {
+  ProductClientPage
+};