@busiverse/ui 0.2.5 → 0.2.7

package/README.md

@@ -1,282 +1,39 @@
 # @busiverse/ui
 
-Shared BUSIVERSE frontend package for separately deployed React/Vercel applications.
+Shared BUSIVERSE frontend UI package.
 
-It contains:
+Version: `0.2.7`
 
-- Official BUSIVERSE brand asset wrappers.
-- Design tokens and Tailwind 4-compatible theme helpers.
-- Global CSS, fonts, reduced-motion, focus states, glass cards, buttons, tables, forms, and app shell.
-- Gateway-only API client foundation.
-- OIDC/auth UI helpers for signin and user-frontend-only signup routing.
-- Internationalization, country/region/currency, timezone, and locale utilities.
-- CRUD and time-series-ready table components.
-- Dashboard, billing, feedback, and marketing primitives.
+## Purpose
 
-## Requirements
+`@busiverse/ui` is the shared UI foundation for separately deployed Busiverse frontends on Vercel. It owns reusable brand assets, design tokens, shared CSS, brand metadata, social icons, i18n region context, reusable app-shell primitives, data tables, internal pricing tooling, and customer-facing marketing primitives.
 
-- Node.js `>=22.12.0`
-- npm `>=10.9.0`
-- React `19.2.7` compatible frontend applications
+The package remains network-neutral. It does not call `fetch`, load remote fonts, open sockets, or make network requests by itself. Frontends inject their own Gateway transport when they need API access.
 
-This package is ESM-only. It does not publish CommonJS output.
+## Public vs internal pricing
 
-## Tailwind 4 note
+The package contains two separate layers:
 
-`@busiverse/ui` does not require PostCSS.
+- `@busiverse/ui/marketing`: public/customer-facing pricing cards and marketing primitives.
+- `@busiverse/ui/billing`: internal/admin pricing explorer for operation-level tariffs, costs, margins, and chargeback visibility.
 
-The package ships its own compiled/global CSS as `@busiverse/ui/styles.css` and exports a plain Tailwind-compatible preset object from `@busiverse/ui/tailwind`. Consuming applications may use Tailwind through Vite, PostCSS, or another supported integration. The UI package itself does not force `@tailwindcss/postcss` or `@tailwindcss/vite` on consumers.
+BusiLand should use the marketing layer. Internal/admin frontends may use the billing layer.
 
-## Install in separately deployed Vercel frontends
-
-Recommended production option: publish to a private npm registry package.
-
-```bash
-npm install @busiverse/ui
-```
-
-Local package test option:
-
-```bash
-cd packages/busiverse-ui
-npm install
-npm run build
-npm pack
-# then in each frontend
-npm install ../packages/busiverse-ui/busiverse-ui-0.1.0.tgz
-```
-
-## Add CSS once per frontend
-
-In `src/main.tsx` or `src/App.tsx`:
+## Imports
 
 ```tsx
 import "@busiverse/ui/styles.css";
+import { BusiverseBrandHead, BusiverseLogo } from "@busiverse/ui/brand";
+import { BusiverseI18nProvider } from "@busiverse/ui/i18n";
+import { MarketingPricingCard } from "@busiverse/ui/marketing";
+import { BusiverseGithubIcon } from "@busiverse/ui/social";
 ```
 
