@caqophony/ui 0.3.1 → 0.4.0

package/dist/marketing.js

@@ -0,0 +1,1422 @@
+'use client';
+import {
+  Button,
+  Container,
+  NavbarMenu
+} from "./chunk-PKP3ZIRB.js";
+import {
+  ScrollHintXMark
+} from "./chunk-BAW3RIMF.js";
+import {
+  cn
+} from "./chunk-DP5WQAPO.js";
+
+// src/marketing/marketing-header.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ON_DARK_GROUND = "text-background dark:text-foreground";
+var DARK_MENU_BUTTON = cn(
+  ON_DARK_GROUND,
+  "hover:bg-background/10 hover:text-background dark:hover:bg-foreground/10 dark:hover:text-foreground"
+);
+var FOLDED_AWAY = "md:invisible md:absolute md:w-0 md:overflow-hidden";
+var px = (value) => parseFloat(value) || 0;
+function useFold(refs, actionsHost, hasLinks) {
+  const [folded, setFolded] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const { bar, brand, brandText, nav, links, actionsRow, actionsHome } = refs;
+    if (!bar.current || !brand.current || !brandText.current) return;
+    let actionsWidth = 0;
+    const measure = () => {
+      const row = bar.current;
+      const mark = brand.current;
+      const text = brandText.current;
+      if (!row || !mark || !text) return;
+      const shown = nav.current ?? actionsRow.current;
+      if (!shown || getComputedStyle(shown).display === "none") return;
+      const home = actionsHome.current;
+      if (home && (!actionsHost || home.contains(actionsHost)))
+        actionsWidth = home.getBoundingClientRect().width;
+      const barStyle = getComputedStyle(row);
+      const room = row.clientWidth - px(barStyle.paddingLeft) - px(barStyle.paddingRight);
+      const brandWidth = mark.getBoundingClientRect().width - text.getBoundingClientRect().width + text.scrollWidth;
+      const linksWidth = nav.current ? px(getComputedStyle(nav.current).marginLeft) + (links.current?.getBoundingClientRect().width ?? 0) : 0;
+      const actionsSpace = actionsRow.current ? nav.current ? px(getComputedStyle(actionsRow.current).marginLeft) : px(getComputedStyle(actionsRow.current).paddingLeft) : 0;
+      setFolded(
+        Math.ceil(brandWidth + linksWidth + actionsSpace + actionsWidth) > room
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    for (const el of [
+      bar.current,
+      brandText.current,
+      links.current,
+      actionsHome.current
+    ])
+      if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [refs, actionsHost, hasLinks]);
+  return folded;
+}
+function MarketingHeader({
+  brandName,
+  brandInitials,
+  navItems = [],
+  actions,
+  className,
+  variant = "light"
+}) {
+  const isDark = variant === "dark";
+  const hasLinks = navItems.length > 0;
+  const bar = React.useRef(null);
+  const brand = React.useRef(null);
+  const brandText = React.useRef(null);
+  const nav = React.useRef(null);
+  const links = React.useRef(null);
+  const actionsRow = React.useRef(null);
+  const actionsHome = React.useRef(null);
+  const refs = React.useMemo(
+    () => ({ bar, brand, brandText, nav, links, actionsRow, actionsHome }),
+    []
+  );
+  const [actionsHost, setActionsHost] = React.useState(
+    null
+  );
+  const hasActions = Boolean(actions);
+  React.useLayoutEffect(() => {
+    if (!hasActions) return;
+    const host = document.createElement("div");
+    host.className = "contents";
+    actionsHome.current?.appendChild(host);
+    setActionsHost(host);
+    return () => {
+      host.remove();
+      setActionsHost(null);
+    };
+  }, [hasActions]);
+  const drawerActions = React.useCallback(
+    (slot) => {
+      if (actionsHost) (slot ?? actionsHome.current)?.appendChild(actionsHost);
+    },
+    [actionsHost]
+  );
+  const folded = useFold(refs, actionsHost, hasLinks);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref: bar,
+      "data-testid": "marketing-header",
+      "data-folded": folded ? "" : void 0,
+      className: cn(
+        "sticky top-0 z-50 flex h-16 items-center px-6 lg:px-12",
+        isDark ? "justify-between border-b border-primary-foreground/[0.06] bg-foreground/85 backdrop-blur-md dark:bg-background/85" : "border-b border-border bg-card dark:border-border dark:bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            ref: brand,
+            href: "/",
+            className: cn(
+              "flex min-w-0 items-center gap-2.5 text-base font-bold no-underline",
+              isDark ? ON_DARK_GROUND : "text-foreground dark:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "bg-primary-solid flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-extrabold text-primary-foreground", children: brandInitials }),
+              /* @__PURE__ */ jsx("span", { ref: brandText, className: "truncate", children: brandName })
+            ]
+          }
+        ),
+        hasLinks && /* @__PURE__ */ jsx(
+          "nav",
+          {
+            ref: nav,
+            className: cn(
+              "hidden min-w-0 flex-1 overflow-x-clip md:flex",
+              isDark ? "ml-6" : "ml-6 lg:ml-12",
+              folded && FOLDED_AWAY
+            ),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: links,
+                className: cn(
+                  "flex w-max items-center gap-4 lg:gap-8",
+                  isDark && "mx-auto"
+                ),
+                children: navItems.map((item) => /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: item.href,
+                    className: cn(
+                      "whitespace-nowrap text-sm font-medium no-underline transition-colors",
+                      isDark ? "flex min-h-[44px] items-center text-background/70 hover:text-background dark:text-foreground/70 dark:hover:text-foreground" : item.active ? "text-primary-text font-semibold" : "text-muted-foreground hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground"
+                    ),
+                    children: item.label
+                  },
+                  item.label
+                ))
+              }
+            )
+          }
+        ),
+        actions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: actionsRow,
+            className: cn(
+              "hidden shrink-0 md:flex",
+              hasLinks ? "ml-6" : "ml-auto pl-6",
+              folded && FOLDED_AWAY
+            ),
+            children: /* @__PURE__ */ jsx("div", { ref: actionsHome, className: "flex w-max items-center gap-3", children: actionsHost ? createPortal(actions, actionsHost) : actions })
+          }
+        ),
+        (hasLinks || actions) && /* @__PURE__ */ jsx(
+          NavbarMenu,
+          {
+            folded,
+            triggerClassName: isDark ? DARK_MENU_BUTTON : void 0,
+            links: hasLinks ? navItems.map((item) => /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: item.href,
+                className: cn(
+                  "text-sm font-medium no-underline",
+                  item.active ? "text-primary-text" : "text-foreground"
+                ),
+                children: item.label
+              },
+              item.label
+            )) : void 0,
+            actions: actions ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: drawerActions,
+                className: "flex flex-col gap-2 [&>*>*]:w-full"
+              }
+            ) : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/marketing/marketing-hero.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MarketingHero({
+  headline,
+  subtitle,
+  actions,
+  visual,
+  layout = "centered",
+  className
+}) {
+  if (layout === "split") {
+    return /* @__PURE__ */ jsx2(
+      "section",
+      {
+        "data-testid": "marketing-hero",
+        className: cn("bg-primary-solid px-6 py-20 lg:px-12", className),
+        children: /* @__PURE__ */ jsxs2("div", { className: "mx-auto grid max-w-[1200px] grid-cols-1 items-center gap-16 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-5", children: [
+            /* @__PURE__ */ jsx2("h1", { className: "text-4xl font-black leading-tight text-primary-foreground md:text-5xl", children: headline }),
+            /* @__PURE__ */ jsx2("p", { className: "text-lg font-normal leading-relaxed text-primary-foreground", children: subtitle }),
+            actions && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-4", children: actions })
+          ] }),
+          visual && /* @__PURE__ */ jsx2("div", { className: "flex items-end justify-end", children: visual })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      "data-testid": "marketing-hero",
+      className: cn(
+        "bg-primary-solid px-6 pb-20 pt-24 text-center lg:px-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("h1", { className: "mx-auto mb-6 max-w-[800px] text-4xl font-black leading-tight text-primary-foreground md:text-6xl", children: headline }),
+        /* @__PURE__ */ jsx2("p", { className: "mx-auto mb-10 max-w-[640px] text-xl font-normal leading-relaxed text-primary-foreground", children: subtitle }),
+        actions && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap justify-center gap-4", children: actions })
+      ]
+    }
+  );
+}
+
+// src/marketing/feature-card.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeatureCard({
+  icon,
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-testid": "feature-card",
+      className: cn(
+        "rounded-xl border border-border bg-card p-6 shadow-sm dark:border-border dark:bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/10", children: /* @__PURE__ */ jsx3("div", { className: "text-primary-text dark:text-primary-text h-6 w-6", children: icon }) }),
+        /* @__PURE__ */ jsx3("h3", { className: "mb-2 text-base font-bold text-foreground dark:text-foreground", children: title }),
+        /* @__PURE__ */ jsx3("p", { className: "text-sm leading-relaxed text-muted-foreground dark:text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+
+// src/marketing/pricing-tier.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PricingTier({
+  name,
+  price,
+  period,
+  features,
+  highlighted = false,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-testid": "pricing-tier",
+      className: cn(
+        "relative rounded-xl border bg-card p-8 text-center dark:bg-card",
+        highlighted ? "border-primary shadow-lg ring-2 ring-primary/10 dark:border-primary dark:ring-primary/10" : "border-border dark:border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "mb-2 text-lg font-bold text-foreground dark:text-foreground", children: name }),
+        /* @__PURE__ */ jsx4("div", { className: "text-primary-text dark:text-primary-text text-4xl font-black", children: price }),
+        /* @__PURE__ */ jsx4("div", { className: "mb-6 text-sm text-muted-foreground dark:text-muted-foreground", children: period }),
+        /* @__PURE__ */ jsx4("ul", { className: "mb-6 space-y-1.5 text-left", children: features.map((feature) => /* @__PURE__ */ jsxs4(
+          "li",
+          {
+            className: "relative pl-6 text-sm text-foreground dark:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "bg-intent-success dark:bg-intent-success absolute left-0 top-[7px] h-2 w-2 rounded-full" }),
+              feature
+            ]
+          },
+          feature
+        )) }),
+        action && /* @__PURE__ */ jsx4("div", { className: "w-full", children: action })
+      ]
+    }
+  );
+}
+
+// src/marketing/faq-item.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function MarketingFAQItem({
+  question,
+  answer,
+  dark = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-testid": "marketing-faq-item",
+      className: cn(
+        "border-b py-6",
+        dark ? "border-muted-foreground/20 dark:border-muted-foreground/20" : "border-border dark:border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx5(
+          "h3",
+          {
+            className: cn(
+              "mb-3 text-base font-semibold",
+              dark ? "text-primary-foreground dark:text-foreground" : "text-foreground dark:text-foreground"
+            ),
+            children: question
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "p",
+          {
+            className: cn(
+              "text-sm leading-[1.7]",
+              dark ? "text-primary-foreground/70 dark:text-muted-foreground" : "text-muted-foreground dark:text-muted-foreground"
+            ),
+            children: answer
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/marketing/cta-banner.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function CTABanner({
+  headline,
+  description,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      "data-testid": "cta-banner",
+      className: cn(
+        "bg-primary-solid px-6 py-20 text-center lg:px-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("h2", { className: "mb-4 text-4xl font-extrabold text-primary-foreground", children: headline }),
+        /* @__PURE__ */ jsx6("p", { className: "mb-8 text-lg text-primary-foreground", children: description }),
+        actions && /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap justify-center gap-4", children: actions })
+      ]
+    }
+  );
+}
+
+// src/marketing/marketing-cta.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TREATMENT = {
+  light: {
+    // the edge is `primary-text`, which reads on the page in either scheme: a
+    // dark primary's fill alone sinks into a dark page
+    primary: "border-primary-text bg-primary-solid text-primary-foreground hover:opacity-hover",
+    secondary: "border-primary-text text-primary-text hover:bg-muted"
+  },
+  brand: {
+    primary: "bg-brand-fill text-brand-fill-foreground hover:opacity-hover",
+    secondary: "border-brand-fill text-brand-fill hover:bg-brand-fill hover:text-brand-fill-foreground"
+  },
+  dark: {
+    primary: "bg-night-accent text-night-accent-foreground hover:opacity-hover",
+    secondary: "border-night-muted-foreground text-night-foreground hover:bg-night-muted"
+  },
+  image: {
+    primary: "bg-night-accent text-night-accent-foreground shadow-lg hover:opacity-hover",
+    secondary: "border-night-muted-foreground bg-night-0 text-night-foreground shadow-lg hover:bg-night-muted"
+  }
+};
+var FOCUS = {
+  light: "focus-visible:outline-primary-text",
+  brand: "focus-visible:outline-brand-fill",
+  dark: "focus-visible:outline-night-foreground",
+  image: "focus-visible:outline-night-foreground"
+};
+function MarketingCta({
+  href,
+  ground,
+  emphasis,
+  className,
+  children,
+  ...anchor
+}) {
+  return /* @__PURE__ */ jsx7(
+    "a",
+    {
+      ...anchor,
+      href,
+      "data-cta-ground": ground,
+      "data-cta-emphasis": emphasis,
+      "data-border-current": emphasis === "secondary" ? "" : void 0,
+      className: cn(
+        "inline-flex min-h-12 items-center justify-center rounded-lg border-2 border-transparent px-6 py-2.5 text-center text-base font-semibold",
+        "motion-safe:duration-fast motion-safe:transition-colors",
+        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+        TREATMENT[ground][emphasis],
+        FOCUS[ground],
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/marketing/how-it-works-step.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function HowItWorksStep({
+  stepNumber,
+  title,
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-testid": "how-it-works-step",
+      className: cn("text-center", className),
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "bg-primary-solid mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full text-xl font-bold text-primary-foreground", children: stepNumber }),
+        /* @__PURE__ */ jsx8("h3", { className: "mb-2 text-base font-bold text-foreground dark:text-foreground", children: title }),
+        /* @__PURE__ */ jsx8("p", { className: "text-sm leading-relaxed text-muted-foreground dark:text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+
+// src/marketing/use-case-card.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function UseCaseCard({
+  persona,
+  scenario,
+  outcome,
+  className
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-testid": "use-case-card",
+      className: cn(
+        "rounded-xl border border-border bg-card p-8 dark:border-border dark:bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx9("h3", { className: "mb-3 text-lg font-bold text-foreground dark:text-foreground", children: persona }),
+        /* @__PURE__ */ jsx9("p", { className: "mb-4 text-sm leading-relaxed text-muted-foreground dark:text-muted-foreground", children: scenario }),
+        /* @__PURE__ */ jsx9("p", { className: "text-intent-success-foreground text-sm font-medium leading-normal", children: outcome })
+      ]
+    }
+  );
+}
+
+// src/marketing/blog-grid.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function PostCard({
+  post,
+  featured = false
+}) {
+  const Wrapper = post.href ? "a" : "div";
+  const wrapperProps = post.href ? { href: post.href } : {};
+  return /* @__PURE__ */ jsxs9(
+    Wrapper,
+    {
+      ...wrapperProps,
+      className: cn(
+        "group flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-shadow hover:shadow-md",
+        featured && "sm:flex-row"
+      ),
+      children: [
+        post.thumbnail && /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden bg-muted",
+              featured ? "aspect-video sm:w-1/2" : "aspect-video w-full"
+            ),
+            children: /* @__PURE__ */ jsx10(
+              "img",
+              {
+                src: post.thumbnail,
+                alt: post.title,
+                className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: cn("flex flex-1 flex-col gap-2 p-4", featured && "sm:p-6"),
+            children: [
+              post.category && /* @__PURE__ */ jsx10("span", { className: "bg-primary-solid w-fit rounded-full px-2.5 py-0.5 text-xs font-medium text-primary-foreground", children: post.category }),
+              /* @__PURE__ */ jsx10(
+                "h3",
+                {
+                  className: cn(
+                    "line-clamp-2 font-semibold text-foreground",
+                    featured ? "text-lg" : "text-sm"
+                  ),
+                  children: post.title
+                }
+              ),
+              post.excerpt && /* @__PURE__ */ jsx10("p", { className: "line-clamp-2 text-xs text-muted-foreground", children: post.excerpt }),
+              /* @__PURE__ */ jsxs9("div", { className: "mt-auto flex items-center gap-2 pt-2", children: [
+                post.authorAvatar && /* @__PURE__ */ jsx10(
+                  "img",
+                  {
+                    src: post.authorAvatar,
+                    alt: post.author ?? "",
+                    className: "h-6 w-6 rounded-full object-cover"
+                  }
+                ),
+                post.author && /* @__PURE__ */ jsx10("span", { className: "text-xs font-medium text-foreground", children: post.author }),
+                /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: post.date })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function PostRow({ post }) {
+  const Wrapper = post.href ? "a" : "div";
+  const wrapperProps = post.href ? { href: post.href } : {};
+  return /* @__PURE__ */ jsxs9(
+    Wrapper,
+    {
+      ...wrapperProps,
+      className: "group flex gap-4 border-b border-border py-4 last:border-b-0",
+      children: [
+        post.thumbnail && /* @__PURE__ */ jsx10("div", { className: "h-20 w-28 flex-shrink-0 overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx10(
+          "img",
+          {
+            src: post.thumbnail,
+            alt: post.title,
+            className: "h-full w-full object-cover"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 flex-col gap-1", children: [
+          post.category && /* @__PURE__ */ jsx10("span", { className: "bg-primary-solid w-fit rounded-full px-2 py-0.5 text-xs font-medium text-primary-foreground", children: post.category }),
+          /* @__PURE__ */ jsx10("h3", { className: "line-clamp-1 text-sm font-semibold text-foreground group-hover:underline", children: post.title }),
+          post.excerpt && /* @__PURE__ */ jsx10("p", { className: "line-clamp-1 text-xs text-muted-foreground", children: post.excerpt }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+            post.author && /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: post.author }),
+            /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: post.date })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BlogGrid({
+  variant = "threeColumn",
+  posts,
+  heading,
+  description,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "section",
+    {
+      className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+      ...props,
+      children: [
+        (heading || description) && /* @__PURE__ */ jsxs9("div", { className: "mx-auto mb-10 max-w-2xl text-center", children: [
+          heading && /* @__PURE__ */ jsx10("h2", { className: "text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+          description && /* @__PURE__ */ jsx10("p", { className: "mt-3 text-sm text-muted-foreground", children: description })
+        ] }),
+        variant === "threeColumn" && /* @__PURE__ */ jsx10("div", { className: "mx-auto grid max-w-5xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: posts.map((p) => /* @__PURE__ */ jsx10(PostCard, { post: p }, p.id)) }),
+        variant === "featured" && posts.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "mx-auto max-w-5xl space-y-6", children: [
+          /* @__PURE__ */ jsx10(PostCard, { post: posts[0], featured: true }),
+          posts.length > 1 && /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: posts.slice(1).map((p) => /* @__PURE__ */ jsx10(PostCard, { post: p }, p.id)) })
+        ] }),
+        variant === "list" && /* @__PURE__ */ jsx10("div", { className: "mx-auto max-w-3xl", children: posts.map((p) => /* @__PURE__ */ jsx10(PostRow, { post: p }, p.id)) })
+      ]
+    }
+  );
+}
+
+// src/marketing/comparison-table.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function ComparisonTable({
+  variant = "simple",
+  plans,
+  features,
+  heading,
+  className,
+  ...props
+}) {
+  const featuredPlan = variant === "featured" ? plans.find((p) => p.featured) : null;
+  return /* @__PURE__ */ jsxs10("div", { className: cn("w-full", className), ...props, children: [
+    heading && /* @__PURE__ */ jsx11("h2", { className: "mb-8 text-center text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex w-full overflow-x-auto", children: [
+      /* @__PURE__ */ jsxs10("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+          /* @__PURE__ */ jsx11("td", { className: "min-w-[180px] border-b border-border p-4" }),
+          plans.map((plan) => /* @__PURE__ */ jsxs10(
+            "th",
+            {
+              className: cn(
+                "min-w-[140px] border-b border-l border-border p-4 text-center",
+                featuredPlan?.id === plan.id && "bg-primary/5"
+              ),
+              children: [
+                featuredPlan?.id === plan.id && plan.badge && /* @__PURE__ */ jsx11("span", { className: "bg-primary-solid mb-2 inline-block rounded-full px-2.5 py-0.5 text-xs font-medium text-primary-foreground", children: plan.badge }),
+                /* @__PURE__ */ jsx11("div", { className: "text-sm font-semibold text-foreground", children: plan.name }),
+                plan.description && /* @__PURE__ */ jsx11("div", { className: "mt-0.5 text-xs text-muted-foreground", children: plan.description })
+              ]
+            },
+            plan.id
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx11("tbody", { children: features.map((feature, i) => /* @__PURE__ */ jsxs10(
+          "tr",
+          {
+            className: i % 2 === 1 ? "bg-muted/50" : "",
+            children: [
+              /* @__PURE__ */ jsx11("td", { className: "border-b border-border p-3 text-sm text-foreground", children: feature.label }),
+              plans.map((plan) => {
+                const val = feature.values[plan.id];
+                return /* @__PURE__ */ jsx11(
+                  "td",
+                  {
+                    className: cn(
+                      "border-b border-l border-border p-3 text-center text-sm",
+                      featuredPlan?.id === plan.id && "bg-primary/5"
+                    ),
+                    children: val === true ? /* @__PURE__ */ jsx11("span", { className: "text-intent-success-foreground", children: "\u2713" }) : val === false ? /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground", children: "\u2014" }) : /* @__PURE__ */ jsx11("span", { className: "text-foreground", children: val })
+                  },
+                  plan.id
+                );
+              })
+            ]
+          },
+          feature.key
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx11(ScrollHintXMark, {})
+    ] })
+  ] });
+}
+
+// src/marketing/logo-cloud.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function LogoCloud({
+  variant = "simple",
+  logos,
+  heading,
+  className,
+  ...props
+}) {
+  const logoElement = (logo, idx) => /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "flex items-center justify-center px-4 py-2 text-muted-foreground",
+      children: logo.icon ? logo.icon : logo.src ? /* @__PURE__ */ jsx12(
+        "img",
+        {
+          src: logo.src,
+          alt: logo.name,
+          className: "h-8 max-w-[120px] object-contain opacity-60 grayscale transition-opacity hover:opacity-100"
+        }
+      ) : /* @__PURE__ */ jsx12("span", { className: "text-sm font-semibold", children: logo.name })
+    },
+    idx
+  );
+  if (variant === "scrolling") {
+    return /* @__PURE__ */ jsxs11(
+      "section",
+      {
+        className: cn("w-full overflow-hidden px-4 py-10 sm:px-6", className),
+        ...props,
+        children: [
+          heading && /* @__PURE__ */ jsx12("p", { className: "mb-6 text-center text-sm text-muted-foreground", children: heading }),
+          /* @__PURE__ */ jsxs11("div", { className: "relative flex gap-12 overflow-hidden", children: [
+            /* @__PURE__ */ jsx12("div", { className: "animate-scroll flex shrink-0 gap-12", children: logos.map((l, i) => logoElement(l, i)) }),
+            /* @__PURE__ */ jsx12("div", { className: "animate-scroll flex shrink-0 gap-12", "aria-hidden": true, children: logos.map((l, i) => logoElement(l, i + logos.length)) })
+          ] }),
+          /* @__PURE__ */ jsx12("style", { children: `
+          @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+          .animate-scroll { animation: scroll 20s linear infinite; }
+        ` })
+        ]
+      }
+    );
+  }
+  if (variant === "branded") {
+    return /* @__PURE__ */ jsxs11(
+      "section",
+      {
+        className: cn(
+          "w-full border-y border-border px-4 py-10 sm:px-6",
+          className
+        ),
+        ...props,
+        children: [
+          heading && /* @__PURE__ */ jsx12("p", { className: "mb-6 text-center text-sm font-medium text-foreground", children: heading }),
+          /* @__PURE__ */ jsx12("div", { className: "mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-x-10 gap-y-6", children: logos.map((l, i) => logoElement(l, i)) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs11("section", { className: cn("w-full px-4 py-10 sm:px-6", className), ...props, children: [
+    heading && /* @__PURE__ */ jsx12("p", { className: "mb-6 text-center text-sm text-muted-foreground", children: heading }),
+    /* @__PURE__ */ jsx12("div", { className: "mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-x-10 gap-y-6", children: logos.map((l, i) => logoElement(l, i)) })
+  ] });
+}
+
+// src/marketing/team-section.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function MemberAvatar({
+  member,
+  size
+}) {
+  const sizeClass = size === "sm" ? "h-12 w-12" : size === "md" ? "h-16 w-16" : "h-24 w-24";
+  return member.avatar ? /* @__PURE__ */ jsx13(
+    "img",
+    {
+      src: member.avatar,
+      alt: member.name,
+      className: cn("rounded-full object-cover", sizeClass)
+    }
+  ) : /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center rounded-full bg-muted text-lg font-semibold text-muted-foreground",
+        sizeClass
+      ),
+      children: member.name.split(" ").map((n) => n[0]).join("").slice(0, 2)
+    }
+  );
+}
+function TeamSection({
+  variant = "grid",
+  members,
+  heading,
+  description,
+  columns = 3,
+  className,
+  ...props
+}) {
+  const colsClass = columns === 2 ? "sm:grid-cols-2" : columns === 4 ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-2 lg:grid-cols-3";
+  return /* @__PURE__ */ jsxs12(
+    "section",
+    {
+      className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+      ...props,
+      children: [
+        (heading || description) && /* @__PURE__ */ jsxs12("div", { className: "mx-auto mb-12 max-w-2xl text-center", children: [
+          heading && /* @__PURE__ */ jsx13("h2", { className: "text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+          description && /* @__PURE__ */ jsx13("p", { className: "mt-3 text-sm text-muted-foreground sm:text-base", children: description })
+        ] }),
+        variant === "grid" && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn("mx-auto grid max-w-5xl grid-cols-1 gap-10", colsClass),
+            children: members.map((m) => /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center text-center", children: [
+              /* @__PURE__ */ jsx13(MemberAvatar, { member: m, size: "lg" }),
+              /* @__PURE__ */ jsx13("h3", { className: "mt-4 text-sm font-semibold text-foreground", children: m.name }),
+              /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground", children: m.role }),
+              m.bio && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-3 text-xs text-muted-foreground", children: m.bio })
+            ] }, m.id))
+          }
+        ),
+        variant === "list" && /* @__PURE__ */ jsx13("div", { className: "mx-auto max-w-3xl divide-y divide-border", children: members.map((m) => /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4 py-4", children: [
+          /* @__PURE__ */ jsx13(MemberAvatar, { member: m, size: "md" }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx13("h3", { className: "text-sm font-semibold text-foreground", children: m.name }),
+            /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground", children: m.role }),
+            m.bio && /* @__PURE__ */ jsx13("p", { className: "mt-1 line-clamp-2 text-xs text-muted-foreground", children: m.bio })
+          ] }),
+          m.socialLinks && m.socialLinks.length > 0 && /* @__PURE__ */ jsx13("div", { className: "flex gap-2", children: m.socialLinks.map((s) => /* @__PURE__ */ jsx13(
+            "a",
+            {
+              href: s.href,
+              "aria-label": s.label,
+              className: "text-muted-foreground hover:text-foreground",
+              children: s.icon ?? s.label
+            },
+            s.label
+          )) })
+        ] }, m.id)) }),
+        variant === "cards" && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn("mx-auto grid max-w-5xl grid-cols-1 gap-6", colsClass),
+            children: members.map((m) => /* @__PURE__ */ jsxs12(
+              "div",
+              {
+                className: "flex flex-col items-center rounded-xl border border-border bg-card p-6 text-center shadow-sm",
+                children: [
+                  /* @__PURE__ */ jsx13(MemberAvatar, { member: m, size: "lg" }),
+                  /* @__PURE__ */ jsx13("h3", { className: "mt-4 text-sm font-semibold text-foreground", children: m.name }),
+                  /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground", children: m.role }),
+                  m.bio && /* @__PURE__ */ jsx13("p", { className: "mt-2 line-clamp-3 text-xs text-muted-foreground", children: m.bio }),
+                  m.socialLinks && m.socialLinks.length > 0 && /* @__PURE__ */ jsx13("div", { className: "mt-3 flex gap-3", children: m.socialLinks.map((s) => /* @__PURE__ */ jsx13(
+                    "a",
+                    {
+                      href: s.href,
+                      "aria-label": s.label,
+                      className: "text-muted-foreground hover:text-foreground",
+                      children: s.icon ?? s.label
+                    },
+                    s.label
+                  )) })
+                ]
+              },
+              m.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/marketing/newsletter-section.tsx
+import * as React2 from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function NewsletterSection({
+  variant = "centered",
+  heading,
+  description,
+  ctaLabel,
+  placeholder,
+  onSubscribe,
+  className,
+  ...props
+}) {
+  const [email, setEmail] = React2.useState("");
+  if (onSubscribe && !ctaLabel)
+    throw new Error(
+      "NewsletterSection: `onSubscribe` needs `ctaLabel`; with no label the form is not drawn"
+    );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (email.trim()) onSubscribe?.(email.trim());
+  };
+  const inputField = /* @__PURE__ */ jsx14(
+    "input",
+    {
+      type: "email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      placeholder,
+      "aria-label": placeholder ?? ctaLabel,
+      className: "h-10 min-w-40 flex-1 rounded-md border border-border bg-card px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+    }
+  );
+  const submitBtn = /* @__PURE__ */ jsx14(Button, { type: "submit", children: ctaLabel });
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx14("section", { className: cn("w-full px-4 py-8 sm:px-6", className), ...props, children: /* @__PURE__ */ jsxs13("div", { className: "mx-auto flex max-w-xl flex-wrap items-center gap-3", children: [
+      heading && /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium text-foreground", children: heading }),
+      ctaLabel && /* @__PURE__ */ jsxs13(
+        "form",
+        {
+          onSubmit: handleSubmit,
+          className: "flex min-w-0 flex-1 flex-wrap gap-3",
+          children: [
+            inputField,
+            submitBtn
+          ]
+        }
+      )
+    ] }) });
+  }
+  if (variant === "split") {
+    return /* @__PURE__ */ jsx14(
+      "section",
+      {
+        className: cn("w-full px-4 py-12 sm:px-6 lg:px-8", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs13("div", { className: "mx-auto flex max-w-4xl flex-col items-start gap-6 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs13("div", { className: "max-w-md", children: [
+            heading && /* @__PURE__ */ jsx14("h2", { className: "text-xl font-bold text-foreground sm:text-2xl", children: heading }),
+            description && /* @__PURE__ */ jsx14("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
+          ] }),
+          ctaLabel && /* @__PURE__ */ jsxs13(
+            "form",
+            {
+              onSubmit: handleSubmit,
+              className: "flex w-full flex-wrap gap-3 sm:w-auto",
+              children: [
+                inputField,
+                submitBtn
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    "section",
+    {
+      className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs13("div", { className: "mx-auto max-w-md text-center", children: [
+        heading && /* @__PURE__ */ jsx14("h2", { className: "text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+        description && /* @__PURE__ */ jsx14("p", { className: "mt-3 text-sm text-muted-foreground", children: description }),
+        ctaLabel && /* @__PURE__ */ jsxs13("form", { onSubmit: handleSubmit, className: "mt-6 flex flex-wrap gap-3", children: [
+          inputField,
+          submitBtn
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/marketing/contact-section.tsx
+import * as React3 from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function ContactForm({
+  submitLabel,
+  onSubmitForm
+}) {
+  const id = React3.useId();
+  const [form, setForm] = React3.useState({
+    name: "",
+    email: "",
+    message: ""
+  });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmitForm?.(form);
+  };
+  const inputClass = "h-10 w-full rounded-md border border-border bg-card px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring";
+  return /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx15(
+        "label",
+        {
+          htmlFor: `${id}-name`,
+          className: "mb-1.5 block text-sm font-medium text-foreground",
+          children: "Name"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "input",
+        {
+          id: `${id}-name`,
+          type: "text",
+          value: form.name,
+          onChange: (e) => setForm((f) => ({ ...f, name: e.target.value })),
+          className: inputClass
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx15(
+        "label",
+        {
+          htmlFor: `${id}-email`,
+          className: "mb-1.5 block text-sm font-medium text-foreground",
+          children: "Email"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "input",
+        {
+          id: `${id}-email`,
+          type: "email",
+          value: form.email,
+          onChange: (e) => setForm((f) => ({ ...f, email: e.target.value })),
+          className: inputClass
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx15(
+        "label",
+        {
+          htmlFor: `${id}-message`,
+          className: "mb-1.5 block text-sm font-medium text-foreground",
+          children: "Message"
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "textarea",
+        {
+          id: `${id}-message`,
+          value: form.message,
+          onChange: (e) => setForm((f) => ({ ...f, message: e.target.value })),
+          rows: 4,
+          className: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx15(Button, { type: "submit", children: submitLabel })
+  ] });
+}
+function ContactSection({
+  variant = "centered",
+  heading,
+  description,
+  submitLabel,
+  onSubmitForm,
+  mapSlot,
+  className,
+  ...props
+}) {
+  if (onSubmitForm && !submitLabel)
+    throw new Error(
+      "ContactSection: `onSubmitForm` needs `submitLabel`; with no label the form is not drawn"
+    );
+  const headerBlock = (heading || description) && /* @__PURE__ */ jsxs14("div", { children: [
+    heading && /* @__PURE__ */ jsx15("h2", { className: "text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+    description && /* @__PURE__ */ jsx15("p", { className: "mt-3 text-sm text-muted-foreground", children: description })
+  ] });
+  const formCard = submitLabel && /* @__PURE__ */ jsx15("div", { className: "rounded-xl border border-border bg-card p-6 shadow-sm", children: /* @__PURE__ */ jsx15(ContactForm, { submitLabel, onSubmitForm }) });
+  if (variant === "splitForm") {
+    return /* @__PURE__ */ jsx15(
+      "section",
+      {
+        className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs14("div", { className: "mx-auto grid max-w-5xl gap-12 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsx15("div", { className: "flex flex-col justify-center", children: headerBlock }),
+          formCard
+        ] })
+      }
+    );
+  }
+  if (variant === "withMap") {
+    return /* @__PURE__ */ jsx15(
+      "section",
+      {
+        className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs14("div", { className: "mx-auto max-w-5xl", children: [
+          headerBlock,
+          /* @__PURE__ */ jsxs14("div", { className: "mt-8 grid gap-8 lg:grid-cols-2", children: [
+            formCard,
+            mapSlot && /* @__PURE__ */ jsx15("div", { className: "overflow-hidden rounded-xl border border-border bg-muted", children: mapSlot })
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    "section",
+    {
+      className: cn("w-full px-4 py-16 sm:px-6 lg:px-8", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs14("div", { className: "mx-auto max-w-lg text-center", children: [
+        headerBlock,
+        /* @__PURE__ */ jsx15("div", { className: "mt-8 text-left", children: formCard })
+      ] })
+    }
+  );
+}
+
+// src/marketing/footer.tsx
+import * as React4 from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function MarketingFooter({
+  variant = "simple",
+  brandName,
+  logo,
+  linkGroups = [],
+  links = [],
+  socialLinks = [],
+  legalText,
+  newsletterHeading,
+  newsletterDescription,
+  onSubscribe,
+  className,
+  ...props
+}) {
+  const [email, setEmail] = React4.useState("");
+  const newsletterTitle = React4.useId();
+  if (onSubscribe && !newsletterHeading)
+    throw new Error(
+      "MarketingFooter: `onSubscribe` needs `newsletterHeading`; with no heading the newsletter is not drawn"
+    );
+  const logoBox = logo && /* @__PURE__ */ jsx16("span", { className: "text-primary-text block size-6 shrink-0 [&>*]:size-full", children: logo });
+  const socialRow = socialLinks.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex gap-4", children: socialLinks.map((s) => /* @__PURE__ */ jsx16(
+    "a",
+    {
+      href: s.href,
+      "aria-label": s.label,
+      className: "text-muted-foreground transition-colors hover:text-foreground",
+      children: s.icon
+    },
+    s.label
+  )) });
+  if (variant === "simple") {
+    return /* @__PURE__ */ jsx16(
+      "footer",
+      {
+        className: cn("w-full border-t border-border bg-card py-8", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs15(Container, { className: "flex flex-col items-center gap-4 sm:flex-row sm:justify-between", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+            logoBox,
+            /* @__PURE__ */ jsx16("span", { className: "text-sm font-semibold text-foreground", children: brandName })
+          ] }),
+          links.length > 0 && /* @__PURE__ */ jsx16("nav", { className: "flex flex-wrap gap-4", children: links.map((l) => /* @__PURE__ */ jsx16(
+            "a",
+            {
+              href: l.href,
+              className: "text-sm text-muted-foreground hover:text-foreground",
+              children: l.label
+            },
+            l.label
+          )) }),
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-4", children: [
+            socialRow,
+            legalText && /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: legalText })
+          ] })
+        ] })
+      }
+    );
+  }
+  if (variant === "withNewsletter") {
+    return /* @__PURE__ */ jsx16(
+      "footer",
+      {
+        className: cn("w-full border-t border-border bg-card py-12", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs15(Container, { children: [
+          /* @__PURE__ */ jsxs15("div", { className: "grid gap-8 lg:grid-cols-[1fr_320px]", children: [
+            /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-2 gap-8 sm:grid-cols-3", children: linkGroups.map((group) => /* @__PURE__ */ jsxs15("div", { children: [
+              /* @__PURE__ */ jsx16("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: group.title }),
+              /* @__PURE__ */ jsx16("ul", { className: "space-y-2", children: group.links.map((l) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsx16(
+                "a",
+                {
+                  href: l.href,
+                  className: "text-sm text-muted-foreground hover:text-foreground",
+                  children: l.label
+                }
+              ) }, l.label)) })
+            ] }, group.title)) }),
+            newsletterHeading && /* @__PURE__ */ jsxs15("div", { children: [
+              /* @__PURE__ */ jsx16(
+                "h3",
+                {
+                  id: newsletterTitle,
+                  className: "mb-2 text-sm font-semibold text-foreground",
+                  children: newsletterHeading
+                }
+              ),
+              newsletterDescription && /* @__PURE__ */ jsx16("p", { className: "mb-3 text-xs text-muted-foreground", children: newsletterDescription }),
+              /* @__PURE__ */ jsxs15(
+                "form",
+                {
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    if (email.trim()) onSubscribe?.(email.trim());
+                  },
+                  className: "flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx16(
+                      "input",
+                      {
+                        type: "email",
+                        value: email,
+                        onChange: (e) => setEmail(e.target.value),
+                        "aria-labelledby": newsletterTitle,
+                        className: "h-9 min-w-0 flex-1 rounded-md border border-border bg-card px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx16(
+                      "button",
+                      {
+                        type: "submit",
+                        className: "bg-primary-solid h-9 rounded-md px-4 text-sm font-medium text-primary-foreground hover:opacity-90",
+                        children: "Subscribe"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs15("div", { className: "mt-8 flex flex-col items-center justify-between gap-4 border-t border-border pt-6 sm:flex-row", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+              logoBox,
+              legalText && /* @__PURE__ */ jsx16("span", { className: "text-sm text-muted-foreground", children: legalText })
+            ] }),
+            socialRow
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    "footer",
+    {
+      className: cn("w-full border-t border-border bg-card py-12", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs15(Container, { children: [
+        /* @__PURE__ */ jsxs15("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: [
+          /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsxs15("div", { className: "mb-4 flex items-center gap-2", children: [
+              logoBox,
+              /* @__PURE__ */ jsx16("span", { className: "text-sm font-semibold text-foreground", children: brandName })
+            ] }),
+            socialRow
+          ] }),
+          linkGroups.map((group) => /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx16("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: group.title }),
+            /* @__PURE__ */ jsx16("ul", { className: "space-y-2", children: group.links.map((l) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsx16(
+              "a",
+              {
+                href: l.href,
+                className: "text-sm text-muted-foreground hover:text-foreground",
+                children: l.label
+              }
+            ) }, l.label)) })
+          ] }, group.title))
+        ] }),
+        legalText && /* @__PURE__ */ jsx16("div", { className: "mt-8 border-t border-border pt-6 text-center text-xs text-muted-foreground", children: legalText })
+      ] })
+    }
+  );
+}
+
+// src/marketing/testimonial-section.tsx
+import * as React5 from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function TestimonialCard({
+  testimonial,
+  className
+}) {
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-4 rounded-xl border border-border bg-card p-6 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs16("p", { className: "flex-1 text-sm italic text-foreground", children: [
+          "\u201C",
+          testimonial.quote,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+          testimonial.avatar ? /* @__PURE__ */ jsx17(
+            "img",
+            {
+              src: testimonial.avatar,
+              alt: testimonial.name,
+              className: "h-10 w-10 rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx17("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground", children: testimonial.name.charAt(0) }),
+          /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx17("p", { className: "text-sm font-semibold text-foreground", children: testimonial.name }),
+            (testimonial.role || testimonial.company) && /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: [testimonial.role, testimonial.company].filter(Boolean).join(" \xB7 ") })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function GridLayout({
+  testimonials,
+  columns = 3
+}) {
+  const gridCols = columns === 2 ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3";
+  return /* @__PURE__ */ jsx17("div", { className: cn("grid grid-cols-1 gap-6", gridCols), children: testimonials.map((t) => /* @__PURE__ */ jsx17(TestimonialCard, { testimonial: t }, t.id)) });
+}
+function CarouselLayout({
+  testimonials,
+  autoPlayInterval = 5e3
+}) {
+  const [activeIndex, setActiveIndex] = React5.useState(0);
+  React5.useEffect(() => {
+    if (autoPlayInterval <= 0 || testimonials.length <= 1) return;
+    const timer = setInterval(() => {
+      setActiveIndex((i) => (i + 1) % testimonials.length);
+    }, autoPlayInterval);
+    return () => clearInterval(timer);
+  }, [autoPlayInterval, testimonials.length]);
+  const current = testimonials[activeIndex];
+  if (!current) return null;
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center gap-6", children: [
+    /* @__PURE__ */ jsx17("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx17(TestimonialCard, { testimonial: current, className: "text-center" }) }),
+    testimonials.length > 1 && /* @__PURE__ */ jsx17("div", { className: "flex gap-2", children: testimonials.map((t, i) => /* @__PURE__ */ jsx17(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveIndex(i),
+        "aria-label": t.name,
+        className: cn(
+          "h-2 rounded-full transition-all",
+          i === activeIndex ? "w-6 bg-primary" : "w-2 bg-muted-foreground/30"
+        )
+      },
+      i
+    )) })
+  ] });
+}
+function SingleQuoteLayout({ testimonial }) {
+  return /* @__PURE__ */ jsxs16("div", { className: "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center", children: [
+    testimonial.logo && /* @__PURE__ */ jsx17(
+      "img",
+      {
+        src: testimonial.logo,
+        alt: testimonial.company ?? "",
+        className: "h-8 opacity-60"
+      }
+    ),
+    /* @__PURE__ */ jsxs16("blockquote", { className: "text-xl font-medium italic text-foreground sm:text-2xl", children: [
+      "\u201C",
+      testimonial.quote,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+      testimonial.avatar ? /* @__PURE__ */ jsx17(
+        "img",
+        {
+          src: testimonial.avatar,
+          alt: testimonial.name,
+          className: "h-12 w-12 rounded-full object-cover"
+        }
+      ) : /* @__PURE__ */ jsx17("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground", children: testimonial.name.charAt(0) }),
+      /* @__PURE__ */ jsxs16("div", { className: "text-left", children: [
+        /* @__PURE__ */ jsx17("p", { className: "text-sm font-semibold text-foreground", children: testimonial.name }),
+        (testimonial.role || testimonial.company) && /* @__PURE__ */ jsx17("p", { className: "text-xs text-muted-foreground", children: [testimonial.role, testimonial.company].filter(Boolean).join(" \xB7 ") })
+      ] })
+    ] })
+  ] });
+}
+function WallOfLoveLayout({ testimonials }) {
+  return /* @__PURE__ */ jsx17("div", { className: "columns-1 gap-6 sm:columns-2 lg:columns-3", children: testimonials.map((t) => /* @__PURE__ */ jsx17("div", { className: "mb-6 break-inside-avoid", children: /* @__PURE__ */ jsx17(TestimonialCard, { testimonial: t }) }, t.id)) });
+}
+function TestimonialSection({
+  variant = "grid",
+  testimonials,
+  heading,
+  subheading,
+  columns = 3,
+  autoPlayInterval = 5e3,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs16(
+    "section",
+    {
+      className: cn("w-full px-4 py-12 sm:px-6 lg:px-8", className),
+      ...props,
+      children: [
+        (heading || subheading) && /* @__PURE__ */ jsxs16("div", { className: "mx-auto mb-10 max-w-2xl text-center", children: [
+          heading && /* @__PURE__ */ jsx17("h2", { className: "text-2xl font-bold text-foreground sm:text-3xl", children: heading }),
+          subheading && /* @__PURE__ */ jsx17("p", { className: "mt-3 text-sm text-muted-foreground sm:text-base", children: subheading })
+        ] }),
+        variant === "grid" && /* @__PURE__ */ jsx17(GridLayout, { testimonials, columns }),
+        variant === "carousel" && /* @__PURE__ */ jsx17(
+          CarouselLayout,
+          {
+            testimonials,
+            autoPlayInterval
+          }
+        ),
+        variant === "singleQuote" && testimonials[0] && /* @__PURE__ */ jsx17(SingleQuoteLayout, { testimonial: testimonials[0] }),
+        variant === "wallOfLove" && /* @__PURE__ */ jsx17(WallOfLoveLayout, { testimonials })
+      ]
+    }
+  );
+}
+export {
+  BlogGrid,
+  CTABanner,
+  ComparisonTable,
+  ContactSection,
+  FeatureCard,
+  LogoCloud,
+  MarketingCta,
+  MarketingFAQItem,
+  MarketingFooter,
+  MarketingHeader,
+  MarketingHero,
+  HowItWorksStep as MarketingHowItWorksStep,
+  PricingTier as MarketingPricingTier,
+  NewsletterSection,
+  TeamSection,
+  TestimonialSection,
+  UseCaseCard
+};