@contractspec/bundle.marketing 3.7.6 → 3.7.7

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

@@ -7,8 +7,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/libs/email/client.ts
-import { createClient, Temv1alpha1 } from "@scaleway/sdk";
 import { Logger } from "@contractspec/lib.logger";
+import { createClient, Temv1alpha1 } from "@scaleway/sdk";
 var DEFAULT_FROM = {
   email: "noreply@transactional.contractspec.io",
   name: "ContractSpec"
@@ -187,9 +187,8 @@ Submitted via ContractSpec contact form
 };
 
 // src/components/marketing/studio-signup-section.tsx
+import { ArrowRight, Sparkles } from "lucide-react";
 import Link from "next/link";
-import { ArrowRight, Rocket } from "lucide-react";
-import { Button } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 var studioUrl = "https://www.contractspec.studio";
@@ -200,62 +199,47 @@ function StudioSignupSection({
   const isCompact = variant === "compact";
   return /* @__PURE__ */ jsxDEV("div", {
     id: "studio-signup",
-    className: isCompact ? "space-y-4" : "card-subtle space-y-6 p-8",
+    className: `${isCompact ? "space-y-5 rounded-[28px] border border-border bg-card p-6" : "editorial-panel space-y-6"}`,
     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",
+            className: "badge",
             children: [
-              /* @__PURE__ */ jsxDEV(Rocket, {
-                size: 14,
-                className: "text-violet-300"
+              /* @__PURE__ */ jsxDEV(Sparkles, {
+                size: 14
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("span", {
-                className: "text-sm font-medium text-violet-300",
-                children: "ContractSpec Studio"
-              }, undefined, false, undefined, this)
+              "Studio on top"
             ]
           }, undefined, true, undefined, this),
           /* @__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-muted-foreground text-sm",
-            children: "The AI-powered product decision engine that turns product signals into spec-first deliverables."
+            className: isCompact ? "font-serif text-3xl tracking-[-0.04em]" : "font-serif text-4xl tracking-[-0.04em]",
+            children: "See the operating layer built on top of the open system."
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("p", {
-            className: "text-muted-foreground text-xs",
-            children: "Evidence -> Correlation -> Decision -> Change -> Export -> Check -> Notify -> Autopilot"
+            className: "text-muted-foreground text-sm leading-7",
+            children: "Studio packages the workflow for evidence, drafting, review, export, and follow-up. It should feel like the best product built on top of ContractSpec, not a different story."
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "flex flex-col gap-3 sm:flex-row",
+        className: "grid gap-3 sm:grid-cols-2",
         children: [
-          /* @__PURE__ */ jsxDEV(Button, {
-            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(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)
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: studioUrl,
+            className: "btn-primary",
+            children: [
+              "Explore Studio ",
+              /* @__PURE__ */ jsxDEV(ArrowRight, {
+                className: "ml-2 h-4 w-4"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: studioDocsUrl,
+            className: "btn-ghost",
+            children: "Read Studio docs"
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -264,26 +248,19 @@ function StudioSignupSection({
 }
 
 // src/components/marketing/ContactClient.tsx
-import { useActionState } from "react";
-import {
-  Calendar,
-  MessageSquare,
-  CheckCircle,
-  AlertCircle
-} from "lucide-react";
 import {
   ActionForm,
-  Button as Button2,
+  Button,
   Input,
   Textarea
 } from "@contractspec/lib.design-system";
-import { VStack, HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
 import {
-  H2,
-  H1,
-  Small,
-  Muted
-} from "@contractspec/lib.ui-kit-web/ui/typography";
+  AlertCircle,
+  Calendar,
+  CheckCircle,
+  MessageSquare
+} from "lucide-react";
+import { useActionState } from "react";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 function ContactClient() {
@@ -292,183 +269,199 @@ function ContactClient() {
     if (result.success) {
       return {
         success: true,
-        text: "Message sent successfully! We'll get back to you soon."
-      };
-    } else {
-      return {
-        success: false,
-        text: result.text || "Failed to send message. Please try again."
+        text: "Message sent successfully. We'll get back to you soon."
       };
     }
+    return {
+      success: false,
+      text: result.text || "Failed to send message. Please try again."
+    };
   };
   const [contactResult, contactAction, contactPending] = useActionState(handleContactSubmit, null);
-  return /* @__PURE__ */ jsxDEV2("section", {
-    className: "section-padding hero-gradient w-full",
-    children: /* @__PURE__ */ jsxDEV2(VStack, {
-      className: "mx-auto max-w-4xl gap-16",
-      children: [
-        /* @__PURE__ */ jsxDEV2(VStack, {
-          className: "gap-4 text-center",
+  return /* @__PURE__ */ jsxDEV2("main", {
+    children: [
+      /* @__PURE__ */ jsxDEV2("section", {
+        className: "section-padding hero-gradient border-border/70 border-b",
+        children: /* @__PURE__ */ jsxDEV2("div", {
+          className: "editorial-shell grid gap-8 lg:grid-cols-[1.05fr_0.95fr]",
           children: [
-            /* @__PURE__ */ jsxDEV2(H1, {
-              className: "text-5xl font-bold",
-              children: "Get in touch"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2(Muted, {
-              className: "text-lg",
-              children: "Choose how you'd like to connect with us"
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "space-y-5",
+              children: [
+                /* @__PURE__ */ jsxDEV2("p", {
+                  className: "editorial-kicker",
+                  children: "Contact"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("h1", {
+                  className: "editorial-title max-w-4xl",
+                  children: "Talk to the team behind the open system and the Studio product."
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("p", {
+                  className: "editorial-subtitle",
+                  children: "Reach out when you are evaluating the OSS foundation, deciding whether Studio fits your workflow, or want a direct conversation about adoption."
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV2(StudioSignupSection, {
+              variant: "compact"
             }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV2(StudioSignupSection, {}, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV2(VStack, {
-          className: "card-subtle gap-6 p-8",
-          id: "call",
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("section", {
+        className: "editorial-section",
+        children: /* @__PURE__ */ jsxDEV2("div", {
+          className: "editorial-shell grid gap-8 lg:grid-cols-2",
           children: [
-            /* @__PURE__ */ jsxDEV2(HStack, {
-              className: "items-center gap-3",
+            /* @__PURE__ */ jsxDEV2("div", {
+              className: "editorial-panel space-y-6",
+              id: "call",
               children: [
-                /* @__PURE__ */ jsxDEV2(Calendar, {
-                  className: "text-blue-400",
-                  size: 24
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2(VStack, {
-                  className: "items-start gap-1",
+                /* @__PURE__ */ jsxDEV2("div", {
+                  className: "space-y-3",
                   children: [
-                    /* @__PURE__ */ jsxDEV2(H2, {
-                      className: "text-2xl font-bold",
-                      children: "Book a 20-min call"
+                    /* @__PURE__ */ jsxDEV2("div", {
+                      className: "badge",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2(Calendar, {
+                          size: 14
+                        }, undefined, false, undefined, this),
+                        "Book a conversation"
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("h2", {
+                      className: "font-serif text-4xl tracking-[-0.04em]",
+                      children: "Walk through your current system with us."
                     }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV2(Muted, {
-                      className: "text-sm",
-                      children: "Schedule a walkthrough with our team to see ContractSpec in action"
+                    /* @__PURE__ */ jsxDEV2("p", {
+                      className: "text-muted-foreground text-sm leading-7",
+                      children: "Use the call when you want a direct conversation about fit, adoption order, or the right entry point between OSS and Studio."
                     }, undefined, false, undefined, this)
                   ]
-                }, undefined, true, undefined, this)
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV2("div", {
+                  className: "overflow-hidden rounded-[28px] border border-border",
+                  children: /* @__PURE__ */ jsxDEV2("object", {
+                    data: "https://meet.reclaimai.com/e/f863cb29-caac-44b6-972b-1407dd9545a3",
+                    width: "100%",
+                    height: "700px",
+                    style: { outline: "none" },
+                    "aria-label": "Calendar booking widget"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
             /* @__PURE__ */ jsxDEV2("div", {
-              className: "border-border overflow-hidden rounded-lg border",
-              children: /* @__PURE__ */ jsxDEV2("object", {
-                data: "https://meet.reclaimai.com/e/f863cb29-caac-44b6-972b-1407dd9545a3",
-                width: "100%",
-                height: "700px",
-                style: { outline: "none" },
-                "aria-label": "Calendar booking widget"
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        /* @__PURE__ */ jsxDEV2(VStack, {
-          className: "card-subtle gap-6 p-8",
-          id: "message",
-          children: [
-            /* @__PURE__ */ jsxDEV2(HStack, {
-              className: "items-center gap-3",
+              className: "editorial-panel space-y-6",
+              id: "message",
               children: [
-                /* @__PURE__ */ jsxDEV2(MessageSquare, {
-                  className: "text-emerald-400",
-                  size: 24
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2(VStack, {
-                  className: "items-start gap-1",
+                /* @__PURE__ */ jsxDEV2("div", {
+                  className: "space-y-3",
                   children: [
-                    /* @__PURE__ */ jsxDEV2(H2, {
-                      className: "text-2xl font-bold",
-                      children: "Send us a message"
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV2(Muted, {
-                      className: "text-sm",
-                      children: "Have questions or feedback? We'd love to hear from you"
+                    /* @__PURE__ */ jsxDEV2("div", {
+                      className: "badge",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2(MessageSquare, {
+                          size: 14
+                        }, undefined, false, undefined, this),
+                        "Send a message"
+                      ]
+                    }, undefined, true, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("h2", {
+                      className: "font-serif text-4xl tracking-[-0.04em]",
+                      children: "Share context, questions, or a project we should understand."
                     }, undefined, false, undefined, this)
                   ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV2(ActionForm, {
-              action: contactAction,
-              children: /* @__PURE__ */ jsxDEV2(VStack, {
-                className: "gap-4",
-                children: [
-                  /* @__PURE__ */ jsxDEV2(VStack, {
-                    className: "gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV2(Small, {
-                        className: "text-sm font-medium",
-                        children: "Name"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Input, {
-                        id: "contact-name",
-                        name: "name",
-                        type: "text",
-                        placeholder: "Your name",
-                        disabled: contactPending || contactResult?.success,
-                        required: true
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(VStack, {
-                    className: "gap-2",
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV2(ActionForm, {
+                  action: contactAction,
+                  children: /* @__PURE__ */ jsxDEV2("div", {
+                    className: "space-y-4",
                     children: [
-                      /* @__PURE__ */ jsxDEV2(Small, {
-                        className: "text-sm font-medium",
-                        children: "Email"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Input, {
-                        id: "contact-email",
-                        name: "email",
-                        type: "email",
-                        keyboard: { kind: "email" },
-                        placeholder: "your@email.com",
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "space-y-2",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("label", {
+                            htmlFor: "contact-name",
+                            className: "font-medium text-sm",
+                            children: "Name"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2(Input, {
+                            id: "contact-name",
+                            name: "name",
+                            type: "text",
+                            placeholder: "Your name",
+                            disabled: contactPending || contactResult?.success,
+                            required: true
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "space-y-2",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("label", {
+                            htmlFor: "contact-email",
+                            className: "font-medium text-sm",
+                            children: "Email"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2(Input, {
+                            id: "contact-email",
+                            name: "email",
+                            type: "email",
+                            keyboard: { kind: "email" },
+                            placeholder: "you@company.com",
+                            disabled: contactPending || contactResult?.success,
+                            required: true
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("div", {
+                        className: "space-y-2",
+                        children: [
+                          /* @__PURE__ */ jsxDEV2("label", {
+                            htmlFor: "contact-message",
+                            className: "font-medium text-sm",
+                            children: "Message"
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2(Textarea, {
+                            id: "contact-message",
+                            name: "message",
+                            placeholder: "What are you trying to stabilize, and where is the current system breaking down?",
+                            disabled: contactPending || contactResult?.success,
+                            rows: 7,
+                            required: true
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      contactResult && !contactPending ? /* @__PURE__ */ jsxDEV2("div", {
+                        className: `flex items-center gap-2 rounded-2xl border px-4 py-3 text-sm ${contactResult.success ? "border-green-600/20 bg-green-600/10 text-green-700" : "border-red-600/20 bg-red-600/10 text-red-700"}`,
+                        children: [
+                          contactResult.success ? /* @__PURE__ */ jsxDEV2(CheckCircle, {
+                            size: 16
+                          }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(AlertCircle, {
+                            size: 16
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2("span", {
+                            children: contactResult.text
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this) : null,
+                      /* @__PURE__ */ jsxDEV2(Button, {
+                        type: "submit",
                         disabled: contactPending || contactResult?.success,
-                        required: true
+                        className: "w-full",
+                        children: contactPending ? "Sending..." : "Send message"
                       }, undefined, false, undefined, this)
                     ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(VStack, {
-                    className: "gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxDEV2(Small, {
-                        className: "text-sm font-medium",
-                        children: "Message"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Textarea, {
-                        id: "contact-message",
-                        name: "message",
-                        placeholder: "Tell us what's on your mind...",
-                        disabled: contactPending || contactResult?.success,
-                        rows: 6,
-                        required: true
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  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(CheckCircle, {
-                        size: 16
-                      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2(AlertCircle, {
-                        size: 16
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2(Small, {
-                        children: contactResult.text
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2(Button2, {
-                    type: "submit",
-                    disabled: contactPending || contactResult?.success,
-                    className: "w-full",
-                    children: contactPending ? "Sending..." : "Send message"
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            }, undefined, false, undefined, this)
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
           ]
         }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 export {
   ContactClient