@contractspec/bundle.marketing 2.1.0 → 2.2.0

package/dist/browser/components/marketing/ContactClient.js

@@ -186,978 +186,76 @@ Submitted via ContractSpec contact form
   return { success: true, text: "Message sent successfully!" };
 };
 
-// src/libs/email/waitlist.ts
-"use server";
-var WAITLIST_MISSING_CONFIG = "Waitlist service is not configured. Please try again later.";
-var WAITLIST_SEND_ERROR = "Failed to join waitlist. Please try again later or contact us directly.";
-var joinWaitlist = async (formData) => {
-  const email = (formData.get("email") ?? "").toString().trim();
-  if (!email || !email.includes("@")) {
-    return {
-      success: false,
-      text: "Please enter a valid email address."
-    };
-  }
-  const configResult = getEmailConfig();
-  if (!configResult.ok || !configResult.config) {
-    return {
-      success: false,
-      text: configResult.errorMessage ?? WAITLIST_MISSING_CONFIG
-    };
-  }
-  const waitlistText = `
-You're on the waitlist!
-
-Thanks for joining the ContractSpec waitlist. You're now in line for early access to:
-
-• Stabilize your AI-generated code with ContractSpec
-• Multi-surface consistency (API, DB, UI, events)
-• Safe regeneration without breaking changes
-• AI governance and contract enforcement
-
-We'll notify you as soon as early access is available. In the meantime, you can:
-
-• Check out our docs: https://contractspec.io/docs
-• Follow our progress on GitHub
-• Book a demo call to see ContractSpec in action
-
-We're excited to have you on board!
-
----
-ContractSpec Team
-https://contractspec.io
-
-To remove yourself from the waitlist, reply to this email with "remove"
-  `.trim();
-  const waitlistHtml = `
-    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
-      <h1 style="color: #8b5cf6;">You're on the waitlist!</h1>
-      <p>Thanks for joining the ContractSpec waitlist. You're now in line for early access to:</p>
-      <ul style="line-height: 1.8;">
-        <li>Stabilize your AI-generated code with ContractSpec</li>
-        <li>Multi-surface consistency (API, DB, UI, events)</li>
-        <li>Safe regeneration without breaking changes</li>
-        <li>AI governance and contract enforcement</li>
-      </ul>
-      <p>We'll notify you as soon as early access is available. In the meantime, you can:</p>
-      <ul style="line-height: 1.8;">
-        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
-        <li>Follow our progress on GitHub</li>
-        <li>Book a demo call to see ContractSpec in action</li>
-      </ul>
-      <p>We're excited to have you on board!</p>
-      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
-      <p style="color: #6b7280; font-size: 14px;">
-        ContractSpec Team<br />
-        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
-      </p>
-      <p style="color: #9ca3af; font-size: 12px;">
-        To remove yourself from the waitlist, reply to this email with "remove"
-      </p>
-    </div>
-  `;
-  const userSend = await sendEmail(configResult.config, {
-    to: [{ email }],
-    subject: "You're on the ContractSpec waitlist!",
-    text: waitlistText,
-    html: waitlistHtml,
-    context: "waitlist-welcome"
-  });
-  if (!userSend.success) {
-    return { success: false, text: WAITLIST_SEND_ERROR };
-  }
-  const teamNotificationText = `New waitlist signup from: ${email}`;
-  const teamNotificationHtml = `
-    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
-      <p style="margin: 0 0 8px;">New waitlist signup</p>
-      <p style="margin: 0;"><strong>Email:</strong> ${formatMultilineHtml(email)}</p>
-    </div>
-  `;
-  const teamSend = await sendEmail(configResult.config, {
-    to: [configResult.config.teamInbox],
-    subject: `New Waitlist Signup: ${email}`,
-    text: teamNotificationText,
-    html: teamNotificationHtml,
-    context: "waitlist-team-notification"
-  });
-  if (!teamSend.success) {
-    return { success: false, text: WAITLIST_SEND_ERROR };
-  }
-  return { success: true, text: "Successfully joined waitlist!" };
-};
-
-// src/libs/email/waitlist-application.ts
-"use server";
-var APPLICATION_MISSING_CONFIG = "Waitlist application service is not configured. Please try again later.";
-var APPLICATION_SEND_ERROR = "Failed to submit application. Please try again later or contact us directly.";
-var submitWaitlistApplication = async (formData) => {
-  const email = (formData.get("email") ?? "").toString().trim();
-  const name = (formData.get("name") ?? "").toString().trim();
-  const company = (formData.get("company") ?? "").toString().trim();
-  const role = (formData.get("role") ?? "").toString().trim();
-  const useCase = (formData.get("useCase") ?? "").toString().trim();
-  const currentStack = (formData.get("currentStack") ?? "").toString().trim();
-  const whatBuilding = (formData.get("whatBuilding") ?? "").toString().trim();
-  const whatSolving = (formData.get("whatSolving") ?? "").toString().trim();
-  const teamSize = (formData.get("teamSize") ?? "").toString().trim();
-  const timeline = (formData.get("timeline") ?? "").toString().trim();
-  const openToSessions = formData.get("openToSessions") === "on";
-  const okayWithCaseStudies = formData.get("okayWithCaseStudies") === "on";
-  if (!email || !email.includes("@")) {
-    return {
-      success: false,
-      text: "Please enter a valid email address."
-    };
-  }
-  if (!name || !whatBuilding || !whatSolving) {
-    return {
-      success: false,
-      text: "Please fill in all required fields."
-    };
-  }
-  const configResult = getEmailConfig();
-  if (!configResult.ok || !configResult.config) {
-    return {
-      success: false,
-      text: configResult.errorMessage ?? APPLICATION_MISSING_CONFIG
-    };
-  }
-  const applicantText = `
-You're on the list.
-
-Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.
-
-What happens next:
-• We review applications weekly
-• If selected, we'll reach out via email to schedule an intro call
-• During early access, you'll get hands-on support and influence over the roadmap
-
-In the meantime:
-• Check out our docs: https://contractspec.io/docs
-• Book a demo call: https://contractspec.io/contact
-
-We're excited about the possibility of working together!
-
----
-ContractSpec Team
-https://contractspec.io
-  `.trim();
-  const applicantHtml = `
-    <div style="font-family: sans-serif; max-width: 640px; margin: 0 auto;">
-      <h1 style="color: #8b5cf6;">You're on the list.</h1>
-      <p>Thanks for applying to the ContractSpec design partner program. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally.</p>
-      <h2 style="color: #8b5cf6; margin-top: 24px;">What happens next:</h2>
-      <ul style="line-height: 1.8;">
-        <li>We review applications weekly</li>
-        <li>If selected, we'll reach out via email to schedule an intro call</li>
-        <li>During early access, you'll get hands-on support and influence over the roadmap</li>
-      </ul>
-      <h2 style="color: #8b5cf6; margin-top: 24px;">In the meantime:</h2>
-      <ul style="line-height: 1.8;">
-        <li>Check out our <a href="https://contractspec.io/docs" style="color: #8b5cf6;">docs</a></li>
-        <li>Book a demo call: <a href="https://contractspec.io/contact" style="color: #8b5cf6;">contractspec.io/contact</a></li>
-      </ul>
-      <p>We're excited about the possibility of working together!</p>
-      <hr style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;" />
-      <p style="color: #6b7280; font-size: 14px;">
-        ContractSpec Team<br />
-        <a href="https://contractspec.io" style="color: #8b5cf6;">contractspec.io</a>
-      </p>
-    </div>
-  `;
-  const applicantSend = await sendEmail(configResult.config, {
-    to: [{ email }],
-    subject: "You're on the ContractSpec design partner waitlist!",
-    text: applicantText,
-    html: applicantHtml,
-    context: "waitlist-application-welcome"
-  });
-  if (!applicantSend.success) {
-    return { success: false, text: APPLICATION_SEND_ERROR };
-  }
-  const preferencesText = `
-Open to 1:1 product/design sessions: ${openToSessions ? "Yes" : "No"}
-Okay with anonymized case studies: ${okayWithCaseStudies ? "Yes" : "No"}
-  `.trim();
-  const teamEmailText = `
-New Design Partner Waitlist Application
-
-Contact Information:
-- Name: ${name}
-- Email: ${email}
-${company ? `- Company/Project: ${company}` : ""}
-${role ? `- Role: ${role}` : ""}
-
-Application Details:
-- What are you building with AI today?
-${whatBuilding}
-
-- What do you hope ContractSpec will solve for you?
-${whatSolving}
-
-- Primary use case: ${useCase || "Not specified"}
-- Current stack: ${currentStack || "Not specified"}
-- Team Size: ${teamSize || "Not specified"}
-- Timeline: ${timeline || "Not specified"}
-
-Preferences:
-- Open to 1:1 product/design sessions: ${openToSessions ? "Yes" : "No"}
-- Okay with anonymized case studies: ${okayWithCaseStudies ? "Yes" : "No"}
-
----
-Submitted via ContractSpec waitlist application form
-  `.trim();
-  const teamEmailHtml = `
-    <div style="font-family: sans-serif; max-width: 720px; margin: 0 auto;">
-      <h1 style="color: #8b5cf6;">New Design Partner Waitlist Application</h1>
-      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Contact Information</h2>
-      <ul style="padding-left: 16px; line-height: 1.6; margin: 0 0 16px;">
-        <li>Name: ${escapeHtml(name)}</li>
-        <li>Email: ${escapeHtml(email)}</li>
-        ${company ? `<li>Company/Project: ${escapeHtml(company)}</li>` : ""}
-        ${role ? `<li>Role: ${escapeHtml(role)}</li>` : ""}
-      </ul>
-      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Application Details</h2>
-      <p style="margin: 0 0 8px; font-weight: 600;">What are you building with AI today?</p>
-      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
-        ${formatMultilineHtml(whatBuilding)}
-      </div>
-      <p style="margin: 16px 0 8px; font-weight: 600;">What do you hope ContractSpec will solve for you?</p>
-      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; white-space: pre-wrap; line-height: 1.6;">
-        ${formatMultilineHtml(whatSolving)}
-      </div>
-      <ul style="padding-left: 16px; line-height: 1.6; margin: 16px 0;">
-        <li>Primary use case: ${escapeHtml(useCase || "Not specified")}</li>
-        <li>Current stack: ${escapeHtml(currentStack || "Not specified")}</li>
-        <li>Team Size: ${escapeHtml(teamSize || "Not specified")}</li>
-        <li>Timeline: ${escapeHtml(timeline || "Not specified")}</li>
-      </ul>
-      <h2 style="color: #8b5cf6; margin: 16px 0 8px;">Preferences</h2>
-      <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #f9fafb; line-height: 1.6;">
-        ${formatMultilineHtml(preferencesText)}
-      </div>
-      <p style="color: #6b7280; font-size: 12px; margin-top: 20px;">Submitted via ContractSpec waitlist application form</p>
-    </div>
-  `;
-  const teamSend = await sendEmail(configResult.config, {
-    to: [configResult.config.teamInbox],
-    subject: `New Design Partner Application: ${name} (${email})`,
-    text: teamEmailText,
-    html: teamEmailHtml,
-    replyTo: email,
-    context: "waitlist-application-team-notification"
-  });
-  if (!teamSend.success) {
-    return { success: false, text: APPLICATION_SEND_ERROR };
-  }
-  return {
-    success: true,
-    text: "Application submitted successfully!"
-  };
-};
-
-// src/components/marketing/waitlist-section.tsx
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import z from "zod";
-import { AlertCircle, CheckCircle } from "lucide-react";
+// src/components/marketing/studio-signup-section.tsx
+import Link from "next/link";
+import { ArrowRight, Rocket } from "lucide-react";
 import { Button } from "@contractspec/lib.design-system";
