@flopay/ui 0.5.0 → 0.6.0

package/README.md

@@ -75,7 +75,36 @@ The primitives render the shared component classes, so they work in plain-CSS
 apps (which import `components.css`) and in Tailwind apps (where you can extend
 them via `className` + `cn()`).
 
-### 4. Annotation layer
+### 4. Marketing chrome (nav + footer)
+
+```tsx
+import logo from "@flopay/ui/logo.png";
+import { FlopayFooter, Nav } from "@flopay/ui/marketing";
+
+<Nav logo={{ src: logo, label: "FloPay" }} links={[{ href: "/pricing", label: "Pricing" }]} />;
+
+<FlopayFooter logo={logo} />;                               // on flopay.com itself
+<FlopayFooter logo={logo} baseUrl="https://flopay.com" />;  // any other portal
+```
+
+`Nav` links stay per-app (the demo points at its own routes), but the chrome is
+shared: mark `cta: true` on the call to action and every *other* item gets a
+`nav-link-item` class, which `components.css` hides below 768px — so narrow
+viewports collapse to logo + CTA everywhere. Apps that ship their own component
+CSS instead of importing `components.css` re-declare that one rule to opt in.
+
+`FlopayFooter` is the whole footer, **content included** — the sitemap, tagline
+and copyright live in `flopay-footer.tsx`, so adding a footer link is one change
+here plus a version bump, and every portal picks it up. Portals hosted off
+`flopay.com` pass `baseUrl` to make the marketing routes absolute; `demoUrl` and
+`contactUrl` cover the two entries a portal usually wants to re-point at itself.
+
+Need a different sitemap (a partner or internal portal)? Use the lower-level
+`Footer` with your own `columns`/`legal`, or start from `flopayFooterContent()`
+and edit the result. `MarketingLink` picks `next/link` vs. a new-tab anchor per
+href, so column lists can mix internal routes, absolute URLs and `mailto:`.
+
+### 5. Annotation layer
 
 Hand-drawn marker notes and arrows drawn over a UI, for guided demos and
 product tours. Opt-in, because the arrow geometry is a few KB most pages don't

package/dist/marketing/index.cjs

@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/marketing/index.ts
 var marketing_exports = {};
 __export(marketing_exports, {
+  FlopayFooter: () => FlopayFooter,
   Footer: () => Footer,
   MarketingLink: () => MarketingLink,
-  Nav: () => Nav
+  Nav: () => Nav,
+  flopayFooterContent: () => flopayFooterContent
 });
 module.exports = __toCommonJS(marketing_exports);
 
@@ -78,7 +80,7 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
       ] }),
       columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-column", children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h4", { children: column.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: column.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, link.href)) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: column.links.map((link, linkIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, linkIndex)) })
       ] }, index))
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "footer-bottom", children: [
@@ -88,19 +90,98 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
   ] });
 }
 