-## Configure env per Vercel frontend
-
-```env
-VITE_GATEWAY_API_URL=https://api.busiversehq.com
-VITE_SIGNUP_URL=https://user.busiversehq.com/signup
-VITE_SERVICE_KEY=communication
-VITE_DEFAULT_LOCALE=en-NG
-VITE_DEFAULT_COUNTRY=NG
-VITE_DEFAULT_REGION=NG-LA
-VITE_DEFAULT_CURRENCY=NGN
-VITE_DEFAULT_TIME_ZONE=Africa/Lagos
-```
-
-## Use AppShell
-
-```tsx
-import { AppShell, PageHeader, Button } from "@busiverse/ui";
-
-export function Dashboard() {
-  return (
-    <AppShell service="communication">
-      <PageHeader
-        title="Communication"
-        description="Send, automate, and track messages across Busiverse."
-        action={<Button>New message</Button>}
-      />
-    </AppShell>
-  );
-}
-```
-
-## Use Gateway client
-
-```tsx
-import { createGatewayClient } from "@busiverse/ui";
-
-const gateway = createGatewayClient({
-  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
-  getAccessToken: async () => token,
-  region: {
-    locale: "en-NG",
-    countryCode: "NG",
-    regionCode: "NG-LA",
-    currencyCode: "NGN",
-    timeZone: "Africa/Lagos"
-  }
-});
-
-await gateway.get("/communication/api/v1/messages");
-```
-
-## Use the Tailwind preset only when needed
-
-If a consuming app uses Tailwind and wants Busiverse tokens:
-
-```ts
-import { busiverseTailwindPreset } from "@busiverse/ui/tailwind";
-
-export default {
-  presets: [busiverseTailwindPreset],
-  content: ["./index.html", "./src/**/*.{ts,tsx}"]
-};
-```
-
-For Busiverse Vite frontends, Tailwind itself should be configured in the frontend app, not inside this UI package.
-
-## Timeseries table
-
-```tsx
-import { TimeSeriesTable } from "@busiverse/ui";
-
-<TimeSeriesTable
-  rows={metrics}
-  timestampKey="createdAt"
-  valueColumns={["requestCount", "p95LatencyMs", "errorRate"]}
-/>
-```
-
-## Signup rule
-
-Only `user-frontend` should own real signup. Other frontends should use `<SignUpLink />` and route users to `https://user.busiversehq.com/signup`.
-
-## Build and publish
+## Publish
 
 ```bash
 npm install
 npm run typecheck
 npm run build
-npm audit --audit-level=low
-npm pack --dry-run
 npm publish --access public
 ```
