@burdenoff/website-sdk 2026.719.4 → 2026.719.6

package/dist/content/index.js

@@ -800,6 +800,18 @@ function BlogPostPage(props) {
   ] });
 }
 var CASE_STUDY_TAG = "case-study";
+var ANIMATION_STYLES = `
+@keyframes csFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes csFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
+.cs-fade-up { animation: csFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.cs-float { animation: csFloat 7s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .cs-fade-up, .cs-float { animation: none !important; }
+}
+`;
+function AnimationStyles() {
+  return /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: ANIMATION_STYLES } });
+}
 var CASE_STUDIES_QUERY = `
   query CaseStudies($productId: String!, $limit: Int, $offset: Int) {
     publicContentPages(productId: $productId, limit: $limit, offset: $offset) {
@@ -846,91 +858,355 @@ var CASE_STUDY_QUERY = `
     }
   }
 `;
-function CaseStudyCard({
-  post,
-  basePath = "/case-studies"
-}) {
-  const date = post.publishedAt || post.lastUpdated;
-  const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
+function formatDate(value) {
+  if (!value) return "";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleDateString("en-US", {
     year: "numeric",
     month: "long",
     day: "numeric"
-  }) : "";
+  });
+}
+function Thumbnail({
+  src,
+  alt,
+  className = ""
+}) {
   const [imgError, setImgError] = React.useState(false);
+  if (src && !imgError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt,
+        className,
+        loading: "lazy",
+        onError: () => setImgError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `flex items-center justify-center bg-gradient-to-br from-muted/60 to-muted ${className}`,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "w-12 h-12 text-muted-foreground/25",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 1.5,
+              d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function MetaRow({
+  post,
+  className = ""
+}) {
+  const formattedDate = formatDate(post.publishedAt || post.lastUpdated);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground ${className}`,
+      children: [
+        post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: post.author }),
+        post.author && formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+        formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedDate }),
+        post.readingTime ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            post.readingTime,
+            " min read"
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+function FeaturedCard({
+  post,
+  basePath
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "a",
     {
       href: `${basePath}/${post.slug}`,
-      className: "group block bg-card border rounded-xl overflow-hidden hover:shadow-lg hover:border-primary/30 transition-all duration-300",
+      className: "group relative grid md:grid-cols-2 gap-0 overflow-hidden rounded-2xl border bg-card shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:border-primary/40",
       children: [
-        post.thumbnail && !imgError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-[16/10] md:aspect-auto md:h-full overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Thumbnail,
+            {
+              src: post.thumbnail,
+              alt: post.title,
+              className: "w-full h-full min-h-[220px] object-cover transition-transform duration-500 group-hover:scale-[1.04]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute top-4 left-4 inline-flex items-center gap-1 rounded-full bg-primary px-2.5 py-1 text-xs font-semibold text-primary-foreground shadow-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3 w-3",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.368 2.447a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.367-2.447a1 1 0 00-1.176 0l-3.367 2.447c-.784.57-1.838-.197-1.539-1.118l1.286-3.957a1 1 0 00-.363-1.118L2.98 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z" })
+              }
+            ),
+            "Featured"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center p-6 sm:p-8", children: [
+          post.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 inline-block w-fit rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary", children: post.category }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl sm:text-2xl font-bold text-foreground transition-colors group-hover:text-primary line-clamp-3", children: post.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm sm:text-base text-muted-foreground line-clamp-3", children: post.excerpt || post.seoDescription || "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(MetaRow, { post, className: "mt-5" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-5 inline-flex items-center gap-1 text-sm font-semibold text-primary", children: [
+            "Read the story",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-4 w-4 transition-transform duration-300 group-hover:translate-x-1",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M7.293 4.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L11.586 10 7.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CaseStudyCard({
+  post,
+  basePath = "/case-studies"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: `${basePath}/${post.slug}`,
+      className: "group flex flex-col overflow-hidden rounded-xl border bg-card transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:border-primary/40",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Thumbnail,
           {
             src: post.thumbnail,
             alt: post.title,
-            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",
-            loading: "lazy",
-            onError: () => setImgError(true)
+            className: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col p-5 sm:p-6", children: [
+          post.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 inline-block w-fit rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary", children: post.category }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-lg font-semibold text-foreground transition-colors group-hover:text-primary line-clamp-2", children: post.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-muted-foreground line-clamp-3", children: post.excerpt || post.seoDescription || "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(MetaRow, { post, className: "mt-auto" })
+        ] })
+      ]
+    }
+  );
+}
+function EmptyState({
+  productLabel,
+  title,
+  subtitle,
+  contactHref,
+  contactLabel,
+  exploreHref,
+  exploreLabel
+}) {
+  const highlights = [
+    {
+      title: "Real outcomes, real teams",
+      body: `We're partnering with our earliest adopters right now. As they ship results with ${productLabel}, their stories will land here \u2014 measured and unembellished.`,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          d: "M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+        }
+      )
+    },
+    {
+      title: "See it on your use case",
+      body: `Want to know how ${productLabel} would work for your team? We'll walk you through exactly what to expect \u2014 no pitch, just specifics.`,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+        }
+      )
+    },
+    {
+      title: "Be the first story",
+      body: `Building something with ${productLabel} worth talking about? Tell us \u2014 the best early stories become the case studies featured on this page.`,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          d: "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cs-fade-up mx-auto max-w-4xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-3xl border bg-card px-6 py-14 text-center sm:px-12 sm:py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute -top-24 -right-16 h-64 w-64 rounded-full bg-primary/10 blur-3xl",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute -bottom-24 -left-16 h-64 w-64 rounded-full bg-primary/5 blur-3xl",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cs-float mx-auto flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10 text-primary ring-1 ring-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
-            className: "w-12 h-12 text-muted-foreground/20",
+            className: "h-10 w-10",
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
+            "aria-hidden": "true",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               "path",
               {
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 strokeWidth: 1.5,
-                d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
               }
             )
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 sm:p-6", children: [
-          post.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block text-xs font-medium text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-3", children: post.category }),
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2 group-hover:text-primary transition-colors line-clamp-2", children: post.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4 line-clamp-3", children: post.excerpt || post.seoDescription || "" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
-            post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: post.author }),
-            post.author && formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
-            formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedDate }),
-            post.readingTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                post.readingTime,
-                " min read"
-              ] })
-            ] })
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mt-8 text-2xl font-bold tracking-tight text-foreground sm:text-3xl", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg", children: subtitle }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: contactHref,
+              className: "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-sm transition-all hover:opacity-90 hover:shadow-md sm:w-auto",
+              children: [
+                contactLabel,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "h-4 w-4",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M7.293 4.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414-1.414L11.586 10 7.293 5.707a1 1 0 010-1.414z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: exploreHref,
+              className: "inline-flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-background px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-muted sm:w-auto",
+              children: exploreLabel
+            }
+          )
         ] })