+// src/marketing/flopay-footer.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TAGLINE = "Payment Orchestration That Keeps Revenue Flowing";
+var COMPANY = "FloPay LLC";
+var DOCS_URL = "https://docs.flopay.com/docs";
+var API_URL = "https://api.flopay.com/docs";
+var DEMO_URL = "https://demo.flopay.com";
+function flopayFooterContent({
+  baseUrl = "",
+  demoUrl = DEMO_URL,
+  contactUrl
+} = {}) {
+  const route = (path) => `${baseUrl}${path}`;
+  const pending = baseUrl || "#";
+  return {
+    tagline: TAGLINE,
+    columns: [
+      {
+        title: "Product",
+        links: [
+          { href: route("/vault"), label: "Card Vault" },
+          { href: route("/chargeback-prevention"), label: "Chargeback Prevention" },
+          { href: pending, label: "Agent-Assisted Commerce" },
+          { href: pending, label: "The Agent Vault" },
+          { href: pending, label: "Agentic Discovery Network" },
+          { href: pending, label: "Smart Agentic Orchestration" }
+        ]
+      },
+      {
+        title: "Development",
+        links: [
+          { href: DOCS_URL, label: "Documentation" },
+          { href: pending, label: "MCP Server" },
+          { href: API_URL, label: "API Reference" },
+          { href: demoUrl, label: "Demo Playground" }
+        ]
+      },
+      {
+        title: "Company",
+        links: [
+          { href: route("/mission"), label: "Mission" },
+          { href: route("/values"), label: "Values" },
+          { href: route("/pricing"), label: "Pricing" },
+          { href: route("/blog"), label: "Blog" },
+          { href: contactUrl ?? route("/contact"), label: "Contact" }
+        ]
+      }
+    ],
+    legal: [
+      { href: route("/legal/privacy"), label: "Privacy" },
+      { href: route("/legal/terms"), label: "Terms" },
+      { href: route("/legal/cookies"), label: "Cookies" }
+    ],
+    copyright: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${COMPANY}. All rights reserved.`
+  };
+}
+function FlopayFooter({ logo, brand, className, ...options }) {
+  const { tagline, columns, legal, copyright } = flopayFooterContent(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Footer,
+    {
+      className,
+      brand: {
+        src: logo,
+        alt: "FloPay",
+        label: "FloPay",
+        href: options.baseUrl || "/",
+        size: 20,
+        mark: true,
+        tagline,
+        ...brand
+      },
+      columns,
+      legal,
+      copyright
+    }
+  );
+}
+
 // src/marketing/nav.tsx
 var import_image2 = __toESM(require("next/image"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Nav({ logo, links = [], children, className }) {
   const size = logo.size ?? 28;
-  const image = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_image2.default, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: cn("nav", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "nav-inner", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
-      logo.mark ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+  const image = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_image2.default, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: cn("nav", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nav-inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
+      logo.mark ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
       logo.label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { className: "nav-links", children: [
-      links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("ul", { className: "nav-links", children: [
+      links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: link.cta ? void 0 : "nav-link-item", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         MarketingLink,
         {
           href: link.href,
@@ -108,15 +189,17 @@ function Nav({ logo, links = [], children, className }) {
           className: link.cta ? "nav-cta" : void 0,
           children: link.label
         }
-      ) }, link.href)),
-      children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children }) : null
+      ) }, index)),
+      children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children }) : null
     ] })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FlopayFooter,
   Footer,
   MarketingLink,
-  Nav
+  Nav,
+  flopayFooterContent
 });
 //# sourceMappingURL=index.cjs.map

package/dist/marketing/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/marketing/index.ts","../../src/marketing/footer.tsx","../../src/cn.ts","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["export type { FooterBrand, FooterColumn, FooterLink, FooterProps } from './footer';\nexport { Footer } from './footer';\nexport type { MarketingLinkProps } from './link';\nexport { MarketingLink } from './link';\nexport type { NavLink, NavLogo, NavProps } from './nav';\nexport { Nav } from './nav';\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["Link","import_jsx_runtime","Image","import_image","import_jsx_runtime","Image"]}
+{"version":3,"sources":["../../src/marketing/index.ts","../../src/marketing/footer.tsx","../../src/cn.ts","../../src/marketing/link.tsx","../../src/marketing/flopay-footer.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["export type {\n  FlopayFooterContent,\n  FlopayFooterOptions,\n  FlopayFooterProps,\n} from './flopay-footer';\nexport { FlopayFooter, flopayFooterContent } from './flopay-footer';\nexport type { FooterBrand, FooterColumn, FooterLink, FooterProps } from './footer';\nexport { Footer } from './footer';\nexport type { MarketingLinkProps } from './link';\nexport { MarketingLink } from './link';\nexport type { NavLink, NavLogo, NavProps } from './nav';\nexport { Nav } from './nav';\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {/* Keyed by index: placeholder links legitimately share an href. */}\n              {column.links.map((link, linkIndex) => (\n                <li key={linkIndex}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge class names, resolving conflicting Tailwind utilities (last wins).\n * Mirrors the helper used across the FloPay frontends so consumers can extend\n * any primitive's classes safely.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import type { ImageProps } from 'next/image';\nimport type { FooterBrand, FooterColumn, FooterLink } from './footer';\nimport { Footer } from './footer';\n\nexport interface FlopayFooterOptions {\n  /**\n   * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on\n   * the marketing site itself so its own routes stay relative.\n   */\n  baseUrl?: string;\n  /** Where \"Demo Playground\" points. Defaults to the hosted playground. */\n  demoUrl?: string;\n  /** Where \"Contact\" points. Defaults to `<baseUrl>/contact`. */\n  contactUrl?: string;\n}\n\nexport interface FlopayFooterContent {\n  tagline: string;\n  columns: FooterColumn[];\n  legal: FooterLink[];\n  copyright: string;\n}\n\nconst TAGLINE = 'Payment Orchestration That Keeps Revenue Flowing';\nconst COMPANY = 'FloPay LLC';\nconst DOCS_URL = 'https://docs.flopay.com/docs';\nconst API_URL = 'https://api.flopay.com/docs';\nconst DEMO_URL = 'https://demo.flopay.com';\n\n/**\n * The FloPay footer sitemap — one source of truth so every portal shows the\n * same columns, labels and order.\n *\n * Products without a page yet point at the marketing home page (`#` when the\n * caller *is* the marketing site, where that would be a self-link).\n */\nexport function flopayFooterContent({\n  baseUrl = '',\n  demoUrl = DEMO_URL,\n  contactUrl,\n}: FlopayFooterOptions = {}): FlopayFooterContent {\n  const route = (path: string) => `${baseUrl}${path}`;\n  const pending = baseUrl || '#';\n\n  return {\n    tagline: TAGLINE,\n    columns: [\n      {\n        title: 'Product',\n        links: [\n          { href: route('/vault'), label: 'Card Vault' },\n          { href: route('/chargeback-prevention'), label: 'Chargeback Prevention' },\n          { href: pending, label: 'Agent-Assisted Commerce' },\n          { href: pending, label: 'The Agent Vault' },\n          { href: pending, label: 'Agentic Discovery Network' },\n          { href: pending, label: 'Smart Agentic Orchestration' },\n        ],\n      },\n      {\n        title: 'Development',\n        links: [\n          { href: DOCS_URL, label: 'Documentation' },\n          { href: pending, label: 'MCP Server' },\n          { href: API_URL, label: 'API Reference' },\n          { href: demoUrl, label: 'Demo Playground' },\n        ],\n      },\n      {\n        title: 'Company',\n        links: [\n          { href: route('/mission'), label: 'Mission' },\n          { href: route('/values'), label: 'Values' },\n          { href: route('/pricing'), label: 'Pricing' },\n          { href: route('/blog'), label: 'Blog' },\n          { href: contactUrl ?? route('/contact'), label: 'Contact' },\n        ],\n      },\n    ],\n    legal: [\n      { href: route('/legal/privacy'), label: 'Privacy' },\n      { href: route('/legal/terms'), label: 'Terms' },\n      { href: route('/legal/cookies'), label: 'Cookies' },\n    ],\n    copyright: `© ${new Date().getFullYear()} ${COMPANY}. All rights reserved.`,\n  };\n}\n\nexport interface FlopayFooterProps extends FlopayFooterOptions {\n  /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */\n  logo: ImageProps['src'];\n  /** Override parts of the default brand block (label, tagline, size, …). */\n  brand?: Partial<Omit<FooterBrand, 'src'>>;\n  className?: string;\n}\n\n/**\n * The FloPay footer, content included — drop it into any portal and the\n * sitemap, tagline and copyright come from this package.\n *\n * ```tsx\n * import logo from '@flopay/ui/logo.png';\n * <FlopayFooter logo={logo} />                              // on flopay.com\n * <FlopayFooter logo={logo} baseUrl=\"https://flopay.com\" /> // anywhere else\n * ```\n */\nexport function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps) {\n  const { tagline, columns, legal, copyright } = flopayFooterContent(options);\n\n  return (\n    <Footer\n      className={className}\n      brand={{\n        src: logo,\n        alt: 'FloPay',\n        label: 'FloPay',\n        href: options.baseUrl || '/',\n        size: 20,\n        mark: true,\n        tagline,\n        ...brand,\n      }}\n      columns={columns}\n      legal={legal}\n      copyright={copyright}\n    />\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {/* Keyed by index: placeholder links legitimately share an href.\n              `nav-link-item` is what the narrow-viewport rule hides, so the\n              call to action survives on mobile while the rest collapse. */}\n          {links.map((link, index) => (\n            <li key={index} className={link.cta ? undefined : 'nav-link-item'}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["Link","import_jsx_runtime","Image","import_jsx_runtime","import_image","import_jsx_runtime","Image"]}

package/dist/marketing/index.d.cts

@@ -31,6 +31,50 @@ interface FooterProps {
 /** Shared site footer for marketing surfaces (landing, demo). */
 declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
 
+interface FlopayFooterOptions {
+    /**
+     * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on
+     * the marketing site itself so its own routes stay relative.
+     */
+    baseUrl?: string;
+    /** Where "Demo Playground" points. Defaults to the hosted playground. */
+    demoUrl?: string;
+    /** Where "Contact" points. Defaults to `<baseUrl>/contact`. */
+    contactUrl?: string;
+}
+interface FlopayFooterContent {
+    tagline: string;
+    columns: FooterColumn[];
+    legal: FooterLink[];
+    copyright: string;
+}
+/**
+ * The FloPay footer sitemap — one source of truth so every portal shows the
+ * same columns, labels and order.
+ *
+ * Products without a page yet point at the marketing home page (`#` when the
+ * caller *is* the marketing site, where that would be a self-link).
+ */
+declare function flopayFooterContent({ baseUrl, demoUrl, contactUrl, }?: FlopayFooterOptions): FlopayFooterContent;
+interface FlopayFooterProps extends FlopayFooterOptions {
+    /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */
+    logo: ImageProps['src'];
+    /** Override parts of the default brand block (label, tagline, size, …). */
+    brand?: Partial<Omit<FooterBrand, 'src'>>;
+    className?: string;
+}
+/**
+ * The FloPay footer, content included — drop it into any portal and the
+ * sitemap, tagline and copyright come from this package.
+ *
+ * ```tsx
+ * import logo from '@flopay/ui/logo.png';
+ * <FlopayFooter logo={logo} />                              // on flopay.com
+ * <FlopayFooter logo={logo} baseUrl="https://flopay.com" /> // anywhere else
+ * ```
+ */
+declare function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps): react.JSX.Element;
+
 interface MarketingLinkProps {
     href: string;
     /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
@@ -74,4 +118,4 @@ interface NavProps {
 /** Shared fixed top navigation for marketing surfaces (landing, demo). */
 declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
 
-export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };
+export { FlopayFooter, type FlopayFooterContent, type FlopayFooterOptions, type FlopayFooterProps, Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps, flopayFooterContent };

package/dist/marketing/index.d.ts

@@ -31,6 +31,50 @@ interface FooterProps {
 /** Shared site footer for marketing surfaces (landing, demo). */
 declare function Footer({ brand, columns, legal, copyright, className }: FooterProps): react.JSX.Element;
 
+interface FlopayFooterOptions {
+    /**
+     * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on
+     * the marketing site itself so its own routes stay relative.
+     */
+    baseUrl?: string;
+    /** Where "Demo Playground" points. Defaults to the hosted playground. */
+    demoUrl?: string;
+    /** Where "Contact" points. Defaults to `<baseUrl>/contact`. */
+    contactUrl?: string;
+}
+interface FlopayFooterContent {
+    tagline: string;
+    columns: FooterColumn[];
+    legal: FooterLink[];
+    copyright: string;
+}
+/**
+ * The FloPay footer sitemap — one source of truth so every portal shows the
+ * same columns, labels and order.
+ *
+ * Products without a page yet point at the marketing home page (`#` when the
+ * caller *is* the marketing site, where that would be a self-link).
+ */
+declare function flopayFooterContent({ baseUrl, demoUrl, contactUrl, }?: FlopayFooterOptions): FlopayFooterContent;
+interface FlopayFooterProps extends FlopayFooterOptions {
+    /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */
+    logo: ImageProps['src'];
+    /** Override parts of the default brand block (label, tagline, size, …). */
+    brand?: Partial<Omit<FooterBrand, 'src'>>;
+    className?: string;
+}
+/**
+ * The FloPay footer, content included — drop it into any portal and the
+ * sitemap, tagline and copyright come from this package.
+ *
+ * ```tsx
+ * import logo from '@flopay/ui/logo.png';
+ * <FlopayFooter logo={logo} />                              // on flopay.com
+ * <FlopayFooter logo={logo} baseUrl="https://flopay.com" /> // anywhere else
+ * ```
+ */
+declare function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps): react.JSX.Element;
+
 interface MarketingLinkProps {
     href: string;
     /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */
@@ -74,4 +118,4 @@ interface NavProps {
 /** Shared fixed top navigation for marketing surfaces (landing, demo). */
 declare function Nav({ logo, links, children, className }: NavProps): react.JSX.Element;
 
-export { Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps };
+export { FlopayFooter, type FlopayFooterContent, type FlopayFooterOptions, type FlopayFooterProps, Footer, type FooterBrand, type FooterColumn, type FooterLink, type FooterProps, MarketingLink, type MarketingLinkProps, Nav, type NavLink, type NavLogo, type NavProps, flopayFooterContent };

package/dist/marketing/index.mjs

@@ -37,7 +37,7 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
       ] }),
       columns.map((column, index) => /* @__PURE__ */ jsxs("div", { className: "footer-column", children: [
         /* @__PURE__ */ jsx2("h4", { children: column.title }),
-        /* @__PURE__ */ jsx2("ul", { children: column.links.map((link) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, link.href)) })
+        /* @__PURE__ */ jsx2("ul", { children: column.links.map((link, linkIndex) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MarketingLink, { href: link.href, external: link.external, children: link.label }) }, linkIndex)) })
       ] }, index))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "footer-bottom", children: [
@@ -47,19 +47,98 @@ function Footer({ brand, columns = [], legal = [], copyright, className }) {
   ] });
 }
 