-
-## Version 0.2.0 additions
-
-This release adds the BUSIVERSE standardized service pricing system used by `busiverse-landing` and reusable by every separately deployed Vercel frontend.
-
-### Added
-
-- `busiverseServicePricingCatalog` with 257 Account-rated operation rows.
-- `ServicePricingExplorer` for external pricing, internal Busiverse chargeback, estimated direct cost, margin, and standardized equivalents.
-- `RegionSelector` and supported pricing regions.
-- Country/region/currency/time-zone aware pricing display helpers.
-- Time-series aware service metadata for services that surface metrics, decision history, request metering, blockchain events, model jobs, and market data.
-
-### Vercel frontend usage
-
-Install from public npm after publishing this version:
-
-```bash
-npm install @busiverse/ui@^0.2.0
-```
-
-Import shared styles once in each Vite frontend entrypoint:
-
-```tsx
-import "@busiverse/ui/styles.css";
-```
-
-Wrap the frontend with the i18n provider:
-
-```tsx
-import { BusiverseI18nProvider } from "@busiverse/ui";
-
-<BusiverseI18nProvider
-  initialRegion={{
-    locale: import.meta.env.VITE_DEFAULT_LOCALE ?? "en-NG",
-    countryCode: import.meta.env.VITE_DEFAULT_COUNTRY ?? "NG",
-    regionCode: import.meta.env.VITE_DEFAULT_REGION ?? "NG-LA",
-    currencyCode: import.meta.env.VITE_DEFAULT_CURRENCY ?? "NGN",
-    timeZone: import.meta.env.VITE_DEFAULT_TIME_ZONE ?? "Africa/Lagos",
-  }}
->
-  <App />
-</BusiverseI18nProvider>
-```
-
-Use the standardized pricing explorer anywhere pricing must be shown:
-
-```tsx
-import { ServicePricingExplorer } from "@busiverse/ui";
-
-<ServicePricingExplorer />
-```
-
-The current currency conversion rates are display fallbacks only. Final production charging still belongs to Account, with Location and Mint resolving region, currency, taxes, pass-through cost, and local pricing rules.
-
-
-## v0.2.1 network-neutral security patch
-
-`@busiverse/ui` no longer performs direct network access from inside the package. The previous `createGatewayClient` implementation used the browser `fetch` global directly, which can be flagged by npm/package scanners as “network access”. The package now requires the consuming frontend to inject a transport function.
-
-```ts
-import { createGatewayClient } from "@busiverse/ui";
-
-export const gateway = createGatewayClient({
-  baseUrl: import.meta.env.VITE_GATEWAY_API_URL,
-  transport: window.fetch.bind(window),
-  getAccessToken: async () => accessToken,
-});
-```
-
-Font loading is also app-owned. The shared CSS does not import Google Fonts or any remote stylesheet. Each separately deployed Vercel frontend should self-host the BUSIVERSE fonts or load them explicitly at the app level.
-
-
-## v0.2.2 brand asset ownership
-
-`@busiverse/ui` is now the owner of BUSIVERSE favicons, platform icons, social preview defaults, and logo assets. Consuming frontends should not duplicate BUSIVERSE favicon/logo assets in their own `public/` folders unless a deployment platform explicitly requires a static file before JavaScript loads.
-
-Use `BusiverseBrandHead` once near the root of each frontend to inject the shared favicons, app manifest, Open Graph metadata, Twitter card metadata, and Microsoft tile metadata from package-owned assets.
-
-```tsx
-import { BusiverseBrandHead } from "@busiverse/ui";
-
-<BusiverseBrandHead
-  title="BUSIVERSE — Turn Ideas Into Operating Businesses"
-  description="BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster."
-/>
-```
-
-The package remains network-neutral: it does not call `fetch`, open sockets, or import remote fonts.
-
-
-## v0.2.4 social icon ownership
-
-`@busiverse/ui` owns BUSIVERSE-approved social icon wrappers so separately deployed frontends do not import brand icons from `lucide-react`. Lucide is an outline UI-icon library and newer builds do not export brand icons such as `Github`, `Twitter`, or `Linkedin`. Use:
-
-```tsx
-import { BusiverseGithubIcon, BusiverseXIcon, BusiverseLinkedInIcon, BusiverseMailIcon } from "@busiverse/ui";
-```
-
-The package remains network-neutral. The icons are inline SVG React components and do not fetch remote assets.
-
-## v0.2.5 root export and asset policy
-
-The root `@busiverse/ui` entry no longer re-exports the full brand asset manifest. This prevents every separately deployed frontend from emitting all social/profile/cover assets just because it imports a component from `@busiverse/ui`.
-
-Use root imports for components and helpers:
-
-```ts
-import { BusiverseBrandHead, BusiverseLogo, ServicePricingExplorer } from "@busiverse/ui";
-```
-
-Use the explicit asset subpath only when an app truly needs the raw asset manifest:
-
-```ts
-import { busiverseAssets } from "@busiverse/ui/assets";
-```
-
-This keeps BusiLand and the other Vercel frontends smaller while preserving the shared asset source of truth.
-
-## v0.2.5 subpath imports
-
-`@busiverse/ui` now publishes explicit subpath entrypoints so separately deployed Vercel frontends can avoid pulling unrelated pricing, social, or raw asset modules into the initial bundle.
-
-Preferred imports:
-
-```ts
-import { BusiverseLogo, BusiverseBrandHead } from "@busiverse/ui/brand";
-import { BusiverseI18nProvider, RegionSelector } from "@busiverse/ui/i18n";
-import { ServicePricingExplorer } from "@busiverse/ui/billing";
-import { BusiverseGithubIcon, BusiverseXIcon } from "@busiverse/ui/social";
-import { busiverseAssets } from "@busiverse/ui/assets";
-```
-
-The root package export remains for compatibility, but production frontends should use subpath imports when working with large modules.

package/dist/assets/assets.js