-      ]
-    }
-  );
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 grid gap-4 sm:grid-cols-3", children: highlights.map((h) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-2xl border bg-card/60 p-5 text-left transition-colors hover:border-primary/30",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: h.icon
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-sm font-semibold text-foreground", children: h.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: h.body })
+        ]
+      },
+      h.title
+    )) })
+  ] });
 }
 function CaseStudiesListPage(props) {
   const {
     productName,
+    eyebrow = "Customer Stories",
     heroTitle = "Case Studies",
-    heroSubtitle = "Real-world stories of teams building with our platform",
+    heroSubtitle = "Real-world stories of teams building with our platform.",
     caseStudyBasePath = "/case-studies",
     className = "",
     seoTitle,
     seoDescription,
-    seoKeywords
+    seoKeywords,
+    contactHref = "/contact",
+    contactLabel = "Get in touch",
+    exploreHref = "/features",
+    exploreLabel = "Explore the product",
+    emptyTitle,
+    emptySubtitle
   } = props;
   const client = useWebSDK();
   const config = useWebSDKConfig();
   const { product } = useProduct();
   const resolvedProductId = product?.id || config.productId;
+  const productLabel = product?.name || productName || "our platform";
   const [posts, setPosts] = React.useState([]);
   const [total, setTotal] = React.useState(0);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [offset, setOffset] = React.useState(0);
+  const [activeCategory, setActiveCategory] = React.useState("All");
   const limit = 12;
   const fetchPosts = React.useCallback(async () => {
     if (!resolvedProductId) return;
@@ -943,6 +1219,7 @@ function CaseStudiesListPage(props) {
       });
       if (result.errors?.length) {
         setError(result.errors[0]?.message ?? "Failed to load case studies");
+        setPosts([]);
         return;
       }
       const caseStudies = (result.data?.publicContentPages?.items || []).filter(
@@ -952,7 +1229,8 @@ function CaseStudiesListPage(props) {
       setTotal(result.data?.publicContentPages?.total || 0);
       setError(null);
     } catch {
-      setError("Failed to load case studies");
+      setError("load-failed");
+      setPosts([]);
     } finally {
       setLoading(false);
     }
@@ -960,9 +1238,25 @@ function CaseStudiesListPage(props) {
   React.useEffect(() => {
     fetchPosts();
   }, [fetchPosts]);
-  const featuredPosts = posts.filter((p) => p.featured);
-  const regularPosts = posts.filter((p) => !p.featured);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${className}`, children: [
+  const categories = React.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    posts.forEach((p) => {
+      if (p.category) set.add(p.category);
+    });
+    return ["All", ...Array.from(set)];
+  }, [posts]);
+  const visiblePosts = React.useMemo(() => {
+    if (activeCategory === "All") return posts;
+    return posts.filter((p) => p.category === activeCategory);
+  }, [posts, activeCategory]);
+  const featuredPosts = visiblePosts.filter((p) => p.featured);
+  const regularPosts = visiblePosts.filter((p) => !p.featured);
+  const hasContent = !loading && !error && posts.length > 0;
+  const showEmpty = !loading && (error !== null || posts.length === 0);
+  const resolvedEmptyTitle = emptyTitle ?? "Case studies are on the way";
+  const resolvedEmptySubtitle = emptySubtitle ?? `${productLabel} is early in its journey, and we'd rather show you real, measurable results than filler. We're working closely with our first teams now \u2014 their stories will be published here soon. In the meantime, we'd love to show you what's possible.`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${className}`, "data-cs": "case-studies-v2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AnimationStyles, {}),
     seoTitle && /* @__PURE__ */ jsxRuntime.jsx(
       PageHead,
       {
@@ -972,35 +1266,69 @@ function CaseStudiesListPage(props) {
         keywords: seoKeywords
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-16 sm:py-20 md:py-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-3xl mx-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground", children: heroTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: heroSubtitle })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "pb-16 sm:pb-20", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "relative overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-x-0 -top-32 mx-auto h-72 max-w-3xl rounded-full bg-primary/10 blur-3xl",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 md:py-24 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-primary", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" }),
+          eyebrow
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-5 text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl", children: heroTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: heroSubtitle })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("section", { className: "pb-20 sm:pb-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3", children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "bg-card border rounded-xl overflow-hidden animate-pulse",
+        className: "overflow-hidden rounded-xl border bg-card animate-pulse",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] bg-muted" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-1/4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 bg-muted rounded w-3/4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-1/2" })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-1/4 rounded bg-muted" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-3/4 rounded bg-muted" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 rounded bg-muted" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-1/2 rounded bg-muted" })
           ] })
         ]
       },
       i