+// src/marketing/flopay-footer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TAGLINE = "Payment Orchestration That Keeps Revenue Flowing";
+var COMPANY = "FloPay LLC";
+var DOCS_URL = "https://docs.flopay.com/docs";
+var API_URL = "https://api.flopay.com/docs";
+var DEMO_URL = "https://demo.flopay.com";
+function flopayFooterContent({
+  baseUrl = "",
+  demoUrl = DEMO_URL,
+  contactUrl
+} = {}) {
+  const route = (path) => `${baseUrl}${path}`;
+  const pending = baseUrl || "#";
+  return {
+    tagline: TAGLINE,
+    columns: [
+      {
+        title: "Product",
+        links: [
+          { href: route("/vault"), label: "Card Vault" },
+          { href: route("/chargeback-prevention"), label: "Chargeback Prevention" },
+          { href: pending, label: "Agent-Assisted Commerce" },
+          { href: pending, label: "The Agent Vault" },
+          { href: pending, label: "Agentic Discovery Network" },
+          { href: pending, label: "Smart Agentic Orchestration" }
+        ]
+      },
+      {
+        title: "Development",
+        links: [
+          { href: DOCS_URL, label: "Documentation" },
+          { href: pending, label: "MCP Server" },
+          { href: API_URL, label: "API Reference" },
+          { href: demoUrl, label: "Demo Playground" }
+        ]
+      },
+      {
+        title: "Company",
+        links: [
+          { href: route("/mission"), label: "Mission" },
+          { href: route("/values"), label: "Values" },
+          { href: route("/pricing"), label: "Pricing" },
+          { href: route("/blog"), label: "Blog" },
+          { href: contactUrl ?? route("/contact"), label: "Contact" }
+        ]
+      }
+    ],
+    legal: [
+      { href: route("/legal/privacy"), label: "Privacy" },
+      { href: route("/legal/terms"), label: "Terms" },
+      { href: route("/legal/cookies"), label: "Cookies" }
+    ],
+    copyright: `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${COMPANY}. All rights reserved.`
+  };
+}
+function FlopayFooter({ logo, brand, className, ...options }) {
+  const { tagline, columns, legal, copyright } = flopayFooterContent(options);
+  return /* @__PURE__ */ jsx3(
+    Footer,
+    {
+      className,
+      brand: {
+        src: logo,
+        alt: "FloPay",
+        label: "FloPay",
+        href: options.baseUrl || "/",
+        size: 20,
+        mark: true,
+        tagline,
+        ...brand
+      },
+      columns,
+      legal,
+      copyright
+    }
+  );
+}
+
 // src/marketing/nav.tsx
 import Image2 from "next/image";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Nav({ logo, links = [], children, className }) {
   const size = logo.size ?? 28;
-  const image = /* @__PURE__ */ jsx3(Image2, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
-  return /* @__PURE__ */ jsx3("nav", { className: cn("nav", className), children: /* @__PURE__ */ jsxs2("div", { className: "nav-inner", children: [
+  const image = /* @__PURE__ */ jsx4(Image2, { src: logo.src, alt: logo.alt ?? "", width: size, height: size, priority: true });
+  return /* @__PURE__ */ jsx4("nav", { className: cn("nav", className), children: /* @__PURE__ */ jsxs2("div", { className: "nav-inner", children: [
     /* @__PURE__ */ jsxs2(MarketingLink, { href: logo.href ?? "/", className: "nav-logo", children: [
-      logo.mark ? /* @__PURE__ */ jsx3("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
+      logo.mark ? /* @__PURE__ */ jsx4("span", { className: "nav-logo-mark", style: { width: size, height: size }, children: image }) : image,
       logo.label
     ] }),
     /* @__PURE__ */ jsxs2("ul", { className: "nav-links", children: [
-      links.map((link) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+      links.map((link, index) => /* @__PURE__ */ jsx4("li", { className: link.cta ? void 0 : "nav-link-item", children: /* @__PURE__ */ jsx4(
         MarketingLink,
         {
           href: link.href,
@@ -67,14 +146,16 @@ function Nav({ logo, links = [], children, className }) {
           className: link.cta ? "nav-cta" : void 0,
           children: link.label
         }
-      ) }, link.href)),
-      children ? /* @__PURE__ */ jsx3("li", { children }) : null
+      ) }, index)),
+      children ? /* @__PURE__ */ jsx4("li", { children }) : null
     ] })
   ] }) });
 }
 export {
+  FlopayFooter,
   Footer,
   MarketingLink,
-  Nav
+  Nav,
+  flopayFooterContent
 };
 //# sourceMappingURL=index.mjs.map

package/dist/marketing/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/marketing/footer.tsx","../../src/marketing/link.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {column.links.map((link) => (\n                <li key={link.href}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {links.map((link) => (\n            <li key={link.href}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["jsx","Image","jsx","jsxs","Image"]}
+{"version":3,"sources":["../../src/marketing/footer.tsx","../../src/marketing/link.tsx","../../src/marketing/flopay-footer.tsx","../../src/marketing/nav.tsx"],"sourcesContent":["import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface FooterLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n}\n\nexport interface FooterColumn {\n  title: ReactNode;\n  links: FooterLink[];\n}\n\nexport interface FooterBrand {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  size?: number;\n  mark?: boolean;\n  tagline?: ReactNode;\n}\n\nexport interface FooterProps {\n  brand: FooterBrand;\n  columns?: FooterColumn[];\n  legal?: FooterLink[];\n  copyright?: ReactNode;\n  className?: string;\n}\n\n/** Shared site footer for marketing surfaces (landing, demo). */\nexport function Footer({ brand, columns = [], legal = [], copyright, className }: FooterProps) {\n  const size = brand.size ?? 20;\n  const image = <Image src={brand.src} alt={brand.alt ?? ''} width={size} height={size} />;\n\n  return (\n    <footer className={cn('footer', className)}>\n      <div className=\"footer-inner\">\n        <div className=\"footer-brand\">\n          <MarketingLink href={brand.href ?? '/'} className=\"nav-logo\">\n            {brand.mark ? (\n              <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n                {image}\n              </span>\n            ) : (\n              image\n            )}\n            {brand.label}\n          </MarketingLink>\n          {brand.tagline ? <p>{brand.tagline}</p> : null}\n        </div>\n        {columns.map((column, index) => (\n          <div className=\"footer-column\" key={index}>\n            <h4>{column.title}</h4>\n            <ul>\n              {/* Keyed by index: placeholder links legitimately share an href. */}\n              {column.links.map((link, linkIndex) => (\n                <li key={linkIndex}>\n                  <MarketingLink href={link.href} external={link.external}>\n                    {link.label}\n                  </MarketingLink>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className=\"footer-bottom\">\n        {copyright ? <p>{copyright}</p> : <span />}\n        {legal.length > 0 ? (\n          <div className=\"footer-legal\">\n            {legal.map((link) => (\n              <MarketingLink key={link.href} href={link.href} external={link.external}>\n                {link.label}\n              </MarketingLink>\n            ))}\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  );\n}\n","import Link from 'next/link';\nimport type { ReactNode } from 'react';\n\nexport interface MarketingLinkProps {\n  href: string;\n  /** Force new-tab rendering. Defaults to true for absolute http(s) URLs. */\n  external?: boolean;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Picks the right element for a marketing link:\n * - internal route (\"/...\", \"#...\") → next/link\n * - protocol link (mailto:/tel:) → plain anchor\n * - absolute URL (or `external`) → new-tab anchor\n */\nexport function MarketingLink({ href, external, className, children }: MarketingLinkProps) {\n  const isAbsolute = /^https?:\\/\\//.test(href) || href.startsWith('//');\n  const isProtocol = !isAbsolute && /^[a-z][a-z0-9+.-]*:/i.test(href);\n  const openExternally = external ?? isAbsolute;\n\n  if (openExternally) {\n    return (\n      <a href={href} className={className} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  }\n  if (isProtocol) {\n    return (\n      <a href={href} className={className}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <Link href={href} className={className}>\n      {children}\n    </Link>\n  );\n}\n","import type { ImageProps } from 'next/image';\nimport type { FooterBrand, FooterColumn, FooterLink } from './footer';\nimport { Footer } from './footer';\n\nexport interface FlopayFooterOptions {\n  /**\n   * Origin for marketing-site routes, e.g. `https://flopay.com`. Leave unset on\n   * the marketing site itself so its own routes stay relative.\n   */\n  baseUrl?: string;\n  /** Where \"Demo Playground\" points. Defaults to the hosted playground. */\n  demoUrl?: string;\n  /** Where \"Contact\" points. Defaults to `<baseUrl>/contact`. */\n  contactUrl?: string;\n}\n\nexport interface FlopayFooterContent {\n  tagline: string;\n  columns: FooterColumn[];\n  legal: FooterLink[];\n  copyright: string;\n}\n\nconst TAGLINE = 'Payment Orchestration That Keeps Revenue Flowing';\nconst COMPANY = 'FloPay LLC';\nconst DOCS_URL = 'https://docs.flopay.com/docs';\nconst API_URL = 'https://api.flopay.com/docs';\nconst DEMO_URL = 'https://demo.flopay.com';\n\n/**\n * The FloPay footer sitemap — one source of truth so every portal shows the\n * same columns, labels and order.\n *\n * Products without a page yet point at the marketing home page (`#` when the\n * caller *is* the marketing site, where that would be a self-link).\n */\nexport function flopayFooterContent({\n  baseUrl = '',\n  demoUrl = DEMO_URL,\n  contactUrl,\n}: FlopayFooterOptions = {}): FlopayFooterContent {\n  const route = (path: string) => `${baseUrl}${path}`;\n  const pending = baseUrl || '#';\n\n  return {\n    tagline: TAGLINE,\n    columns: [\n      {\n        title: 'Product',\n        links: [\n          { href: route('/vault'), label: 'Card Vault' },\n          { href: route('/chargeback-prevention'), label: 'Chargeback Prevention' },\n          { href: pending, label: 'Agent-Assisted Commerce' },\n          { href: pending, label: 'The Agent Vault' },\n          { href: pending, label: 'Agentic Discovery Network' },\n          { href: pending, label: 'Smart Agentic Orchestration' },\n        ],\n      },\n      {\n        title: 'Development',\n        links: [\n          { href: DOCS_URL, label: 'Documentation' },\n          { href: pending, label: 'MCP Server' },\n          { href: API_URL, label: 'API Reference' },\n          { href: demoUrl, label: 'Demo Playground' },\n        ],\n      },\n      {\n        title: 'Company',\n        links: [\n          { href: route('/mission'), label: 'Mission' },\n          { href: route('/values'), label: 'Values' },\n          { href: route('/pricing'), label: 'Pricing' },\n          { href: route('/blog'), label: 'Blog' },\n          { href: contactUrl ?? route('/contact'), label: 'Contact' },\n        ],\n      },\n    ],\n    legal: [\n      { href: route('/legal/privacy'), label: 'Privacy' },\n      { href: route('/legal/terms'), label: 'Terms' },\n      { href: route('/legal/cookies'), label: 'Cookies' },\n    ],\n    copyright: `© ${new Date().getFullYear()} ${COMPANY}. All rights reserved.`,\n  };\n}\n\nexport interface FlopayFooterProps extends FlopayFooterOptions {\n  /** The shared logo: `import logo from '@flopay/ui/logo.png'`. */\n  logo: ImageProps['src'];\n  /** Override parts of the default brand block (label, tagline, size, …). */\n  brand?: Partial<Omit<FooterBrand, 'src'>>;\n  className?: string;\n}\n\n/**\n * The FloPay footer, content included — drop it into any portal and the\n * sitemap, tagline and copyright come from this package.\n *\n * ```tsx\n * import logo from '@flopay/ui/logo.png';\n * <FlopayFooter logo={logo} />                              // on flopay.com\n * <FlopayFooter logo={logo} baseUrl=\"https://flopay.com\" /> // anywhere else\n * ```\n */\nexport function FlopayFooter({ logo, brand, className, ...options }: FlopayFooterProps) {\n  const { tagline, columns, legal, copyright } = flopayFooterContent(options);\n\n  return (\n    <Footer\n      className={className}\n      brand={{\n        src: logo,\n        alt: 'FloPay',\n        label: 'FloPay',\n        href: options.baseUrl || '/',\n        size: 20,\n        mark: true,\n        tagline,\n        ...brand,\n      }}\n      columns={columns}\n      legal={legal}\n      copyright={copyright}\n    />\n  );\n}\n","import Image, { type ImageProps } from 'next/image';\nimport type { ReactNode } from 'react';\nimport { cn } from '../cn';\nimport { MarketingLink } from './link';\n\nexport interface NavLink {\n  href: string;\n  label: ReactNode;\n  external?: boolean;\n  /** Render as the prominent call-to-action button. */\n  cta?: boolean;\n}\n\nexport interface NavLogo {\n  /** A URL string or a statically-imported image (e.g. `@flopay/ui/logo.png`). */\n  src: ImageProps['src'];\n  alt?: string;\n  label?: ReactNode;\n  href?: string;\n  /** Logo image edge size in px (default 28). */\n  size?: number;\n  /** Wrap the image in the rounded brand mark. */\n  mark?: boolean;\n}\n\nexport interface NavProps {\n  logo: NavLogo;\n  links?: NavLink[];\n  /** Extra item appended to the link list (e.g. an interactive control). */\n  children?: ReactNode;\n  className?: string;\n}\n\n/** Shared fixed top navigation for marketing surfaces (landing, demo). */\nexport function Nav({ logo, links = [], children, className }: NavProps) {\n  const size = logo.size ?? 28;\n  const image = <Image src={logo.src} alt={logo.alt ?? ''} width={size} height={size} priority />;\n\n  return (\n    <nav className={cn('nav', className)}>\n      <div className=\"nav-inner\">\n        <MarketingLink href={logo.href ?? '/'} className=\"nav-logo\">\n          {logo.mark ? (\n            <span className=\"nav-logo-mark\" style={{ width: size, height: size }}>\n              {image}\n            </span>\n          ) : (\n            image\n          )}\n          {logo.label}\n        </MarketingLink>\n        <ul className=\"nav-links\">\n          {/* Keyed by index: placeholder links legitimately share an href.\n              `nav-link-item` is what the narrow-viewport rule hides, so the\n              call to action survives on mobile while the rest collapse. */}\n          {links.map((link, index) => (\n            <li key={index} className={link.cta ? undefined : 'nav-link-item'}>\n              <MarketingLink\n                href={link.href}\n                external={link.external}\n                className={link.cta ? 'nav-cta' : undefined}\n              >\n                {link.label}\n              </MarketingLink>\n            </li>\n          ))}\n          {children ? <li>{children}</li> : null}\n        </ul>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","Image","jsx","jsxs","Image"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flopay/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "packageManager": "pnpm@11.17.0",
   "description": "FloPay shared design system — design tokens, a Tailwind v4 preset, and React primitives shared across landing, demo, docs, and dashboard.",

package/styles/components.css

@@ -368,6 +368,12 @@
   .nav-inner {
     padding: 0 16px;
   }
+  /* Collapse the nav to logo + call to action; `Nav` tags every non-CTA
+     item with `nav-link-item`. Apps that don't import this file (they keep
+     their own component CSS) can re-declare just this rule to opt in. */
+  .nav-links .nav-link-item {
+    display: none;
+  }
   .section {
     padding: 80px 16px;
   }