@@ -0,0 +1,49 @@
+// src/assets/assets.ts
+var busiverseAssets = {
+  logo: {
+    horizontal: {
+      white: new URL("./logo/busiverse-horizontal---white.svg", import.meta.url).href,
+      black: new URL("./logo/busiverse-horizontal---black.svg", import.meta.url).href,
+      color: new URL("./logo/busiverse-horizontal---color.svg", import.meta.url).href
+    },
+    full: {
+      white: new URL("./logo/busiverse-primary-full-logo---white.svg", import.meta.url).href,
+      black: new URL("./logo/busiverse-primary-full-logo---black.svg", import.meta.url).href,
+      color: new URL("./logo/busiverse-primary-full-logo---color.svg", import.meta.url).href
+    },
+    vertical: {
+      white: new URL("./logo/busiverse-vertical---white.svg", import.meta.url).href,
+      black: new URL("./logo/busiverse-vertical---black.svg", import.meta.url).href,
+      color: new URL("./logo/busiverse-vertical---color.svg", import.meta.url).href
+    },
+    icon: {
+      white: new URL("./icon/busiverse-icon-only---white.svg", import.meta.url).href,
+      black: new URL("./icon/busiverse-icon-only---black.svg", import.meta.url).href,
+      color: new URL("./icon/busiverse-icon-only---color.svg", import.meta.url).href
+    }
+  },
+  favicon: {
+    ico: new URL("./favicon.io/favicon.ico", import.meta.url).href,
+    png16: new URL("./favicon.io/favicon-16x16.png", import.meta.url).href,
+    png32: new URL("./favicon.io/favicon-32x32.png", import.meta.url).href,
+    png96: new URL("./favicon.io/favicon-96x96.png", import.meta.url).href,
+    appleTouchIcon: new URL("./favicon.io/apple-touch-icon.png", import.meta.url).href,
+    androidChrome192: new URL("./favicon.io/android-chrome-192x192.png", import.meta.url).href,
+    androidChrome512: new URL("./favicon.io/android-chrome-512x512.png", import.meta.url).href,
+    androidIcon192: new URL("./favicon.io/android-icon-192x192.png", import.meta.url).href,
+    msTile144: new URL("./favicon.io/ms-icon-144x144.png", import.meta.url).href
+  },
+  social: {
+    xHeader: new URL("./social/busiverse-twitter_x-header-2.7777777777777777x-darkbg.png", import.meta.url).href,
+    xProfile: new URL("./social/busiverse-twitter_x-profile-picture-2.2222222222222223x-darkbg.png", import.meta.url).href,
+    linkedInCover: new URL("./social/busiverse-linkedin-cover-photo-2.64x-darkbg.png", import.meta.url).href,
+    linkedInProfile: new URL("./social/busiverse-linkedin-profile-picture-2.2222222222222223x-darkbg.png", import.meta.url).href,
+    facebookCover: new URL("./social/busiverse-facebook-cover-photo-1.7333333333333334x-darkbg.png", import.meta.url).href,
+    facebookProfile: new URL("./social/busiverse-facebook-profile-picture-1x-darkbg.png", import.meta.url).href,
+    instagramPost: new URL("./social/busiverse-instagram-post-6x-darkbg.png", import.meta.url).href,
+    instagramProfile: new URL("./social/busiverse-instagram-profile-picture-1.7777777777777777x-darkbg.png", import.meta.url).href
+  }
+};
+export {
+  busiverseAssets
+};

package/dist/{chunk-PTOKOI4Q.js → chunk-32FPZZH2.js}

@@ -35,119 +35,6 @@ function BusiverseLogo({ variant = "horizontal", tone = "white", label = "BUSIVE
   );
 }
 