-    )) }) : error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: error }) }) : posts.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No case studies yet. Check back soon!" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      featuredPosts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2 gap-6 sm:gap-8 mb-8", children: featuredPosts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
-        CaseStudyCard,
+    )) }) : showEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        productLabel,
+        title: resolvedEmptyTitle,
+        subtitle: resolvedEmptySubtitle,
+        contactHref,
+        contactLabel,
+        exploreHref,
+        exploreLabel
+      }
+    ) : hasContent ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      categories.length > 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 flex flex-wrap justify-center gap-2", children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveCategory(cat),
+          className: `rounded-full border px-4 py-1.5 text-sm font-medium transition-colors ${activeCategory === cat ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground hover:border-primary/40 hover:text-foreground"}`,
+          children: cat
+        },
+        cat
+      )) }),
+      featuredPosts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 grid gap-6 sm:gap-8 lg:grid-cols-2", children: featuredPosts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
+        FeaturedCard,
         {
           post,
           basePath: caseStudyBasePath
         },
         post.id
       )) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8", children: regularPosts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
+      regularPosts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3", children: regularPosts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
         CaseStudyCard,
         {
           post,
@@ -1008,13 +1336,13 @@ function CaseStudiesListPage(props) {
         },
         post.id
       )) }),
-      total > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-4 mt-12", children: [
+      activeCategory === "All" && total > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 flex justify-center gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => setOffset(Math.max(0, offset - limit)),
             disabled: offset === 0,