-import { Textarea } from "@contractspec/lib.design-system";
-import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@contractspec/lib.ui-kit-web/ui/select";
-import { Checkbox } from "@contractspec/lib.ui-kit-web/ui/checkbox";
-import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
-import { Input } from "@contractspec/lib.design-system";
-import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
-var simpleWaitlistSchema = z.object({
-  email: z.email("Please enter a valid email address")
-});
-var designPartnerSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  email: z.email("Please enter a valid email address"),
-  company: z.string().optional(),
-  role: z.string().optional(),
-  useCase: z.string().optional(),
-  currentStack: z.string().optional(),
-  whatBuilding: z.string().min(1, "Please tell us what you are building"),
-  whatSolving: z.string().min(1, "Please tell us what ContractSpec will solve for you"),
-  teamSize: z.string().optional(),
-  timeline: z.string().optional(),
-  openToSessions: z.boolean().default(false),
-  okayWithCaseStudies: z.boolean().default(false)
-});
-function WaitlistSection({
-  variant = "default",
-  context = "pricing"
+var studioUrl = "https://app.contractspec.studio";
+var studioDocsUrl = "https://app.contractspec.studio/docs";
+function StudioSignupSection({
+  variant = "default"
 }) {
-  const [isDesignPartner, setIsDesignPartner] = useState(false);
-  const [submitResult, setSubmitResult] = useState(null);
-  const [isPending, setIsPending] = useState(false);
-  const simpleForm = useForm({
-    resolver: zodResolver(simpleWaitlistSchema),
-    defaultValues: {
-      email: ""
-    }
-  });
-  const designPartnerForm = useForm({
-    resolver: zodResolver(designPartnerSchema),
-    defaultValues: {
-      name: "",
-      email: "",
-      company: "",
-      role: "",
-      useCase: "",
-      currentStack: "",
-      whatBuilding: "",
-      whatSolving: "",
-      teamSize: "",
-      timeline: "",
-      openToSessions: false,
-      okayWithCaseStudies: false
-    }
-  });
-  const simpleEmail = simpleForm.watch("email");
-  const designPartnerEmail = designPartnerForm.watch("email");
-  useEffect(() => {
-    const currentDesignPartnerEmail = designPartnerForm.getValues("email");
-    if (simpleEmail && simpleEmail !== currentDesignPartnerEmail) {
-      designPartnerForm.setValue("email", simpleEmail, { shouldDirty: false });
-    }
-  }, [simpleEmail, designPartnerForm]);
-  useEffect(() => {
-    const currentSimpleEmail = simpleForm.getValues("email");
-    if (designPartnerEmail && designPartnerEmail !== currentSimpleEmail) {
-      simpleForm.setValue("email", designPartnerEmail, { shouldDirty: false });
-    }
-  }, [designPartnerEmail, simpleForm]);
-  const handleSimpleSubmit = async (data) => {
-    setIsPending(true);
-    setSubmitResult(null);
-    try {
-      const formData = new FormData;
-      formData.set("email", data.email);
-      const result = await joinWaitlist(formData);
-      if (result.success) {
-        setSubmitResult({
-          success: true,
-          text: "Thanks for joining the waitlist! Check your inbox for a confirmation."
-        });
-        simpleForm.reset();
-      } else {
-        setSubmitResult({
-          success: false,
-          text: result.text || "Failed to join waitlist. Please try again."
-        });
-      }
-    } catch (_error) {
-      setSubmitResult({
-        success: false,
-        text: "Failed to join waitlist. Please try again."
-      });
-    } finally {
-      setIsPending(false);
-    }
-  };
-  const handleDesignPartnerSubmit = async (data) => {
-    setIsPending(true);
-    setSubmitResult(null);
-    try {
-      const formData = new FormData;
-      formData.set("email", data.email);
-      formData.set("name", data.name);
-      if (data.company)
-        formData.set("company", data.company);
-      if (data.role)
-        formData.set("role", data.role);
-      if (data.useCase)
-        formData.set("useCase", data.useCase);
-      if (data.currentStack)
-        formData.set("currentStack", data.currentStack);
-      formData.set("whatBuilding", data.whatBuilding);
-      formData.set("whatSolving", data.whatSolving);
-      if (data.teamSize)
-        formData.set("teamSize", data.teamSize);
-      if (data.timeline)
-        formData.set("timeline", data.timeline);
-      if (data.openToSessions)
-        formData.set("openToSessions", "on");
-      if (data.okayWithCaseStudies)
-        formData.set("okayWithCaseStudies", "on");
-      const result = await submitWaitlistApplication(formData);
-      if (result.success) {
-        setSubmitResult({
-          success: true,
-          text: "You're on the list. Thanks for applying. We're slowly onboarding design partners in waves. If your use case is a good fit, we'll reach out personally."
-        });
-        designPartnerForm.reset();
-      } else {
-        setSubmitResult({
-          success: false,
-          text: result.text || "Failed to submit application. Please try again."
-        });
-      }
-    } catch (_error) {
-      setSubmitResult({
-        success: false,
-        text: "Failed to submit application. Please try again."
-      });
-    } finally {
-      setIsPending(false);
-    }
-  };
-  const onSubmit = isDesignPartner ? designPartnerForm.handleSubmit(handleDesignPartnerSubmit) : simpleForm.handleSubmit(handleSimpleSubmit);
   const isCompact = variant === "compact";
   return /* @__PURE__ */ jsxDEV("div", {
-    id: "waitlist",
+    id: "studio-signup",
     className: isCompact ? "space-y-4" : "card-subtle space-y-6 p-8",
     children: [
-      !isCompact && /* @__PURE__ */ jsxDEV("div", {
+      /* @__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("span", {
-              className: "text-sm font-medium text-violet-300",
-              children: isDesignPartner ? "Design Partner Waitlist" : "Join the Waitlist"
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("h2", {
-            className: "text-2xl font-bold",
-            children: isDesignPartner ? "Apply for early access to ContractSpec" : "Get early access to ContractSpec"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground text-sm",
-            children: isDesignPartner ? "Tell us what you're building. We'll prioritize teams where ContractSpec can have a big impact, and where we can learn the most." : "Join the waitlist to be notified when ContractSpec becomes available."
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      !isCompact && /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border bg-muted/20 flex items-center justify-between gap-4 rounded-lg border p-4",
-        children: [
-          /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-1",
             children: [
-              /* @__PURE__ */ jsxDEV(Label, {
-                htmlFor: "design-partner-toggle",
-                className: "text-sm font-medium",
-                children: "Apply as a design partner"
+              /* @__PURE__ */ jsxDEV(Rocket, {
+                size: 14,
+                className: "text-violet-300"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("p", {
-                className: "text-muted-foreground text-xs",
-                children: isDesignPartner ? "Get hands-on support, influence the roadmap, and founding discount" : "Get priority access, 1:1 onboarding, and help shape ContractSpec"
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "text-sm font-medium text-violet-300",
+                children: "ContractSpec Studio"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsxDEV(Switch, {
-            id: "design-partner-toggle",
-            checked: isDesignPartner,
-            onCheckedChange: setIsDesignPartner,
-            disabled: isPending || submitResult?.success
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      !isCompact && isDesignPartner && /* @__PURE__ */ jsxDEV("div", {
-        className: "space-y-2",
-        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: isCompact ? "text-xl font-bold" : "text-2xl font-bold",
+            children: "Try ContractSpec Studio"
+          }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("p", {
-            className: "text-sm font-medium",
-            children: "Benefits:"
+            className: "text-muted-foreground text-sm",
+            children: "The AI-powered product decision engine that turns product signals into spec-first deliverables."
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("ul", {
-            className: "text-muted-foreground space-y-1 text-sm",
-            children: [
-              /* @__PURE__ */ jsxDEV("li", {
-                children: "• Early access to ContractSpec Studio"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
-                children: "• 1:1 onboarding and architecture sessions"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
-                children: "• Priority support via direct channels"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
-                children: "• Influence over roadmap and features"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("li", {
-                children: "• Founding discount when paid plans launch"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-xs",
+            children: "Evidence -> Correlation -> Decision -> Change -> Export -> Check -> Notify -> Autopilot"
+          }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV("form", {
-        onSubmit,
-        className: "space-y-4",
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex flex-col gap-3 sm:flex-row",
         children: [
-          isDesignPartner ? /* @__PURE__ */ jsxDEV(Fragment, {
-            children: [
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid gap-4 md:grid-cols-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-name",
-                        className: "text-sm font-medium",
-                        children: [
-                          "Name ",
-                          /* @__PURE__ */ jsxDEV("span", {
-                            className: "text-red-400",
-                            children: "*"
-                          }, undefined, false, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Input, {
-                        id: "waitlist-name",
-                        ...designPartnerForm.register("name"),
-                        type: "text",
-                        placeholder: "Your name",
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this),
-                      designPartnerForm.formState.errors.name && /* @__PURE__ */ jsxDEV("p", {
-                        className: "text-xs text-red-400",
-                        children: designPartnerForm.formState.errors.name.message
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-email",
-                        className: "text-sm font-medium",
-                        children: [
-                          "Email ",
-                          /* @__PURE__ */ jsxDEV("span", {
-                            className: "text-red-400",
-                            children: "*"
-                          }, undefined, false, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Input, {
-                        id: "waitlist-email",
-                        ...designPartnerForm.register("email"),
-                        type: "email",
-                        placeholder: "your@email.com",
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this),
-                      designPartnerForm.formState.errors.email && /* @__PURE__ */ jsxDEV("p", {
-                        className: "text-xs text-red-400",
-                        children: designPartnerForm.formState.errors.email.message
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid gap-4 md:grid-cols-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-company",
-                        className: "text-sm font-medium",
-                        children: "Company / Project Name"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Input, {
-                        id: "waitlist-company",
-                        ...designPartnerForm.register("company"),
-                        type: "text",
-                        placeholder: "Your company or project",
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-role",
-                        className: "text-sm font-medium",
-                        children: "Role"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Select, {
-                        value: designPartnerForm.watch("role") || "",
-                        onValueChange: (value) => designPartnerForm.setValue("role", value),
-                        disabled: isPending || submitResult?.success,
-                        children: [
-                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
-                            id: "waitlist-role",
-                            className: "w-full",
-                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
-                              placeholder: "Select your role"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV(SelectContent, {
-                            children: [
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "founder",
-                                children: "Founder"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "cto",
-                                children: "CTO"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "lead-engineer",
-                                children: "Lead Engineer"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "engineer",
-                                children: "Engineer"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "product-manager",
-                                children: "Product Manager"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "other",
-                                children: "Other"
-                              }, undefined, false, undefined, this)
-                            ]
-                          }, undefined, true, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid gap-4 md:grid-cols-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-use-case",
-                        className: "text-sm font-medium",
-                        children: "Primary use case"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Select, {
-                        value: designPartnerForm.watch("useCase") || "",
-                        onValueChange: (value) => designPartnerForm.setValue("useCase", value),
-                        disabled: isPending || submitResult?.success,
-                        children: [
-                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
-                            id: "waitlist-use-case",
-                            className: "w-full",
-                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
-                              placeholder: "Select a use case"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV(SelectContent, {
-                            children: [
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "api-platform",
-                                children: "API platform"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "ai-ops",
-                                children: "AI operations"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "integration-hub",
-                                children: "Integration hub"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "internal-tools",
-                                children: "Internal tools"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "data-pipelines",
-                                children: "Data pipelines"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "other",
-                                children: "Other"
-                              }, undefined, false, undefined, this)
-                            ]
-                          }, undefined, true, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-current-stack",
-                        className: "text-sm font-medium",
-                        children: "Current stack"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Input, {
-                        id: "waitlist-current-stack",
-                        ...designPartnerForm.register("currentStack"),
-                        type: "text",
-                        placeholder: "e.g. Next.js, Postgres, OpenAPI",
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Label, {
-                    htmlFor: "waitlist-what-building",
-                    className: "text-sm font-medium",
-                    children: [
-                      "What are you building with AI today?",
-                      " ",
-                      /* @__PURE__ */ jsxDEV("span", {
-                        className: "text-red-400",
-                        children: "*"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Textarea, {
-                    id: "waitlist-what-building",
-                    ...designPartnerForm.register("whatBuilding"),
-                    placeholder: "Tell us about your project...",
-                    disabled: isPending || submitResult?.success,
-                    rows: 4
-                  }, undefined, false, undefined, this),
-                  designPartnerForm.formState.errors.whatBuilding && /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-xs text-red-400",
-                    children: designPartnerForm.formState.errors.whatBuilding.message
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV(Label, {
-                    htmlFor: "waitlist-what-solving",
-                    className: "text-sm font-medium",
-                    children: [
-                      "What do you hope ContractSpec will solve for you?",
-                      " ",
-                      /* @__PURE__ */ jsxDEV("span", {
-                        className: "text-red-400",
-                        children: "*"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV(Textarea, {
-                    id: "waitlist-what-solving",
-                    ...designPartnerForm.register("whatSolving"),
-                    placeholder: "What problems are you trying to solve?",
-                    disabled: isPending || submitResult?.success,
-                    rows: 4
-                  }, undefined, false, undefined, this),
-                  designPartnerForm.formState.errors.whatSolving && /* @__PURE__ */ jsxDEV("p", {
-                    className: "text-xs text-red-400",
-                    children: designPartnerForm.formState.errors.whatSolving.message
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "grid gap-4 md:grid-cols-2",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-team-size",
-                        className: "text-sm font-medium",
-                        children: "Team Size"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Select, {
-                        value: designPartnerForm.watch("teamSize") || "",
-                        onValueChange: (value) => designPartnerForm.setValue("teamSize", value),
-                        disabled: isPending || submitResult?.success,
-                        children: [
-                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
-                            id: "waitlist-team-size",
-                            className: "w-full",
-                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
-                              placeholder: "Select team size"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV(SelectContent, {
-                            children: [
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "solo",
-                                children: "Solo"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "2-5",
-                                children: "2-5"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "6-20",
-                                children: "6-20"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "20+",
-                                children: "20+"
-                              }, undefined, false, undefined, this)
-                            ]
-                          }, undefined, true, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "space-y-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-timeline",
-                        className: "text-sm font-medium",
-                        children: "Timeline"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Select, {
-                        value: designPartnerForm.watch("timeline") || "",
-                        onValueChange: (value) => designPartnerForm.setValue("timeline", value),
-                        disabled: isPending || submitResult?.success,
-                        children: [
-                          /* @__PURE__ */ jsxDEV(SelectTrigger, {
-                            id: "waitlist-timeline",
-                            className: "w-full",
-                            children: /* @__PURE__ */ jsxDEV(SelectValue, {
-                              placeholder: "Select timeline"
-                            }, undefined, false, undefined, this)
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV(SelectContent, {
-                            children: [
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "now",
-                                children: "Now"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "1-3-months",
-                                children: "1-3 months"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "3-6-months",
-                                children: "3-6 months"
-                              }, undefined, false, undefined, this),
-                              /* @__PURE__ */ jsxDEV(SelectItem, {
-                                value: "exploring",
-                                children: "Exploring"
-                              }, undefined, false, undefined, this)
-                            ]
-                          }, undefined, true, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "space-y-3",
-                children: [
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "flex items-start gap-3",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Checkbox, {
-                        id: "waitlist-open-to-sessions",
-                        checked: designPartnerForm.watch("openToSessions"),
-                        onCheckedChange: (checked) => designPartnerForm.setValue("openToSessions", checked === true),
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-open-to-sessions",
-                        className: "cursor-pointer text-sm leading-relaxed",
-                        children: "I'm open to 1:1 product/design sessions"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV("div", {
-                    className: "flex items-start gap-3",
-                    children: [
-                      /* @__PURE__ */ jsxDEV(Checkbox, {
-                        id: "waitlist-case-studies",
-                        checked: designPartnerForm.watch("okayWithCaseStudies"),
-                        onCheckedChange: (checked) => designPartnerForm.setValue("okayWithCaseStudies", checked === true),
-                        disabled: isPending || submitResult?.success
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV(Label, {
-                        htmlFor: "waitlist-case-studies",
-                        className: "cursor-pointer text-sm leading-relaxed",
-                        children: "I'm okay with anonymized case studies about our usage"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("div", {
-            className: "space-y-2",
-            children: [
-              /* @__PURE__ */ jsxDEV(Label, {
-                htmlFor: "waitlist-email",
-                className: "text-sm font-medium",
-                children: [
-                  "Email ",
-                  /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-red-400",
-                    children: "*"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsxDEV(Input, {
-                id: "waitlist-email",
-                ...simpleForm.register("email"),
-                type: "email",
-                placeholder: "your@email.com",
-                disabled: isPending || submitResult?.success
-              }, undefined, false, undefined, this),
-              simpleForm.formState.errors.email && /* @__PURE__ */ jsxDEV("p", {
-                className: "text-xs text-red-400",
-                children: simpleForm.formState.errors.email.message
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          submitResult && !isPending && /* @__PURE__ */ jsxDEV("div", {
-            className: `flex items-start gap-2 rounded-lg p-4 text-sm ${submitResult.success ? "border border-green-500/20 bg-green-500/10 text-green-400" : "border border-red-500/20 bg-red-500/10 text-red-400"}`,
-            children: [
-              submitResult.success ? /* @__PURE__ */ jsxDEV(CheckCircle, {
-                size: 20,
-                className: "mt-0.5 shrink-0"
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(AlertCircle, {
-                size: 20,
-                className: "mt-0.5 shrink-0"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("div", {
-                className: "flex-1",
-                children: submitResult.success ? /* @__PURE__ */ jsxDEV(Fragment, {
-                  children: [
-                    /* @__PURE__ */ jsxDEV("p", {
-                      className: "mb-1 font-semibold",
-                      children: "You're on the list."
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("p", {
-                      className: "text-sm",
-                      children: submitResult.text
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this) : /* @__PURE__ */ jsxDEV("p", {
-                  children: submitResult.text
-                }, undefined, false, undefined, this)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
           /* @__PURE__ */ jsxDEV(Button, {
-            type: "submit",
-            disabled: isPending || submitResult?.success,
-            className: "w-full",
-            children: isPending ? "Submitting..." : isDesignPartner ? "Apply to the waitlist" : "Join waitlist"
+            asChild: true,
+            className: "w-full sm:w-auto",
+            children: /* @__PURE__ */ jsxDEV(Link, {
+              href: studioUrl,
+              children: [
+                "Get Started Free ",
+                /* @__PURE__ */ jsxDEV(ArrowRight, {
+                  className: "ml-2 h-4 w-4"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground text-center text-xs",
-            children: "No spam. We'll only email you about ContractSpec and your application."
+          /* @__PURE__ */ jsxDEV(Button, {
+            asChild: true,
+            variant: "outline",
+            className: "w-full sm:w-auto",
+            children: /* @__PURE__ */ jsxDEV(Link, {
+              href: studioDocsUrl,
+              children: "Read Studio Docs"
+            }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -1170,14 +268,14 @@ import { useActionState } from "react";
 import {
   Calendar,
   MessageSquare,
-  CheckCircle as CheckCircle2,
-  AlertCircle as AlertCircle2
+  CheckCircle,
+  AlertCircle
 } from "lucide-react";
 import {
   ActionForm,
   Button as Button2,
-  Input as Input2,
-  Textarea as Textarea2
+  Input,
+  Textarea
 } from "@contractspec/lib.design-system";
 import { VStack, HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
 import {
@@ -1222,9 +320,7 @@ function ContactClient() {
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV2(WaitlistSection, {
-          context: "contact"
-        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(StudioSignupSection, {}, undefined, false, undefined, this),
         /* @__PURE__ */ jsxDEV2(VStack, {
           className: "card-subtle gap-6 p-8",
           id: "call",
@@ -1301,7 +397,7 @@ function ContactClient() {
                         className: "text-sm font-medium",
                         children: "Name"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Input2, {
+                      /* @__PURE__ */ jsxDEV2(Input, {
                         id: "contact-name",
                         name: "name",
                         type: "text",
@@ -1318,7 +414,7 @@ function ContactClient() {
                         className: "text-sm font-medium",
                         children: "Email"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Input2, {
+                      /* @__PURE__ */ jsxDEV2(Input, {
                         id: "contact-email",
                         name: "email",
                         type: "email",
@@ -1336,7 +432,7 @@ function ContactClient() {
                         className: "text-sm font-medium",
                         children: "Message"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Textarea2, {
+                      /* @__PURE__ */ jsxDEV2(Textarea, {
                         id: "contact-message",
                         name: "message",
                         placeholder: "Tell us what's on your mind...",
@@ -1349,9 +445,9 @@ function ContactClient() {
                   contactResult && !contactPending && /* @__PURE__ */ jsxDEV2(HStack, {
                     className: `items-center gap-2 rounded-lg p-3 text-sm ${contactResult.success ? "border border-green-500/20 bg-green-500/10 text-green-400" : "border border-red-500/20 bg-red-500/10 text-red-400"}`,
                     children: [
-                      contactResult.success ? /* @__PURE__ */ jsxDEV2(CheckCircle2, {
+                      contactResult.success ? /* @__PURE__ */ jsxDEV2(CheckCircle, {
                         size: 16
-                      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(AlertCircle2, {
+                      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(AlertCircle, {
                         size: 16
                       }, undefined, false, undefined, this),
                       /* @__PURE__ */ jsxDEV2(Small, {