-// src/components/brand/BusiverseBrandHead.tsx
-import * as React from "react";
-var faviconIco = new URL("../../assets/assets/favicon.io/favicon.ico", import.meta.url).href;
-var faviconPng16 = new URL("../../assets/assets/favicon.io/favicon-16x16.png", import.meta.url).href;
-var faviconPng32 = new URL("../../assets/assets/favicon.io/favicon-32x32.png", import.meta.url).href;
-var faviconPng96 = new URL("../../assets/assets/favicon.io/favicon-96x96.png", import.meta.url).href;
-var appleTouchIcon = new URL("../../assets/assets/favicon.io/apple-touch-icon.png", import.meta.url).href;
-var androidIcon192 = new URL("../../assets/assets/favicon.io/android-icon-192x192.png", import.meta.url).href;
-var androidChrome192 = new URL("../../assets/assets/favicon.io/android-chrome-192x192.png", import.meta.url).href;
-var androidChrome512 = new URL("../../assets/assets/favicon.io/android-chrome-512x512.png", import.meta.url).href;
-var msTile144 = new URL("../../assets/assets/favicon.io/ms-icon-144x144.png", import.meta.url).href;
-var defaultSocialImage = new URL("../../assets/assets/social/busiverse-twitter_x-header-2.7777777777777777x-darkbg.png", import.meta.url).href;
-var DEFAULT_TITLE = "BUSIVERSE \u2014 Turn Ideas Into Operating Businesses";
-var DEFAULT_DESCRIPTION = "BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster.";
-var DEFAULT_THEME_COLOR = "#020617";
-function ensureMeta(selector, attributes) {
-  let node = document.head.querySelector(selector);
-  if (!node) {
-    node = document.createElement("meta");
-    document.head.appendChild(node);
-  }
-  Object.entries(attributes).forEach(([key, value]) => node?.setAttribute(key, value));
-  return node;
-}
-function ensureLink(selector, attributes) {
-  let node = document.head.querySelector(selector);
-  if (!node) {
-    node = document.createElement("link");
-    node.setAttribute("data-busiverse-ui-head", "true");
-    document.head.appendChild(node);
-  }
-  Object.entries(attributes).forEach(([key, value]) => node?.setAttribute(key, value));
-  return node;
-}
-function createManifestDataUrl(title, description, themeColor) {
-  const manifest = {
-    name: title,
-    short_name: "BUSIVERSE",
-    description,
-    start_url: "/",
-    scope: "/",
-    display: "standalone",
-    background_color: themeColor,
-    theme_color: themeColor,
-    icons: [
-      { src: androidChrome192, sizes: "192x192", type: "image/png" },
-      { src: androidChrome512, sizes: "512x512", type: "image/png" }
-    ]
-  };
-  return `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`;
-}
-function applyBusiverseBrandHead({
-  title = DEFAULT_TITLE,
-  description = DEFAULT_DESCRIPTION,
-  siteName = "Busiverse",
-  url,
-  image = defaultSocialImage,
-  twitterSite = "@busiverse1",
-  keywords = "Busiverse, AI automation, blockchain-backed trust, modular business services, distributed business infrastructure",
-  locale = "en_NG",
-  themeColor = DEFAULT_THEME_COLOR,
-  appleMobileWebAppTitle = "BUSIVERSE",
-  applicationName = "BUSIVERSE"
-} = {}) {
-  document.title = title;
-  ensureMeta('meta[name="description"]', { name: "description", content: description });
-  ensureMeta('meta[name="keywords"]', { name: "keywords", content: keywords });
-  ensureMeta('meta[name="theme-color"]', { name: "theme-color", content: themeColor });
-  ensureMeta('meta[name="application-name"]', { name: "application-name", content: applicationName });
-  ensureMeta('meta[name="apple-mobile-web-app-title"]', { name: "apple-mobile-web-app-title", content: appleMobileWebAppTitle });
-  ensureMeta('meta[name="msapplication-TileColor"]', { name: "msapplication-TileColor", content: themeColor });
-  ensureMeta('meta[name="msapplication-TileImage"]', { name: "msapplication-TileImage", content: msTile144 });
-  ensureLink('link[data-busiverse-ui-head="icon-ico"]', { rel: "icon", type: "image/x-icon", href: faviconIco, "data-busiverse-ui-head": "icon-ico" });
-  ensureLink('link[data-busiverse-ui-head="icon-16"]', { rel: "icon", type: "image/png", sizes: "16x16", href: faviconPng16, "data-busiverse-ui-head": "icon-16" });
-  ensureLink('link[data-busiverse-ui-head="icon-32"]', { rel: "icon", type: "image/png", sizes: "32x32", href: faviconPng32, "data-busiverse-ui-head": "icon-32" });
-  ensureLink('link[data-busiverse-ui-head="icon-96"]', { rel: "icon", type: "image/png", sizes: "96x96", href: faviconPng96, "data-busiverse-ui-head": "icon-96" });
-  ensureLink('link[data-busiverse-ui-head="icon-192"]', { rel: "icon", type: "image/png", sizes: "192x192", href: androidIcon192, "data-busiverse-ui-head": "icon-192" });
-  ensureLink('link[data-busiverse-ui-head="apple-touch-icon"]', { rel: "apple-touch-icon", sizes: "180x180", href: appleTouchIcon, "data-busiverse-ui-head": "apple-touch-icon" });
-  ensureLink('link[data-busiverse-ui-head="manifest"]', { rel: "manifest", href: createManifestDataUrl(title, description, themeColor), "data-busiverse-ui-head": "manifest" });
-  ensureMeta('meta[property="og:title"]', { property: "og:title", content: title });
-  ensureMeta('meta[property="og:description"]', { property: "og:description", content: description });
-  ensureMeta('meta[property="og:type"]', { property: "og:type", content: "website" });
-  ensureMeta('meta[property="og:site_name"]', { property: "og:site_name", content: siteName });
-  ensureMeta('meta[property="og:locale"]', { property: "og:locale", content: locale });
-  ensureMeta('meta[property="og:image"]', { property: "og:image", content: image });
-  if (url) ensureMeta('meta[property="og:url"]', { property: "og:url", content: url });
-  ensureMeta('meta[name="twitter:card"]', { name: "twitter:card", content: "summary_large_image" });
-  ensureMeta('meta[name="twitter:title"]', { name: "twitter:title", content: title });
-  ensureMeta('meta[name="twitter:description"]', { name: "twitter:description", content: description });
-  ensureMeta('meta[name="twitter:site"]', { name: "twitter:site", content: twitterSite });
-  ensureMeta('meta[name="twitter:image"]', { name: "twitter:image", content: image });
-}
-function BusiverseBrandHead(props) {
-  React.useEffect(() => {
-    applyBusiverseBrandHead(props);
-  }, [
-    props.title,
-    props.description,
-    props.siteName,
-    props.url,
-    props.image,
-    props.twitterSite,
-    props.keywords,
-    props.locale,
-    props.themeColor,
-    props.appleMobileWebAppTitle,
-    props.applicationName
-  ]);
-  return null;
-}
-
 export {
-  BusiverseLogo,
-  applyBusiverseBrandHead,
-  BusiverseBrandHead
+  BusiverseLogo
 };