-            className: "px-5 py-2.5 text-sm font-medium border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+            className: "rounded-lg border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-muted disabled:opacity-40",
             children: "Previous"
           }
         ),
@@ -1023,12 +1351,29 @@ function CaseStudiesListPage(props) {
           {
             onClick: () => setOffset(offset + limit),
             disabled: offset + limit >= total,
-            className: "px-5 py-2.5 text-sm font-medium border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+            className: "rounded-lg border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-muted disabled:opacity-40",
             children: "Next"
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-16 overflow-hidden rounded-2xl border bg-gradient-to-br from-primary/10 via-card to-card p-8 text-center sm:p-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-foreground sm:text-2xl", children: "Want results like these?" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mx-auto mt-2 max-w-xl text-sm text-muted-foreground sm:text-base", children: [
+          "Tell us about your goals and we\u2019ll show you exactly how",
+          " ",
+          productLabel,
+          " can help."
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: contactHref,
+            className: "mt-6 inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-sm transition-all hover:opacity-90 hover:shadow-md",
+            children: contactLabel
+          }
+        )
       ] })
-    ] }) }) })
+    ] }) : null }) })
   ] });
 }
 function CaseStudyPage(props) {
@@ -1036,12 +1381,15 @@ function CaseStudyPage(props) {
     productName,
     caseStudiesListUrl = "/case-studies",
     backLabel = "Back to Case Studies",
+    contactHref = "/contact",
+    contactLabel = "Get in touch",
     className = ""
   } = props;
   const client = useWebSDK();
   const config = useWebSDKConfig();
   const { product } = useProduct();
   const resolvedProductId = product?.id || config.productId;
+  const productLabel = product?.name || productName || "our team";
   const [post, setPost] = React.useState(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
@@ -1070,36 +1418,64 @@ function CaseStudyPage(props) {
     fetchPost();
   }, [client, slug, resolvedProductId]);
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-muted rounded w-2/3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-1/3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] bg-muted rounded-xl" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded" }, i)) })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-4xl px-4 py-24 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-2/3 rounded bg-muted" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-1/3 rounded bg-muted" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] rounded-xl bg-muted" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 rounded bg-muted" }, i)) })
     ] }) }) });
   }
   if (error || !post) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold mb-4", children: "Case study not found" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-6", children: error || "This case study doesn't exist or has been removed." }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl px-4 py-24 text-center sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
         {
-          href: caseStudiesListUrl,
-          className: "text-primary hover:underline font-medium",
-          children: [
-            "\u2190 ",
-            backLabel
-          ]
+          className: "h-8 w-8",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 1.5,
+              d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+            }
+          )
         }
