@busiverse/ui 0.2.4 → 0.2.7

package/dist/styles.css

@@ -39,6 +39,15 @@
   --motion-default: 200ms;
   --motion-slow: 300ms;
   --ease-standard: cubic-bezier(0.16,1,0.3,1);
+  /* Legacy HSL variables used by existing BUSIVERSE frontends. */
+  --base-bg: 222 84% 2%;
+  --secondary-bg: 222 47% 7%;
+  --primary-blue: 217 91% 60%;
+  --primary-violet: 258 90% 66%;
+  --primary-cyan: 188 95% 43%;
+  --text-body: 210 40% 96%;
+  --text-muted: 215 20% 65%;
+  --text-disabled: 215 16% 47%;
   color-scheme: dark;
 }
 
@@ -253,3 +262,81 @@ img, svg { max-width: 100%; display: block; }
   .busiverse-pricing-grid { grid-template-columns: 1fr; }
   .busiverse-pricing-controls > input { max-width: none; }
 }
+
+
+/* Customer-facing marketing primitives */
+.busiverse-marketing-section-header {
+  max-width: 820px;
+  margin-inline: auto;
+  text-align: center;
+  margin-bottom: 56px;
+}
+.busiverse-marketing-section-header.is-left { margin-inline: 0; text-align: left; }
+.busiverse-marketing-eyebrow {
+  margin: 0 0 12px;
+  color: #A5F3FC;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .12em;
+  font-size: 12px;
+}
+.busiverse-marketing-section-header h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(34px, 5vw, 58px);
+  line-height: 1.08;
+  letter-spacing: -.02em;
+  color: #FFFFFF;
+}
+.busiverse-marketing-section-header p:not(.busiverse-marketing-eyebrow) {
+  margin: 18px auto 0;
+  color: #CBD5E1;
+  font-size: clamp(16px, 2vw, 20px);
+  line-height: 1.7;
+}
+.busiverse-marketing-feature-card {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.busiverse-marketing-feature-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(139,92,246,.06), rgba(6,182,212,.08));
+  opacity: .72;
+  pointer-events: none;
+}
+.busiverse-marketing-feature-card > * { position: relative; z-index: 1; }
+.busiverse-marketing-feature-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #A5F3FC; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
+.busiverse-marketing-feature-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); color: #BFDBFE; }
+.busiverse-marketing-feature-card h3 { margin: 0 0 10px; font-family: var(--font-display); color: #FFFFFF; font-size: 22px; line-height: 1.25; }
+.busiverse-marketing-feature-card p { margin: 0; color: #CBD5E1; line-height: 1.65; }
+.busiverse-marketing-feature-card ul, .busiverse-marketing-pricing-card ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
+.busiverse-marketing-feature-card li, .busiverse-marketing-pricing-card li { color: #F1F5F9; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
+.busiverse-marketing-feature-card li::before, .busiverse-marketing-pricing-card li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border-radius: 999px; background: linear-gradient(90deg,#3B82F6,#06B6D4); flex: 0 0 auto; }
+.busiverse-marketing-pricing-card { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
+.busiverse-marketing-pricing-card.is-featured { border-color: rgba(6,182,212,.45); background: linear-gradient(145deg, rgba(59,130,246,.14), rgba(139,92,246,.10), rgba(6,182,212,.10)); }
+.busiverse-marketing-pricing-ribbon { position: absolute; top: 18px; right: 18px; border: 1px solid rgba(6,182,212,.35); background: rgba(6,182,212,.14); color: #A5F3FC; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
+.busiverse-marketing-pricing-tagline { margin: 0 0 10px; color: #A5F3FC; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; }
+.busiverse-marketing-pricing-card h3 { margin: 0; color: #FFFFFF; font-family: var(--font-display); font-size: 28px; }
+.busiverse-marketing-pricing-price { margin: 18px 0 12px; display: flex; align-items: baseline; gap: 8px; }
+.busiverse-marketing-pricing-price strong { font-family: var(--font-display); font-size: clamp(34px, 6vw, 52px); line-height: 1; color: #FFFFFF; }
+.busiverse-marketing-pricing-price span { color: #94A3B8; }
+.busiverse-marketing-pricing-description { margin: 0; color: #CBD5E1; line-height: 1.65; }
+.busiverse-marketing-pricing-button { width: 100%; margin-top: 24px; }
+.busiverse-marketing-pricing-card a.busiverse-marketing-pricing-button { display: inline-flex; }
+.busiverse-marketing-pricing-note { margin: 14px 0 0; color: #94A3B8; font-size: 13px; line-height: 1.5; }
+
+/* Legacy-compatible BUSIVERSE utility aliases used across existing frontends. */
+.bg-gradient-primary { background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%); }
+.bg-gradient-hero { background: linear-gradient(135deg, #020617 0%, #172554 45%, #0F172A 100%); }
+.glass-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(16px); border-radius: 16px; }
+.text-gradient-full { background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 50%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.text-gradient-blue-violet { background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.text-gradient-violet-cyan { background: linear-gradient(90deg, #8B5CF6 0%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.text-gradient-blue-cyan { background: linear-gradient(90deg, #3B82F6 0%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.text-stats { font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); font-weight: 700; line-height: 1.1; }
+.font-heading { font-family: var(--font-display); }
+.animate-float { animation: busiverse-float 3s ease-in-out infinite; }
+@keyframes busiverse-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@busiverse/ui",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "author": "Joel Julius Okoromi <okmarq@gmail.com> (https://busiversehq.com)",
-  "description": "BUSIVERSE shared React UI, design tokens, pricing, i18n, auth helpers, and product shell. Network-neutral core; Gateway transport is app-injected.",
+  "description": "BUSIVERSE shared React UI, design tokens, brand assets, marketing components, i18n, auth helpers, and product shell. Network-neutral core; Gateway transport is app-injected.",
   "type": "module",
   "sideEffects": [
     "./dist/styles.css"
@@ -25,12 +25,42 @@
       "import": "./dist/tailwind/index.js",
       "default": "./dist/tailwind/index.js"
     },
+    "./brand": {
+      "types": "./dist/components/brand/index.d.ts",
+      "import": "./dist/components/brand/index.js",
+      "default": "./dist/components/brand/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js",
+      "default": "./dist/i18n/index.js"
+    },
+    "./billing": {
+      "types": "./dist/components/billing/index.d.ts",
+      "import": "./dist/components/billing/index.js",
+      "default": "./dist/components/billing/index.js"
+    },
+    "./marketing": {
+      "types": "./dist/components/marketing/index.d.ts",
+      "import": "./dist/components/marketing/index.js",
+      "default": "./dist/components/marketing/index.js"
+    },
+    "./social": {
+      "types": "./dist/components/social/index.d.ts",
+      "import": "./dist/components/social/index.js",
+      "default": "./dist/components/social/index.js"
+    },
+    "./assets": {
+      "types": "./dist/assets/assets.d.ts",
+      "import": "./dist/assets/assets.js",
+      "default": "./dist/assets/assets.js"
+    },
     "./assets/*": "./dist/assets/*",
     "./package.json": "./package.json"
   },
   "scripts": {
     "clean": "node scripts/clean.mjs",
-    "build": "npm run clean && tsup src/index.ts src/tailwind/index.ts --format esm --target es2022 && tsc -p tsconfig.build.json && node scripts/copy-static.mjs",
+    "build": "npm run clean && tsup src/index.ts src/tailwind/index.ts src/components/brand/index.ts src/i18n/index.ts src/components/billing/index.ts src/components/marketing/index.ts src/components/social/index.ts src/assets/assets.ts --format esm --target es2022 && tsc -p tsconfig.build.json && node scripts/copy-static.mjs",
     "typecheck": "tsc --noEmit",
     "pack:local": "npm pack",
     "prepublishOnly": "npm run typecheck && npm run build && npm pack --dry-run"