@nexub/marketing 0.0.0-stage → 3.2.0

package/README.md

@@ -1,3 +1,80 @@
-# Temporary Holding Version
+# @nexub/marketing
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Marketing sections for the Nexub Design System, built only from `@nexub/react` and the design tokens: the building blocks of nexub.com.
+
+```bash
+pnpm add @nexub/marketing @nexub/react @nexub/patterns @nexub/icons @nexub/themes @nexub/tokens
+```
+
+| Section | Renders on |
+|---|---|
+| `Hero`, `SectionHeader`, `LogoStrip`, `StatBand` + `StatBandItem`, `TestimonialGrid` + `TestimonialCard`, `ProductGrid` + `ProductCard`, `HowItWorks`, `FeatureSplit`, `CTABand`, `MarketingFooter` | the server (React Server Components) |
+| `MarketingNav`, `PricingTable`, `FAQ` | the client (`'use client'`) |
+
+`StatBandItem` is named apart from `@nexub/patterns`' `StatCard`, so both packages can be used together.
+
+## Marketing mode
+
+The sections take their look from marketing mode: set `data-mode="marketing"` on `<html>` (or any wrapper) and load `@nexub/themes/marketing`. Nothing outside that attribute changes, so an app and its marketing pages can share one stylesheet.
+
+## Next.js (App Router) with Tailwind 4
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@nexub/tokens/tailwind.css";
+@import "@nexub/themes/core" layer(base);   /* resets, no fonts, no page backdrop */
+@import "@nexub/themes/light" layer(base);
+@import "@nexub/themes/dark" layer(base);
+@import "@nexub/themes/marketing" layer(base);
+@source "../node_modules/@nexub/react/dist";
+@source "../node_modules/@nexub/patterns/dist";
+@source "../node_modules/@nexub/marketing/dist";
+```
+
+Don't also import `@nexub/react/styles.css`: it's the prebuilt CSS for apps without Tailwind and brings a second preflight.
+
+Fonts come from `next/font`; point the design tokens at them:
+
+```tsx
+// app/layout.tsx
+import { Inter, Plus_Jakarta_Sans } from 'next/font/google';
+const sans = Inter({ subsets: ['latin'], variable: '--font-family-sans' });
+const display = Plus_Jakarta_Sans({ subsets: ['latin'], variable: '--font-family-display' });
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-mode="marketing" className={`${sans.variable} ${display.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```tsx
+// app/page.tsx: a server component
+import { Button } from '@nexub/react';
+import { CTABand, Hero, StatBand, StatBandItem } from '@nexub/marketing';
+
+export default function Page() {
+  return (
+    <main>
+      <Hero
+        eyebrow="Now in Vietnam"
+        title="Run your whole company in one place"
+        description="Payroll, bookkeeping and compliance for growing teams."
+        actions={<><Button variant="hero" size="lg" asChild><a href="/start">Start free</a></Button><Button variant="outlined" size="lg" asChild><a href="/demo">Book a demo</a></Button></>}
+      />
+      <StatBand>
+        <StatBandItem value={2000} suffix="+" label="Teams" />
+        <StatBandItem value={5} label="Countries" tone="success" />
+      </StatBand>
+      <CTABand title="Start today" actions={<Button variant="filled" tone="neutral" asChild><a href="/start">Create an account</a></Button>} />
+    </main>
+  );
+}
+```
+
+Each section is also importable on its own, e.g. `@nexub/marketing/Hero`.
+
+Guidelines: gradients only on the hero, the main button and the CTA band; at most one glowing (`variant="hero"`) button per screen; product accents only on product-specific content. See the Marketing mode page in the docs.

package/dist/components/CTABand/CTABand.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface CTABandProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Buttons. On the band, use variant="filled" with tone="neutral" or an outlined button. */
+    actions?: React.ReactNode;
+}
+/**
+ * The closing call to action: a primary band (the hero gradient in marketing
+ * mode, one of the three places a gradient belongs). Server component.
+ */
+export declare const CTABand: React.ForwardRefExoticComponent<CTABandProps & React.RefAttributes<HTMLElement>>;

package/dist/components/CTABand/CTABand.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+const CTABand = React.forwardRef(({ title, description, actions, className, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-16", className), ...props, children: /* @__PURE__ */ jsx(Container, { size: "marketing", children: /* @__PURE__ */ jsxs("div", { className: "nx-mkt-cta-band flex flex-col items-center gap-6 rounded-[var(--marketing-card-radius,var(--shape-container))] bg-[var(--color-primary)] px-6 py-14 text-center text-[var(--color-on-primary)] sm:px-12", children: [
+  /* @__PURE__ */ jsx("h2", { className: "m-0 max-w-2xl text-balance font-display text-display-sm", children: title }),
+  description && /* @__PURE__ */ jsx("p", { className: "m-0 max-w-xl text-body-lg opacity-90", children: description }),
+  actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-3", children: actions })
+] }) }) }));
+CTABand.displayName = "CTABand";
+export {
+  CTABand
+};

package/dist/components/CTABand/index.d.ts

@@ -0,0 +1,2 @@
+export { CTABand } from './CTABand.js';
+export type { CTABandProps } from './CTABand.js';

package/dist/components/CTABand/index.js

@@ -0,0 +1,4 @@
+import { CTABand } from "./CTABand.js";
+export {
+  CTABand
+};

package/dist/components/FAQ/FAQ.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface FAQItem {
+    question: string;
+    answer: React.ReactNode;
+}
+export interface FAQProps extends React.HTMLAttributes<HTMLElement> {
+    header?: React.ReactNode;
+    items: FAQItem[];
+}
+/** Questions and answers in an Accordion; one open at a time. */
+export declare const FAQ: React.ForwardRefExoticComponent<FAQProps & React.RefAttributes<HTMLElement>>;

package/dist/components/FAQ/FAQ.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Accordion } from "@nexub/react/Accordion";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+const FAQ = React.forwardRef(({ header, items, className, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "md", className: "flex flex-col gap-10", children: [
+  header,
+  /* @__PURE__ */ jsx(Accordion.Root, { type: "single", collapsible: true, children: items.map((item, i) => /* @__PURE__ */ jsxs(Accordion.Item, { value: `faq-${i}`, children: [
+    /* @__PURE__ */ jsx(Accordion.Trigger, { children: item.question }),
+    /* @__PURE__ */ jsx(Accordion.Content, { children: item.answer })
+  ] }, i)) })
+] }) }));
+FAQ.displayName = "FAQ";
+export {
+  FAQ
+};

package/dist/components/FAQ/index.d.ts

@@ -0,0 +1,2 @@
+export { FAQ } from './FAQ.js';
+export type { FAQItem, FAQProps } from './FAQ.js';

package/dist/components/FAQ/index.js

@@ -0,0 +1,4 @@
+import { FAQ } from "./FAQ.js";
+export {
+  FAQ
+};

package/dist/components/FeatureSplit/FeatureSplit.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface FeatureSplitProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Short benefit lines, shown as a check list. */
+    points?: string[];
+    actions?: React.ReactNode;
+    visual: React.ReactNode;
+    /** Visual on the left on wide screens. */
+    reverse?: boolean;
+}
+/** Text beside a visual. Server component. */
+export declare const FeatureSplit: React.ForwardRefExoticComponent<FeatureSplitProps & React.RefAttributes<HTMLElement>>;

package/dist/components/FeatureSplit/FeatureSplit.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckList } from "@nexub/react/CheckList";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { EyebrowChip } from "@nexub/react/EyebrowChip";
+const FeatureSplit = React.forwardRef(
+  ({ eyebrow, title, description, points, actions, visual, reverse = false, className, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-5", reverse && "lg:order-2"), children: [
+      eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(EyebrowChip, { variant: "gradient", tone: "info", children: eyebrow }) : eyebrow),
+      /* @__PURE__ */ jsx("h2", { className: "m-0 text-balance font-display text-display-sm text-[var(--color-on-surface)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "m-0 text-body-lg text-[var(--color-on-surface-variant)]", children: description }),
+      points && points.length > 0 && /* @__PURE__ */ jsx(CheckList, { items: points }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("relative", reverse && "lg:order-1"), children: visual })
+  ] }) })
+);
+FeatureSplit.displayName = "FeatureSplit";
+export {
+  FeatureSplit
+};

package/dist/components/FeatureSplit/index.d.ts

@@ -0,0 +1,2 @@
+export { FeatureSplit } from './FeatureSplit.js';
+export type { FeatureSplitProps } from './FeatureSplit.js';

package/dist/components/FeatureSplit/index.js

@@ -0,0 +1,4 @@
+import { FeatureSplit } from "./FeatureSplit.js";
+export {
+  FeatureSplit
+};

package/dist/components/Hero/Hero.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** A string becomes a gradient EyebrowChip; pass a node for your own. */
+    eyebrow?: React.ReactNode;
+    /** The page's one h1. */
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Usually one Button variant="hero" and one outlined Button. */
+    actions?: React.ReactNode;
+    /** Product shot or illustration. With `align="start"` it sits beside the text on wide screens. */
+    visual?: React.ReactNode;
+    align?: 'center' | 'start';
+}
+/** The page hero: ambient backdrop, eyebrow, display headline, lead, actions and a visual. Server component. */
+export declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Hero/Hero.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { EyebrowChip } from "@nexub/react/EyebrowChip";
+const Hero = React.forwardRef(
+  ({ eyebrow, title, description, actions, visual, align = "center", className, children, ...props }, ref) => {
+    const centered = align === "center";
+    return /* @__PURE__ */ jsx("section", { ref, className: cn("nx-mkt-hero-backdrop relative overflow-hidden py-20 sm:py-28", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: cn("flex flex-col gap-14", !centered && visual && "lg:grid lg:grid-cols-2 lg:items-center"), children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", centered ? "mx-auto max-w-3xl items-center text-center" : "items-start"), children: [
+        eyebrow && /* @__PURE__ */ jsx("div", { className: "nx-mkt-rise", children: typeof eyebrow === "string" ? /* @__PURE__ */ jsx(EyebrowChip, { variant: "gradient", tone: "info", children: eyebrow }) : eyebrow }),
+        /* @__PURE__ */ jsx("h1", { className: "nx-mkt-rise nx-mkt-delay-1 m-0 text-balance font-display text-display-md text-[var(--color-on-surface)] sm:text-display-lg lg:text-display-xl", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "nx-mkt-rise nx-mkt-delay-2 m-0 max-w-2xl text-pretty text-body-lg text-[var(--color-on-surface-variant)]", children: description }),
+        actions && /* @__PURE__ */ jsx("div", { className: "nx-mkt-rise nx-mkt-delay-3 flex flex-wrap gap-3", children: actions }),
+        children
+      ] }),
+      visual && /* @__PURE__ */ jsx("div", { className: "nx-mkt-rise nx-mkt-delay-3 relative", children: visual })
+    ] }) });
+  }
+);
+Hero.displayName = "Hero";
+export {
+  Hero
+};

package/dist/components/Hero/index.d.ts

@@ -0,0 +1,2 @@
+export { Hero } from './Hero.js';
+export type { HeroProps } from './Hero.js';

package/dist/components/Hero/index.js

@@ -0,0 +1,4 @@
+import { Hero } from "./Hero.js";
+export {
+  Hero
+};

package/dist/components/HowItWorks/HowItWorks.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface HowItWorksStep {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export interface HowItWorksProps extends React.HTMLAttributes<HTMLElement> {
+    header?: React.ReactNode;
+    steps: HowItWorksStep[];
+}
+/** Numbered steps in an ordered list. Server component. */
+export declare const HowItWorks: React.ForwardRefExoticComponent<HowItWorksProps & React.RefAttributes<HTMLElement>>;

package/dist/components/HowItWorks/HowItWorks.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+const HowItWorks = React.forwardRef(({ header, steps, className, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col gap-12", children: [
+  header,
+  /* @__PURE__ */ jsx("ol", { className: "m-0 grid list-none gap-8 p-0 md:grid-cols-3", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "inline-flex h-control-md w-control-md items-center justify-center rounded-full bg-[var(--color-primary-container)] text-title-md text-[var(--color-on-primary-container)]",
+        children: step.icon ?? i + 1
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { className: "m-0 text-title-lg text-[var(--color-on-surface)]", children: step.title }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-body-md text-[var(--color-on-surface-variant)]", children: step.description })
+  ] }, i)) })
+] }) }));
+HowItWorks.displayName = "HowItWorks";
+export {
+  HowItWorks
+};

package/dist/components/HowItWorks/index.d.ts

@@ -0,0 +1,2 @@
+export { HowItWorks } from './HowItWorks.js';
+export type { HowItWorksStep, HowItWorksProps } from './HowItWorks.js';

package/dist/components/HowItWorks/index.js

@@ -0,0 +1,4 @@
+import { HowItWorks } from "./HowItWorks.js";
+export {
+  HowItWorks
+};

package/dist/components/LogoStrip/LogoStrip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface LogoStripProps extends React.HTMLAttributes<HTMLElement> {
+    /** e.g. "Trusted by 2,000+ teams". */
+    label?: React.ReactNode;
+    /** Scroll the logos sideways (pauses on hover and focus). Off: a wrapped row. @default true */
+    scroll?: boolean;
+}
+/** A row of customer logos under the hero. Give each logo its alt text. Server component. */
+export declare const LogoStrip: React.ForwardRefExoticComponent<LogoStripProps & React.RefAttributes<HTMLElement>>;

package/dist/components/LogoStrip/LogoStrip.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { Marquee } from "@nexub/react/Motion";
+const LogoStrip = React.forwardRef(
+  ({ label, scroll = true, className, children, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-10", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col items-center gap-6", children: [
+    label && /* @__PURE__ */ jsx("p", { className: "m-0 text-label-lg text-[var(--color-on-surface-muted)]", children: label }),
+    scroll ? /* @__PURE__ */ jsx(Marquee, { className: "w-full", rowClassName: "items-center gap-14 pe-14", children }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-14 gap-y-6", children })
+  ] }) })
+);
+LogoStrip.displayName = "LogoStrip";
+export {
+  LogoStrip
+};

package/dist/components/LogoStrip/index.d.ts

@@ -0,0 +1,2 @@
+export { LogoStrip } from './LogoStrip.js';
+export type { LogoStripProps } from './LogoStrip.js';

package/dist/components/LogoStrip/index.js

@@ -0,0 +1,4 @@
+import { LogoStrip } from "./LogoStrip.js";
+export {
+  LogoStrip
+};

package/dist/components/MarketingFooter/MarketingFooter.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface MarketingFooterColumn {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+export interface MarketingFooterProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    /** A line under the logo. */
+    tagline?: React.ReactNode;
+    columns: MarketingFooterColumn[];
+    /** Tools or integrations scrolling in a strip above the columns. */
+    tools?: React.ReactNode[];
+    /** @default 'Works with' */
+    toolsLabel?: string;
+    /** Copyright and legal links. */
+    bottom?: React.ReactNode;
+}
+/** The site footer: tools strip, logo, link columns and the legal line. Server component. */
+export declare const MarketingFooter: React.ForwardRefExoticComponent<MarketingFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/components/MarketingFooter/MarketingFooter.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { Marquee } from "@nexub/react/Motion";
+const MarketingFooter = React.forwardRef(
+  ({ logo, tagline, columns, tools, toolsLabel = "Works with", bottom, className, ...props }, ref) => /* @__PURE__ */ jsxs("footer", { ref, className: cn("border-t border-[var(--color-outline-variant)] bg-[var(--color-surface-container-low)]", className), ...props, children: [
+    tools && tools.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--color-outline-variant)] py-6", children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col items-center gap-4 sm:flex-row", children: [
+      /* @__PURE__ */ jsx("p", { className: "m-0 shrink-0 text-label-lg text-[var(--color-on-surface-muted)]", children: toolsLabel }),
+      /* @__PURE__ */ jsx(Marquee, { speed: "slow", className: "w-full", rowClassName: "items-center gap-10 pe-10", children: tools.map((tool, i) => /* @__PURE__ */ jsx("span", { className: "inline-flex items-center text-label-lg text-[var(--color-on-surface-variant)]", children: tool }, i)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "grid gap-10 py-14 md:grid-cols-[1.4fr_repeat(auto-fit,minmax(9rem,1fr))]", children: [
+      (logo || tagline) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        logo,
+        tagline && /* @__PURE__ */ jsx("p", { className: "m-0 max-w-xs text-body-md text-[var(--color-on-surface-variant)]", children: tagline })
+      ] }),
+      columns.map((col) => /* @__PURE__ */ jsxs("nav", { "aria-label": col.title, className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx("h2", { className: "m-0 text-title-sm text-[var(--color-on-surface)]", children: col.title }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: link.href, className: "text-body-md text-[var(--color-on-surface-variant)] no-underline hover:text-[var(--color-on-surface)] hover:underline", children: link.label }) }, link.href)) })
+      ] }, col.title))
+    ] }),
+    bottom && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--color-outline-variant)] py-6", children: /* @__PURE__ */ jsx(Container, { size: "marketing", className: "text-body-sm text-[var(--color-on-surface-muted)]", children: bottom }) })
+  ] })
+);
+MarketingFooter.displayName = "MarketingFooter";
+export {
+  MarketingFooter
+};

package/dist/components/MarketingFooter/index.d.ts

@@ -0,0 +1,2 @@
+export { MarketingFooter } from './MarketingFooter.js';
+export type { MarketingFooterColumn, MarketingFooterProps } from './MarketingFooter.js';

package/dist/components/MarketingFooter/index.js

@@ -0,0 +1,4 @@
+import { MarketingFooter } from "./MarketingFooter.js";
+export {
+  MarketingFooter
+};

package/dist/components/MarketingNav/MarketingNav.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface MarketingNavLink {
+    label: string;
+    href: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+export type MarketingNavItem = MarketingNavLink | {
+    label: string;
+    items: MarketingNavLink[];
+};
+export interface MarketingCountry {
+    /** ISO 3166-1 alpha-2, e.g. 'SG'. */
+    code: string;
+    label: string;
+    href: string;
+}
+export interface MarketingNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** e.g. <Logo />, wrapped in a link to `logoHref`. */
+    logo: React.ReactNode;
+    logoHref?: string;
+    /** @default 'Home' */
+    logoLabel?: string;
+    /** Top-level links; an item with `items` opens a mega-menu. */
+    items: MarketingNavItem[];
+    countries?: MarketingCountry[];
+    /** Current country code. */
+    country?: string;
+    /** @default 'Choose country' */
+    countryLabel?: string;
+    /** Sign in / Get started. */
+    actions?: React.ReactNode;
+    /** @default 'Open menu' */
+    menuLabel?: string;
+}
+/**
+ * The site header: logo, links with mega-menus, country switcher and actions.
+ * Below `lg` the links move into a side sheet.
+ */
+export declare const MarketingNav: React.ForwardRefExoticComponent<MarketingNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/MarketingNav/MarketingNav.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { Drawer } from "@nexub/react/Drawer";
+import { DropdownMenu } from "@nexub/react/DropdownMenu";
+import { Flag } from "@nexub/react/Flag";
+import { IconButton } from "@nexub/react/IconButton";
+import { NavigationMenu } from "@nexub/react/NavigationMenu";
+import { TopNav } from "@nexub/react/TopNav";
+import { ChevronDown, Menu } from "@nexub/icons";
+const hasItems = (i) => "items" in i;
+const linkClass = "nx-state-layer flex flex-col gap-0.5 rounded-shape-control p-3 text-[var(--color-on-surface)] no-underline";
+const MarketingNav = React.forwardRef(
+  ({
+    logo,
+    logoHref = "/",
+    logoLabel = "Home",
+    items,
+    countries,
+    country,
+    countryLabel = "Choose country",
+    actions,
+    menuLabel = "Open menu",
+    className,
+    ...props
+  }, ref) => {
+    const current = countries?.find((c) => c.code === country) ?? countries?.[0];
+    return /* @__PURE__ */ jsx(TopNav.Root, { ref, surface: "glass", scrollEdge: "soft", className: cn("border-x-0 border-t-0 px-0", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsx("a", { href: logoHref, "aria-label": logoLabel, className: "flex shrink-0 items-center no-underline", children: logo }),
+      /* @__PURE__ */ jsx(NavigationMenu.Root, { className: "hidden lg:flex", "aria-label": "Main", children: /* @__PURE__ */ jsx(NavigationMenu.List, { children: items.map(
+        (item) => hasItems(item) ? /* @__PURE__ */ jsxs(NavigationMenu.Item, { children: [
+          /* @__PURE__ */ jsx(NavigationMenu.Trigger, { children: item.label }),
+          /* @__PURE__ */ jsx(NavigationMenu.Content, { children: /* @__PURE__ */ jsx("ul", { className: "m-0 grid w-[min(36rem,90vw)] list-none grid-cols-2 gap-1 p-2", children: item.items.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(NavigationMenu.Link, { href: link.href, className: linkClass, children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-title-sm", children: [
+              link.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: link.icon }),
+              link.label
+            ] }),
+            link.description && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-variant)]", children: link.description })
+          ] }) }, link.href)) }) })
+        ] }, item.label) : /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(NavigationMenu.Link, { href: item.href, children: item.label }) }, item.href)
+      ) }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      current && countries && countries.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenu.Trigger,
+          {
+            "aria-label": `${countryLabel}: ${current.label}`,
+            className: "nx-state-layer inline-flex h-control-sm items-center gap-1.5 rounded-shape-control px-2 text-label-lg text-[var(--color-on-surface)]",
+            children: [
+              /* @__PURE__ */ jsx(Flag, { code: current.code, size: "sm", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: current.code }),
+              /* @__PURE__ */ jsx(ChevronDown, { size: 14, "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: countries.map((c) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsxs("a", { href: c.href, "aria-current": c.code === current.code ? "true" : void 0, children: [
+          /* @__PURE__ */ jsx(Flag, { code: c.code, size: "sm", "aria-hidden": "true" }),
+          c.label
+        ] }) }, c.code)) })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-2 sm:flex", children: actions }),
+      /* @__PURE__ */ jsxs(Drawer.Root, { direction: "right", children: [
+        /* @__PURE__ */ jsx(Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { label: menuLabel, className: "lg:hidden", children: /* @__PURE__ */ jsx(Menu, { size: 20 }) }) }),
+        /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+          /* @__PURE__ */ jsx(Drawer.Overlay, {}),
+          /* @__PURE__ */ jsxs(Drawer.Content, { side: "right", className: "w-[min(22rem,88vw)] overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsx(Drawer.Title, { className: "sr-only", children: menuLabel }),
+            /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", className: "flex flex-col gap-4", children: [
+              items.map(
+                (item) => hasItems(item) ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "m-0 px-3 text-label-md text-[var(--color-on-surface-muted)]", children: item.label }),
+                  item.items.map((link) => /* @__PURE__ */ jsx("a", { href: link.href, className: linkClass, children: /* @__PURE__ */ jsx("span", { className: "text-title-sm", children: link.label }) }, link.href))
+                ] }, item.label) : /* @__PURE__ */ jsx("a", { href: item.href, className: cn(linkClass, "text-title-sm"), children: item.label }, item.href)
+              ),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 pt-2 sm:hidden", children: actions })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+MarketingNav.displayName = "MarketingNav";
+export {
+  MarketingNav
+};

package/dist/components/MarketingNav/index.d.ts

@@ -0,0 +1,2 @@
+export { MarketingNav } from './MarketingNav.js';
+export type { MarketingNavLink, MarketingNavItem, MarketingCountry, MarketingNavProps } from './MarketingNav.js';

package/dist/components/MarketingNav/index.js

@@ -0,0 +1,4 @@
+import { MarketingNav } from "./MarketingNav.js";
+export {
+  MarketingNav
+};

package/dist/components/PricingTable/PricingTable.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export type BillingPeriod = 'monthly' | 'yearly';
+export interface PricingPlan {
+    name: string;
+    /** Price per month, for each billing period. */
+    price: Record<BillingPeriod, number>;
+    description?: string;
+    features: string[];
+    cta: string;
+    /** Where the plan's button goes. Or use onSelect. */
+    href?: string;
+    onSelect?: () => void;
+    highlighted?: boolean;
+    badge?: string;
+}
+export interface PricingTableProps extends React.HTMLAttributes<HTMLElement> {
+    header?: React.ReactNode;
+    plans: PricingPlan[];
+    /** ISO 4217 code. */
+    currency: string;
+    locale?: string;
+    defaultPeriod?: BillingPeriod;
+    /** @default { monthly: 'Monthly', yearly: 'Yearly' } */
+    periodLabels?: Record<BillingPeriod, string>;
+    /** Shown after each price. @default '/month' */
+    perMonthLabel?: string;
+    /** Accessible name of the billing switch. @default 'Billing period' */
+    billingLabel?: string;
+}
+/** Plans side by side with a monthly / yearly switch. */
+export declare const PricingTable: React.ForwardRefExoticComponent<PricingTableProps & React.RefAttributes<HTMLElement>>;

package/dist/components/PricingTable/PricingTable.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { SegmentedControl } from "@nexub/react/SegmentedControl";
+import { PlanCard } from "@nexub/patterns";
+const PricingTable = React.forwardRef(
+  ({
+    header,
+    plans,
+    currency,
+    locale,
+    defaultPeriod = "monthly",
+    periodLabels = { monthly: "Monthly", yearly: "Yearly" },
+    perMonthLabel = "/month",
+    billingLabel = "Billing period",
+    className,
+    ...props
+  }, ref) => {
+    const [period, setPeriod] = React.useState(defaultPeriod);
+    const money = new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: 0 });
+    return /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col items-center gap-10", children: [
+      header,
+      /* @__PURE__ */ jsxs(
+        SegmentedControl.Root,
+        {
+          "aria-label": billingLabel,
+          value: period,
+          onValueChange: (v) => v && setPeriod(v),
+          children: [
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "monthly", children: periodLabels.monthly }),
+            /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "yearly", children: periodLabels.yearly })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { className: "m-0 grid w-full list-none gap-6 p-0 md:grid-cols-2 lg:grid-cols-3", children: plans.map((plan) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx(
+        PlanCard,
+        {
+          className: "w-full",
+          name: plan.name,
+          price: money.format(plan.price[period]),
+          period: perMonthLabel,
+          description: plan.description,
+          features: plan.features,
+          cta: plan.cta,
+          ctaHref: plan.href,
+          onSelect: plan.onSelect,
+          highlighted: plan.highlighted,
+          badge: plan.badge
+        }
+      ) }, plan.name)) })
+    ] }) });
+  }
+);
+PricingTable.displayName = "PricingTable";
+export {
+  PricingTable
+};

package/dist/components/PricingTable/index.d.ts

@@ -0,0 +1,2 @@
+export { PricingTable } from './PricingTable.js';
+export type { BillingPeriod, PricingPlan, PricingTableProps } from './PricingTable.js';

package/dist/components/PricingTable/index.js

@@ -0,0 +1,4 @@
+import { PricingTable } from "./PricingTable.js";
+export {
+  PricingTable
+};

package/dist/components/Products/Products.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface ProductGridProps extends React.HTMLAttributes<HTMLElement> {
+    header?: React.ReactNode;
+}
+/** A grid of ProductCards. Server component. */
+export declare const ProductGrid: React.ForwardRefExoticComponent<ProductGridProps & React.RefAttributes<HTMLElement>>;
+export interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'title'> {
+    name: string;
+    description: React.ReactNode;
+    href: string;
+    /** Product mark, e.g. <PayubMark size={24} />. */
+    icon?: React.ReactNode;
+    accent?: 'leap' | 'bookub' | 'payub' | 'founderub';
+    /** @default 'Learn more' */
+    linkLabel?: string;
+}
+/** One product: the whole card is a link (its name). Renders as a list item: put it in a ProductGrid. */
+export declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/Products/Products.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Card, CardLink } from "@nexub/react/Card";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { ArrowRight } from "@nexub/icons";
+const ProductGrid = React.forwardRef(({ header, className, children, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col gap-12", children: [
+  header,
+  /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-6 p-0 sm:grid-cols-2 lg:grid-cols-4", children })
+] }) }));
+ProductGrid.displayName = "ProductGrid";
+const ProductCard = React.forwardRef(
+  ({ name, description, href, icon, accent, linkLabel = "Learn more", className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("flex", className), ...props, children: /* @__PURE__ */ jsxs(Card, { variant: "showcase", accent, className: "flex w-full flex-col gap-4 p-7", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("h3", { className: "m-0 text-title-lg text-[var(--color-on-surface)]", children: /* @__PURE__ */ jsx(CardLink, { href, children: name }) }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 flex-1 text-body-md text-[var(--color-on-surface-variant)]", children: description }),
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-label-lg text-[var(--color-tertiary)]", "aria-hidden": "true", children: [
+      linkLabel,
+      " ",
+      /* @__PURE__ */ jsx(ArrowRight, { size: 16 })
+    ] })
+  ] }) })
+);
+ProductCard.displayName = "ProductCard";
+export {
+  ProductCard,
+  ProductGrid
+};

package/dist/components/Products/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductGrid, ProductCard } from './Products.js';
+export type { ProductGridProps, ProductCardProps } from './Products.js';

package/dist/components/Products/index.js

@@ -0,0 +1,5 @@
+import { ProductGrid, ProductCard } from "./Products.js";
+export {
+  ProductCard,
+  ProductGrid
+};

package/dist/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** A string becomes a gradient EyebrowChip. */
+    eyebrow?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    align?: 'center' | 'start';
+    /** Heading level. @default 2 */
+    level?: 2 | 3;
+}
+/** Eyebrow, headline and lead that open a section. Server component. */
+export declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { EyebrowChip } from "@nexub/react/EyebrowChip";
+const SectionHeader = React.forwardRef(
+  ({ eyebrow, title, description, align = "center", level = 2, className, ...props }, ref) => {
+    const H = `h${level}`;
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn("flex flex-col gap-4", align === "center" ? "mx-auto max-w-2xl items-center text-center" : "max-w-2xl items-start", className),
+        ...props,
+        children: [
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(EyebrowChip, { variant: "gradient", tone: "info", children: eyebrow }) : eyebrow),
+          /* @__PURE__ */ jsx(H, { className: "m-0 text-balance font-display text-display-sm text-[var(--color-on-surface)] sm:text-display-md", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "m-0 text-pretty text-body-lg text-[var(--color-on-surface-variant)]", children: description })
+        ]
+      }
+    );
+  }
+);
+SectionHeader.displayName = "SectionHeader";
+export {
+  SectionHeader
+};

package/dist/components/SectionHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { SectionHeader } from './SectionHeader.js';
+export type { SectionHeaderProps } from './SectionHeader.js';

package/dist/components/SectionHeader/index.js

@@ -0,0 +1,4 @@
+import { SectionHeader } from "./SectionHeader.js";
+export {
+  SectionHeader
+};

package/dist/components/StatBand/StatBand.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ToneValue } from '@nexub/react/Button';
+export interface StatBandProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Optional heading above the stats (h2). */
+    title?: React.ReactNode;
+}
+/** A band of headline numbers. Put StatBandItems inside. Server component. */
+export declare const StatBand: React.ForwardRefExoticComponent<StatBandProps & React.RefAttributes<HTMLElement>>;
+export interface StatBandItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix'> {
+    /** A number counts up when it scrolls into view; a string shows as is. */
+    value: number | string;
+    label: React.ReactNode;
+    format?: Intl.NumberFormatOptions;
+    /** Shown before / after the number, e.g. "$" or "+". */
+    prefix?: string;
+    suffix?: string;
+    tone?: ToneValue;
+}
+/** One stat: the number (dd) after its label (dt), shown number first. Named apart from @nexub/patterns' StatCard. */
+export declare const StatBandItem: React.ForwardRefExoticComponent<StatBandItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/StatBand/StatBand.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { NumberTicker } from "@nexub/react/NumberTicker";
+const StatBand = React.forwardRef(({ title, className, children, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-16", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col gap-10", children: [
+  title && /* @__PURE__ */ jsx("h2", { className: "m-0 text-center font-display text-headline-lg text-[var(--color-on-surface)]", children: title }),
+  /* @__PURE__ */ jsx("dl", { className: "m-0 grid grid-cols-2 gap-x-6 gap-y-10 lg:grid-cols-4", children })
+] }) }));
+StatBand.displayName = "StatBand";
+const toneClass = {
+  neutral: "text-[var(--color-on-surface)]",
+  info: "text-[var(--color-primary)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  danger: "text-[var(--color-error)]",
+  leap: "text-[var(--color-leap)]",
+  bookub: "text-[var(--color-bookub)]",
+  payub: "text-[var(--color-payub)]",
+  founderub: "text-[var(--color-founderub)]"
+};
+const StatBandItem = React.forwardRef(
+  ({ value, label, format, prefix, suffix, tone = "info", className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col-reverse items-center gap-2 text-center", className), ...props, children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-body-md text-[var(--color-on-surface-variant)]", children: label }),
+    /* @__PURE__ */ jsxs("dd", { className: cn("m-0 font-display text-display-sm", toneClass[tone]), children: [
+      prefix,
+      typeof value === "number" ? /* @__PURE__ */ jsx(NumberTicker, { value, format, countOnView: true }) : value,
+      suffix
+    ] })
+  ] })
+);
+StatBandItem.displayName = "StatBandItem";
+export {
+  StatBand,
+  StatBandItem
+};

package/dist/components/StatBand/index.d.ts

@@ -0,0 +1,2 @@
+export { StatBand, StatBandItem } from './StatBand.js';
+export type { StatBandProps, StatBandItemProps } from './StatBand.js';

package/dist/components/StatBand/index.js

@@ -0,0 +1,5 @@
+import { StatBand, StatBandItem } from "./StatBand.js";
+export {
+  StatBand,
+  StatBandItem
+};

package/dist/components/Testimonials/Testimonials.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface TestimonialGridProps extends React.HTMLAttributes<HTMLElement> {
+    /** A SectionHeader, usually. */
+    header?: React.ReactNode;
+}
+/** A grid of TestimonialCards. Server component. */
+export declare const TestimonialGrid: React.ForwardRefExoticComponent<TestimonialGridProps & React.RefAttributes<HTMLElement>>;
+export interface TestimonialCardProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'role'> {
+    quote: React.ReactNode;
+    name: string;
+    role?: React.ReactNode;
+    avatarSrc?: string;
+    /** Stars out of 5. */
+    rating?: number;
+    /** The product the customer uses: a coloured top edge and tint. */
+    accent?: 'leap' | 'bookub' | 'payub' | 'founderub';
+}
+/** A customer quote. Renders as a list item: put it in a TestimonialGrid. */
+export declare const TestimonialCard: React.ForwardRefExoticComponent<TestimonialCardProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/Testimonials/Testimonials.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Avatar } from "@nexub/react/Avatar";
+import { Card } from "@nexub/react/Card";
+import { cn } from "@nexub/react/cn";
+import { Container } from "@nexub/react/Container";
+import { Star } from "@nexub/icons";
+const TestimonialGrid = React.forwardRef(({ header, className, children, ...props }, ref) => /* @__PURE__ */ jsx("section", { ref, className: cn("py-20", className), ...props, children: /* @__PURE__ */ jsxs(Container, { size: "marketing", className: "flex flex-col gap-12", children: [
+  header,
+  /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-6 p-0 md:grid-cols-2 lg:grid-cols-3", children })
+] }) }));
+TestimonialGrid.displayName = "TestimonialGrid";
+const TestimonialCard = React.forwardRef(
+  ({ quote, name, role, avatarSrc, rating, accent, className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("flex", className), ...props, children: /* @__PURE__ */ jsx(Card, { variant: "showcase", accent, asChild: true, children: /* @__PURE__ */ jsxs("figure", { className: "m-0 flex w-full flex-col gap-5 p-7", children: [
+    rating !== void 0 && /* @__PURE__ */ jsx("div", { role: "img", "aria-label": `Rated ${rating} out of 5`, className: "flex gap-0.5 text-[var(--color-warning)]", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(Star, { size: 16, "aria-hidden": "true", className: i < rating ? "fill-current" : "opacity-30" }, i)) }),
+    /* @__PURE__ */ jsx("blockquote", { className: "m-0 flex-1 text-body-lg text-[var(--color-on-surface)]", children: quote }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Avatar, { name, src: avatarSrc, size: "md" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-title-sm text-[var(--color-on-surface)]", children: name }),
+        role && /* @__PURE__ */ jsx("span", { className: "text-body-sm text-[var(--color-on-surface-variant)]", children: role })
+      ] })
+    ] })
+  ] }) }) })
+);
+TestimonialCard.displayName = "TestimonialCard";
+export {
+  TestimonialCard,
+  TestimonialGrid
+};

package/dist/components/Testimonials/index.d.ts

@@ -0,0 +1,2 @@
+export { TestimonialGrid, TestimonialCard } from './Testimonials.js';
+export type { TestimonialGridProps, TestimonialCardProps } from './Testimonials.js';

package/dist/components/Testimonials/index.js

@@ -0,0 +1,5 @@
+import { TestimonialGrid, TestimonialCard } from "./Testimonials.js";
+export {
+  TestimonialCard,
+  TestimonialGrid
+};

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export { MarketingNav } from './components/MarketingNav/MarketingNav.js';
+export type { MarketingNavLink, MarketingNavItem, MarketingCountry, MarketingNavProps } from './components/MarketingNav/MarketingNav.js';
+export { Hero } from './components/Hero/Hero.js';
+export type { HeroProps } from './components/Hero/Hero.js';
+export { LogoStrip } from './components/LogoStrip/LogoStrip.js';
+export type { LogoStripProps } from './components/LogoStrip/LogoStrip.js';
+export { StatBand, StatBandItem } from './components/StatBand/StatBand.js';
+export type { StatBandProps, StatBandItemProps } from './components/StatBand/StatBand.js';
+export { SectionHeader } from './components/SectionHeader/SectionHeader.js';
+export type { SectionHeaderProps } from './components/SectionHeader/SectionHeader.js';
+export { FeatureSplit } from './components/FeatureSplit/FeatureSplit.js';
+export type { FeatureSplitProps } from './components/FeatureSplit/FeatureSplit.js';
+export { HowItWorks } from './components/HowItWorks/HowItWorks.js';
+export type { HowItWorksStep, HowItWorksProps } from './components/HowItWorks/HowItWorks.js';
+export { ProductGrid, ProductCard } from './components/Products/Products.js';
+export type { ProductGridProps, ProductCardProps } from './components/Products/Products.js';
+export { TestimonialGrid, TestimonialCard } from './components/Testimonials/Testimonials.js';
+export type { TestimonialGridProps, TestimonialCardProps } from './components/Testimonials/Testimonials.js';
+export { PricingTable } from './components/PricingTable/PricingTable.js';
+export type { BillingPeriod, PricingPlan, PricingTableProps } from './components/PricingTable/PricingTable.js';
+export { FAQ } from './components/FAQ/FAQ.js';
+export type { FAQItem, FAQProps } from './components/FAQ/FAQ.js';
+export { CTABand } from './components/CTABand/CTABand.js';
+export type { CTABandProps } from './components/CTABand/CTABand.js';
+export { MarketingFooter } from './components/MarketingFooter/MarketingFooter.js';
+export type { MarketingFooterColumn, MarketingFooterProps } from './components/MarketingFooter/MarketingFooter.js';

package/dist/index.js

@@ -0,0 +1,31 @@
+import { MarketingNav } from "./components/MarketingNav/MarketingNav.js";
+import { Hero } from "./components/Hero/Hero.js";
+import { LogoStrip } from "./components/LogoStrip/LogoStrip.js";
+import { StatBand, StatBandItem } from "./components/StatBand/StatBand.js";
+import { SectionHeader } from "./components/SectionHeader/SectionHeader.js";
+import { FeatureSplit } from "./components/FeatureSplit/FeatureSplit.js";
+import { HowItWorks } from "./components/HowItWorks/HowItWorks.js";
+import { ProductGrid, ProductCard } from "./components/Products/Products.js";
+import { TestimonialGrid, TestimonialCard } from "./components/Testimonials/Testimonials.js";
+import { PricingTable } from "./components/PricingTable/PricingTable.js";
+import { FAQ } from "./components/FAQ/FAQ.js";
+import { CTABand } from "./components/CTABand/CTABand.js";
+import { MarketingFooter } from "./components/MarketingFooter/MarketingFooter.js";
+export {
+  CTABand,
+  FAQ,
+  FeatureSplit,
+  Hero,
+  HowItWorks,
+  LogoStrip,
+  MarketingFooter,
+  MarketingNav,
+  PricingTable,
+  ProductCard,
+  ProductGrid,
+  SectionHeader,
+  StatBand,
+  StatBandItem,
+  TestimonialCard,
+  TestimonialGrid
+};

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer theme{:root,:host{--spacing:.25rem;--container-xs:20rem;--container-3xl:48rem}}@layer base,components;@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.relative{position:relative}.m-0{margin:var(--spacing-0)}.mx-auto{margin-inline:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-control-md{height:var(--size-control-md)}.h-control-sm{height:var(--size-control-sm)}.w-\[min\(22rem\,88vw\)\]{width:min(22rem,88vw)}.w-\[min\(36rem\,90vw\)\]{width:min(36rem,90vw)}.w-control-md{width:var(--size-control-md)}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:var(--container-3xl)}.max-w-xl{max-width:36rem}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing-1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-5{gap:var(--spacing-5)}.gap-6{gap:var(--spacing-6)}.gap-8{gap:var(--spacing-8)}.gap-10{gap:var(--spacing-10)}.gap-12{gap:var(--spacing-12)}.gap-14{gap:var(--spacing-14)}.gap-x-6{column-gap:var(--spacing-6)}.gap-x-14{column-gap:var(--spacing-14)}.gap-y-6{row-gap:var(--spacing-6)}.gap-y-10{row-gap:var(--spacing-10)}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-\[var\(--marketing-card-radius\,var\(--shape-container\)\)\]{border-radius:var(--marketing-card-radius,var(--shape-container))}.rounded-full{border-radius:var(--radius-full)}.rounded-shape-control{border-radius:var(--shape-control)}.border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-0{border-top-style:var(--tw-border-style);border-top-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-\[var\(--color-outline-variant\)\]{border-color:var(--color-outline-variant)}.bg-\[var\(--color-primary\)\]{background-color:var(--color-primary)}.bg-\[var\(--color-primary-container\)\]{background-color:var(--color-primary-container)}.bg-\[var\(--color-surface-container-low\)\]{background-color:var(--color-surface-container-low)}.fill-current{fill:currentColor}.p-0{padding:var(--spacing-0)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-7{padding:var(--spacing-7)}.px-0{padding-inline:var(--spacing-0)}.px-2{padding-inline:var(--spacing-2)}.px-3{padding-inline:var(--spacing-3)}.px-6{padding-inline:var(--spacing-6)}.py-6{padding-block:var(--spacing-6)}.py-10{padding-block:var(--spacing-10)}.py-14{padding-block:var(--spacing-14)}.py-16{padding-block:var(--spacing-16)}.py-20{padding-block:var(--spacing-20)}.pe-10{padding-inline-end:var(--spacing-10)}.pe-14{padding-inline-end:var(--spacing-14)}.pt-2{padding-top:var(--spacing-2)}.text-center{text-align:center}.font-display{font-family:var(--font-family-display)}.text-body-lg{font-size:var(--type-body-lg-size);line-height:var(--tw-leading,var(--type-body-lg-lineHeight));letter-spacing:var(--tw-tracking,var(--type-body-lg-letterSpacing));font-weight:var(--tw-font-weight,var(--type-body-lg-weight))}.text-body-md{font-size:var(--type-body-md-size);line-height:var(--tw-leading,var(--type-body-md-lineHeight));letter-spacing:var(--tw-tracking,var(--type-body-md-letterSpacing));font-weight:var(--tw-font-weight,var(--type-body-md-weight))}.text-body-sm{font-size:var(--type-body-sm-size);line-height:var(--tw-leading,var(--type-body-sm-lineHeight));letter-spacing:var(--tw-tracking,var(--type-body-sm-letterSpacing));font-weight:var(--tw-font-weight,var(--type-body-sm-weight))}.text-display-md{font-size:var(--type-display-md-size);line-height:var(--tw-leading,var(--type-display-md-lineHeight));letter-spacing:var(--tw-tracking,var(--type-display-md-letterSpacing));font-weight:var(--tw-font-weight,var(--type-display-md-weight))}.text-display-sm{font-size:var(--type-display-sm-size);line-height:var(--tw-leading,var(--type-display-sm-lineHeight));letter-spacing:var(--tw-tracking,var(--type-display-sm-letterSpacing));font-weight:var(--tw-font-weight,var(--type-display-sm-weight))}.text-headline-lg{font-size:var(--type-headline-lg-size);line-height:var(--tw-leading,var(--type-headline-lg-lineHeight));letter-spacing:var(--tw-tracking,var(--type-headline-lg-letterSpacing));font-weight:var(--tw-font-weight,var(--type-headline-lg-weight))}.text-label-lg{font-size:var(--type-label-lg-size);line-height:var(--tw-leading,var(--type-label-lg-lineHeight));letter-spacing:var(--tw-tracking,var(--type-label-lg-letterSpacing));font-weight:var(--tw-font-weight,var(--type-label-lg-weight))}.text-label-md{font-size:var(--type-label-md-size);line-height:var(--tw-leading,var(--type-label-md-lineHeight));letter-spacing:var(--tw-tracking,var(--type-label-md-letterSpacing));font-weight:var(--tw-font-weight,var(--type-label-md-weight))}.text-title-lg{font-size:var(--type-title-lg-size);line-height:var(--tw-leading,var(--type-title-lg-lineHeight));letter-spacing:var(--tw-tracking,var(--type-title-lg-letterSpacing));font-weight:var(--tw-font-weight,var(--type-title-lg-weight))}.text-title-md{font-size:var(--type-title-md-size);line-height:var(--tw-leading,var(--type-title-md-lineHeight));letter-spacing:var(--tw-tracking,var(--type-title-md-letterSpacing));font-weight:var(--tw-font-weight,var(--type-title-md-weight))}.text-title-sm{font-size:var(--type-title-sm-size);line-height:var(--tw-leading,var(--type-title-sm-lineHeight));letter-spacing:var(--tw-tracking,var(--type-title-sm-letterSpacing));font-weight:var(--tw-font-weight,var(--type-title-sm-weight))}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.text-\[var\(--color-bookub\)\]{color:var(--color-bookub)}.text-\[var\(--color-error\)\]{color:var(--color-error)}.text-\[var\(--color-founderub\)\]{color:var(--color-founderub)}.text-\[var\(--color-leap\)\]{color:var(--color-leap)}.text-\[var\(--color-on-primary\)\]{color:var(--color-on-primary)}.text-\[var\(--color-on-primary-container\)\]{color:var(--color-on-primary-container)}.text-\[var\(--color-on-surface\)\]{color:var(--color-on-surface)}.text-\[var\(--color-on-surface-muted\)\]{color:var(--color-on-surface-muted)}.text-\[var\(--color-on-surface-variant\)\]{color:var(--color-on-surface-variant)}.text-\[var\(--color-payub\)\]{color:var(--color-payub)}.text-\[var\(--color-primary\)\]{color:var(--color-primary)}.text-\[var\(--color-success\)\]{color:var(--color-success)}.text-\[var\(--color-tertiary\)\]{color:var(--color-tertiary)}.text-\[var\(--color-warning\)\]{color:var(--color-warning)}.no-underline{text-decoration-line:none}.opacity-30{opacity:.3}.opacity-90{opacity:.9}@media (hover:hover){.hover\:text-\[var\(--color-on-surface\)\]:hover{color:var(--color-on-surface)}.hover\:underline:hover{text-decoration-line:underline}}@media (min-width:40rem){.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:px-12{padding-inline:var(--spacing-12)}.sm\:py-28{padding-block:var(--spacing-28)}.sm\:text-display-lg{font-size:var(--type-display-lg-size);line-height:var(--tw-leading,var(--type-display-lg-lineHeight));letter-spacing:var(--tw-tracking,var(--type-display-lg-letterSpacing));font-weight:var(--tw-font-weight,var(--type-display-lg-weight))}.sm\:text-display-md{font-size:var(--type-display-md-size);line-height:var(--tw-leading,var(--type-display-md-lineHeight));letter-spacing:var(--tw-tracking,var(--type-display-md-letterSpacing));font-weight:var(--tw-font-weight,var(--type-display-md-weight))}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.4fr_repeat\(auto-fit\,minmax\(9rem\,1fr\)\)\]{grid-template-columns:1.4fr repeat(auto-fit,minmax(9rem,1fr))}}@media (min-width:64rem){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:items-center{align-items:center}.lg\:text-display-xl{font-size:var(--type-display-xl-size);line-height:var(--tw-leading,var(--type-display-xl-lineHeight));letter-spacing:var(--tw-tracking,var(--type-display-xl-letterSpacing));font-weight:var(--tw-font-weight,var(--type-display-xl-weight))}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/package.json

@@ -1,6 +1,88 @@
 {
   "name": "@nexub/marketing",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "3.2.0",
+  "description": "Marketing sections for the Nexub Design System: hero, stats, testimonials, products, pricing, FAQ, CTA, nav and footer, built on @nexub/react in marketing mode. Server components by default.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Nexub-AI/nexub-ds.git",
+    "directory": "packages/marketing"
+  },
+  "keywords": [
+    "react",
+    "marketing",
+    "landing-page",
+    "server-components",
+    "design-system",
+    "nexub"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "default": "./dist/components/*/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "@nexub/icons": "^3.2.0",
+    "@nexub/patterns": "^3.2.0",
+    "@nexub/react": "^3.2.0",
+    "@nexub/themes": "^3.2.0",
+    "@nexub/tokens": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@nexub/icons": {
+      "optional": true
+    },
+    "@nexub/tokens": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^9.0.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5",
+    "@nexub/icons": "3.2.0",
+    "@nexub/patterns": "3.2.0",
+    "@nexub/react": "3.2.0",
+    "@nexub/themes": "3.2.0",
+    "@nexub/tokens": "3.2.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && tailwindcss -i src/styles.css -o dist/styles.css --minify",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "eslint src"
+  }
 }