-      )
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-6 text-2xl font-bold text-foreground", children: "Case study not found" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mx-auto mt-3 max-w-md text-muted-foreground", children: [
+        "This story isn\u2019t available yet \u2014 but there\u2019s plenty more to explore, and we\u2019re always happy to talk through what ",
+        productLabel,
+        " can do."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: caseStudiesListUrl,
+            className: "inline-flex items-center justify-center rounded-lg border px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted",
+            children: [
+              "\u2190 ",
+              backLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: contactHref,
+            className: "inline-flex items-center justify-center rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-all hover:opacity-90",
+            children: contactLabel
+          }
+        )
+      ] })
     ] }) });
   }
-  const date = post.publishedAt || post.lastUpdated;
-  const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric"
-  }) : "";
+  const formattedDate = formatDate(post.publishedAt || post.lastUpdated);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PageHead,
@@ -1110,41 +1486,57 @@ function CaseStudyPage(props) {
         keywords: post.seoKeywords || ""
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "mx-auto max-w-4xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
           href: caseStudiesListUrl,
-          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-8 transition-colors",
+          className: "mb-8 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground",
           children: [
             "\u2190 ",
             backLabel
           ]
         }
       ),
-      post.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block text-xs font-medium text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-4", children: post.category }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4", children: post.title }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm text-muted-foreground mb-8", children: [
+      post.category && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-4 inline-block rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary", children: post.category }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl md:text-5xl", children: post.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 flex flex-wrap items-center gap-3 text-sm text-muted-foreground", children: [
         post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: post.author }),
         post.author && formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
         formattedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedDate }),
-        post.readingTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        post.readingTime ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             post.readingTime,
             " min read"
           ] })
-        ] })
+        ] }) : null
       ] }),
-      post.thumbnail && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/9] rounded-xl overflow-hidden mb-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+      post.thumbnail && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 aspect-[16/9] overflow-hidden rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
           src: post.thumbnail,
           alt: post.title,
-          className: "w-full h-full object-cover"
+          className: "h-full w-full object-cover"
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-gray dark:prose-invert max-w-none", children: /* @__PURE__ */ jsxRuntime.jsx(ContentRenderer, { content: post.content, format: post.contentFormat }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-gray max-w-none dark:prose-invert", children: /* @__PURE__ */ jsxRuntime.jsx(ContentRenderer, { content: post.content, format: post.contentFormat }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 rounded-2xl border bg-gradient-to-br from-primary/10 via-card to-card p-8 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-bold text-foreground", children: [
+          "Curious what ",
+          productLabel,
+          " could do for you?"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-2 max-w-lg text-sm text-muted-foreground", children: "We\u2019re happy to walk you through it \u2014 no pressure, just a conversation about your goals." }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: contactHref,
+            className: "mt-6 inline-flex items-center justify-center rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-sm transition-all hover:opacity-90 hover:shadow-md",
+            children: contactLabel
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -1239,7 +1631,7 @@ var CHANGELOG_ENTRY_QUERY = `
     }
   }
 `;
-function formatDate(value) {
+function formatDate2(value) {
   if (!value) return "";
   return new Date(value).toLocaleDateString("en-US", {
     year: "numeric",
@@ -1361,7 +1753,7 @@ function CmsTimeline(props) {
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 sm:p-8", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mb-2", children: [
-            entry.publishedAt && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: entry.publishedAt, children: formatDate(entry.publishedAt || entry.lastUpdated) }),
+            entry.publishedAt && /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: entry.publishedAt, children: formatDate2(entry.publishedAt || entry.lastUpdated) }),
             entry.author && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               " \xB7 ",
               entry.author
@@ -1505,7 +1897,7 @@ function EntriesTimeline(props) {
                   {
                     className: "text-xs text-muted-foreground",
                     dateTime: entry.date,
-                    children: formatDate(entry.date)
+                    children: formatDate2(entry.date)
                   }
                 )
               ] }),