package/dist/chunk-3XY5ZSTX.js

@@ -0,0 +1,94 @@
+import {
+  Button,
+  Card
+} from "./chunk-GRZVAWCA.js";
+import {
+  BusiverseLogo
+} from "./chunk-32FPZZH2.js";
+import {
+  cn
+} from "./chunk-PYZVP4NI.js";
+
+// src/components/marketing/HeroSection.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeroSection({
+  title = "Turn Ideas Into Operating Businesses",
+  subtitle = "BUSIVERSE combines AI automation, blockchain-backed trust, and modular business services to help teams launch and operate ventures faster.",
+  primaryCta = /* @__PURE__ */ jsx(Button, { children: "Start Building" }),
+  secondaryCta = /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Explore the Platform" })
+}) {
+  return /* @__PURE__ */ jsx("section", { className: "busiverse-hero", children: /* @__PURE__ */ jsxs("div", { className: "busiverse-hero-content", children: [
+    /* @__PURE__ */ jsx(BusiverseLogo, { variant: "full", tone: "white", className: "busiverse-hero-logo" }),
+    /* @__PURE__ */ jsx("h1", { children: title }),
+    /* @__PURE__ */ jsx("p", { children: subtitle }),
+    /* @__PURE__ */ jsxs("div", { className: "busiverse-hero-actions", children: [
+      primaryCta,
+      secondaryCta
+    ] })
+  ] }) });
+}
+
+// src/components/marketing/MarketingSectionHeader.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function MarketingSectionHeader({ eyebrow, title, description, align = "center", className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("busiverse-marketing-section-header", align === "left" && "is-left", className), children: [
+    eyebrow && /* @__PURE__ */ jsx2("p", { className: "busiverse-marketing-eyebrow", children: eyebrow }),
+    /* @__PURE__ */ jsx2("h2", { children: title }),
+    description && /* @__PURE__ */ jsx2("p", { children: description })
+  ] });
+}
+
+// src/components/marketing/MarketingFeatureCard.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MarketingFeatureCard({ icon, label, title, description, points, className }) {
+  return /* @__PURE__ */ jsxs3(Card, { className: cn("busiverse-marketing-feature-card", className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "busiverse-marketing-feature-topline", children: [
+      icon && /* @__PURE__ */ jsx3("div", { className: "busiverse-marketing-feature-icon", children: icon }),
+      label && /* @__PURE__ */ jsx3("span", { children: label })
+    ] }),
+    /* @__PURE__ */ jsx3("h3", { children: title }),
+    /* @__PURE__ */ jsx3("p", { children: description }),
+    points && points.length > 0 && /* @__PURE__ */ jsx3("ul", { children: points.map((point, index) => /* @__PURE__ */ jsx3("li", { children: point }, index)) })
+  ] });
+}
+
+// src/components/marketing/MarketingPricingCard.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MarketingPricingCard({
+  name,
+  tagline,
+  price,
+  cadence,
+  description,
+  features,
+  ctaLabel = "Get started",
+  ctaHref,
+  featured = false,
+  note,
+  className
+}) {
+  const actionClassName = cn(
+    "busiverse-focus-ring busiverse-btn busiverse-btn-md busiverse-marketing-pricing-button",
+    featured ? "busiverse-btn-primary" : "busiverse-btn-secondary"
+  );
+  return /* @__PURE__ */ jsxs4(Card, { className: cn("busiverse-marketing-pricing-card", featured && "is-featured", className), children: [
+    featured && /* @__PURE__ */ jsx4("div", { className: "busiverse-marketing-pricing-ribbon", children: "Recommended" }),
+    /* @__PURE__ */ jsx4("p", { className: "busiverse-marketing-pricing-tagline", children: tagline }),
+    /* @__PURE__ */ jsx4("h3", { children: name }),
+    /* @__PURE__ */ jsxs4("div", { className: "busiverse-marketing-pricing-price", children: [
+      /* @__PURE__ */ jsx4("strong", { children: price }),
+      cadence && /* @__PURE__ */ jsx4("span", { children: cadence })
+    ] }),
+    /* @__PURE__ */ jsx4("p", { className: "busiverse-marketing-pricing-description", children: description }),
+    /* @__PURE__ */ jsx4("ul", { children: features.map((feature) => /* @__PURE__ */ jsx4("li", { children: feature }, feature)) }),
+    ctaHref ? /* @__PURE__ */ jsx4("a", { className: actionClassName, href: ctaHref, children: /* @__PURE__ */ jsx4("span", { children: ctaLabel }) }) : /* @__PURE__ */ jsx4("button", { className: actionClassName, type: "button", children: /* @__PURE__ */ jsx4("span", { children: ctaLabel }) }),
+    note && /* @__PURE__ */ jsx4("p", { className: "busiverse-marketing-pricing-note", children: note })
+  ] });
+}
+
+export {
+  HeroSection,
+  MarketingSectionHeader,
+  MarketingFeatureCard,
+  MarketingPricingCard
+};